feat #18 댓글 상대시간 추가

jigume · Feb 28, 2024 · 66dffb3 · 66dffb3
1 parent e399836
commit 66dffb3
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "boring-avatars": "^1.10.1",
     "date-fns": "^2.30.0",
     "framer-motion": "^10.16.4",
+    "javascript-time-ago": "^2.5.9",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
@@ -72,7 +73,7 @@
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "vite": "4.5.1",
+    "vite": "^4.5.2",
     "vite-tsconfig-paths": "^4.2.3"
   },
   "lint-staged": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,14 @@
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import TimeAgo from 'javascript-time-ago';
+import ko from 'javascript-time-ago/locale/ko';
 import useKakaoLoader from './hooks/useKakaoLoader';
 import Router from './Router';
 
 const queryClient = new QueryClient();
 
 function App() {
+  TimeAgo.addLocale(ko);
   useKakaoLoader();
   return (
     <QueryClientProvider client={queryClient}>

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -110,10 +110,16 @@ export default function Router() {
               element: <GoodsDetail />,
               children: [{ path: 'submitted', element: <Submitted /> }],
             },
-            { path: 'modify', element: <GoodsModify /> },
             {
-              path: 'notice',
-              element: <GoodsNotice />,
+              path: 'modify',
+              element: <GoodsModify />,
+            },
+            {
+              path: 'notice/*',
+              children: [
+                { index: true, element: <GoodsNotice /> },
+                { path: 'modify', element: '공지 수정' },
+              ],
             },
           ],
         },

