Merge pull request #583 from depromeet/develop

배포용 PR

src/apis/feed.ts

@@ -7,6 +7,8 @@ type GetFeedMeResponse = Array<FeedItemType>;
 
 type GetFeedByMemberIdResponse = Array<FeedBaseType>;
 
+export type FeedVisibilityType = 'ALL' | 'FOLLOWER' | 'NONE';
+
 export const FEED_API = {
   getFeedMe: async (): Promise<GetFeedMeResponse> => {
     const { data } = await apiInstance.get('/feed/me');
@@ -16,6 +18,10 @@ export const FEED_API = {
     const { data } = await apiInstance.get(`/feed/${memberId}`);
     return data;
   },
+  getFeedList: async (visibility: FeedVisibilityType): Promise<GetFeedMeResponse> => {
+    const { data } = await apiInstance.get('/feed', { params: { visibility } });
+    return data;
+  },
 };
 
 export const useFeedMe = (options?: UseQueryOptions<GetFeedMeResponse>) => {
@@ -33,3 +39,11 @@ export const useFeedByMemberId = (memberId: number, options?: UseQueryOptions<Ge
     queryFn: () => FEED_API.getFeed(memberId),
   });
 };
+
+export const useGetFeedList = (visibility: FeedVisibilityType, options?: UseQueryOptions<GetFeedMeResponse>) => {
+  return useQuery<GetFeedMeResponse>({
+    ...options,
+    queryKey: getQueryKey('feedList', { visibility }),
+    queryFn: () => FEED_API.getFeedList(visibility),
+  });
+};

src/apis/getQueryKey.ts

@@ -36,10 +36,15 @@ type QueryList = {
     missionId: string;
   };
   finishedMissions: undefined;
+
+  // feed
   feedMe: undefined;
   feed: {
     memberId: number;
   };
+  feedList: {
+    visibility: string;
+  };
 
   // reaction
   reactions: {

src/app/feed/FeedItem.tsx

@@ -54,7 +54,7 @@ function FeedItem({
           <p className={missionNameCss}>{name}</p>
           {remark && <p className={remarkCss}>{remark}</p>}
           <p className={captionCss}>
-            {sinceDay}일차 <div className={dotCss} /> {dayjs(startedAt).format('YYYY년 MM월 DD일')}
+            {sinceDay}일차 <span className={dotCss} /> {dayjs(startedAt).format('YYYY년 MM월 DD일')}
           </p>
         </div>
       </Link>
@@ -150,6 +150,7 @@ const captionCss = css({
 });
 
 const dotCss = css({
+  display: 'block',
   width: '2px',
   height: '2px',
   borderRadius: '50%',

src/app/feed/FeedList.tsx

@@ -1,12 +1,12 @@
 'use client';
-import { useFeedMe } from '@/apis/feed';
+
+import { type FeedItemType } from '@/apis/schema/feed';
 import FeedItem, { FeedSkeletonItem } from '@/app/feed/FeedItem';
 import Empty from '@/components/Empty/Empty';
 import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
 
-function FeedList() {
-  const { data } = useFeedMe();
+function FeedList({ data }: { data?: Array<FeedItemType> }) {
   if (!data)
     return (
       <ul className={feedListCss}>

src/app/feed/FeedSection.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import { type FeedVisibilityType, useGetFeedList } from '@/apis/feed';
+import FeedList from '@/app/feed/FeedList';
+import Tab from '@/components/Tab/Tab';
+import { useTab } from '@/components/Tab/Tab.hooks';
+import useShowGuide, { GUIDE_KEY } from '@/hooks/useShowGuide';
+import { css } from '@/styled-system/css';
+
+const FEED_TABS: { id: FeedVisibilityType; tabName: string }[] = [
+  {
+    id: 'ALL',
+    tabName: '전체',
+  },
+  {
+    id: 'FOLLOWER',
+    tabName: '팔로워',
+  },
+];
+
+function FeedSection() {
+  const tabProps = useTab(FEED_TABS, 'FOLLOWER');
+
+  const { data, isLoading } = useGetFeedList(tabProps.activeTab as FeedVisibilityType);
+  const feeds = data?.filter((feed) => feed.recordImageUrl); // 이미지 없는 경우가 있음. 나중에 리팩토링 + 서버와 이야기, FeedItem에 ErrorBoundary 적용해도 좋을 듯.
+
+  // NOTE: 초기에 팔로워의 피드가 없는 상태라면, 전체 피드로 변경
+  useEffect(() => {
+    if (!isLoading) {
+      if (feeds?.length === 0) {
+        tabProps.onTabClick(FEED_TABS[0]);
+      }
+    }
+  }, [isLoading]);
+
+  useShowGuide(GUIDE_KEY.ALL_FEED_OPEN, 'appBar');
+
+  return (
+    <div>
+      <div className={tabWrapperCss}>
+        <Tab {...tabProps} />
+      </div>
+      <FeedList data={feeds} />
+    </div>
+  );
+}
+
+export default FeedSection;
+
+const tabWrapperCss = css({
+  padding: '16px 16px 4px 16px',
+});

src/app/feed/page.tsx

@@ -1,4 +1,4 @@
-import FeedList from '@/app/feed/FeedList';
+import FeedSection from '@/app/feed/FeedSection';
 import AppBar from '@/app/home/AppBar';
 import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
 import BottomDim from '@/components/BottomDim/BottomDim';
@@ -7,7 +7,7 @@ export default function FeedPage() {
   return (
     <>
       <AppBar />
-      <FeedList />
+      <FeedSection />
       <BottomDim type={'bottomDim2'} />
       <AppBarBottom />
     </>

src/hooks/useShowGuide.ts

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { type SnackBarOffset } from '@/components/SnackBar/SnackBar.types';
+import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
+
+export enum GUIDE_KEY {
+  ALL_FEED_OPEN = 'ALL_FEED_OPEN',
+}
+
+const GuideMessage: Record<GUIDE_KEY, string> = {
+  [GUIDE_KEY.ALL_FEED_OPEN]: '상단에 전체 피드 기능이 추가되었습니다. 확인해보세요!',
+};
+
+function useShowGuide(key: GUIDE_KEY, offset?: SnackBarOffset) {
+  const { triggerSnackBar } = useSnackBar();
+
+  const showGuide = () => {
+    triggerSnackBar({
+      message: GuideMessage[key],
+      offset,
+    });
+  };
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!key) return;
+    if (localStorage.getItem(key)) return;
+
+    showGuide();
+    localStorage.setItem(key, 'true');
+  }, []);
+}
+
+export default useShowGuide;