[Feature] - 마이페이지 좋아요 탭 및 검색 창 국가 탭 기능 구현 (#556)

* refactor(MyPage): 프로필 이미지 수정 모달 text 변경 * feat(TravelogueList): 여행기 검색 나라 탭 추가 * refactor(Tab): 스타일링 수정 * refactor(MyTravelogue): 불필요한 스타일 제거 및 일관성을 위하여 게시일 텍스트 제거 * feat(useInfiniteMyLikes): 훅 기능 구현 * feat(MyLikes): 좋아요 탭 UI 구현 * refactor: 좋아요 버튼 클릭시 마이페이지 좋아요 무효화 하도록 수정 * refactor(MyLikes): 마이페이지텝 컴포넌트 좋아요 탭에서도 재사용하도록 수정
woowacourse-teams · Oct 22, 2024 · 4a34949 · 4a34949
1 parent 23e234e
commit 4a34949
Show file tree

Hide file tree

Showing 18 changed files with 268 additions and 24 deletions.
diff --git a/frontend/src/components/common/Tab/Tab.styled.ts b/frontend/src/components/common/Tab/Tab.styled.ts
@@ -19,7 +19,7 @@ export const TabItem = styled.li<{ isSelected: boolean; $tabCount: number }>`
   justify-content: center;
   align-items: center;
 
-  padding: ${({ theme }) => theme.spacing.s} ${({ theme }) => theme.spacing.l};
+  padding: ${({ theme }) => theme.spacing.s};
   border-bottom: 2px solid
     ${({ isSelected, theme }) => (isSelected ? `${theme.colors.primary}` : "transparent")};
 

diff --git a/frontend/src/components/pages/my/MyLikes/MyLikes.styled.ts b/frontend/src/components/pages/my/MyLikes/MyLikes.styled.ts
@@ -0,0 +1,45 @@
+import styled from "@emotion/styled";
+
+export const Layout = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: ${(props) => props.theme.spacing.m};
+`;
+
+export const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.m};
+
+  width: 100%;
+  padding: 0 ${(props) => props.theme.spacing.l};
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: ${(props) => props.theme.spacing.s};
+`;
+
+export const DetailContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.m};
+
+  width: 100%;
+`;
+
+export const BoxButton = styled.button`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.m};
+  justify-content: flex-start;
+  align-items: center;
+
+  width: 100%;
+  padding: ${(props) => props.theme.spacing.m};
+  border: 1px solid ${(props) => props.theme.colors.border};
+  border-radius: 10px;
+`;
diff --git a/frontend/src/components/pages/my/MyLikes/MyLikes.tsx b/frontend/src/components/pages/my/MyLikes/MyLikes.tsx
@@ -0,0 +1,102 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { css } from "@emotion/react";
+
+import type { UserResponse } from "@type/domain/user";
+
+import useInfiniteMyLikes from "@queries/useInfiniteMyLikes";
+
+import { AvatarCircle, Text } from "@components/common";
+import MyPageTabContentSkeleton from "@components/pages/my/MyPageTabContentSkeleton/MyPageTabContentSkeleton";
+
+import useIntersectionObserver from "@hooks/useIntersectionObserver";
+
+import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
+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 {
+  userData: UserResponse;
+}
+
+const MyLikes = ({ userData }: MyLikesProps) => {
+  const { myLikes, fetchNextPage, status, isPaused, error } = useInfiniteMyLikes(userData);
+  const { lastElementRef } = useIntersectionObserver(fetchNextPage);
+
+  const navigate = useNavigate();
+
+  const handleClickTravelogue = (id: string) => {
+    navigate(ROUTE_PATHS_MAP.travelogue(Number(id)));
+  };
+
+  const handleClickIconButton = () => {
+    navigate(ROUTE_PATHS_MAP.root);
+  };
+
+  useEffect(() => {
+    if (isPaused) alert(ERROR_MESSAGE_MAP.network);
+  }, [isPaused]);
+
+  if (status === "pending") return <MyPageTabContentSkeleton />;
+
+  if (error) alert(error.message);
+
+  return (
+    <>
+      <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="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>
+        )}
+      />
+
+      <div
+        ref={lastElementRef}
+        css={css`
+          height: 1px;
+        `}
+      />
+    </>
+  );
+};
+
+export default MyLikes;
diff --git a/frontend/src/components/pages/my/MyPage.styled.ts b/frontend/src/components/pages/my/MyPage.styled.ts
@@ -10,7 +10,7 @@ export const Layout = styled.div`
   gap: ${(props) => props.theme.spacing.xl};
 
   width: 100%;
-  padding: ${(props) => props.theme.spacing.l};
+  padding: ${(props) => props.theme.spacing.l} 0;
 `;
 
 export const TabContentContainer = styled.div`
@@ -34,6 +34,7 @@ export const ProfileContainer = styled.div`
   gap: ${({ theme }) => theme.spacing.m};
 
   width: 100%;
