Merge pull request #50 from Fashion-Cloud/refact/i45

refact: 게시글 상세 컴포넌트 수정
Fashion-Cloud · Oct 29, 2023 · 6eda5b7 · 6eda5b7
2 parents db02678 + b241c0e
commit 6eda5b7
Show file tree

Hide file tree

Showing 10 changed files with 309 additions and 281 deletions.
diff --git a/src/api/hook/LookbookHook.ts b/src/api/hook/LookbookHook.ts
@@ -1,9 +1,10 @@
+import {useRouter} from "next/router";
 import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
 
 import useUserIdStore from '../../utils/zustand/user/UserIdStore';
 import { BookService } from '../service/LookbookService';
 
+
 export const useFindAllBooks = () => {
   const { userId } = useUserIdStore();
 
@@ -16,10 +17,11 @@ export const useFindAllBooks = () => {
 };
 
 export const useFindSomeBooks = () => {
-  const { id } = useParams();
+  const router = useRouter();
+  const { id } = router.query;
 
   return useQuery({
-    queryFn: () => BookService.getSomeBooks({ id }),
+    queryFn: () => BookService.getSomeBooks({ id: Number(id) }),
     queryKey: ['books'],
     enabled: !!id,
     onError: () => alert('상세 룩북 정보를 불러오는데 실패했습니다.'),

diff --git a/src/api/service/LookbookService.ts b/src/api/service/LookbookService.ts
@@ -3,11 +3,11 @@ import apiV1Instance from '../api-instance';
 export class BookService {
   //전체 룩북
   public static getAllBooks = async (options: { userId?: number }) => {
-    return apiV1Instance.get(`/lookbooks/users/${options.userId}`);
+    return apiV1Instance.get(`/lookbooks/me`);
   };
 
   // 선택 룩북
-  public static getSomeBooks = async (options: { id?: string }) => {
+  public static getSomeBooks = async (options: { id?: number }) => {
     return apiV1Instance.get(`/lookbooks/${options.id}`);
   };
 }
diff --git a/src/components/AddFashion/AddFashion/AddImage.tsx b/src/components/AddFashion/AddFashion/AddImage.tsx
@@ -68,7 +68,7 @@ export default function AddImage({ getImageData }: ImageProps) {
 
       try {
         await axios
-          .post('/api/v1/images', formData, {
+          .post(`${process.env.NEXT_PUBLIC_API}/images`, formData, {
             headers: {
               'Content-Type': 'multipart/form-data',
               Authorization: `Bearer ${token}`,

diff --git a/src/components/Lookbook/LookbookDetailLayout/LookbookListBox.tsx b/src/components/Lookbook/LookbookDetailLayout/LookbookListBox.tsx
@@ -12,7 +12,6 @@ import {
   Toolbar,
   Typography,
 } from '@mui/material';
-// import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useFindSomeBooks } from 'src/api/hook/LookbookHook';
 
@@ -37,9 +36,10 @@ export default function LookbookListBox() {
 
   useEffect(() => {
     if (someLookBookData?.data) {
-      setLookbook(someLookBookData?.data.data);
+      setLookbook(someLookBookData?.data.data.posts);
     }
-  }, []);
+    console.log('someLookBookData?.data: ', someLookBookData?.data);
+  }, [someLookBookData]);
 
   const handlePrev = () => {
     if (currentImageIndex > 0) {
@@ -91,7 +91,7 @@ export default function LookbookListBox() {
                       left: 0,
                       width: '100%',
                       height: '100px',
-                      bgcolor: 'transparent',
+                      backgroundColor: 'transparent',
                       backgroundImage:
                         'linear-gradient(to top, rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0))', // Apply gradient
                       color: 'white',
@@ -134,7 +134,7 @@ export default function LookbookListBox() {
           }}
         >
           <WbSunnyIcon />
-          {lookbook.length > 0 && (
+          {lookbook?.length > 0 && (
             <Typography variant="h6" sx={{ marginLeft: 2 }}>
               °C
             </Typography>
@@ -147,7 +147,7 @@ export default function LookbookListBox() {
             alignItems: 'center',
           }}
         >
-          {lookbook.length > 0 && (
+          {lookbook?.length > 0 && (
             <img
               src={lookbook[currentImageIndex].image}
               alt={lookbook[currentImageIndex].title}
@@ -173,7 +173,7 @@ export default function LookbookListBox() {
           />
           <IconButton
             onClick={handleNext}
-            disabled={currentImageIndex === lookbook.length - 1}
+            disabled={currentImageIndex === lookbook?.length - 1}
           >
             <ArrowForwardIosIcon />
           </IconButton>

diff --git a/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx b/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx
@@ -55,7 +55,7 @@ export default function AddLookbookButton() {
 
     try {
       await axios
-        .post('/api/v1/lookbooks', {
+        .post(`${process.env.NEXT_PUBLIC_API}/lookbooks`, {
           title: title,
           image: postImage,
         }, {

diff --git a/src/components/MainLayout/FashionListBox.tsx b/src/components/MainLayout/FashionListBox.tsx
@@ -1,4 +1,3 @@
-import CloseIcon from '@mui/icons-material/Close';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   Box,
@@ -9,7 +8,6 @@ import {
   ClickAwayListener,
   Grid,
   Grow,
-  IconButton,
   MenuItem,
   MenuList,
   Modal,
@@ -30,7 +28,7 @@ import useRainfallTypeStore from '../../utils/zustand/weather/RainfallTypeStore'
 import useSkyStatusStore from '../../utils/zustand/weather/SkyStatusStore';
 import useWindChillSearchStore from '../../utils/zustand/weather/WindChillSearchStore';
 import AddFashionButton from './FashionListBox/AddFashionButton';
-import FashioinDetailModal from './FashionListBox/FashionDetailModal';
+import FashionModal from "./FashionListBox/FashionModal";
 import PaginationBox from './FashionListBox/PaginationBox';
 import SearchBox from './FashionListBox/SearchBox';
 
@@ -39,12 +37,8 @@ const style = {
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  height: 600,
-  width: 400,
-  bgcolor: '#FFF',
-  borderRadius: '25px',
-  boxShadow: 24,
-  p: 2,
+  height: 750,
+  width: 550,
 };
 
 const options = ['전체', '팔로우'];
@@ -120,7 +114,7 @@ export default function FashionListBox() {
     try {
       await axios
         .get(
-          `/api/v1/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`,
+          `${process.env.NEXT_PUBLIC_API}/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`,
           {
             headers: {
               Accept: 'application/json',
@@ -156,7 +150,6 @@ export default function FashionListBox() {
 
           setPost(data.data.content);
           setPageCount(data.data.totalPages);
-          // setPage(1);
         });
     } catch {
       console.log('api 불러오기 실패');
@@ -295,16 +288,7 @@ export default function FashionListBox() {
 
       <Modal open={openDetail} onClose={handleCloseDetail} closeAfterTransition>
         <Box sx={style}>
-          <div style={{ textAlign: 'right' }}>
-            <IconButton
-              onClick={() => {
-                setOpenDetail(false);
-              }}
-            >
-              <CloseIcon style={{ color: '#000' }} fontWeight="300" />
-            </IconButton>
-          </div>
-          <FashioinDetailModal singleId={singleId} />
+          <FashionModal singleId={singleId} setOpenDetail={setOpenDetail}/>
         </Box>
       </Modal>