feat : timeline에 reaction추가 public설정 (#183)

* feat : public설정 및 이모티콘 크기 조절 * feat : public설정 및 에러수정 완료, reaction은 테스트중
prgrms-fe-devcourse · Nov 5, 2024 · d9ed7dc · d9ed7dc
1 parent f91d1f4
commit d9ed7dc
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 15 deletions.
diff --git a/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx b/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx
@@ -1,3 +1,4 @@
+import ReactionSelector from '@/widgets/reaction-selector/ui/ReactionSelector';
 import {
     Wrapper,
     Top,
@@ -44,6 +45,8 @@ const ContentBox: React.FC<ContentBoxProps> = ({
     } else {
         timeAgo = `${diffInMinutes}분전`;
     }
+    const token =
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Im1pbmpvb24iLCJlbWFpbCI6ImFubmF3YTZAbmF2ZXIuY29tLmNvbSIsImlhdCI6MTczMDc5MzYwMywiZXhwIjoxNzMwODA0NDAzfQ.Rr6DsZb7MPkOeDVelLpkZxGDB0FRDfFVBryrQliuN8g';
 
     return (
         <Wrapper>
@@ -54,7 +57,15 @@ const ContentBox: React.FC<ContentBoxProps> = ({
             <Paragraph>{content}</Paragraph>
             <Bottom>
                 <Time>{timeAgo}</Time>
-                <Reaction>{id}</Reaction>
+                <Reaction>
+                    <ReactionSelector
+                        diaryId={id}
+                        userEmail="annawa6@naver.com.com"
+                        isHorizontal={false}
+                        isAddBtnVisible={false}
+                        token={token}
+                    />
+                </Reaction>
             </Bottom>
             <Emotion imgPath={getEmoticonPath(emotion)} />
         </Wrapper>

diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
@@ -14,6 +14,7 @@ const MainPage = () => {
                     titleTarget="다른 사용자들"
                     sort="lastest"
                     email=""
+                    ispublic="1"
                 />
             </TimeLineListWrapper>
             <MoveTopButton />

diff --git a/src/pages/MyDiaryListPage/index.tsx b/src/pages/MyDiaryListPage/index.tsx
@@ -37,6 +37,7 @@ const MyDiaryListPage = () => {
                     titleTarget="나"
                     sort={sortState}
                     email={email}
+                    ispublic=""
                 />
             </MyDiaryListWrapper>
         </div>

diff --git a/src/shared/ReactionButton/ui/ReactionButton.tsx b/src/shared/ReactionButton/ui/ReactionButton.tsx
@@ -17,7 +17,7 @@ interface ReactionButtonProps {
 export const ReactionButton = ({
     emotion,
     reactionCnt,
-    isHorizontal = true,
+    isHorizontal,
     isClicked,
     onClick
 }: ReactionButtonProps) => {

diff --git a/src/shared/assets/emoji/emoji_satisfied.svg b/src/shared/assets/emoji/emoji_satisfied.svg
diff --git a/src/shared/hooks/useInfiniteFetch.tsx b/src/shared/hooks/useInfiniteFetch.tsx
@@ -1,8 +1,13 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-const fetchTimeline = async (page: number, sort: string, email: string) => {
+const fetchTimeline = async (
+    page: number,
+    sort: string,
+    email: string,
+    ispublic: string
+) => {
     const response = await fetch(
-        `https://td3axvf8x7.execute-api.ap-northeast-2.amazonaws.com/moodi/diary?limit=10&sort_by=${sort}&page=${page}&user_email=${email}`
+        `https://td3axvf8x7.execute-api.ap-northeast-2.amazonaws.com/moodi/diary?limit=10&sort_by=${sort}&page=${page}&user_email=${email}&is_public=${ispublic}`
     );
     if (!response.ok) {
         throw new Error('Network response was not ok');
@@ -11,11 +16,15 @@ const fetchTimeline = async (page: number, sort: string, email: string) => {
     return data;
 };
 
-export const useInfiniteFetch = (sort: string, email: string) => {
+export const useInfiniteFetch = (
+    sort: string,
+    email: string,
+    ispublic: string
+) => {
     return useInfiniteQuery({
-        queryKey: ['timeline', sort, email],
+        queryKey: ['timeline', sort, email, ispublic],
         queryFn: ({ pageParam = 1 }) => {
-            return fetchTimeline(Number(pageParam), sort, email);
+            return fetchTimeline(Number(pageParam), sort, email, ispublic);
         },
         getNextPageParam: (last) => {
             if (last.page < last.totalPages) {

diff --git a/src/widgets/timeline-container/TimelineContainer.tsx b/src/widgets/timeline-container/TimelineContainer.tsx
@@ -16,22 +16,26 @@ interface TimelineContainerProps {
     titleTarget: string;
     sort: string;
     email: string;
+    ispublic: string;
 }
 
 const TimelineContainer: React.FC<TimelineContainerProps> = ({
     titleTarget,
     sort,
-    email
+    email,
+    ispublic
 }) => {
     const queryClient = useQueryClient();
     const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage } =
-        useInfiniteFetch(sort, email);
+        useInfiniteFetch(sort, email, ispublic);
 
     const { ref, inView } = useInView();
 
     // sort가 변경될 때 쿼리 캐시를 명시적으로 초기화
     useEffect(() => {
-        queryClient.resetQueries({ queryKey: ['timeline', sort, email] });
+        queryClient.resetQueries({
+            queryKey: ['timeline', sort, email, ispublic]
+        });
     }, [sort, email, queryClient]);
 
     useEffect(() => {