diff --git a/src/pages/Goods/components/GoodsDetail.tsx b/src/pages/Goods/components/GoodsDetail.tsx
@@ -119,13 +119,13 @@ export default function GoodsDetail() {
           <div className="flex w-full gap-4 text-white">
             <Link
               className="shrink-0 rounded-lg bg-zinc-950 p-4 text-center"
-              to="/"
+              to={`/buying/${goods.goodsPageDto.goodsId}/modify`}
             >
               편집하기
             </Link>
             <Link
               className="w-full rounded-lg bg-success py-4 text-center"
-              to={`/buying/${goods.goodsPageDto.boardId}/notice`}
+              to={`/buying/${goods.goodsPageDto.goodsId}/notice`}
             >
               공지방 바로가기
             </Link>

diff --git a/src/pages/Goods/components/GoodsNotice/components/CommentsContent.tsx b/src/pages/Goods/components/GoodsNotice/components/CommentsContent.tsx
@@ -6,6 +6,8 @@ import React, { useEffect } from 'react';
 import { getFormettedDate } from '@src/utils';
 import { CommentSkeleton } from '@src/components/Skeltons';
 import { PostCommentStateType } from '@src/pages/Goods/index.d';
+import TimeAgo from 'javascript-time-ago';
+import { add } from 'date-fns';
 
 export default function CommentsContent({
   data,
@@ -16,6 +18,8 @@ export default function CommentsContent({
   isSuccess: boolean;
   setContent: React.Dispatch<React.SetStateAction<PostCommentStateType>>;
 }) {
+  const timeAgo = new TimeAgo('ko');
+
   const {
     data: comment,
     mutate: getGoodsComment,
@@ -28,6 +32,13 @@ export default function CommentsContent({
     setContent((prev) => ({ ...prev, targetCommentId }));
   };
 
+  // 24시간 이내는 전체 포맷 아니면 n 시간 전
+  const dateFormetter = (date: string | number) => {
+    if (add(new Date(date), { days: 1 }) < new Date())
+      return getFormettedDate(date);
+    return timeAgo.format(new Date(date));
+  };
+
   useEffect(() => {
     if (isSuccess) getGoodsComment();
   }, [isSuccess]);
@@ -42,11 +53,11 @@ export default function CommentsContent({
       </div>
 
       {/* content */}
-      <div className="grid grid-cols-8 gap-3 py-8">
-        {comment.commentDtoList.map((item) => (
+      <div className="grid grid-cols-8 gap-3 px-4 py-8">
+        {comment.commentDtoList.map((item, idx) => (
           <React.Fragment key={item.parent.commentId}>
             {/* parent */}
-            <div className="col-span-8 flex items-center justify-between px-4">
+            <div className="col-span-8 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <img
                   className="aspect-square size-8 rounded-full"
@@ -56,7 +67,7 @@ export default function CommentsContent({
                 <div>{item.parent.memberNickname}</div>
               </div>
               <div className="text-sm text-gray-700">
-                {getFormettedDate(item.parent.created_at)}
+                {dateFormetter(item.parent.created_at)}
               </div>
             </div>
             <div className="col-span-7 col-start-2 flex flex-col gap-1 px-4">
@@ -77,7 +88,7 @@ export default function CommentsContent({
             {/* reply */}
             {item.reply.map((item2) => (
               <React.Fragment key={item2.commentId}>
-                <div className="col-span-7 col-start-2 flex flex-col gap-2">
+                <div className="col-span-7 col-start-2 flex justify-between gap-2">
                   <div className="flex items-center gap-2">
                     <img
                       className="aspect-square size-8 rounded-full"
@@ -86,13 +97,19 @@ export default function CommentsContent({
                     />
                     <div>{item2.memberNickname}</div>
                   </div>
+                  <div className="text-sm text-gray-700">
+                    {dateFormetter(item.parent.created_at)}
+                  </div>
                 </div>
                 <div className="col-span-6 col-start-3 flex flex-col gap-1">
                   {item2.content}
                 </div>
               </React.Fragment>
             ))}
-            <div className="col-span-8 h-[1px] w-full bg-zinc-300" />
+
+            {idx !== comment.commentDtoList.length - 1 && (
+              <div className="col-span-8 h-[1px] w-full bg-zinc-300" />
+            )}
           </React.Fragment>
         ))}
       </div>

diff --git a/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx b/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx
@@ -49,7 +49,11 @@ export default function ProductAbout({
 
       <div className="flex flex-col gap-2 bg-gray-100 px-4 pt-8">
         {/* 위치 정보 */}
-        <PlaceInfo coordinate={data?.coordinate} bg="bg-white" />
+        <PlaceInfo
+          coordinate={data?.coordinate}
+          bg="bg-white"
+          image={data?.goodsImagesList[0].goodsImgUrl}
+        />
 
         {/* 공지사항 */}
         <div className="rounded-xl bg-white px-4 py-6">

diff --git a/src/pages/Goods/components/GoodsNotice/index.tsx b/src/pages/Goods/components/GoodsNotice/index.tsx
@@ -17,7 +17,7 @@ export default function GoodsNotice() {
     <div className="container mx-auto h-svh w-full max-w-screen-sm overflow-y-scroll p-28 px-0 pt-14">
       <DetailHeader
         rightMenu={
-          <Link className="text-sm" to="/modify">
+          <Link className="text-sm" to="/buying/notice/modify">
             편집하기
           </Link>
         }

diff --git a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx
@@ -92,7 +92,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) {
             {!goods ? (
               <div className="h-[12px] w-12 rounded-sm bg-gray-100" />
             ) : (
-              <span>배송비: {goods.goodsDeliveryPrice}</span>
+              <span>배송비: {setComma(goods.goodsDeliveryPrice)} 원</span>
             )}
             <span>/</span>
             {!goods ? (

diff --git a/src/utils.ts b/src/utils.ts
@@ -185,7 +185,7 @@ export const getdDay = (date: string) => {
   return `D-${dDay}`;
 };
 
-export const getFormettedDate = (arg: string) => {
+export const getFormettedDate = (arg: string | number) => {
   const date = new Date(arg);
   const year = date.getFullYear();
   const month = `0${date.getMonth() + 1}`.slice(-2);