수환 3차QA

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@sentry/nextjs": "^8.34.0",
     "@stomp/stompjs": "^7.0.0",
-    "@tanstack/react-query": "^5.51.11",
+    "@tanstack/react-query": "^5.62.10",
     "axios": "^1.7.2",
     "draft-js": "^0.11.7",
     "ffmpeg-static": "^5.2.0",

src/app/main/_components/DaedLineGather/index.tsx → src/app/main/_components/DeadLineGather/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable indent */
+'use client';
 import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css'; // Swiper 스타일
@@ -27,6 +28,7 @@ interface IMeetingProps {
 
 interface DeadLineGatherProps {
   meetingList: IMeetingProps[] | undefined;
+  refetch: () => void;
 }
 
 export default function DeadLineGather({ meetingList }: DeadLineGatherProps) {
@@ -56,8 +58,7 @@ export default function DeadLineGather({ meetingList }: DeadLineGatherProps) {
 
     if (timeDiff < 60 * 1000) return `1분 후 마감`; // 1분 미만
     if (timeDiff < 60 * 60 * 1000) return `${minutesLeft}분 후 마감`; // 1시간 미만
-    if (timeDiff < 24 * 60 * 60 * 1000)
-      return `${hoursLeft}시간 ${minutesLeft > 0 ? `${minutesLeft}분` : ''} 후 마감`; // 하루 미만
+    if (timeDiff < 24 * 60 * 60 * 1000) return `${hoursLeft}시간 후 마감`; // 하루 미만
     return `${daysLeft}일 ${hoursLeft > 0 ? `${hoursLeft}시간` : ''} 후 마감`; // 하루 이상
   };
 
@@ -93,10 +94,6 @@ export default function DeadLineGather({ meetingList }: DeadLineGatherProps) {
           />
         </Link>
       </div>
-      {/* <div className={styles.lineTitle}>
-        <p>추리게임</p>
-      </div> */}
-
       <div className={styles.sliderContainer}>
         {Array.isArray(filteredMeetingList) &&
         filteredMeetingList.length > 0 ? (
@@ -144,6 +141,10 @@ export default function DeadLineGather({ meetingList }: DeadLineGatherProps) {
                           width={224}
                           height={224}
                           unoptimized={true}
+                          onError={e => {
+                            e.currentTarget.src =
+                              '/assets/images/emptyThumbnail.png';
+                          }}
                         />
                       </span>
                     </Link>

src/app/main/_components/Header/Header.module.scss

@@ -168,7 +168,7 @@
   }
 
   .right {
-    width: 100%;
+    // width: 100%;
     justify-content: end;
     .headerMyapgeButton {
       width: 28px;

src/app/main/_components/Header/Header.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import styles from './Header.module.scss';
 import Image from 'next/image';
 import Link from 'next/link';
+// import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { usePathname, useRouter } from 'next/navigation';
 import { getLikeList, getPersonalInfo } from '@/api/apis/mypageApis';
 import { getAlrmList } from '@/api/apis/headerApis';
@@ -25,6 +26,7 @@ interface INotification {
 }
 
 export default function Header() {
+  // const queryClient = useQueryClient();
   const [info, setInfo] = useState<IUserProfile | null>(null);
   const [loggedIn, setLoggedIn] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
@@ -70,6 +72,10 @@ export default function Header() {
 
     fetchGetLikeList();
   }, []); // Empty dependency array ensures this runs only once when the component mounts
+  // // 찜 리스트를 가져오는 Query
+  // const { data: likeList, isLoading } = useQuery(['likeList'], getLikeList, {
+  //   staleTime: 1000 * 60 * 5, // 5분 동안 데이터 유지
+  // });
 
   useEffect(() => {
     const token = localStorage.getItem('accessToken');

src/app/main/_components/MainNav/MainNav.module.scss

@@ -45,11 +45,11 @@
 }
 
 // 430px 이하 화면에 대한 반응형 스타일 추가
-@media (max-width: 430px) {
+@media (max-width: 540px) {
   .mainNav {
     flex-direction: column;
     width: 90%;
-    margin-top: 20px;
+    margin-top: 50px;
     padding: 0px;
 
     .mainNavContent {

src/app/main/_components/gameRank/gameRank.module.scss

@@ -43,15 +43,16 @@
       width: 20%;
       height: 125px;
       display: block;
-      padding: 10px;
+      padding: 5px;
       box-sizing: border-box;
       border: 1px solid #ddd;
-      border-radius: 5px;
+      border-radius: 3px;
 
       img {
         width: 100%;
         height: 100%;
         display: block;
+        background-size: contain;
       }
     }
 
@@ -71,7 +72,7 @@
       .name {
         display: block;
         width: 70%;
-        font-size: 22px;
+        font-size: 20px;
         font-weight: bold;
         line-clamp: 2;
         -webkit-line-clamp: 2;

src/app/main/_components/gameRank/index.tsx

@@ -62,9 +62,13 @@ export default function GameRank() {
                     // objectFit="cover"
                     width={125}
                     height={125}
-                    src={`https://${cloud}/${e.thumbnail}`}
+                    src={`https://${cloud}/${e?.thumbnail}`}
                     alt="게임랭크 이미지"
                     unoptimized={true}
+                    onError={e => {
+                      e.currentTarget.src =
+                        '/assets/images/emptyGameThumbnail.png';
+                    }}
                   />
                 </div>
                 <div className={styles.info}>

src/app/main/_components/newGather/page.tsx → src/app/main/_components/newGather/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-
+/* eslint-disable indent */
 import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css'; // Swiper 스타일
@@ -10,7 +10,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import SaveGatheringButton from '@/components/common/SaveGatheringButton';
 
-interface IMeetingProps {
+interface IMeeting {
   id: number;
   title: string;
   city: string;
@@ -27,7 +27,8 @@ interface IMeetingProps {
 }
 
 interface NewGatherProps {
-  meetingList: IMeetingProps[] | undefined;
+  meetingList: IMeeting[] | undefined;
+  refetch: () => void;
 }
 
 export default function NewGather({ meetingList }: NewGatherProps) {
@@ -65,15 +66,10 @@ export default function NewGather({ meetingList }: NewGatherProps) {
           />
         </Link>
       </div>
-      {/* <div className={styles.lineTitle}>
-        <p>모임 목록</p>
-      </div> */}
-
       <div className={styles.sliderContainer}>
         <Swiper
           className={styles.genreList}
           modules={[Navigation]}
-          // navigation // 내비게이션 버튼 사용
           navigation={{
             nextEl: `.${styles.swiperButtonNext}`,
             prevEl: `.${styles.swiperButtonPrev}`,
@@ -103,6 +99,10 @@ export default function NewGather({ meetingList }: NewGatherProps) {
                       width={224}
                       height={224}
                       unoptimized={true}
+                      onError={e => {
+                        e.currentTarget.src =
+                          '/assets/images/emptyThumbnail.png';
+                      }}
                     />
                   </span>
                 </Link>

src/app/main/page.tsx

@@ -1,13 +1,13 @@
 'use client';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import RecommendCase from './_components/RecommendCase';
-import DeadLineGather from './_components/DaedLineGather';
+import DeadLineGather from './_components/DeadLineGather';
 import MainNav from './_components/MainNav/MainNav';
 import GameRank from './_components/gameRank';
 import styles from './main.module.scss';
 import { getMeetingList } from '@/api/apis/mypageApis';
 import { usePostWishList } from '@/api/queryHooks/wishList';
-import NewGather from './_components/newGather/page';
+import NewGather from './_components/newGather';
 import MainSearch from './_components/mainSearch';
 import AppInstallPrompt from '@/components/common/AppInstallPrompt';
 import { handleAllowNotification } from '@/service/notificationPermission';
@@ -16,9 +16,10 @@ import { getPersonalInfo } from '@/api/apis/mypageApis';
 import { app } from '@/service/initFirebase';
 import FCMDisabledPrompt from '@/components/common/FCMDisabledPrompt';
 import { useInApp } from '@/hooks/useInApp';
+import { useQuery } from '@tanstack/react-query';
 
 // Meeting 타입 정의
-interface IMeetingProps {
+interface IMeeting {
   id: number;
   title: string;
   city: string;
@@ -34,10 +35,12 @@ interface IMeetingProps {
   tags: string[];
 }
 
+// API 응답 타입
+interface IMeetingProps {
+  content: IMeeting[];
+}
+
 export default function Main() {
-  const [meetingList, setMeetingList] = useState<IMeetingProps[] | undefined>(
-    undefined
-  );
   const deadlineRef = useRef<HTMLDivElement>(null);
   const popularRef = useRef<HTMLDivElement>(null);
   const token = localStorage.getItem('accessToken');
@@ -81,17 +84,23 @@ export default function Main() {
       });
     }
   }, []);
-
-  useEffect(() => {
-    const fetchMeetingList = async () => {
+  const {
+    data: meetingListInfo,
+    // isLoading,
+    refetch,
+  } = useQuery<IMeetingProps | null>({
+    queryKey: ['meetingList'],
+    queryFn: async () => {
       try {
-        const res = await getMeetingList();
-        setMeetingList(res.data.content);
-      } catch (error) {}
-    };
-
-    fetchMeetingList();
-  }, []);
+        const response = await getMeetingList();
+        // console.log('API 응답:', response); // 응답 로깅
+        return response.data;
+      } catch (error) {
+        return null; // 에러 시 null 반환
+      }
+    },
+    staleTime: 5 * 60 * 1000, // 5분으로 설정 (밀리초 단위)
+  });
 
   const scrollToSection = (
     ref: React.RefObject<HTMLDivElement>,
@@ -137,11 +146,20 @@ export default function Main() {
             <RecommendCase />
           </div>
           <div className={styles.contentContainer} ref={popularRef}>
-            {/* <GenreGather meetingList={meetingList} /> */}
-            <NewGather meetingList={meetingList} />
+            {meetingListInfo?.content && (
+              <NewGather
+                meetingList={meetingListInfo.content}
+                refetch={refetch}
+              />
+            )}
           </div>
           <div className={styles.contentContainer} ref={deadlineRef}>
-            <DeadLineGather meetingList={meetingList} />
+            {meetingListInfo?.content && (
+              <DeadLineGather
+                meetingList={meetingListInfo.content}
+                refetch={refetch}
+              />
+            )}
           </div>
           <div className={styles.contentContainer}>
             <GameRank />