wip

AboutClan · Oct 11, 2024 · 2af3d0d · 2af3d0d
1 parent a24fb41
commit 2af3d0d
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 37 deletions.
diff --git a/components/Icons/SolidIcons.tsx b/components/Icons/SolidIcons.tsx
@@ -1,10 +1,10 @@
 export const CalendarCheckIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13.3797 8.08738L8.68284 12.7842C8.52511 12.9419 8.3112 13.0305 8.08817 13.0305C7.86513 13.0305 7.65123 12.9419 7.49349 12.7842L4.62022 9.91009C4.54213 9.832 4.48018 9.73929 4.43792 9.63725C4.39565 9.53522 4.3739 9.42586 4.3739 9.31542C4.3739 9.20498 4.39565 9.09562 4.43792 8.99359C4.48018 8.89155 4.54213 8.79884 4.62022 8.72075C4.69832 8.64265 4.79103 8.58071 4.89306 8.53844C4.9951 8.49618 5.10445 8.47443 5.2149 8.47443C5.32534 8.47443 5.4347 8.49618 5.53673 8.53844C5.63876 8.58071 5.73147 8.64265 5.80957 8.72075L8.08817 10.9993L12.1903 6.89804C12.2684 6.81994 12.3611 6.758 12.4632 6.71573C12.5652 6.67347 12.6745 6.65172 12.785 6.65172C12.8954 6.65172 13.0048 6.67347 13.1068 6.71573C13.2089 6.758 13.3016 6.81994 13.3797 6.89804C13.4578 6.97613 13.5197 7.06884 13.562 7.17088C13.6042 7.27291 13.626 7.38227 13.626 7.49271C13.626 7.60315 13.6042 7.71251 13.562 7.81454C13.5197 7.91658 13.4578 8.00929 13.3797 8.08738ZM15.4766 1.68224H14.1055V0.841121C14.1055 0.618042 14.0169 0.4041 13.8592 0.246359C13.7015 0.0886179 13.4875 0 13.2644 0C13.0413 0 12.8274 0.0886179 12.6697 0.246359C12.5119 0.4041 12.4233 0.618042 12.4233 0.841121V1.68224H5.57658V0.841121C5.57658 0.618042 5.48796 0.4041 5.33022 0.246359C5.17248 0.0886179 4.95854 0 4.73546 0C4.51238 0 4.29843 0.0886179 4.14069 0.246359C3.98295 0.4041 3.89434 0.618042 3.89434 0.841121V1.68224H2.52331C2.07715 1.68224 1.64926 1.85948 1.33378 2.17496C1.0183 2.49044 0.841064 2.91833 0.841064 3.36449V16.3178C0.841064 16.7639 1.0183 17.1918 1.33378 17.5073C1.64926 17.8228 2.07715 18 2.52331 18H15.4766C15.9227 18 16.3506 17.8228 16.6661 17.5073C16.9816 17.1918 17.1588 16.7639 17.1588 16.3178V3.36449C17.1588 2.91833 16.9816 2.49044 16.6661 2.17496C16.3506 1.85948 15.9227 1.68224 15.4766 1.68224Z"