+  padding: 0 ${(props) => props.theme.spacing.l};
 `;
 
 export const ProfileEditButtonContainer = styled.div`

diff --git a/frontend/src/components/pages/my/MyPageTabContent/MyPageTabContent.styled.ts b/frontend/src/components/pages/my/MyPageTabContent/MyPageTabContent.styled.ts
@@ -15,8 +15,10 @@ export const Container = styled.div`
 export const List = styled.ul`
   display: flex;
   flex-direction: column;
-  width: 100%;
   gap: ${(props) => props.theme.spacing.m};
+
+  width: 100%;
+  padding: 0 ${(props) => props.theme.spacing.l};
 `;
 
 export const ColorButtonStyle = css`
@@ -37,6 +39,7 @@ export const BoxButton = styled.button`
   gap: ${(props) => props.theme.spacing.m};
   justify-content: flex-start;
   align-items: center;
+
   width: 100%;
   padding: ${(props) => props.theme.spacing.m};
   border: 1px solid ${(props) => props.theme.colors.border};

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,

diff --git a/frontend/src/components/pages/my/MyTravelogues/MyTravelogues.styled.ts b/frontend/src/components/pages/my/MyTravelogues/MyTravelogues.styled.ts
@@ -14,10 +14,3 @@ export const Container = styled.div`
   align-items: flex-start;
   gap: ${(props) => props.theme.spacing.s};
 `;
-
-export const TraveloguesList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: ${(props) => props.theme.spacing.m};
-`;
diff --git a/frontend/src/components/pages/my/MyTravelogues/MyTravelogues.tsx b/frontend/src/components/pages/my/MyTravelogues/MyTravelogues.tsx
@@ -71,7 +71,7 @@ const MyTravelogues = ({ userData }: MyTraveloguesProps) => {
                   color: ${theme.colors.text.secondary};
                 `}
               >
-                게시일 {createdAt}
+                {createdAt}
               </Text>
             </S.Container>
           </S.Layout>

diff --git a/frontend/src/components/pages/my/constants.ts b/frontend/src/components/pages/my/constants.ts
@@ -1,11 +1,13 @@
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 
+import MyLikes from "./MyLikes/MyLikes";
 import MyTravelPlans from "./MyTravelPlans/MyTravelPlans";
 import MyTravelogues from "./MyTravelogues/MyTravelogues";
 
 export const TAB_CONTENT = [
   { label: "✈️ 내 여행 계획", component: MyTravelPlans },
   { label: "📝 내 여행기", component: MyTravelogues },
+  { label: "❤️ 좋아요", component: MyLikes },
 ] as const;
 
 export const IGNORED_ERROR_MESSAGES = [ERROR_MESSAGE_MAP.api.login, "Network Error"];
diff --git a/frontend/src/components/pages/search/TravelogueList/EmptySearchResult.tsx b/frontend/src/components/pages/search/TravelogueList/EmptySearchResult.tsx
@@ -0,0 +1,22 @@
+import { SearchFallback, Text } from "@components/common";
+
+import * as S from "./TravelogueList.styled";
+
+interface EmptySearchResultProps {
+  keyword: string | undefined;
+}
+
+const EmptySearchResult = ({ keyword }: EmptySearchResultProps) => {
+  return (
+    <S.Layout>
+      {keyword && (
+        <Text css={S.searchResultTextStyle} textType="title">{`"${keyword}" 검색 결과`}</Text>
+      )}
+      <S.SearchFallbackWrapper>
+        <SearchFallback title="휑" text="검색 결과가 없어요." />
+      </S.SearchFallbackWrapper>
+    </S.Layout>
+  );
+};
+
+export default EmptySearchResult;
diff --git a/frontend/src/components/pages/search/TravelogueList/TravelogueList.tsx b/frontend/src/components/pages/search/TravelogueList/TravelogueList.tsx
@@ -4,14 +4,15 @@ import type { SearchType } from "@type/domain/travelogue";
 
 import useInfiniteSearchTravelogues from "@queries/useInfiniteSearchTravelogues";
 
-import { SearchFallback, Text } from "@components/common";
+import { Text } from "@components/common";
 import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard";
 import TravelogueCardSkeleton from "@components/pages/main/TravelogueCard/skeleton/TravelogueCardSkeleton";
 
 import useIntersectionObserver from "@hooks/useIntersectionObserver";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 
+import EmptySearchResult from "./EmptySearchResult";
 import * as S from "./TravelogueList.styled";
 
 const SKELETON_COUNT = 5;
@@ -29,22 +30,13 @@ const TravelogueList = ({ keyword, searchType }: TravelogueListProps) => {
   const { lastElementRef } = useIntersectionObserver(fetchNextPage);
 
   if (travelogues.length === 0 && status === "success") {
-    return (
-      <S.Layout>
-        {keyword && (
-          <Text css={S.searchResultTextStyle} textType="title">{`"${keyword}" 검색 결과`}</Text>
-        )}
-        <S.SearchFallbackWrapper>
-          <SearchFallback title="휑" text="검색 결과가 없어요." />
-        </S.SearchFallbackWrapper>
-      </S.Layout>
-    );
+    return <EmptySearchResult keyword={keyword} />;
   }
 
   if (status === "error") {
     error && alert(error.message);
 
-    return <SearchFallback title="휑" text="검색 결과가 없어요." />;
+    return <EmptySearchResult keyword={keyword} />;
   }
 
   if (isPaused) alert(ERROR_MESSAGE_MAP.network);

diff --git a/frontend/src/components/pages/search/constants.ts b/frontend/src/components/pages/search/constants.ts
@@ -1,4 +1,5 @@
 export const TAB_CONTENT = [
   { label: "제목", searchType: "TITLE" },
   { label: "작성자", searchType: "AUTHOR" },
+  { label: "나라", searchType: "COUNTRY" },
 ] as const;
diff --git a/frontend/src/constants/endpoint.ts b/frontend/src/constants/endpoint.ts
@@ -12,6 +12,7 @@ export const API_ENDPOINT_MAP = {
   profile: "/member/me/profile",
   myTravelogues: "/member/me/travelogues",
   myTravelPlans: "/member/me/travel-plans",
+  myLikes: "/member/me/likes",
   searchTravelogues: "/travelogues/search",
   reissueToken: "/login/reissue-token",
   tags: "/tags",

diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts
@@ -26,6 +26,7 @@ export const QUERY_KEYS_MAP = {
       selectedSortingOption,
       selectedTravelPeriodOption,
     ],
+    likes: () => [...QUERY_KEYS_MAP.travelogue.all, "likes"],
   },
   travelPlan: {
     all: ["travel-plans"],

diff --git a/frontend/src/queries/useDeleteUpdateHeart.ts b/frontend/src/queries/useDeleteUpdateHeart.ts
@@ -25,6 +25,10 @@ export const useDeleteUpdateHeart = () => {
       queryClient.invalidateQueries({
         queryKey: QUERY_KEYS_MAP.travelogue.all,
       });
+      queryClient.invalidateQueries({
+        queryKey: QUERY_KEYS_MAP.travelogue.likes(),
+        refetchType: "inactive",
+      });
     },
     onError: (error) => {
       if (error instanceof ApiError && error.message === ERROR_MESSAGE_MAP.api.login) {