faet #18 댓글 및 공지방 API 추가

jigume · Feb 26, 2024 · 3f5dd0a · 3f5dd0a
1 parent 6888039
commit 3f5dd0a
Show file tree

Hide file tree

Showing 36 changed files with 756 additions and 296 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -8,7 +8,7 @@ import { authState } from './data';
 import Register from './pages/Register';
 import Map from './pages/Map';
 import Goods from './pages/Goods';
-import Announcement from './pages/Announcement';
+import GoodsNotice from './pages/Goods/components/GoodsNotice';
 import Image from './pages/Register/components/Image';
 import Detail from './pages/Register/components/Detail';
 import Links from './pages/Register/components/Links';
@@ -36,6 +36,7 @@ import MarketingAgreement from './pages/Auth/components/Init/components/Marketin
 import Confirm from './pages/Register/components/Confirm';
 import MyLeadList from './pages/Mypage/components/MyLeadList';
 import MyJoinList from './pages/Mypage/components/MyJoinList';
+import GoodsDetail from './pages/Goods/components/GoodsDetail';
 
 export default function Router() {
   // recoil state로 access roles 관리
@@ -106,14 +107,20 @@ export default function Router() {
         { index: true, element: <Map /> },
         // 상품 상세
         {
-          path: '/goods/:idx/*',
+          path: '/buying/:idx/*',
           element: <Goods />,
-          children: [{ path: 'submitted', element: <Submitted /> }],
-        },
-        // 상품 공지
-        {
-          path: '/announcement',
-          element: <Announcement />,
+          children: [
+            {
+              path: '*',
+              element: <GoodsDetail />,
+              children: [{ path: 'submitted', element: <Submitted /> }],
+            },
+            { path: 'modify', element: 'modify' },
+            {
+              path: 'notice',
+              element: <GoodsNotice />,
+            },
+          ],
         },
         // 상품 등록
         {

diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -1,6 +1,12 @@
 import { PreViewerMarker } from '@src/pages/Map/index.d';
 import { stringLatLng2Arr } from '@src/utils';
-import { GoodSheetDTO, GoodsDetailDTO, Marker } from '@src/types/goods';
+import {
+  BoardDTO,
+  GetCommentsDTO,
+  GoodSheetDTO,
+  GoodsDetailDTO,
+  Marker,
+} from '@src/types/goods';
 import qs from 'qs';
 import jigumeAxios from './axios';
 
@@ -105,3 +111,60 @@ export const deleteWishGoods = async (id: number | string) => {
 
   return response;
 };
+
+export const getNotice = async (
+  goodsId: number | string,
+  boardId: number | string
+): Promise<BoardDTO> => {
+  const response = await jigumeAxios
+    .get(`/api/goods/${goodsId}/board/${boardId}`)
+    .then((res) => res.data);
+
+  return response;
+};
+
+export const getComment = async (
+  goodsId: number | string,
+  boardId: number | string
+): Promise<GetCommentsDTO> => {
+  const response = await jigumeAxios
+    .get(`/api/goods/${goodsId}/board/${boardId}/comment`)
+    .then((res) => res.data);
+
+  return response;
+};
+
+export const postCommentAtBoard = async (
+  goodsId: number | string,
+  boardId: number | string,
+  content: string
+) => {
+  const response = await jigumeAxios
+    .post(`/api/goods/${goodsId}/board/${boardId}/comment`, {
+      content,
+    })
+    .then((res) => res.data);
+
+  return response;
+};
+
+export const postCommentAtComment = async ({
+  goodsId,
+  boardId,
+  parentCommentId,
+  content,
+}: {
+  goodsId: number | string;
+  boardId: number | string;
+  parentCommentId: number;
+  content: string;
+}) => {
+  const response = await jigumeAxios
+    .post(`/api/goods/${goodsId}/board/${boardId}/comment/reply`, {
+      parentCommentId,
+      content,
+    })
+    .then((res) => res.data);
+
+  return response;
+};
diff --git a/src/components/MarkerOnStaticMap.tsx b/src/components/MarkerOnStaticMap.tsx
@@ -18,11 +18,11 @@ export default function MarkerOnStaticMap({
         {img ? (
           <img
             src={img}
-            className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-gray-300"
+            className="absolute left-[4px] top-[4px] z-50 size-6 rounded-full bg-gray-300"
             alt="거래 위치"
           />
         ) : (
-          <div className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-white" />
+          <div className="absolute left-[4px] top-[4px] z-50 size-6 rounded-full bg-white" />
         )}
       </div>
 

diff --git a/src/components/Skeltons.tsx b/src/components/Skeltons.tsx
@@ -0,0 +1,89 @@
+import PlaceInfo from '@src/pages/Goods/components/PlaceInfo';
+import ItemComponent from '@src/pages/Map/components/BottomSheetComponent/components/ItemComponent';
+
+export function CommentSkeleton() {
+  return (
+    <div className="container mx-auto mt-8 max-w-screen-sm bg-white">
+      <div className="flex items-center gap-2 border-b p-4 text-lg font-medium text-gray-700">
+        <div>댓글</div>
+        <div className="h-4 w-6 animate-pulse rounded-sm bg-zinc-300" />
+      </div>
+
+      <div className="grid animate-pulse grid-cols-8 gap-4 px-4 py-8">
+        <div className="col-span-8 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="aspect-square size-8 rounded-full bg-zinc-300" />
+            <div className="h-4 w-16 rounded-sm bg-zinc-300" />
+          </div>
+          <div className="h-4 w-24 rounded-sm bg-zinc-300" />
+        </div>
+
+        <div className="col-span-7 col-start-2 flex flex-col gap-2">
+          <div className="flex gap-2">
+            <div className="h-3 w-16 rounded-sm bg-zinc-300" />
+            <div className="h-3 w-24 rounded-sm bg-zinc-300" />
+            <div className="h-3 w-12 rounded-sm bg-zinc-300" />
+          </div>
+          <div className="h-3 w-32 rounded-sm bg-zinc-300" />
+        </div>
+
+        <div className="col-span-7 col-start-2">
+          <div className="h-3 w-20 rounded-sm bg-zinc-300" />
+        </div>
+
+        <div className="col-span-7 col-start-2 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="aspect-square size-8 rounded-full bg-zinc-300" />
+            <div className="h-4 w-20 rounded-sm bg-zinc-300" />
+          </div>
+          <div className="h-4 w-16 rounded-sm bg-zinc-300" />
+        </div>
+
+        <div className="col-span-6 col-start-3 flex flex-col gap-2">
+          <div className="flex gap-2">
+            <div className="h-3 w-16 rounded-sm bg-zinc-300" />
+            <div className="h-3 w-24 rounded-sm bg-zinc-300" />
+            <div className="h-3 w-12 rounded-sm bg-zinc-300" />
+          </div>
+          <div className="h-3 w-32 rounded-sm bg-zinc-300" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function NoticeSkeleton() {
+  return (
+    <>
+      {/* 상품 정보 */}
+      <div className="w-full bg-white">
+        <ItemComponent />
+      </div>
+
+      <div className="flex flex-col gap-2 bg-gray-100 px-4 pt-8">
+        {/* 위치 정보 */}
+        <PlaceInfo bg="bg-white" />
+
+        {/* 공지사항 */}
+        <div className="rounded-xl bg-white px-4 py-6">
+          <div className="pb-3 text-xl">공지사항</div>
+
+          <div className="flex animate-pulse flex-col gap-3">
+            <div className="h-3 w-44 rounded-sm bg-zinc-300" />
+            <div className="flex gap-2">
+              <div className="h-3 w-10 rounded-sm bg-zinc-300" />
+              <div className="h-3 w-20 rounded-sm  bg-zinc-300" />
+            </div>
+            <div className="h-3 w-28 rounded-sm bg-zinc-300" />
+            <div className="h-3 w-32 rounded-sm bg-zinc-300" />
+            <div className="flex gap-2">
+              <div className="h-3 w-20 rounded-sm bg-zinc-300" />
+              <div className="h-3 w-20 rounded-sm  bg-zinc-300" />
+            </div>
+            <div className="h-3 w-36 rounded-sm bg-zinc-300" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/Announcement/components/CommentsContent.tsx b/src/pages/Announcement/components/CommentsContent.tsx
diff --git a/src/pages/Announcement/components/CommentsInput.tsx b/src/pages/Announcement/components/CommentsInput.tsx
diff --git a/src/pages/Announcement/components/ProductAbout.tsx b/src/pages/Announcement/components/ProductAbout.tsx
diff --git a/src/pages/Announcement/index.tsx b/src/pages/Announcement/index.tsx
diff --git a/src/pages/Auth/components/Init/components/initAddress.tsx b/src/pages/Auth/components/Init/components/initAddress.tsx
@@ -70,7 +70,7 @@ export default function InitAddress() {
         </button>
         {open && (
           <div className="fixed inset-0 z-50 flex size-full items-center justify-center overflow-y-auto overflow-x-hidden outline-none focus:outline-none">
-            <div className="fixed left-0 top-0 z-50 h-[100svh] w-screen bg-white">
+            <div className="fixed left-0 top-0 z-50 h-svh w-screen bg-white">
               <div onClick={() => setOpen(false)}>
                 <img
                   src={CloseIcon}

diff --git a/src/pages/Auth/components/login.tsx b/src/pages/Auth/components/login.tsx
@@ -33,7 +33,7 @@ export default function Login() {
 
   return (
     <div className="container mx-auto max-w-screen-sm px-0">
-      <div className="flex h-[100svh] flex-col justify-evenly px-4">
+      <div className="flex h-svh flex-col justify-evenly px-4">
         <div className="flex flex-col gap-5">
           <img src={logo} className="mx-auto max-w-[210px]" alt="JIGUME" />
           <p className="text-center font-light">

diff --git a/src/pages/Goods/components/DetailHeader.tsx b/src/pages/Goods/components/DetailHeader.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import ChevronLeft from '@src/asset/icon/chevronLeft.svg';
+import { useNavigate } from 'react-router-dom';
+
+export default function DetailHeader({
+  scrollDown,
+  rightMenu,
+}: {
+  scrollDown?: boolean;
+  rightMenu?: JSX.Element;
+}) {
+  const navigate = useNavigate();
+  return (
+    <div
+      className={`absolute left-1/2 top-0 z-50 flex h-[48px] w-full max-w-screen-sm -translate-x-1/2 items-center justify-between px-4 ${scrollDown ? 'bg-white' : 'bg-transparent'}`}
+    >
+      <button onClick={() => navigate(-1)}>
+        <img
+          className="h-12 w-10 cursor-pointer px-1 py-2"
+          src={ChevronLeft}
+          alt="뒤로가기"
+        />
+      </button>
+      <span>{rightMenu}</span>
+    </div>
+  );
+}
+
+DetailHeader.defaultProps = {
+  scrollDown: true,
+  rightMenu: undefined,
+};