Merge pull request #123 from 2024WISCOM/feature/work-detail

🐛 Fix: id 값 파라미터 포함

src/App.jsx

@@ -45,7 +45,7 @@ function App() {
             <Route path="/" element={<Main />} />
             <Route path="/about" element={<About />} />
             <Route path="/work-list" element={<WorkList />} />
-            <Route path="/work-detail" element={<WorkDetail />} />
+            <Route path="/:id" element={<WorkDetail />} />  {/* id를 URL 파라미터로 사용 */}
             <Route path="/guestbook" element={<GuestBook />} />
             <Route path="/about-hidden" element={<HiddenAbout />} />
           </Routes>

src/components/workdetail/mobile/WorkIntroduce.jsx

@@ -42,7 +42,10 @@ export default function WorkIntroduce({ data }) {
       </W.WorkTitleWrapper>
       <W.ImageWrapper>
         <LeftButton position="top" onClick={handlePrevClick} />
-        <Image src={data.images[currentImageIndex].url} />
+          {/* 이미지가 있는 경우에만 Image 컴포넌트를 렌더링 */}
+            {data.images && data.images[currentImageIndex] && (
+              <Image src={data.images[currentImageIndex].url} />
+          )}
         <RightButton style={{padding: "0px"}} position="top" onClick={handleNextClick} />
       </W.ImageWrapper>
       <W.DeveloperWrapper>

src/components/worklist/WorkItem.jsx

@@ -33,7 +33,7 @@ const WorkItem = React.memo(function ({
 
   const handleItemClick = () => {
     if (isCenterSlide) {
-      navigate(`/work-detail`, { state: { category: type, id } });
+      navigate(`/${id}`, { state: { category: type } });
       console.log(`type: ${type}, id: ${id}`);
     }
   };

src/pages/WorkDetail.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams  } from 'react-router-dom';
 import axios from 'axios';
 import cdCaseImage from '../assets/img/detail_cd_case.svg';
 import RightButton from '../components/workdetail/button/RightButton';
@@ -17,8 +17,9 @@ export default function WorkDetail() {
   const imageContainerRef = useRef(null);
   const navigate = useNavigate();
 
+  const { id } = useParams();  // URL의 id 파라미터를 받아옴
   const location = useLocation();
-  const { category, id } = location.state || { category: 'big_data', id: 2 };
+  const { category = 'all' } = location.state || {};
   console.log(category);
 
   // API 데이터 fetch
@@ -79,25 +80,27 @@ export default function WorkDetail() {
     return <div>Loading...</div>;
   }
 
-  // 이전 버튼 클릭 핸들러
-  const handlePrevClick = (shouldScroll = true) => {
-    if (data && data.prev) {
-      if (shouldScroll) {
-        window.scrollTo(0, 0); // 스크롤 동작
-      }
-      navigate(`/work-detail`, { state: { category, id: data.prev } }); // 페이지 이동
-    } else {
-      console.error('이전 항목을 찾을 수 없습니다.');
+// 이전 버튼 클릭 핸들러
+const handlePrevClick = (shouldScroll = true) => {
+  if (data && data.prev) {
+    if (shouldScroll) {
+      window.scrollTo(0, 0); // 스크롤 동작
     }
-  };
+    navigate(`/${data.prev}`, { state: { category } }); // 이전 항목의 id를 경로에 포함하여 페이지 이동
+  } else {
+    console.error('이전 항목을 찾을 수 없습니다.');
+  }
+};
 
   // 다음 버튼 클릭 핸들러
   const handleNextClick = (shouldScroll = true) => {
     if (data && data.next) {
       if (shouldScroll) {
         window.scrollTo(0, 0); // 스크롤 동작
       }
-      navigate(`/work-detail`, { state: { category, id: data.next } }); // 페이지 이동
+      navigate(`/${data.next}`, { state: { category } }); // 다음 항목의 id를 경로에 포함하여 페이지 이동
+    } else {
+      console.error('다음 항목을 찾을 수 없습니다.');
     }
   };