woowacourse-teams · simorimi · Oct 21, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 18, 2024
@@ -95,7 +95,8 @@
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-merge": "^6.0.1"
+    "webpack-merge": "^6.0.1",
+    "xml2js": "^0.6.2"
   },
   "contributors": [
     {

@@ -22,4 +22,5 @@ export { default as Plus } from "./plus.svg";
 export { default as tturiUrl } from "./tturi.svg?url";
 export { default as MapIcon } from "./map-icon.svg";
 export { default as HomeIcon } from "./home-icon.svg";
-
+export { default as ResetIcon } from "./reset-icon.svg";
+export { default as SortIcon } from "./sort-icon.svg";
@@ -2,25 +2,51 @@ import { ComponentPropsWithoutRef } from "react";
 
 import { CYPRESS_DATA_MAP } from "@constants/cypress";
 
+import theme from "@styles/theme";
+
+import Icon from "../Icon/Icon";
+import SVG_ICONS_MAP from "../Icon/svg-icons.json";
 import Text from "../Text/Text";
 import * as S from "./Chip.styled";
 
 interface ChipProps extends ComponentPropsWithoutRef<"li"> {
   label: string;
   isSelected?: boolean;
   index?: number;
+  iconPosition?: "none" | "left" | "right";
+  iconType?: keyof typeof SVG_ICONS_MAP;
 }
 
-const Chip = ({ label, isSelected = false, index, children, ...props }: ChipProps) => {
+const Chip = ({
+  label,
+  isSelected = false,
+  index,
+  iconPosition = "none",
+  iconType = "down-arrow",
+  ...props
+}: ChipProps) => {
   return (
     <S.Layout
       $isSelected={isSelected}
       $index={index}
       data-cy={isSelected ? `selected-${CYPRESS_DATA_MAP.chip}` : CYPRESS_DATA_MAP.chip}
       {...props}
     >
+      {iconPosition === "left" && (
+        <Icon
+          iconType={iconType}
+          size="8"
+          color={isSelected ? theme.colors.primary : theme.colors.text.secondary}
+        />
+      )}
       <Text textType={isSelected ? "detailBold" : "detail"}>{label}</Text>
-      {children}
+      {iconPosition === "right" && (
+        <Icon
+          iconType={iconType}
+          size="8"
+          color={isSelected ? theme.colors.primary : theme.colors.text.secondary}
+        />
+      )}
     </S.Layout>
   );
 };

@@ -286,5 +286,23 @@
     "strokeWidth": "2",
     "strokeLinecap": "round",
     "strokeLinejoin": "round"
+  },
+  "reset-icon": {
+    "width": 1920,
+    "height": 1920,
+    "path": "M960 0v213.333c411.627 0 746.667 334.934 746.667 746.667S1371.627 1706.667 960 1706.667 213.333 1371.733 213.333 960c0-197.013 78.4-382.507 213.334-520.747v254.08H640V106.667H53.333V320h191.04C88.64 494.08 0 720.96 0 960c0 529.28 430.613 960 960 960s960-430.72 960-960S1489.387 0 960 0",
+    "stroke": "currentColor",
+    "strokeWidth": "1",
+    "strokeLinecap": "butt",
+    "strokeLinejoin": "miter"
+  },
+  "sort-icon": {
+    "width": 24,
+    "height": 24,
+    "path": "M6.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414V19a1 1 0 1 1-2 0V7.414L3.707 9.707a1 1 0 0 1-1.414-1.414l4-4zM16 16.586V5a1 1 0 1 1 2 0v11.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L16 16.586z",
+    "stroke": "currentColor",
+    "strokeWidth": "1",
+    "strokeLinecap": "butt",
+    "strokeLinejoin": "miter"
   }
 }
@@ -1,3 +1,5 @@
+import { useEffect, useMemo } from "react";
+
 import useInfiniteTravelogues from "@queries/useInfiniteTravelogues";
 
 import {
@@ -32,13 +34,38 @@ import * as S from "./MainPage.styled";
 import TravelogueCardSkeleton from "./TravelogueCard/skeleton/TravelogueCardSkeleton";
 
 const MainPage = () => {
-  const { selectedTagIDs, handleClickTag, sortedTags, animationKey } = useMultiSelectionTag(
-    STORAGE_KEYS_MAP.mainPageSelectedTagIDs,
-  );
-  const { sorting, travelPeriod } = useSingleSelectionTag(
-    STORAGE_KEYS_MAP.mainPageSort,
-    STORAGE_KEYS_MAP.mainPageTravelPeriod,
-  );
+  const {
+    selectedTagIDs,
+    handleClickTag,
+    sortedTags,
+    multiSelectionTagAnimationKey,
+    resetMultiSelectionTag,
+  } = useMultiSelectionTag(STORAGE_KEYS_MAP.mainPageSelectedTagIDs);
+
+  const {
+    sorting,
+    travelPeriod,
+    resetSingleSelectionTags,
+    singleSelectionAnimationKey,
+    increaseSingleSelectionAnimationKey,
+  } = useSingleSelectionTag(STORAGE_KEYS_MAP.mainPageSort, STORAGE_KEYS_MAP.mainPageTravelPeriod);
+
+  const isTagsSelected = useMemo(() => {
+    return (
+      selectedTagIDs.length !== 0 ||
+      sorting.selectedOption !== "likeCount" ||
+      travelPeriod.selectedOption !== ""
+    );
+  }, [selectedTagIDs, sorting.selectedOption, travelPeriod.selectedOption]);
+
+  useEffect(() => {
+    increaseSingleSelectionAnimationKey();
+  }, [isTagsSelected, increaseSingleSelectionAnimationKey]);
+
+  const handleClickResetButton = () => {
+    resetMultiSelectionTag();
+    resetSingleSelectionTags();
+  };
 
   const { travelogues, status, fetchNextPage, isPaused, error } = useInfiniteTravelogues({
     selectedTagIDs,
@@ -74,30 +101,35 @@ const MainPage = () => {
 
         <S.TagsContainer>
           <S.SingleSelectionTagsContainer>
+            {isTagsSelected && (
+              <Chip
+                key={`reset-${singleSelectionAnimationKey}`}
+                label={`초기화`}
+                isSelected={false}
+                onClick={handleClickResetButton}
+                iconPosition="left"
+                iconType="reset-icon"
+              />
+            )}
             <Chip
+              key={`sorting-${singleSelectionAnimationKey}`}
               label={SORTING_OPTIONS_MAP[sorting.selectedOption]}
               isSelected={true}
               onClick={sorting.handleOpenModal}
-            >
-              <Icon iconType="down-arrow" size="8" color={theme.colors.primary} />
-            </Chip>
+              iconPosition="left"
+              iconType="sort-icon"
+            />
             <Chip
+              key={`travelPeriod-${singleSelectionAnimationKey}`}
               label={
                 travelPeriod.selectedOption
                   ? TRAVEL_PERIOD_OPTIONS_MAP[travelPeriod.selectedOption]
                   : "여행 기간"
               }
+              iconPosition="right"
               isSelected={travelPeriod.selectedOption !== ""}
               onClick={travelPeriod.handleOpenModal}
-            >
-              <Icon
-                iconType="down-arrow"
-                size="8"
-                color={
-                  travelPeriod.selectedOption ? theme.colors.primary : theme.colors.text.secondary
-                }
-              />
-            </Chip>
+            />
           </S.SingleSelectionTagsContainer>
 
           <S.MultiSelectionTagsContainer
@@ -108,7 +140,7 @@ const MainPage = () => {
           >
             {sortedTags.map((tag, index) => (
               <Chip
-                key={`${tag.id}-${animationKey}`}
+                key={`${tag.id}-${multiSelectionTagAnimationKey}`}
                 index={index}
                 label={tag.tag}
                 isSelected={selectedTagIDs.includes(tag.id)}

@@ -131,12 +131,12 @@ const MyPage = () => {
         onClose={editModal.handleCloseEditModal}
       >
         <S.Button onClick={profileImage.handleClickProfileImageEditButton}>
-          <Text textType="detail">앨범에서 선택</Text>
+          <Text textType="detail">프로필 사진 올리기</Text>
         </S.Button>
         {profileImage.profileImageUrl && (
           <S.Button onClick={profileImage.handleClickProfileImageDeleteButton}>
             <Text textType="detailBold" css={S.deleteTextColor}>
-              프로필 사진 삭제
+              프로필 사진 삭제하기
             </Text>
           </S.Button>
         )}

@@ -156,7 +156,7 @@ const TravelPlanDetailPage = () => {
 
       <TransformFooter
         onTransform={handleTransform}
-        buttonLabel="여행기로 전환"
+        buttonLabel="여행기로 남기기"
         guideMessage="여행은 즐겁게 다녀오셨나요?"
       />
 

@@ -197,7 +197,7 @@ const TravelogueDetailPage = () => {
 
       <TransformFooter
         guideMessage="이 여행기를 따라가고 싶으신가요?"
-        buttonLabel="여행 계획으로 전환"
+        buttonLabel="여행 계획으로 가져오기"
         onTransform={handleTransform}
       >
         <S.LikesContainer>

@@ -28,7 +28,14 @@ const TravelogueEditPage = () => {
   const [isOpen, handleOpenBottomSheet, handleCloseBottomSheet] = useToggle();
 
   const {
-    state: { title, thumbnail, travelogueDays, selectedTagIDs, sortedTags, animationKey },
+    state: {
+      title,
+      thumbnail,
+      travelogueDays,
+      selectedTagIDs,
+      sortedTags,
+      multiSelectionTagAnimationKey,
+    },
     handler: {
       handleChangeTitle,
       handleInitializeThumbnail,
@@ -105,7 +112,7 @@ const TravelogueEditPage = () => {
               >
                 {sortedTags.map((tag, index) => (
                   <Chip
-                    key={`${tag.id}-${animationKey}`}
+                    key={`${tag.id}-${multiSelectionTagAnimationKey}`}
                     index={index}
                     label={tag.tag}
                     isSelected={selectedTagIDs.includes(tag.id)}

@@ -32,7 +32,14 @@ const TravelogueRegisterPage = () => {
   const { transformDetail } = useTravelTransformDetailContext();
 
   const {
-    state: { title, thumbnail, travelogueDays, selectedTagIDs, sortedTags, animationKey },
+    state: {
+      title,
+      thumbnail,
+      travelogueDays,
+      selectedTagIDs,
+      sortedTags,
+      multiSelectionTagAnimationKey,
+    },
     handler: {
       handleChangeTitle,
       handleChangeThumbnail,
@@ -101,7 +108,7 @@ const TravelogueRegisterPage = () => {
           >
             {sortedTags.map((tag, index) => (
               <Chip
-                key={`${tag.id}-${animationKey}`}
+                key={`${tag.id}-${multiSelectionTagAnimationKey}`}
                 index={index}
                 label={tag.tag}
                 isSelected={selectedTagIDs.includes(tag.id)}

@@ -9,8 +9,13 @@ const useTravelogueFormState = (transformDays: TravelTransformDays[]) => {
   const { title, handleChangeTitle } = useTravelogueTitle(transformDays);
   const { thumbnail, handleChangeThumbnail, handleResetThumbnail, handleInitializeThumbnail } =
     useTravelogueThumbnail();
-  const { selectedTagIDs, sortedTags, animationKey, handleClickTag, handleChangeSelectedTagIDs } =
-    useMultiSelectionTag();
+  const {
+    selectedTagIDs,
+    sortedTags,
+    multiSelectionTagAnimationKey,
+    handleClickTag,
+    handleChangeSelectedTagIDs,
+  } = useMultiSelectionTag();
   const {
     travelogueDays,
     handleAddDay,
@@ -30,7 +35,7 @@ const useTravelogueFormState = (transformDays: TravelTransformDays[]) => {
       travelogueDays,
       selectedTagIDs,
       sortedTags,
-      animationKey,
+      multiSelectionTagAnimationKey,
     },
     handler: {
       handleChangeTitle,

@@ -10,7 +10,11 @@ const useMultiSelectionTag = (key?: string) => {
   const [selectedTagIDs, setSelectedTagIDs] = useState<number[]>(
     key ? JSON.parse(localStorage.getItem(key) ?? "[]") : [],
   );
-  const [animationKey, setAnimationKey] = useState(0);
+  const [multiSelectionTagAnimationKey, setMultiSelectionTagAnimationKey] = useState(0);
+
+  const increaseMultiSelectionTagAnimationKey = () => {
+    setMultiSelectionTagAnimationKey((prev) => prev + 1);
+  };
 
   const handleChangeSelectedTagIDs = useCallback((newSelectedTagIDs: number[]) => {
     setSelectedTagIDs(newSelectedTagIDs);
@@ -36,7 +40,7 @@ const useMultiSelectionTag = (key?: string) => {
       if (isTagIDsSelectedMax && key) localStorage.setItem(key, JSON.stringify(prevSelectedTagIDs));
       if (isTagIDsSelectedMax) return prevSelectedTagIDs;
 
-      setAnimationKey((prev) => prev + 1);
+      increaseMultiSelectionTagAnimationKey();
 
       if (key) {
         localStorage.setItem(key, JSON.stringify(newSelectedTagIDs));
@@ -47,12 +51,20 @@ const useMultiSelectionTag = (key?: string) => {
     });
   };
 
+  const resetMultiSelectionTag = () => {
+    setSelectedTagIDs([]);
+    if (key) localStorage.setItem(key, JSON.stringify([]));
+
+    increaseMultiSelectionTagAnimationKey();
+  };
+
   return {
     selectedTagIDs,
     handleChangeSelectedTagIDs,
     sortedTags: createSortedTags(),
     handleClickTag,
-    animationKey,
+    multiSelectionTagAnimationKey,
+    resetMultiSelectionTag,
   };
 };