-      fill="var(--gray-300)"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.3391 8.679L8.68579 13.3323C8.52952 13.4886 8.3176 13.5763 8.09663 13.5763C7.87566 13.5763 7.66373 13.4886 7.50746 13.3323L4.66079 10.4848C4.58342 10.4075 4.52205 10.3156 4.48018 10.2145C4.4383 10.1134 4.41675 10.0051 4.41675 9.89567C4.41675 9.78625 4.4383 9.6779 4.48018 9.57682C4.52205 9.47573 4.58342 9.38387 4.66079 9.3065C4.73816 9.22913 4.83002 9.16776 4.9311 9.12589C5.03219 9.08401 5.14054 9.06246 5.24996 9.06246C5.35938 9.06246 5.46772 9.08401 5.56881 9.12589C5.6699 9.16776 5.76176 9.22913 5.83913 9.3065L8.09663 11.564L12.1608 7.50067C12.2382 7.4233 12.33 7.36193 12.4311 7.32005C12.5322 7.27818 12.6405 7.25663 12.75 7.25663C12.8594 7.25663 12.9677 7.27818 13.0688 7.32005C13.1699 7.36193 13.2618 7.4233 13.3391 7.50067C13.4165 7.57804 13.4779 7.66989 13.5197 7.77098C13.5616 7.87207 13.5832 7.98042 13.5832 8.08984C13.5832 8.19926 13.5616 8.3076 13.5197 8.40869C13.4779 8.50978 13.4165 8.60163 13.3391 8.679ZM15.4166 2.33317H14.0583V1.49984C14.0583 1.27882 13.9705 1.06686 13.8142 0.910582C13.6579 0.754301 13.446 0.666504 13.225 0.666504C13.0039 0.666504 12.792 0.754301 12.6357 0.910582C12.4794 1.06686 12.3916 1.27882 12.3916 1.49984V2.33317H5.60829V1.49984C5.60829 1.27882 5.5205 1.06686 5.36421 0.910582C5.20793 0.754301 4.99597 0.666504 4.77496 0.666504C4.55395 0.666504 4.34198 0.754301 4.1857 0.910582C4.02942 1.06686 3.94163 1.27882 3.94163 1.49984V2.33317H2.58329C2.14127 2.33317 1.71734 2.50877 1.40478 2.82133C1.09222 3.13389 0.916626 3.55781 0.916626 3.99984V16.8332C0.916626 17.2752 1.09222 17.6991 1.40478 18.0117C1.71734 18.3242 2.14127 18.4998 2.58329 18.4998H15.4166C15.8587 18.4998 16.2826 18.3242 16.5951 18.0117C16.9077 17.6991 17.0833 17.2752 17.0833 16.8332V3.99984C17.0833 3.55781 16.9077 3.13389 16.5951 2.82133C16.2826 2.50877 15.8587 2.33317 15.4166 2.33317Z"
+      fill="#424242"
     />
   </svg>
 );
@@ -19,3 +19,14 @@ export const NoticeIcon = () => (
     </g>
   </svg>
 );
