✨ 마이페이지 게시글 불러오기

FRONTENDBOOTCAMP-11th · Jan 6, 2025 · 365be5f · 365be5f
1 parent 67f67a4
commit 365be5f
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 94 deletions.
diff --git a/api/dbinit-sample/openmarket/data.js b/api/dbinit-sample/openmarket/data.js
@@ -149,7 +149,7 @@ export const initData = async (clientId, nextSeq) => {
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '경기도',
+          location: '경기',
           subLocation: '월곡동 구미아파트 정자',
           meetingTime: '25년 1월 3일 10:00',
           type: 'buy',
@@ -177,7 +177,7 @@ export const initData = async (clientId, nextSeq) => {
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '강원도',
+          location: '강원',
           subLocation: '춘천시 퇴계동 자이아파트 입구',
           meetingTime: '25년 1월 3일 10:00',
           type: 'buy',
@@ -204,7 +204,7 @@ export const initData = async (clientId, nextSeq) => {
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '강원도',
+          location: '강원',
           subLocation: '춘천시 퇴계동 자이아파트 입구',
           meetingTime: '25년 1월 3일 10:00',
           type: 'buy',
@@ -258,7 +258,7 @@ export const initData = async (clientId, nextSeq) => {
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '충청도',
+          location: '충청',
           subLocation: '계룡시 육군본부 입구',
           meetingTime: '25년 1월 3일 10:00',
           type: 'sell',
@@ -271,7 +271,7 @@ export const initData = async (clientId, nextSeq) => {
         price: 3000,
         show: true,
         active: true,
-        name: '당근 팝니다',
+        name: '바니바니바니바니 당근당근 바니바니바니바니 당근당근 바니바니바니바니 당근당근',
         quantity: 8,
         buyQuantity: 2,
         mainImages: [
@@ -281,11 +281,11 @@ export const initData = async (clientId, nextSeq) => {
             originalname: 'carrat.png',
           },
         ],
-        content: '바니바니바니바니 당근당근',
+        content: '바니바니바니바니 당근당근 바니바니바니바니 당근당근 바니바니바니바니 당근당근',
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '경상도',
+          location: '경상',
           subLocation: '해운대',
           meetingTime: '25년 1월 3일 10:00',
           type: 'sell',
@@ -312,7 +312,7 @@ export const initData = async (clientId, nextSeq) => {
         createdAt: getTime(-41, -60 * 60 * 2),
         updatedAt: getTime(-40, -60 * 15),
         extra: {
-          location: '전라도',
+          location: '전라',
           subLocation: '광주 문화예술 전당',
           meetingTime: '25년 1월 3일 10:00',
           type: 'sell',
@@ -336,6 +336,12 @@ export const initData = async (clientId, nextSeq) => {
               name: 'grape.png',
               originalname: 'grape.png',
             },
+            extra: {
+              location: "충청",
+              subLocation: "계룡시 육군본부 입구",
+              meetingTime: "1월 3일",
+              type: "sell",
+            },
             quantity: 2,
             buyQuantity: 5,
             price: 3000,
@@ -361,6 +367,12 @@ export const initData = async (clientId, nextSeq) => {
               name: 'orange.png',
               originalname: 'orange.png',
             },
+            extra: {
+              location: "충청",
+              subLocation: "계룡시 육군본부 입구",
+              meetingTime: "1월 3일",
+              type: "sell",
+            },
             quantity: 4,
             buyQuantity: 4,
             price: 11000,
@@ -411,6 +423,12 @@ export const initData = async (clientId, nextSeq) => {
               name: 'carrat.png',
               originalname: 'carrat.png',
             },
+            extra: {
+              location: "충청",
+              subLocation: "계룡시 육군본부 입구",
+              meetingTime: "1월 3일",
+              type: "sell",
+            },
             quantity: 6,
             buyQuantity: 8,
             price: 2000,

diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -24,18 +24,22 @@ const List = ({
 }: ListProps) => {
   const defaultImage = image;
   const apiUrl = import.meta.env.VITE_BASE_URL;
-
   const navigate = useNavigate();
 
   // 날짜 형식 변경
-  const parts = date.split(' ')[0].split('.');
+  const parts = date ? date.split(' ')[0].split('.') : ['00', '00'];
   const formattedDate = `${parts[1]}.${parts[2]}`;
 
   return (
-    <div onClick={() => navigate(`/detail/${id}`)} className="text-font1 flex flex-col rounded-custom px-[19px] py-[13px] shadow-custom bg-white rounded-[6px] relative cursor-pointer">
+    <div
+      onClick={() => navigate(`/detail/${id}`)}
+      className="text-font1 flex flex-col rounded-custom px-[19px] py-[13px] shadow-custom bg-white rounded-[6px] relative cursor-pointer"
+    >
       <div className="flex justify-between mb-[15px]">
-        <p className="text-font1 font-semibold text-[14px] mr-[5px] truncate">{title}</p>
-        <p className="text-font2 text-[13px]">{formattedDate}</p>
+        <p className="text-font1 font-semibold text-[14px] mr-[5px] truncate">
+          {title}
+        </p>
+        {date && <p className="text-font2 text-[13px]">{formattedDate}</p>}
       </div>
 
       <div className="flex">
@@ -46,9 +50,13 @@ const List = ({
         />
 
         <div className="flex flex-col gap-[12px] justify-evenly">
-          <Tag tagName={'item'}>
-            {remain} / <strong className="text-main">{total}</strong>
-          </Tag>
+          {remain !== undefined ? (
+            <Tag tagName={'item'}>
+              {remain} / <strong className="text-main">{total}</strong>
+            </Tag>
+          ) : (
+            <></>
+          )}
 
           <Tag tagName={'location'}>
             <p className="text-[13px]">{location}</p>
@@ -71,12 +79,20 @@ const List = ({
         </div>
       </div>
 
-      <div className="flex gap-[10px] mt-[17px] pt-[12px] border-t text-font1">
-        <img src={bookmark} className="w-[12px]" />
-        <p className="text-font2 text-[13px]">관심 {like}</p>
-        <p className="text-font2 text-[13px]">댓글 {comments}</p>
-      </div>
-      {total === remain && <div className='absolute w-[100%] h-[100%] bg-black bg-opacity-40 rounded-[6px] left-0 top-0 flex items-center justify-center text-[20px] text-white font-bold'>마감</div>}
+      {like !== undefined ? (
+        <div className="flex gap-[10px] mt-[17px] pt-[12px] border-t text-font1">
+          <img src={bookmark} className="w-[12px]" />
+          <p className="text-font2 text-[13px]">관심 {like}</p>
+          <p className="text-font2 text-[13px]">댓글 {comments}</p>
+        </div>
+      ) : (
+        <></>
+      )}
+      {total === remain && total !== undefined && (
+        <div className="absolute w-[100%] h-[100%] bg-black bg-opacity-40 rounded-[6px] left-0 top-0 flex items-center justify-center text-[20px] text-white font-bold">
+          마감
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/hooks/axiosInstance.ts b/src/hooks/axiosInstance.ts
@@ -15,25 +15,21 @@ export const axiosInstance = axios.create({
 // Axios 요청 인터셉터 설정
 axiosInstance.interceptors.request.use(
   (config) => {
-    // localStorage에서 데이터 가져오기
     const userData = localStorage.getItem('user');
 
-    // 데이터가 존재할 경우 처리
-    let token = null; // token 변수 선언
+    let token = null;
 
     if (userData) {
       try {
-        // JSON 문자열을 객체로 변환
         const parsedData = JSON.parse(userData);
 
         // accessToken 값 추출 후 token 변수에 저장
         token = parsedData?.state?.user?.accessToken || null;
-
       } catch (error) {
         console.error('JSON 파싱 오류:', error);
       }
     } else {
-      console.log('localStorage에 "user" 데이터가 없습니다.');
+      console.log('저장된 정보가 없습니다.');
     }
 
     if (token) {

diff --git a/src/hooks/useGetList.ts b/src/hooks/useGetList.ts
@@ -7,23 +7,25 @@ interface ParamsType {
   keyword?: string;
 }
 
+// 게시물 목록
 export const useGetList = (
   showSoldOut: boolean,
   productsType: string,
   meetingLocation?: string,
   keyword?: string,
 ) => {
   return useQuery({
-    queryKey: ['products', showSoldOut, productsType, meetingLocation,keyword],
+    queryKey: ['products', showSoldOut, productsType, meetingLocation, keyword],
     queryFn: () => {
       const baseParams: ParamsType = {
         showSoldOut,
         keyword: keyword ?? '',
         custom: JSON.stringify({
           'extra.type': productsType,
-          ...(meetingLocation && meetingLocation !== '전체지역' && {
-            'extra.location': meetingLocation,
-          }),
+          ...(meetingLocation &&
+            meetingLocation !== '전체지역' && {
+              'extra.location': meetingLocation,
+            }),
         }),
       };
 
@@ -34,11 +36,33 @@ export const useGetList = (
   });
 };
 
+// 내가 작성한 글
 export const useGetMyList = (showSoldOut: boolean) => {
   return useQuery({
-    queryKey: ['products', showSoldOut],
+    queryKey: ['myProducts', showSoldOut],
     queryFn: () =>
       axiosInstance.get(`/seller/products`).then((res) => res.data),
     staleTime: 1000 * 10,
   });
 };
+
+// 북마크 목록
+export const useGetLikeList = (showSoldOut: boolean, id: string) => {
+  return useQuery({
+    queryKey: ['likeProducts', showSoldOut, id],
+    queryFn: () =>
+      axiosInstance.get(`/users/${id}/bookmarks`).then((res) => res.data),
+    staleTime: 1000 * 10,
+  });
+};
+
+
+// 거래신청글
+export const useGetBuyList = (showSoldOut: boolean) => {
+  return useQuery({
+    queryKey: ['nuyProducts', showSoldOut],
+    queryFn: () =>
+      axiosInstance.get(`/orders`).then((res) => res.data),
+    staleTime: 1000 * 10,
+  });
+}