feat: 스트릭 클릭시 미션 모달 (#83)

* feat: 마이페이지 디자인 수정 및 추가 * feat: 설정 페이지 퍼블리싱 * feat: 로그아웃 Dialog * feat: 스트릭 모달
Central-MakeUs · Feb 4, 2025 · c644f6c · c644f6c
1 parent 49d513d
commit c644f6c
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 9 deletions.
diff --git a/packages/icon/CheckIcon.tsx b/packages/icon/CheckIcon.tsx
@@ -0,0 +1,32 @@
+import { vars } from "@repo/token";
+import type { ComponentPropsWithoutRef } from "react";
+
+export const CheckIcon = (props: ComponentPropsWithoutRef<"svg"> & { checked?: boolean }) => {
+  const { checked, className, ...rest } = props;
+
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      {checked && (
+        <defs>
+          <linearGradient id="bookGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor={vars.colors["main4-gradient-from"]} />
+            <stop offset="100%" stopColor={vars.colors["main4-gradient-to"]} />
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        d="M12.4997 1.38867C18.2528 1.38867 22.9163 6.05221 22.9163 11.8053C22.9163 17.5585 18.2528 22.222 12.4997 22.222C6.74655 22.222 2.08301 17.5585 2.08301 11.8053C2.08301 6.05221 6.74655 1.38867 12.4997 1.38867ZM16.182 8.03555L11.0257 13.1918L8.81738 10.9824C8.72067 10.8856 8.60584 10.8089 8.47945 10.7565C8.35307 10.704 8.21759 10.6771 8.08077 10.677C7.80445 10.6769 7.5394 10.7866 7.34395 10.9819C7.14849 11.1772 7.03862 11.4422 7.03853 11.7185C7.03843 11.9948 7.1481 12.2599 7.34342 12.4553L10.2163 15.3283C10.3227 15.4347 10.4491 15.5192 10.5881 15.5768C10.7272 15.6344 10.8762 15.6641 11.0268 15.6641C11.1773 15.6641 11.3263 15.6344 11.4654 15.5768C11.6044 15.5192 11.7308 15.4347 11.8372 15.3283L17.6559 9.5095C17.8514 9.31405 17.9612 9.04895 17.9612 8.77253C17.9612 8.49611 17.8514 8.23101 17.6559 8.03555C17.4605 7.84009 17.1954 7.73028 16.9189 7.73028C16.6425 7.73028 16.3774 7.84009 16.182 8.03555Z"
+        fill={checked ? "url(#bookGradient)" : vars.colors.gray[200]}
+      />
+    </svg>
+  );
+};
diff --git a/public/images/habit/habit_block.webp b/public/images/habit/habit_block.webp
diff --git a/public/images/habit/mercury_habit_logo.webp b/public/images/habit/mercury_habit_logo.webp
diff --git a/src/entities/user/components/HabitCalendar.tsx b/src/entities/user/components/HabitCalendar.tsx
@@ -12,6 +12,7 @@ const Cell = forwardRef(function Cell(
   return (
     <div className={cn(" w-full h-full flex flex-col gap-y-[5px]", className)}>
       {header ?? <div />}
+
       <button
         data-status={status}
         ref={ref}

diff --git a/src/features/userExp/HabitSection.tsx b/src/features/userExp/HabitSection.tsx
@@ -1,7 +1,13 @@
 import { AspectRatio } from "@repo/design-system/AspectRatio";
+import { BottomSheet } from "@repo/design-system/BottomSheet";
+import { Image } from "@repo/design-system/Image";
 import { Text } from "@repo/design-system/Text";
+import { BookIcon } from "@repo/icon/BookIcon";
+import { CheckIcon } from "@repo/icon/CheckIcon";
 import { MercuryIcon } from "@repo/icon/MercuryIcon";
+import { TimerIcon } from "@repo/icon/TimerIcon";
 import { Flex } from "@repo/ui/Flex";
+import { JustifyBetween } from "@repo/ui/JustifyBetween";
 import { Spacing } from "@repo/ui/Spacing";
 import { Stack } from "@repo/ui/Stack";
 import { wrap } from "@suspensive/react";
@@ -122,7 +128,7 @@ export const HabitSection = wrap
     const weekDates = useMemo(() => getWeekDates(new Date()), []);
 
     return (
-      <>
+      <BottomSheet.Root handleOnly={true}>
         <Spacing className=" h-[17px]" />
         <Stack className=" px-[20px]">
           <Text variant={"body/18_sb"} className=" mb-[10px] text-[#393F46]">
@@ -131,19 +137,89 @@ export const HabitSection = wrap
 
           <Flex className=" gap-x-[8px] justify-between">
             {weekDates.map((date) => (
-              <HabitCalendar.Cell
-                key={date.toISOString()}
-                header={<HabitCalendar.Header>{getDayName(date)}</HabitCalendar.Header>}
-                status={getStatus({ targetDate: date, today: new Date(), isDone: true })}
-              >
-                {date.getDate()}
-              </HabitCalendar.Cell>
+              <BottomSheet.Trigger asChild={true} key={date.toISOString()}>
+                <HabitCalendar.Cell
+                  key={date.toISOString()}
+                  header={<HabitCalendar.Header>{getDayName(date)}</HabitCalendar.Header>}
+                  status={getStatus({ targetDate: date, today: new Date(), isDone: true })}
+                >
+                  {date.getDate()}
+                </HabitCalendar.Cell>
+              </BottomSheet.Trigger>
             ))}
           </Flex>
 
           <Spacing className=" h-[12px]" />
           <HabitBar normalText={normalText} boldText={boldText} />
         </Stack>
-      </>
+        <TodayHabit />
+      </BottomSheet.Root>
     );
   });
+
+const TodayHabit = () => {
+  return (
+    <>
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay />
+        <BottomSheet.Content className=" flex  items-center flex-col pt-[16px] px-[20px] rounded-t-[20px] h-[360px] bg-gray-white">
+          <BottomSheet.Handle className=" mb-[16px]" />
+          <BottomSheet.Description className=" sr-only">
+            오늘의 미션을 확인합니다.
+          </BottomSheet.Description>
+          <BottomSheet.Title asChild={true}>
+            <JustifyBetween className="w-full">
+              <Text variant={"title/25_sb"} className="text-gray-800 whitespace-pre-wrap">
+                {"6일 연속 \n성공했어요!"}
+              </Text>
+              <Image src={HABIIT_ASSETS.LOGO} alt="mercury character" objectfit={"fill"} />
+            </JustifyBetween>
+          </BottomSheet.Title>
+
+          <Stack className="mt-[19px] mb-[20px] w-full">
+            <Flex className="items-center">
+              <Image
+                src={HABIIT_ASSETS.BLOCK}
+                alt="habit block"
+                objectfit={"fill"}
+                className="w-5 h-5"
+              />
+              <Text className="ml-[7px] mr-[12px] text-gray-600" variant={"body/18_sb"}>
+                습관쌓기
+              </Text>
+              <Text className="text-pastel-violet" variant={"body/18_m"}>
+                + 50xp
+              </Text>
+            </Flex>
+
+            <Stack className="rounded-[5px] bg-gray-100 px-7 py-[14px] mt-[9px] gap-[14px]">
+              <JustifyBetween className="items-center">
+                <Flex className="items-center">
+                  <BookIcon />
+                  <Text className="text-gray-500 ml-[13px] mr-[20px]" variant={"body/15_m"}>
+                    독서기록 또는 메모 1개 작성하기
+                  </Text>
+                </Flex>
+                <CheckIcon />
+              </JustifyBetween>
+              <JustifyBetween className="items-center">
+                <Flex className="items-center">
+                  <TimerIcon selected={true} />
+                  <Text className="text-gray-500 ml-[13px] mr-[20px]" variant={"body/15_m"}>
+                    10초 이상 타이머 완료하기
+                  </Text>
+                </Flex>
+                <CheckIcon checked={true} />
+              </JustifyBetween>
+            </Stack>
+          </Stack>
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </>
+  );
+};
+
+const HABIIT_ASSETS = {
+  LOGO: "/images/habit/mercury_habit_logo.webp",
+  BLOCK: "/images/habit/habit_block.webp",
+};