+
+export const ClockIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.83333 8.80083C9.83333 8.82833 9.82 8.8525 9.8175 8.87917C9.8128 8.93561 9.80133 8.99129 9.78333 9.045C9.75317 9.14465 9.70392 9.23748 9.63833 9.31833C9.60167 9.3625 9.56333 9.40167 9.51833 9.43833C9.4975 9.455 9.485 9.47917 9.4625 9.49417L5.52417 12.1192C5.34026 12.2371 5.11738 12.2782 4.90353 12.2334C4.68967 12.1887 4.50194 12.0617 4.38077 11.8799C4.2596 11.6981 4.21468 11.476 4.25568 11.2614C4.29669 11.0468 4.42033 10.8568 4.6 10.7325L8.16667 8.355V4.46333C8.16667 4.24232 8.25446 4.03036 8.41074 3.87408C8.56702 3.7178 8.77899 3.63 9 3.63C9.22101 3.63 9.43297 3.7178 9.58926 3.87408C9.74554 4.03036 9.83333 4.24232 9.83333 4.46333V8.80083V8.80083ZM9 0.25C4.1675 0.25 0.25 4.1675 0.25 9C0.25 13.8325 4.1675 17.75 9 17.75C13.8325 17.75 17.75 13.8325 17.75 9C17.75 4.1675 13.8325 0.25 9 0.25Z"
+      fill="#424242"
+    />
+  </svg>
+);
diff --git a/components/organisms/drawer/BottomDrawerLg.tsx b/components/organisms/drawer/BottomDrawerLg.tsx
@@ -94,7 +94,6 @@ export default function BottomDrawerLg({
             colorScheme="mintTheme"
             size="lg"
             isLoading={footer.buttonLoading}
-            borderRadius="var(--rounded-lg)"
             onClick={footer.onClick}
           >
             {footer.buttonText}
@@ -118,11 +117,11 @@ const Layout = styled(motion.div)<{
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   background-color: white;
-  z-index: 500;
+  z-index: 501;
   padding: ${(props) => (props.isxpadding === "true" ? "12px 20px" : "12px 0")};
   padding-bottom: ${(props) =>
     props.isxpadding === "true" && props?.paddingoptions?.bottom !== 0
-      ? `${20 + iPhoneNotchSize()}px`
+      ? `${8 + iPhoneNotchSize()}px`
       : iPhoneNotchSize()};
   touch-action: none; /* 터치 스크롤을 막음 */
   display: flex;
@@ -131,11 +130,12 @@ const Layout = styled(motion.div)<{
 `;
 
 const TopNav = styled.nav`
-  width: 56px;
-  height: 4px;
-  border-radius: 4px;
-  background-color: var(--gray-400);
-  margin-bottom: 16px;
+  width: 60px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: var(--gray-500);
+  opacity: 0.4;
+  margin-bottom: 12px;
 `;
 
 const Header = styled.header`

diff --git a/components/organisms/drawer/BottomFlexDrawer.tsx b/components/organisms/drawer/BottomFlexDrawer.tsx
@@ -11,7 +11,7 @@ export default function BottomFlexDrawer({
   setIsModal,
   options,
   isAnimation = true,
-  height = 403.5,
+
   children,
   isxpadding = true,
   isOverlay = true,
@@ -21,7 +21,7 @@ export default function BottomFlexDrawer({
   const header = options?.header;
   const footer = options?.footer;
 
-  const [drawerHeight, setDrawerHeight] = useState(height); // 초기 높이
+  const [drawerHeight, setDrawerHeight] = useState(DRAWER_MAX_HEIGHT); // 초기 높이
   const startYRef = useRef(0); // 드래그 시작 위치 저장
   const currentHeightRef = useRef(drawerHeight); // 현재 높이 저장
 

diff --git a/pageTemplates/layout/Layout.tsx b/pageTemplates/layout/Layout.tsx
@@ -13,6 +13,7 @@ import PageTracker from "../../components/layouts/PageTracker";
 import { useToken } from "../../hooks/custom/CustomHooks";
 import { useToast } from "../../hooks/custom/CustomToast";
 import { parseUrlToSegments } from "../../utils/stringUtils";
+import { iPhoneNotchSize } from "../../utils/validationUtils";
 import BaseModal from "./BaseModal";
 import BaseScript from "./BaseScript";
 import Seo from "./Seo";
@@ -90,7 +91,7 @@ function Layout({ children }: ILayout) {
                 : !NOT_PADDING_NAV_SEGMENT.includes(currentSegment?.[0])
                   ? {
                       paddingTop: "56px",
-                      // paddingBottom: `calc(var(--bottom-nav-height) + ${iPhoneNotchSize()}px`,
+                      paddingBottom: `calc(var(--bottom-nav-height) + ${iPhoneNotchSize()}px`,
                     }
                   : undefined
             }

diff --git a/pageTemplates/vote/StudyControlButton.tsx b/pageTemplates/vote/StudyControlButton.tsx
@@ -1,8 +1,12 @@
-import { Button } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useRecoilValue } from "recoil";
 import { CheckCircleIcon } from "../../components/Icons/CircleIcons";
+import { CalendarCheckIcon, ClockIcon } from "../../components/Icons/SolidIcons";
+import BottomDrawerLg, {
+  IBottomDrawerLgOptions,
+} from "../../components/organisms/drawer/BottomDrawerLg";
 import { DRAWER_MIN_HEIGHT } from "../../components/organisms/drawer/BottomFlexDrawer";
 
 import { myStudyParticipationState } from "../../recoils/studyRecoils";
@@ -22,24 +26,68 @@ function StudyControlButton({ isAleadyAttend }: StudyControlButtonProps) {
 
   const isOpenStudy = myStudyParticipation?.status === "open";
 
+  const options: IBottomDrawerLgOptions = {
+    footer: {
+      buttonText: "취소",
+      onClick: () => {},
+    },
+  };
+
   return (
-    <Button
-      w="76px"
-      fontSize="12px"
-      h="40px"
-      bgColor="black"
-      fontWeight={700}
-      color="white"
-      position="fixed"
-      borderRadius="20px"
-      lineHeight="24px"
-      bottom={`calc(var(--bottom-nav-height) + ${DRAWER_MIN_HEIGHT + iPhoneNotchSize() + 12}px)`}
-      right="20px"
-      iconSpacing={1}
-      rightIcon={<CheckCircleIcon />}
-    >
-      스터디
-    </Button>
+    <>
+      <Button
+        w="76px"
+        fontSize="12px"
+        h="40px"
+        bgColor="black"
+        fontWeight={700}
+        color="white"
+        position="fixed"
+        borderRadius="20px"
+        lineHeight="24px"
+        bottom={`calc(var(--bottom-nav-height) + ${DRAWER_MIN_HEIGHT + iPhoneNotchSize() + 12}px)`}
+        right="20px"
+        iconSpacing={1}
+        rightIcon={<CheckCircleIcon />}
+      >
+        스터디
+      </Button>
+      {
+        <BottomDrawerLg setIsModal={setIsStudyDrawer} options={options} height={197}>
+          <Button
+            h="52px"
+            justifyContent="flex-start"
+            display="flex"
+            variant="unstyled"
+            py={4}
+            w="100%"
+          >
+            <Box w="20px" h="20px" mr={4} opacity={0.28}>
+              <ClockIcon />
+            </Box>
+            <Box fontSize="13px" color="var(--gray-600)">
+              스터디 예약
+            </Box>
+          </Button>
+
+          <Button
+            h="52px"
+            display="flex"
+            justifyContent="flex-start"
+            variant="unstyled"
+            py={4}
+            w="100%"
+          >
+            <Box w="20px" h="20px" mr={4} opacity={0.28}>
+              <CalendarCheckIcon />
+            </Box>
+            <Box fontSize="13px" color="var(--gray-600)">
+              실시간 출석체크
+            </Box>
+          </Button>
+        </BottomDrawerLg>
+      }
+    </>
     // <BottomNavWrapper>
     //   <NewTwoButtonRow
     //     leftProps={{

diff --git a/pages/studyList/index.tsx b/pages/studyList/index.tsx
@@ -19,11 +19,11 @@ export default function StudyList() {
   const location = searchParams.get("location") as LocationEn;
   const locationKr = convertLocationLangTo(location, "kr");
 
-  const { data } = useStudyVoteQuery(date, locationKr, false, false, {
+  const { data } = useStudyVoteQuery(date, locationKr, {
     enabled: !!locationKr && !!date,
   });
 
-  const studyVoteOne = data?.[0]?.participations;
+  const studyVoteOne = data?.participations;
 
   const cardArr =
     studyVoteOne && session && setStudyDataToCardCol(studyVoteOne, date, session.user.uid);
@@ -32,7 +32,7 @@ export default function StudyList() {
     <>
       <Header title={dayjsToFormat(dayjs(date), "M월 D일 스터디")} />
 
-      <Slide>
+      <Slide isNoPadding>
         <Box px="16px">
           {cardArr &&
             cardArr.map((card, idx) => (

diff --git a/theme.ts b/theme.ts
@@ -111,6 +111,7 @@ const theme = extendTheme({
           h: "48px",
           fontWeight: 700,
           fontSize: "14px",
+          borderRadius: "12px",
         },
       },
       variants: {