DEV -> MAIN (#419)

second-hand-team-01 · Jan 23, 2024 · ad243c6 · ad243c6
2 parents ad4aeb3 + 7088bde
commit ad243c6
Show file tree

Hide file tree

Showing 22 changed files with 278 additions and 108 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -19,6 +19,7 @@
     "react-scripts": "5.0.1",
     "styled-components": "5.3.10",
     "typescript": "^4.9.5",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/fe/src/components/commons/Button/ButtonStyle.ts b/fe/src/components/commons/Button/ButtonStyle.ts
@@ -159,4 +159,3 @@ display: flex;
   ${({ isWidthFitContent }) =>
     isWidthFitContent ? `width: max-content;` : ''};
 `;
-// padding 값 수정 필요 (icon이 있어도 shape:large인 경우에는 padding 16,20 적용)
diff --git a/fe/src/components/commons/Carousel/Carousel.tsx b/fe/src/components/commons/Carousel/Carousel.tsx
@@ -19,7 +19,6 @@ export const Carousel = ({
   const [currentCarousel, setCurrentCarousel] = useState(0);
 
   const moveCarousel = (direction: 'next' | 'previous') => {
-    console.log(1);
     const totalCarousel = urls.length;
     setCurrentCarousel((prevSlide) => {
       if (direction === 'previous') {

diff --git a/fe/src/components/commons/ImgPreview/ImgPreview.tsx b/fe/src/components/commons/ImgPreview/ImgPreview.tsx
@@ -4,6 +4,7 @@ import { Icon, Dialog } from '@commons/index';
 import { ImgElement } from './ImgElement/ImgElement';
 import { Image } from '@type-store/services/items';
 import { ERROR_MESSAGE } from '@constants/error';
+import { v4 } from 'uuid';
 
 interface ImgPreviewProps {
   imageState: [Image[], Dispatch<SetStateAction<Image[]>>];
@@ -45,7 +46,6 @@ export const ImgPreview = ({ imageState }: ImgPreviewProps) => {
         reader.readAsDataURL(file);
       }
 
-      // Reset the file input value
       FileInputRef.current.value = '';
     }
   };
@@ -66,7 +66,7 @@ export const ImgPreview = ({ imageState }: ImgPreviewProps) => {
         ></S.FileInput>
         {images.map((image, i) => (
           <ImgElement
-            key={image.name}
+            key={v4()}
             file={image.fileString}
             isFirst={i === 0 ? true : false}
             handleDelete={({ currentTarget }) => {

diff --git a/fe/src/components/commons/ListItem/ListItem.tsx b/fe/src/components/commons/ListItem/ListItem.tsx
@@ -24,7 +24,7 @@ export interface ListItemProps {
   location: string;
   timeStamp: Date;
   price: number | null;
-  state: '예약중' | '판매중' | string | null;
+  state: '예약중' | '판매중' | '판매완료' | string | null;
   like: number | null | undefined;
   chat: number | null;
   moreBtn: boolean;
@@ -111,7 +111,14 @@ export const ListItem = ({
       state: 'default',
       color: 'systemDefault',
       name: '게시글 수정',
-      onClick: () => navigate(`/edit/${itemIdx}`, { state: '/sales-history' }),
+      onClick: () =>
+        navigate(`/edit/${itemIdx}`, {
+          state: {
+            prevPathname: '/sales-history',
+            itemLocation: location,
+            itemStatus: state,
+          },
+        }),
     },
     {
       shape: 'large',
@@ -151,6 +158,7 @@ export const ListItem = ({
               <span>{convertDateToTimeStamp(timeStamp)}</span>
             </S.SubInfo>
             <S.States>
+              {state === '판매완료' && <S.StateBadge>{state}</S.StateBadge>}
               {state === '예약중' && <S.StateBadge>{state}</S.StateBadge>}
               {price ? `${convertNumToPrice(price)}원` : '가격 없음'}
             </S.States>

diff --git a/fe/src/pages/AuthPage/AuthPage.tsx b/fe/src/pages/AuthPage/AuthPage.tsx
@@ -43,7 +43,7 @@ export const AuthPage = () => {
 
     const token = userInfoData.data.token;
     const memberInfo = userInfoData.data.memberInfo;
-    console.log(memberInfo);
+
     localStorage.setItem('loginToken', token);
     userInfoDispatch &&
       userInfoDispatch({

diff --git a/fe/src/pages/DetailsPage/DetailsPage.tsx b/fe/src/pages/DetailsPage/DetailsPage.tsx
@@ -25,14 +25,15 @@ import { useNavigate } from 'react-router-dom';
 import { UserInfoContext } from '@stores/UserContext';
 import { postFavoriteItemAPI } from '@services/items/favoriteItems';
 import { MenuButtonProps } from '@components/commons/Menu/MenuStyle';
+import { getAllLocationDataAPI } from '@services/locations/locations';
 
 export const DetailsPage = () => {
   const userInfo = useContext(UserInfoContext);
 
   const param = useParams();
   const itemIdxStr = param.itemIdx;
   const navigate = useNavigate();
-  const prevPathname = useLocation().state;
+  const { prevPathname, itemLocation } = useLocation().state;
 
   const [details, setDetails] = useState<ItemDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -54,11 +55,38 @@ export const DetailsPage = () => {
   useEffect(() => {
     (async () => {
       !loading && setLoading(true);
-      const { data, error } = await getItemDetailAPI(Number(itemIdxStr));
-      if (error) return setErrorMsg(error.message);
-      if (data) {
-        setDetails(data);
-        setInterestChecked(data.interestChecked);
+      const { data: itemData, error: itemError } = await getItemDetailAPI(
+        Number(itemIdxStr)
+      );
+      if (itemError) return setErrorMsg(itemError.message);
+      if (itemData) {
+        setDetails((prevDetails) => ({
+          ...prevDetails,
+          ...itemData,
+        }));
+        setInterestChecked(itemData.interestChecked);
+      }
+
+      const { data: locationData, error: locationError } =
+        await getAllLocationDataAPI();
+      if (locationError) return setErrorMsg(locationError.message);
+      if (locationData && Array.isArray(locationData)) {
+        const location = locationData.find(
+          (location) => location.town === itemLocation
+        );
+
+        setDetails((prevDetails) => {
+          if (prevDetails === null) {
+            return null;
+          }
+          return {
+            ...prevDetails,
+            location: {
+              locationIdx: location?.locationIdx,
+              locationName: location?.town,
+            },
+          };
+        });
       }
       setLoading(false);
     })();
@@ -132,10 +160,24 @@ export const DetailsPage = () => {
         state: 'default',
         color: 'neutralText',
         name: '판매중 상태로 전환',
-        onClick: () => {
-          changeStatusItemsAPI(Number(itemIdxStr), '판매중');
+        onClick: async () => {
+          changeStatusItemsAPI(Number(itemIdxStr), {
+            title: details?.title,
+            description: details?.description,
+            images: details?.images,
+            price: details?.price,
+            categoryIdx: details?.category.idx,
+            locationIdx: details?.location?.locationIdx,
+            status: '판매중',
+          });
+          setDetails((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              status: '판매중',
+            };
+          });
           setStatusDropdownOpen(false);
-          window.location.reload();
         },
       },
       ['판매완료']: {
@@ -144,9 +186,23 @@ export const DetailsPage = () => {
         color: 'neutralText',
         name: '판매 완료 상태로 전환',
         onClick: () => {
-          changeStatusItemsAPI(Number(itemIdxStr), '판매완료');
+          changeStatusItemsAPI(Number(itemIdxStr), {
+            title: details?.title,
+            description: details?.description,
+            images: details?.images,
+            price: details?.price,
+            categoryIdx: details?.category.idx,
+            locationIdx: details?.location?.locationIdx,
+            status: '판매완료',
+          });
+          setDetails((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              status: '판매완료',
+            };
+          });
           setStatusDropdownOpen(false);
-          window.location.reload();
         },
       },
       ['예약중']: {
@@ -155,9 +211,23 @@ export const DetailsPage = () => {
         color: 'neutralText',
         name: '예약중 상태로 전환',
         onClick: () => {
-          changeStatusItemsAPI(Number(itemIdxStr), '예약중');
+          changeStatusItemsAPI(Number(itemIdxStr), {
+            title: details?.title,
+            description: details?.description,
+            images: details?.images,
+            price: details?.price,
+            categoryIdx: details?.category.idx,
+            locationIdx: details?.location?.locationIdx,
+            status: '예약중',
+          });
+          setDetails((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              status: '예약중',
+            };
+          });
           setStatusDropdownOpen(false);
-          window.location.reload();
         },
       },
     };
@@ -267,7 +337,13 @@ export const DetailsPage = () => {
             color: 'systemDefault',
             name: '게시글 수정',
             onClick: () =>
-              navigate(`/edit/${itemIdxStr}`, { state: prevPathname }),
+              navigate(`/edit/${itemIdxStr}`, {
+                state: {
+                  prevPathname: prevPathname,
+                  itemLocation: itemLocation,
+                  itemStatus: details?.status,
+                },
+              }),
           },
           {
             shape: 'large',

diff --git a/fe/src/pages/FavoritePage/FavoritePageContents/FavoriteContents.tsx b/fe/src/pages/FavoritePage/FavoritePageContents/FavoriteContents.tsx
@@ -3,7 +3,7 @@ import * as S from './FavoriteContentsStyle';
 import { useFetch } from '@hooks/useFetch/useFetch';
 import { getFavoriteItemsAPI } from '@services/items/favoriteItems';
 import { useContext, useEffect } from 'react';
-import { Navigate, useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { ERROR_MESSAGE } from '@constants/error';
 import { UserInfoContext } from '@stores/UserContext';
 
@@ -13,11 +13,11 @@ interface FavoriteContentsProps {
 
 export const FavoriteContents = ({ categoryIdx }: FavoriteContentsProps) => {
   const navigate = useNavigate();
+  const { pathname } = useLocation();
   const [{ data, error, loading }, contentsFetch] = useFetch(
     getFavoriteItemsAPI.bind(null, categoryIdx),
     []
   );
-
   useEffect(() => {
     contentsFetch();
   }, [categoryIdx]);
@@ -44,7 +44,9 @@ export const FavoriteContents = ({ categoryIdx }: FavoriteContentsProps) => {
         key={item.itemIdx}
         {...item}
         onClick={() => {
-          navigate(`/item/${item.itemIdx}`);
+          navigate(`/item/${item.itemIdx}`, {
+            state: { prevPathname: pathname, itemLocation: item.location },
+          });
         }}
       ></ListItem>
     ));

diff --git a/fe/src/pages/HomePage/HomeList/HomeList.tsx b/fe/src/pages/HomePage/HomeList/HomeList.tsx
@@ -12,15 +12,18 @@ import { Category } from '@type-store/services/category';
 
 export const HomeList = ({
   selectedCategory,
+  selectedLocation,
   selectedLocationIdx,
 }: {
   selectedCategory: Category | undefined;
+  selectedLocation: string | null | undefined;
   selectedLocationIdx: number | null | undefined;
 }) => {
   return (
     <ReactQuerySuspense>
       <Contents
         selectedCategory={selectedCategory}
+        selectedLocation={selectedLocation}
         selectedLocationIdx={selectedLocationIdx}
       />
     </ReactQuerySuspense>
@@ -29,14 +32,15 @@ export const HomeList = ({
 
 const Contents = ({
   selectedCategory,
+  selectedLocation,
   selectedLocationIdx,
 }: {
   selectedCategory: Category | undefined;
+  selectedLocation: string | null | undefined;
   selectedLocationIdx: number | null | undefined;
 }) => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
-
   const { data, isFetchingNextPage, fetchNextPage, hasNextPage } =
     useInfiniteQuery(
       [
@@ -81,15 +85,22 @@ const Contents = ({
     <>
       {data?.pages
         .flatMap((pageData) => pageData.items)
-        .map((item) => (
-          <ListItem
-            key={item.itemIdx}
-            {...item}
-            onClick={() =>
-              navigate(`/item/${item.itemIdx}`, { state: pathname })
-            }
-          ></ListItem>
-        ))}
+        .map((item) => {
+          return (
+            <ListItem
+              key={item.itemIdx}
+              {...item}
+              onClick={() =>
+                navigate(`/item/${item.itemIdx}`, {
+                  state: {
+                    prevPathname: pathname,
+                    itemLocation: selectedLocation,
+                  },
+                })
+              }
+            ></ListItem>
+          );
+        })}
       <S.ObserverTarget ref={setTarget}></S.ObserverTarget>
       {isFetchingNextPage && <Loading height="40px" />}
     </>