Merge branch 'develop' into feat/#49

Author: lgrin-byte

src/components/SelectTag/SelectTag.tsx

@@ -10,28 +10,26 @@ import { useRoute } from "@/hooks/common/useRoute";
 
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
-// 임시 데이터
-const TAG_LIST = [
-  "음식이 맛있어요",
-  "양이 많아요",
-  "가성비가 좋아요",
-  "메뉴 구성이 알차요",
-  "매장이 넓어요",
-  "단체모임 하기 좋아요",
-  "뷰가 좋아요",
-  "아늑해요",
-  "분위기가 좋아요",
-  "친절해요",
-  "매장이 청결해요",
-];
-
 const SelectTag = () => {
   const { navigateToSelectStyle } = useRoute();
 
   const { setHashTag } = useCreateReviewStore();
 
   const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+  const [tagList, setTagList] = useState<string[]>([
+    "음식이 맛있어요",
+    "양이 많아요",
+    "가성비가 좋아요",
+    "메뉴 구성이 알차요",
+    "매장이 넓어요",
+    "단체모임 하기 좋아요",
+    "뷰가 좋아요",
+    "아늑해요",
+    "분위기가 좋아요",
+    "친절해요",
+    "매장이 청결해요",
+  ]);
 
   const handleTagClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const tag = e.currentTarget.textContent || "";
@@ -43,6 +41,13 @@ const SelectTag = () => {
     );
   };
 
+  const handleTagAdd = (newTag: string) => {
+    setIsBottomSheetOpen(false);
+    if (!tagList.includes(newTag)) {
+      setTagList((prevTagList: string[]) => [...prevTagList, newTag]);
+    }
+  };
+
   const handleSheetClose = () => {
     setIsBottomSheetOpen(false);
   };
@@ -64,7 +69,7 @@ const SelectTag = () => {
           </Text>
         </div>
         <div className={styles.TagList}>
-          {TAG_LIST.map((tag) => (
+          {tagList.map((tag) => (
             <Tag
               text={tag}
               key={tag}
@@ -80,7 +85,11 @@ const SelectTag = () => {
         <Button text="다음" onClick={handleNextClick} />
       </div>
 
-      <TagSheet isOpen={isBottomSheetOpen} handleClose={handleSheetClose} />
+      <TagSheet
+        isOpen={isBottomSheetOpen}
+        handleClose={handleSheetClose}
+        handleTagAdd={handleTagAdd}
+      />
     </div>
   );
 };

src/components/SelectTag/TagSheet/TagSheet.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import * as Dialog from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
@@ -15,16 +15,23 @@ import { useFocus } from "@/hooks/common/useFocus";
 interface TagSheetProps {
   isOpen: boolean;
   handleClose: () => void;
+  handleTagAdd: (newTag: string) => void;
 }
 
-const TagSheet = ({ isOpen, handleClose }: TagSheetProps) => {
+const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
   const { isFocus, onFocus, onBlur } = useFocus({ defaultFocus: true });
 
   const [newTag, setNewTag] = useState("");
 
   const isInputError = newTag.length > 20;
   const isInputEmpty = newTag.length === 0;
 
+  useEffect(() => {
+    if (isOpen) {
+      setNewTag("");
+    }
+  }, [isOpen]);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewTag(e.target.value);
   };
@@ -82,7 +89,11 @@ const TagSheet = ({ isOpen, handleClose }: TagSheetProps) => {
             )}
           </div>
 
-          <Button text="추가하기" disabled={isInputError || isInputEmpty} />
+          <Button
+            text="추가하기"
+            disabled={isInputError || isInputEmpty}
+            onClick={() => handleTagAdd(newTag)}
+          />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>