refactor(MyLikes): 마이페이지텝 컴포넌트 좋아요 탭에서도 재사용하도록 수정

woowacourse-teams · Oct 21, 2024 · 9c38e9c · 9c38e9c
1 parent 574fe3b
commit 9c38e9c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 34 deletions.
diff --git a/frontend/src/components/pages/my/MyLikes/MyLikes.tsx b/frontend/src/components/pages/my/MyLikes/MyLikes.tsx
@@ -17,6 +17,7 @@ import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import theme from "@styles/theme";
 
+import MyPageTabContent from "../MyPageTabContent/MyPageTabContent";
 import * as S from "./MyLikes.styled";
 
 interface MyLikesProps {
@@ -33,6 +34,10 @@ const MyLikes = ({ userData }: MyLikesProps) => {
     navigate(ROUTE_PATHS_MAP.travelogue(Number(id)));
   };
 
+  const handleClickIconButton = () => {
+    navigate(ROUTE_PATHS_MAP.root);
+  };
+
   useEffect(() => {
     if (isPaused) alert(ERROR_MESSAGE_MAP.network);
   }, [isPaused]);
@@ -43,44 +48,46 @@ const MyLikes = ({ userData }: MyLikesProps) => {
 
   return (
     <>
-      <S.List>
-        {myLikes.map(({ id, title, createdAt, thumbnailUrl, authorName }) => (
-          <S.BoxButton key={id}>
-            <S.Layout onClick={() => handleClickTravelogue(id)}>
-              <AvatarCircle size="medium" profileImageUrl={thumbnailUrl} />
-
-              <S.Container>
+      <MyPageTabContent
+        iconButtonType="search-icon"
+        iconButtonLabel="다른 여행기 구경하기"
+        onClickIconButton={handleClickIconButton}
+        contentDetail={myLikes}
+        renderItem={({ id, title, createdAt, thumbnailUrl, authorName }) => (
+          <S.Layout onClick={() => handleClickTravelogue(id)}>
+            <AvatarCircle size="medium" profileImageUrl={thumbnailUrl} />
+
+            <S.Container>
+              <Text
+                textType="body"
+                css={css`
+                  font-weight: 500;
+                `}
+              >
+                {title}
+              </Text>
+              <S.DetailContainer>
                 <Text
-                  textType="body"
+                  textType="detail"
                   css={css`
-                    font-weight: 500;
+                    color: ${theme.colors.text.secondary};
                   `}
                 >
-                  {title}
+                  {authorName}
                 </Text>
-                <S.DetailContainer>
-                  <Text
-                    textType="detail"
-                    css={css`
-                      color: ${theme.colors.text.secondary};
-                    `}
-                  >
-                    {authorName}
-                  </Text>
-                  <Text
-                    textType="detail"
-                    css={css`
-                      color: ${theme.colors.text.secondary};
-                    `}
-                  >
-                    {createdAt}
-                  </Text>
-                </S.DetailContainer>
-              </S.Container>
-            </S.Layout>
-          </S.BoxButton>
-        ))}
-      </S.List>
+                <Text
+                  textType="detail"
+                  css={css`
+                    color: ${theme.colors.text.secondary};
+                  `}
+                >
+                  {createdAt}
+                </Text>
+              </S.DetailContainer>
+            </S.Container>
+          </S.Layout>
+        )}
+      />
 
       <div
         ref={lastElementRef}

diff --git a/frontend/src/components/pages/my/MyPageTabContent/MyPageTabContent.tsx b/frontend/src/components/pages/my/MyPageTabContent/MyPageTabContent.tsx
@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 
 import { IconButton } from "@components/common";
+import SVG_ICONS_MAP from "@components/common/Icon/svg-icons.json";
 
 import { SEMANTIC_COLORS } from "@styles/tokens";
 
@@ -9,10 +10,12 @@ import * as S from "./MyPageTabContent.styled";
 const ICON_BUTTON_TEXT = {
   ADD_TRAVEL_PLAN: "새 여행 계획 추가하기",
   ADD_TRAVELOGUE: "새 여행기 추가하기",
+  GO_ROOT_PAGE: "다른 여행기 구경하기",
 } as const;
 
 interface MyPageTabContentProps<T extends { id: string }> {
   iconButtonLabel: (typeof ICON_BUTTON_TEXT)[keyof typeof ICON_BUTTON_TEXT];
+  iconButtonType?: keyof typeof SVG_ICONS_MAP;
   onClickIconButton: () => void;
   contentDetail: T[];
   renderItem: (item: T) => React.ReactNode;
@@ -21,6 +24,7 @@ interface MyPageTabContentProps<T extends { id: string }> {
 const MyPageTabContent = <T extends { id: string }>({
   contentDetail,
   iconButtonLabel,
+  iconButtonType = "plus",
   onClickIconButton,
   renderItem,
 }: React.PropsWithChildren<MyPageTabContentProps<T>>) => {
@@ -29,7 +33,7 @@ const MyPageTabContent = <T extends { id: string }>({
       <IconButton
         size="16"
         position="left"
-        iconType="plus"
+        iconType={iconButtonType}
         color={SEMANTIC_COLORS.primary}
         css={[
           S.ColorButtonStyle,