[Refactor/#83] 디자인 QA 사항 반영

src/components/Home/Home.module.scss

@@ -22,37 +22,38 @@
     bottom: 0;
     z-index: 0;
   }
+}
 
-  .HomeTitle {
-    padding-top: 5rem;
-    padding-bottom: 1.25rem;
+.HomeTop {
+  z-index: 1;
+}
 
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    z-index: 1;
+.HomeTitle {
+  padding-top: 3.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
 
-    & > h1 {
-      white-space: pre-line;
-    }
+  & > h1 {
+    white-space: pre-line;
   }
+}
 
-  .HomeImage {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
+.HomeImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 3.75rem;
 
-    & > img {
-      width: 16.25rem;
-      height: 16.25rem;
-    }
+  & > img {
+    width: 14.375rem;
+    height: 14.375rem;
   }
+}
 
-  .HomeBottom {
-    display: flex;
-    align-items: center;
-    gap: 0.875rem;
-    z-index: 1;
-  }
+.HomeBottom {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  z-index: 1;
 }

src/components/Home/Home.tsx

@@ -29,17 +29,20 @@ const Home = () => {
 
   return (
     <div className={styles.Home}>
-      <div className={styles.HomeTitle}>
-        <Text variant="titleLg" color="gradient" align="center" as="h1">
-          {`영수증으로\nAI 음식 리뷰 남겨요`}
-        </Text>
-        <Text variant="bodyLg" color="secondary" align="center">
-          손쉬운 음식 리뷰 작성
-        </Text>
-      </div>
-      <div className={styles.HomeImage}>
-        <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
+      <div className={styles.HomeTop}>
+        <div className={styles.HomeTitle}>
+          <Text variant="titleLg" color="gradient" align="center" as="h1">
+            {`영수증으로\nAI 음식 리뷰 남겨요`}
+          </Text>
+          <Text variant="bodyLg" color="secondary" align="center">
+            손쉬운 음식 리뷰 작성
+          </Text>
+        </div>
+        <div className={styles.HomeImage}>
+          <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
+        </div>
       </div>
+
       <div className={styles.HomeBottom}>
         <IconButton
           text="갤러리"

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss

@@ -1,15 +1,15 @@
 .Modal {
   padding: 1.875rem 1.25rem 1.25rem;
 
-  & > span {
+  & > p {
     margin-top: 0.375rem;
   }
 }
 
 .ButtonWrapper {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: 0.25rem;
   margin-top: 1.5rem;
 
   & > button {
@@ -19,11 +19,13 @@
 
 .ShowButtonWrapper {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
+  justify-self: center;
   gap: 0.375rem;
-  margin-top: 0.75rem;
-  width: 100%;
+  margin-top: 0.25rem;
+  width: 6.6875rem;
+  height: 1.75rem;
   cursor: pointer;
 
   & > svg > path {

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -17,7 +17,10 @@ const ReceiptEdit = () => {
 
   const { setOcrText } = useCreateReviewStore();
 
-  const [formData, setFormData] = useState<{ [key: string]: string }[]>([]);
+  const [formData, setFormData] = useState<{ [key: string]: string }[]>([
+    { test: "abc" },
+    { test2: "aadsasf" },
+  ]);
   const [focusState, setFocusState] = useState<{ [key: string]: boolean }>({});
 
   useEffect(() => {

src/components/ReviewResult/ReviewResult.module.scss

@@ -1,7 +1,6 @@
 .ReviewResult {
-  padding: 1.25rem;
-  padding-bottom: 2.5rem;
-  height: calc(100vh - 2.75rem);
+  padding: 3.75rem 1.25rem 2.5rem;
+  height: 100vh;
   overflow: hidden;
   position: relative;
   display: flex;

src/components/SelectStyle/SelectStyle.tsx

@@ -20,15 +20,15 @@ interface StyleProps {
 }
 
 const IMG_STYLE_DATA = [
-  { name: "친절한 미식가", image: "/assets/img/img-style-friendly.png" },
-  { name: "믿음직한 미식가", image: "/assets/img/img-style-trust.png" },
-  { name: "귀여운 미식가", image: "/assets/img/img-style-cute.png" },
+  { name: "친근한 말투", image: "/assets/img/img-style-friendly.png" },
+  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.png" },
+  { name: "유쾌한 말투", image: "/assets/img/img-style-cute.png" },
 ];
 
 const STYLE_NAME_MAPPING: { [key: string]: string } = {
-  "친절한 미식가": "FRIENDLY",
-  "귀여운 미식가": "CUTE",
-  "믿음직한 미식가": "PROFESSIONAL",
+  "친근한 말투": "FRIENDLY",
+  "유쾌한 말투": "CUTE",
+  "믿음직한 말투": "PROFESSIONAL",
 };
 
 const SelectStyle = () => {
@@ -72,11 +72,11 @@ const SelectStyle = () => {
   return (
     <div className={styles.SelectStyle}>
       <div className={styles.Title}>
-        <Text variant="titleM" color="primary" align="center" as="h1">
-          나는 어떤 미식가인가요?
+        <Text variant="titleM" color="purpleGradient" align="center" as="h1">
+          어떤 말투로 작성할까요?
         </Text>
         <Text variant="bodyLg" color="secondary" align="center" as="h2">
-          선택지에 따라 리뷰 어조가 달라져요
+          선택지에 따라 리뷰 말투가 달라져요
         </Text>
       </div>
 

src/components/SelectTag/SelectTag.module.scss

@@ -36,7 +36,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 0.625rem;
-    margin-top: 2.5rem;
+    margin-top: 1.5rem;
   }
 }
 

src/components/SelectTag/SelectTag.tsx

@@ -87,6 +87,7 @@ const SelectTag = () => {
 
       <TagSheet
         isOpen={isBottomSheetOpen}
+        tagList={tagList}
         handleClose={handleSheetClose}
         handleTagAdd={handleTagAdd}
       />

src/components/SelectTag/TagSheet/TagSheet.module.scss

@@ -51,6 +51,7 @@
 .LengthText {
   display: flex;
   margin-top: 0.625rem;
+  font-family: "Pretendard", sans-serif;
 }
 
 @keyframes slide-in-from-bottom {

src/components/SelectTag/TagSheet/TagSheet.tsx

@@ -15,16 +15,19 @@ import { useFocus } from "@/hooks/common/useFocus";
 
 interface TagSheetProps {
   isOpen: boolean;
+  tagList: string[];
   handleClose: () => void;
   handleTagAdd: (newTag: string) => void;
 }
 
-const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
+const TagSheet = ({ isOpen, tagList, handleClose, handleTagAdd }: TagSheetProps) => {
   const { isFocus, onFocus, onBlur } = useFocus({ defaultFocus: true });
 
   const [newTag, setNewTag] = useState("");
 
-  const isInputError = newTag.length > 20;
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const isInputError = newTag.length > 20 || tagList.includes(newTag);
   const isInputEmpty = newTag.length === 0;
 
   useEffect(() => {
@@ -37,7 +40,12 @@ const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
     setNewTag(e.target.value);
   };
 
-  const modalRef = useRef<HTMLDivElement>(null);
+  const handleAddTag = () => {
+    if (!isInputError) {
+      handleTagAdd(newTag);
+      setNewTag("");
+    }
+  };
 
   useOnClickOutside(modalRef, handleClose);
 
@@ -78,7 +86,7 @@ const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
           <div className={styles.LengthText}>
             {isInputError ? (
               <Text variant="bodyXsm" color="error">
-                *20글자 이내로 입력할 수 있어요.
+                *{newTag.length > 20 ? "20글자 이내로 입력할 수 있어요." : "이미 있는 키워드에요."}
               </Text>
             ) : (
               <>
@@ -95,11 +103,7 @@ const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
             )}
           </div>
 
-          <Button
-            text="추가하기"
-            disabled={isInputError || isInputEmpty}
-            onClick={() => handleTagAdd(newTag)}
-          />
+          <Button text="추가하기" disabled={isInputError || isInputEmpty} onClick={handleAddTag} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

src/components/common/Navbar/Navbar.module.scss

@@ -17,3 +17,9 @@
 .RightButton {
   margin-left: auto;
 }
+
+.NavbarButton {
+  width: 2rem;
+  height: 2.75rem;
+  align-items: center;
+}

src/components/common/Navbar/Navbar.tsx

@@ -14,7 +14,7 @@ Navbar.LeftButton = ({
   ...props
 }: ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
-    <button {...props} className={className}>
+    <button {...props} className={classNames(styles.NavbarButton, className)}>
       {children}
     </button>
   );

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

@@ -13,7 +13,7 @@
   }
 
   &.size-sm {
-    gap: 0.125rem;
+    gap: 0.25rem;
     height: 2.375rem;
     padding: 0.5rem 0.875rem;
     background-color: var(--color-text-primary);

src/components/ui/Input/Input.module.scss

@@ -1,30 +1,46 @@
 @use "@/styles/_mixins.scss" as *;
 
 .InputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  button {
+    position: absolute;
+    right: 0.875rem;
+    color: var(--color-primary-purple);
+    line-height: 1.3125rem;
+
+    @include bodySm;
+  }
+}
+
+.Input {
   width: 100%;
   height: 3rem;
   border-radius: 0.875rem;
   padding: 0.75rem 0.875rem;
   border: 1px solid transparent;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
+  color: var(--color-text-primary);
+  line-height: 1.5rem;
+
+  @include bodyM;
+
+  &::placeholder {
+    color: var(--color-text-tertiary);
+  }
 
   &.style-primary {
     background-color: var(--color-white);
     box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.04);
-
-    & > input {
-      width: calc(100% - 2.25rem);
-    }
   }
 
   &.style-secondary {
     background-color: var(--color-gray100);
+  }
 
-    & > input {
-      width: 100%;
-    }
+  &:focus {
+    border-color: var(--color-primary-purple);
   }
 
   &.Focused {
@@ -34,22 +50,6 @@
   &.Error {
     border-color: var(--color-text-error);
   }
-
-  .Input {
-    @include bodyM;
-    color: var(--color-text-primary);
-    line-height: 1.5rem;
-
-    &::placeholder {
-      color: var(--color-text-tertiary);
-    }
-  }
-
-  button {
-    @include bodySm;
-    color: var(--color-primary-purple);
-    line-height: 1.3125rem;
-  }
 }
 
 .InputStory {