Merge pull request #173 from KNU-HAEDAL/Feat/issue-#170

챌린지 상세보기 페이지 이동 기능 구현

src/apis/challenge-record/challenge.record.api.ts

@@ -12,7 +12,7 @@ export async function postVerification(
   id: number,
   image: File,
   content: string
-): Promise<ChallengeVerificationData> {
+): Promise<{ data: ChallengeVerificationData; status: number }> {
   const formData = new FormData();
   formData.append(
     'body',
@@ -25,7 +25,8 @@ export async function postVerification(
     formData
   );
   console.log('postVerification response: ', response.data);
-  return response.data;
+  // return response.data;
+  return { data: response.data, status: response.status };
 }
 
 // GET: /api/challenges/{challengeId}/record

src/pages/challenge-list/components/contents/index.tsx

@@ -9,6 +9,8 @@ type Props = {
   startDate: string;
   endDate: string;
   participantCount: number;
+  id: number;
+  onClick: (id: number) => void;
 };
 
 const Contents = ({
@@ -17,11 +19,14 @@ const Contents = ({
   startDate,
   endDate,
   participantCount,
+  onClick,
+  id,
 }: Props) => {
   const [isClicked, setIsClicked] = useState(false);
 
   const handleBoxClick = () => {
     setIsClicked(!isClicked);
+    onClick(id);
   };
 
   const date = `${startDate} ~ ${endDate}`;

src/pages/challenge-list/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import Contents from './components/contents';
 import { useGetChallengeList } from '@/apis/challenge-list/getChallengeList.api';
@@ -23,6 +24,12 @@ const ChallengeList = () => {
   const [allData, setAllData] = useState<Challenge[]>([]);
   const [page, setPage] = useState(0);
 
+  const navigate = useNavigate();
+
+  const handleNavigate = (id: number) => {
+    navigate(`/challenge/${id}`);
+  };
+
   const categoryList = useMemo(
     () => [
       { label: '에코', data: 'ECHO' },
@@ -102,6 +109,8 @@ const ChallengeList = () => {
                     startDate={challenge.startDate}
                     endDate={challenge.endDate}
                     participantCount={challenge.participantCount}
+                    onClick={() => handleNavigate(challenge.id)}
+                    id={challenge.id}
                   />
                 ))}
               </>

src/pages/shorts/components/info/index.tsx

@@ -10,9 +10,11 @@ type Info = {
 
 type Props = {
   info?: Info;
+  onClick: (id: number) => void;
+  id: number;
 };
 
-const ShortsInfo = ({ info }: Props) => {
+const ShortsInfo = ({ info, id, onClick }: Props) => {
   return (
     <>
       <ShortsInfoLayout>
@@ -36,7 +38,7 @@ const ShortsInfo = ({ info }: Props) => {
                 : '정보 없음'}
             </Text>
           </Box>
-          <ShortsStartBox>
+          <ShortsStartBox onClick={() => onClick(id)}>
             <Image width='1rem' height='1.25rem' src={StartIcon} />
           </ShortsStartBox>
         </ShortsInfoTextBox>

src/pages/shorts/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import ShortsContents from './components/contents';
 import ShortsImage from './components/image';
@@ -13,6 +14,7 @@ import { Mousewheel, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 type Short = {
+  id: number;
   title: string;
   content: string;
   participantCount: number;
@@ -33,7 +35,8 @@ const Shorts = () => {
   const [allData, setAllData] = useState<Short[]>([]);
   const { data, isLoading } = useGetShorts(page, 20);
 
-  console.log(data);
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (data) {
       setAllData((prevData) => [...prevData, ...data.data.data]);
@@ -48,18 +51,25 @@ const Shorts = () => {
 
   const contentsData = shuffleArray(
     allData.map((item) => ({
+      id: item.id,
       title: item.title,
       content: item.content,
     }))
   );
 
+  const handleNavigate = (id: number) => {
+    navigate(`/challenge/${id}`);
+  };
+
   const infoData = shuffleArray(
     allData.map((item) => ({
       participantCount: item.participantCount,
       category: item.category,
+      id: item.id,
     }))
   );
 
+  console.log(data?.data.data);
   return (
     <>
       <TopBar type='Page' title='' backgroundColor='var(--color--green-06)' />
@@ -81,7 +91,11 @@ const Shorts = () => {
               <ShortsContents title={item.title} content={item.content} />
               <ShortsImage />
               {infoData && infoData[index] && (
-                <ShortsInfo info={infoData[index]} />
+                <ShortsInfo
+                  onClick={() => handleNavigate(infoData[index].id)}
+                  id={infoData[index].id}
+                  info={infoData[index]}
+                />
               )}
             </SwiperSlide>
           ))}