[Feature] 리뷰 수정 및 기능 추가

src/components/ui/Icon/Icon.tsx

@@ -1,6 +1,8 @@
+import AgainIcon from "@/assets/svg/ic-again.svg?react";
 import CameraIcon from "@/assets/svg/ic-camera.svg?react";
 import CheckCircleIcon from "@/assets/svg/ic-check-circle.svg?react";
 import CloseIcon from "@/assets/svg/ic-close.svg?react";
+import EditIcon from "@/assets/svg/ic-edit.svg?react";
 import EmptyCircleIcon from "@/assets/svg/ic-empty-circle.svg?react";
 import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
 import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
@@ -17,7 +19,9 @@ export type IconNameType =
   | "plus"
   | "checkCircle"
   | "emptyCircle"
-  | "share";
+  | "share"
+  | "edit"
+  | "again";
 
 export interface IconProps {
   name: IconNameType;
@@ -33,6 +37,8 @@ export const ICONS = {
   checkCircle: CheckCircleIcon,
   emptyCircle: EmptyCircleIcon,
   share: ShareIcon,
+  edit: EditIcon,
+  again: AgainIcon,
 };
 
 // 추후 사이즈, 컬러등 추가 가능

src/components/ui/IconButton/IconButton.module.scss

@@ -22,6 +22,29 @@
     border-radius: 0.75rem;
     @include buttonTertiary;
   }
+  @include buttonSecondary;
+  white-space: nowrap;
+
+  &.style-primary {
+    background-color: var(--color-text-primary);
+    color: var(--color-white);
+  }
+
+  &.style-secondary {
+    background-color: var(--color-gray400);
+    color: var(--color-white);
+  }
+
+  &.style-tertiary {
+    background-color: var(--color-gray200);
+    color: var(--color-text-tertiary);
+  }
+
+  &:disabled {
+    background-color: var(--color-disabled);
+    color: var(--color-text-tertiary);
+    cursor: not-allowed;
+  }
 }
 
 .IconButtonStory {

src/components/ui/IconButton/IconButton.tsx

@@ -17,6 +17,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       onClick,
       text,
       iconName,
+      variant = "primary",
       ...props
     },
     ref,
@@ -35,7 +36,12 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     return (
       <Comp
         ref={ref}
-        className={classNames(styles.IconButton, styles[`size-${size}`], className)}
+        className={classNames(
+          styles.IconButton,
+          styles[`size-${size}`],
+          styles[`style-${variant}`],
+          className,
+        )}
         disabled={disabled}
         onClick={handleClick}
         {...props}

src/components/ui/IconButton/IconButton.types.ts

@@ -2,10 +2,14 @@ import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types
 import type { IconNameType } from "@/components/ui/Icon/Icon";
 
 type IconButtonSize = "md" | "sm";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
 
 export interface IconButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     ButtonOwnProps {
   size?: IconButtonSize;
   iconName: IconNameType;
+  variant?: ButtonVariant;
+
 }
+

src/components/ui/Text/Text.module.scss

@@ -42,6 +42,7 @@
       titleLg,
       titleM,
       titleSm,
+      titleXsm,
       bodyLg,
       bodyM,
       bodySm,
@@ -58,7 +59,10 @@
         @include titleM;
       } @else if $variant-name == titleSm {
         @include titleSm;
-      } @else if $variant-name == bodyLg {
+      } @else if $variant-name == titleXsm {
+        @include titleXsm;
+      }
+      @else if $variant-name == bodyLg {
         @include bodyLg;
       } @else if $variant-name == bodyM {
         @include bodyM;

src/components/ui/Text/Text.types.ts

@@ -2,6 +2,7 @@ type TextVariant =
   | "titleLg"
   | "titleM"
   | "titleSm"
+  | "titleXsm"
   | "bodyLg"
   | "bodyM"
   | "bodySm"

src/constants/path.ts

@@ -9,5 +9,5 @@ export const PATH = {
   LOADING: "/loading",
   CREATE_REVIEW_FAIL: "/create-review-fail",
   APP_DOWNLOAD: "/download",
-
+  REVIEW_COPY_GUIDE: "/review-copy-guide",
 };

src/hooks/common/useRoute.ts

@@ -16,6 +16,7 @@ export const useRoute = () => {
     navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT),
     navigateToLoading: () => navigate(PATH.LOADING),
     navigateToCreateReviewFail: () => navigate(PATH.CREATE_REVIEW_FAIL),
+    navigateToReviewCopyGuide: () => navigate(PATH.REVIEW_COPY_GUIDE),
   };
 
   return routes;

src/pages/ReceiptInputPage/ReceiptInputPage.tsx

@@ -114,11 +114,11 @@ const ReceiptInputPage = () => {
 
         <div className={styles.Bottom}>
           {Object.values(focusState).some((isFocus) => isFocus) ? (
-            <Button key="edit" text="다음" />
+            <Button key="edit" text="리뷰 만들기" />
           ) : (
             <Button
               key="confirm"
-              text="다음"
+              text="리뷰 만들기"
               disabled={formData.some((item) => Object.values(item).some((value) => !value))}
               onClick={handleInfoRightClick}
             />

src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.css

@@ -0,0 +1,113 @@
+.ReviewGuide {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.ReviewGuide .Title {
+  padding-top: 1.875rem;
+}
+.ReviewGuide .TitleCont {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  justify-content: center;
+}
+.ReviewGuide .Image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ReviewGuide .Bottom {
+  margin-top: 1.25rem;
+}
+
+.ReviewGuideWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.ReviewGuideList {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.ReviewGuideNum {
+  width: 1.75rem;
+  height: 1.75rem;
+  background-color: var(--color-gray200);
+  border-radius: 999px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.ReviewGuideItemContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.ReviewGuideItemBox {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ReviewGuideItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-gray200);
+  border-radius: 1rem;
+}
+
+.btn {
+  background-color: var(--color-text-black);
+  color: var(--color-text-white);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.appBanner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.appInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.appIcon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.75rem;
+}
+
+.appName {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.appButton {
+  width: 3.4375rem;
+  height: 1.75rem;
+}

src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.scss

@@ -0,0 +1,116 @@
+.ReviewGuide {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .Title {
+    padding-top: 1.875rem;
+  }
+  .TitleCont {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    justify-content: center;
+  }
+
+  .Image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .Bottom {
+    margin-top: 1.25rem;
+  }
+}
+
+.ReviewGuideWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.ReviewGuideList {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.ReviewGuideNum {
+  width: 1.75rem;
+  height: 1.75rem;
+  background-color: var(--color-gray200);
+  border-radius: 999px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.ReviewGuideItemContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.ReviewGuideItemBox {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ReviewGuideItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-gray200);
+  border-radius: 1rem;
+}
+
+.btn {
+  background-color: var(--color-text-black);
+  color: var(--color-text-white);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.appBanner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.appInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.appIcon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.75rem;
+}
+
+.appName {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.appButton {
+  width: 3.4375rem;
+  height: 1.75rem;
+}