Merge branch 'develop' into feat/#42

.github/workflows/storybook.yml → .github/workflows/chromatic.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     branches:
       - develop
+    paths:
+      - "**.stories.tsx"
 
 jobs:
   chromatic-deployment:

package.json

@@ -16,7 +16,10 @@
     "cypress": "cypress open"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
     "@tanstack/react-query": "^5.64.2",
+    "canvas-confetti": "^1.9.3",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -36,6 +39,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.2.0",
+    "@types/canvas-confetti": "^1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.7",
     "@types/react": "^18.3.18",

src/components/CreateReviewLoading/CreateReviewLoading.module.scss

@@ -0,0 +1,45 @@
+.CreateReviewLoading {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--color-bg-gradient);
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: "";
+    background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;
+    background-size: 100% 16.375rem;
+    filter: blur(4.625rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+}
+
+.Title {
+  margin-top: 7.5rem;
+  z-index: 1;
+
+  & > h2 {
+    margin-top: 0.625rem;
+  }
+}
+
+.Image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 6.25rem;
+  z-index: 1;
+
+  & > img {
+    width: 13.125rem;
+    height: 13.125rem;
+  }
+}

src/components/CreateReviewLoading/CreateReviewLoading.tsx

@@ -0,0 +1,23 @@
+import styles from "@/components/CreateReviewLoading/CreateReviewLoading.module.scss";
+import Text from "@/components/ui/Text/Text";
+
+const CreateReviewLoading = () => {
+  return (
+    <div className={styles.CreateReviewLoading}>
+      <div className={styles.Title}>
+        <Text variant="titleM" color="gradient" align="center" as="h1">
+          리뷰를 만들고 있어요
+        </Text>
+        <Text variant="bodyLg" color="secondary" align="center" as="h2">
+          최대 30초까지 소요될 수 있어요
+        </Text>
+      </div>
+
+      <div className={styles.Image}>
+        <img src="/assets/img/img-loading.webp" alt="createReviewImg" />
+      </div>
+    </div>
+  );
+};
+
+export default CreateReviewLoading;

src/components/Home/Home.tsx

@@ -4,9 +4,12 @@ import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
 import { useOverlay } from "@/hooks/common/useOverlay";
