Merge branch 'main' into MARA-74

deploy.sh

@@ -3,6 +3,6 @@
 echo "> FE 배포"
 
 cd /home/ubuntu/fridge-link-deploy
-
 pm2 restart all
 
+

src/components/organisms/ShareListItem.tsx

@@ -6,22 +6,16 @@ import React from 'react';
 import dayjs from 'dayjs';
 
 const ShareListItem: React.FC<{
-  data: {
-    id: number;
-    thumbnail: string | null;
-    title: string;
-    location: string;
-    date: dayjs.Dayjs;
-  };
+  data: ShareData;
 }> = ({ data }) => {
   return (
     <Link
-      href={`/share/${data.id}`}
+      href={`/share/${data.shareId}`}
       className="flex flex-1 items-center mb-[12px] pl-[18px] pr-[12px] py-[16px] rounded-[12px] bg-white"
     >
-      {data.thumbnail ? (
+      {data.thumbNailImage ? (
         <Image
-          src={data.thumbnail}
+          src={data.thumbNailImage}
           width={64}
           height={64}
           className="rounded-[8px]"
@@ -49,7 +43,7 @@ const ShareListItem: React.FC<{
                 className="mx-[4px] mb-1"
               />
             </span>
-            {dayjs(data.date).format('MM월 DD일 A HH:mm')}
+            {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime.hour} : ${data.shareTime.minute}`}
           </p>
         </div>
       </div>

src/hooks/queries/queryKeys.ts

@@ -1,6 +1,7 @@
 export const queryKeys = {
   INGREDIENT: (id?: number) => (id ? ['ingredient', id] : ['ingredient']),
   KAKAO: () => ['kakao'],
+  SHARES: () => ['shares'],
 } as const;
 
 export type QueryKeys = (typeof queryKeys)[keyof typeof queryKeys];

src/hooks/queries/share/index.ts

@@ -0,0 +1 @@
+export { default as useGetShares } from './useGetShares';

src/hooks/queries/share/useGetShares.ts

@@ -0,0 +1,7 @@
+import { queryKeys } from '../queryKeys';
+import { useBaseQuery } from '../useBaseQuery';
+
+const useGetShares = () =>
+  useBaseQuery<ShareData[]>(queryKeys.SHARES(), '/shares', true);
+
+export default useGetShares;

src/pages/share/index.tsx

@@ -14,6 +14,8 @@ import { PlusIcon } from '@/assets/icons';
 import { type SortLabel, type TabLabel } from '@/types/common';
 import dayjs from 'dayjs';
 import Link from 'next/link';
+import { useGetShares } from '@/hooks/queries/share';
+import { SuspenseFallback } from '@/components/templates';
 
 const TABS: TabLabel[] = [
   { label: '나눔 신청', value: 'enroll' },
@@ -50,6 +52,12 @@ const SharePage: NextPage = () => {
   const [curTab, setCurTab] = useState<TabLabel>(TABS[0]);
   const [curSortType, setCurSortType] = useState<SortLabel>(SORT_TYPES[0]);
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { data } = useGetShares();
+  console.log(data?.data);
+
+  if (!data?.data) {
+    return <SuspenseFallback />;
+  }
 
   return (
     <>
@@ -76,8 +84,8 @@ const SharePage: NextPage = () => {
         </div>
 
         <div className="pt-[128px] px-[20px]">
-          {MOCK_DATA.data.map((ele) => (
-            <ShareListItem key={ele.id} data={ele} />
+          {data?.data.map((ele) => (
+            <ShareListItem key={ele.shareId} data={ele} />
           ))}
         </div>
         <div className="flex justify-end pr-[20px]">

src/types/share/index.d.ts

@@ -0,0 +1,18 @@
+interface ShareData {
+  shareId: number;
+  title: string;
+  itemName: string;
+  content: string;
+  shareTime: {
+    hour: number;
+    minute: number;
+    second: number;
+    nano: number;
+  };
+  shareDate: string;
+  limitDate: string;
+  limitPerson: number;
+  location: string;
+  status: string;
+  thumbNailImage: string;
+}