+import { useRoute } from "@/hooks/common/useRoute";
 
 const Home = () => {
-  const { isOpen, handleClose, handleOpen } = useOverlay();
+  const { isOpen, handleClose } = useOverlay();
+
+  const { navigateToReceiptEdit, navigateToRecognitionFail } = useRoute();
 
   return (
     <div className={styles.Home}>
@@ -19,11 +22,11 @@ const Home = () => {
         </Text>
       </div>
       <div className={styles.HomeImage}>
-        <img src="/src/assets/img/img-graphic-logo.png" alt="mainLogo" />
+        <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>
       <div className={styles.HomeBottom}>
-        <IconButton text="갤러리" iconName="gallery" onClick={handleOpen} />
-        <IconButton text="카메라" iconName="camera" />
+        <IconButton text="갤러리" iconName="gallery" onClick={navigateToRecognitionFail} />
+        <IconButton text="카메라" iconName="camera" onClick={navigateToReceiptEdit} />
       </div>
 
       <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 import classNames from "classnames";
 
@@ -9,13 +8,15 @@ import Icon from "@/components/ui/Icon/Icon";
 import Modal from "@/components/ui/Modal/Modal";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 interface HomeNavigateConfirmModalProps {
   isOpen: boolean;
   handleClose: () => void;
 }
 
 const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
-  const navigate = useNavigate();
+  const { navigateToHome } = useRoute();
 
   // 이후 상태 초기값 재설정
   const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
@@ -26,7 +27,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
 
   const handleNavigateHome = () => {
     handleClose();
-    navigate("/");
+    navigateToHome();
   };
 
   return (

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -6,13 +6,20 @@ import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
 import { useFocus } from "@/hooks/common/useFocus";
+import { useRoute } from "@/hooks/common/useRoute";
 
 const ReceiptEdit = () => {
+  const { navigateToSelectTag } = useRoute();
+
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
 
-  const { isFocus: isPlaceFocus, onFocus: handlePlaceFocus, onBlur: handlePlaceBlur } = useFocus();
-  const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus();
+  const {
+    isFocus: isPlaceFocus,
+    onFocus: handlePlaceFocus,
+    onBlur: handlePlaceBlur,
+  } = useFocus({});
+  const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus({});
 
   return (
     <div className={styles.ReceiptEdit}>
@@ -65,7 +72,11 @@ const ReceiptEdit = () => {
         ) : (
           <>
             <Button text="다시 스캔하기" variant="secondary" />
-            <Button text="정보가 맞아요" disabled={!placeName || !foodName} />
+            <Button
+              text="정보가 맞아요"
+              disabled={!placeName || !foodName}
+              onClick={navigateToSelectTag}
+            />
           </>
         )}
       </div>

src/components/RecognitionFail/RecognitionFail.tsx

@@ -2,7 +2,11 @@ import styles from "@/components/RecognitionFail/RecognitionFail.module.scss";
 import Button from "@/components/ui/Button/Button";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const RecognitionFail = () => {
+  const { navigateToHome, navigateToReceiptEdit } = useRoute();
+
   return (
     <div className={styles.RecognitionFail}>
       <div className={styles.Title}>
@@ -14,11 +18,11 @@ const RecognitionFail = () => {
         </Text>
       </div>
       <div className={styles.Image}>
-        <img src="/src/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
+        <img src="/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
       </div>
       <div className={styles.Bottom}>
-        <Button text="직접 입력하기" variant="secondary" />
-        <Button text="다시 촬영하기" variant="secondary" />
+        <Button text="직접 입력하기" variant="secondary" onClick={navigateToReceiptEdit} />
+        <Button text="다시 촬영하기" variant="secondary" onClick={navigateToHome} />
       </div>
     </div>
   );

src/components/ReviewResult/ReviewResult.module.scss

@@ -0,0 +1,60 @@
+.ReviewResult {
+  padding: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-gradient);
+  justify-content: space-between;
+
+  &::before {
+    content: "";
+    background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;
+    background-size: 100% 16.375rem;
+    filter: blur(4.625rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+}
+
+.Top {
+  z-index: 1;
+
+  .TitleBox {
+    display: flex;
+    justify-content: center;
+    margin: 1.875rem 0;
+  }
+}
+
+.Bottom {
+  align-items: center;
+  gap: 0.875rem;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+}
+
+.ReceiptImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+
+  & > img {
+    width: 7.5rem;
+    height: 7.5rem;
+  }
+}
+
+.IconBtn {
+  width: 6.15625rem;
+  margin-top: 0.625rem;
+  margin-left: auto;
+}

src/components/ReviewResult/ReviewResult.tsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+
+import confetti from "canvas-confetti";
+
+import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
+import styles from "@/components/ReviewResult/ReviewResult.module.scss";
+import Button from "@/components/ui/Button/Button";
+import IconButton from "@/components/ui/IconButton/IconButton";
+import Text from "@/components/ui/Text/Text";
+
+import { useOverlay } from "@/hooks/common/useOverlay";
+
+import type { Options as ConfettiOptions } from "canvas-confetti";
+
+const ReviewResult = () => {
+  const { isOpen, handleClose, handleOpen } = useOverlay();
+
+  const handleConfetti = () => {
+    const setting: ConfettiOptions = {
+      particleCount: 100,
+      spread: 100,
+      origin: { y: 0.2 },
+      colors: ["#f4abfe", "#cd90f2", "#eff0ff", "#6f91ff"],
+      ticks: 50,
+    };
+
+    confetti({
+      ...setting,
+    });
+  };
+
+  useEffect(() => {
+    handleConfetti();
+  }, []);
+
+  return (
+    <div className={styles.ReviewResult}>
+      <div className={styles.Top}>
+        <div className={styles.ReceiptImage}>
+          <img src="/assets/img/img-style-cute-circle.png" alt="mainLogo" />
+        </div>
+        <div className={styles.TitleBox}>
+          <Text variant="titleM" color="gradient" as="h1" truncated>
+            리뷰를 만들었어요!
+          </Text>
+        </div>
+
+        <Text variant="bodyLg" color="primary">
+          오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요!
+          음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을
+          거예요.
+        </Text>
+        <div className={styles.IconBtn}>
+          <IconButton text="복사하기" iconName="paste" size="sm" />
+        </div>
+      </div>
+      <div className={styles.Bottom}>
+        <Button text="다시생성" variant="secondary" />
+        <Button text="홈으로 가기" onClick={handleOpen} />
+      </div>
+
+      <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />
+    </div>
+  );
+};
+
+export default ReviewResult;