diff --git a/src/Router.tsx b/src/Router.tsx index e987c47..bf5b8fc 100644 --- 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: }, // 상품 상세 { - path: '/goods/:idx/*', + path: '/buying/:idx/*', element: , - children: [{ path: 'submitted', element: }], - }, - // 상품 공지 - { - path: '/announcement', - element: , + children: [ + { + path: '*', + element: , + children: [{ path: 'submitted', element: }], + }, + { path: 'modify', element: 'modify' }, + { + path: 'notice', + element: , + }, + ], }, // 상품 등록 { diff --git a/src/api/goods.ts b/src/api/goods.ts index d79fa2c..8a333de 100644 --- 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 => { + 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 => { + 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 index c958c60..db557a8 100644 --- a/src/components/MarkerOnStaticMap.tsx +++ b/src/components/MarkerOnStaticMap.tsx @@ -18,11 +18,11 @@ export default function MarkerOnStaticMap({ {img ? ( 거래 위치 ) : ( -
+
)}
diff --git a/src/components/Skeltons.tsx b/src/components/Skeltons.tsx new file mode 100644 index 0000000..f9aca43 --- /dev/null +++ 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 ( +
+
+
댓글
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ ); +} + +export function NoticeSkeleton() { + return ( + <> + {/* 상품 정보 */} +
+ +
+ +
+ {/* 위치 정보 */} + + + {/* 공지사항 */} +
+
공지사항
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); +} diff --git a/src/pages/Announcement/components/CommentsContent.tsx b/src/pages/Announcement/components/CommentsContent.tsx deleted file mode 100644 index ab08916..0000000 --- a/src/pages/Announcement/components/CommentsContent.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import addCommentIcon from '@src/asset/icon/addCommentIcon.svg'; -import User from './User'; -import CommentsText from './CommentsText'; - -export default function CommentsContent() { - return ( -
-
- 댓글 23 -
-
- - -
-
- 답글달기 -
-
답글달기
-
-
- 이전 답글 1개 더보기 -
-
- - -
-
- - -
-
-
-
- ); -} diff --git a/src/pages/Announcement/components/CommentsInput.tsx b/src/pages/Announcement/components/CommentsInput.tsx deleted file mode 100644 index 64d5d45..0000000 --- a/src/pages/Announcement/components/CommentsInput.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import SendIcon from '@src/asset/icon/SendIcon.svg'; -// import SendIcon from '../../../../../asset/icon/SendIcon.svg'; - -export default function CommentsInput() { - return ( -
-
-
- - -
-
-
- ); -} diff --git a/src/pages/Announcement/components/ProductAbout.tsx b/src/pages/Announcement/components/ProductAbout.tsx deleted file mode 100644 index 8d94125..0000000 --- a/src/pages/Announcement/components/ProductAbout.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import ItemComponent from '@src/pages/Map/components/BottomSheetComponent/components/ItemComponent'; - -export default function ProductAbout() { - return ( -
-
- -
-
-
-
-
-
-
-
공지사항
-
-
-
-
- ); -} diff --git a/src/pages/Announcement/index.tsx b/src/pages/Announcement/index.tsx deleted file mode 100644 index e3b7d38..0000000 --- a/src/pages/Announcement/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import ProductAbout from './components/ProductAbout'; -import CommentsContent from './components/CommentsContent'; -import CommentsInput from './components/CommentsInput'; - -export default function Announcement() { - return ( -
- - - -
- - - -
-
- ); -} diff --git a/src/pages/Auth/components/Init/components/initAddress.tsx b/src/pages/Auth/components/Init/components/initAddress.tsx index 6d3010f..b2985cf 100644 --- 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() { {open && (
-
+
setOpen(false)}> -
+
JIGUME

diff --git a/src/pages/Goods/components/DetailHeader.tsx b/src/pages/Goods/components/DetailHeader.tsx new file mode 100644 index 0000000..305df1f --- /dev/null +++ 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 ( +

+ + {rightMenu} +
+ ); +} + +DetailHeader.defaultProps = { + scrollDown: true, + rightMenu: undefined, +}; diff --git a/src/pages/Goods/components/GoodsDetail.tsx b/src/pages/Goods/components/GoodsDetail.tsx new file mode 100644 index 0000000..f69bc19 --- /dev/null +++ b/src/pages/Goods/components/GoodsDetail.tsx @@ -0,0 +1,146 @@ +import React, { useRef, useState } from 'react'; +import { useMotionValueEvent, useScroll } from 'framer-motion'; +import { Link, Outlet, useLocation, useOutletContext } from 'react-router-dom'; +import { dateFormetter } from '@src/utils'; +import { GoodsContextType } from '../index.d'; +import CarouselBox from './CarouselBox'; +import HeaderProfile from './HeaderProfile'; +import ProductInfo from './ProductInfo'; +import ProductContent from './ProductContent'; +import PlaceInfo from './PlaceInfo'; +import IntroCategory from './IntroCategory'; +import DetailHeader from './DetailHeader'; + +export default function GoodsDetail() { + const location = useLocation(); + const targetRef = useRef(null); + const { scrollYProgress } = useScroll({ + container: targetRef, + }); + const [scrollDown, setScrollDown] = useState(false); + const { goods, isSuccess } = useOutletContext(); + + const isSubmitted = location.pathname.includes('submitted'); + + useMotionValueEvent(scrollYProgress, 'change', () => { + if (scrollYProgress.get() > 0.05) setScrollDown(true); + else setScrollDown(false); + }); + + return ( +
+ {/* header */} + + + {/* 상품 사진 */} + {isSuccess ? ( + item.goodsImgUrl + )} + /> + ) : ( +
+ )} + + {/* 상품 정보 */} +
+ + + +
+ +
+
+ 잠깐! 이것만은 꼭 확인하고 가세요 +
+ +
+ {/* 상품 위치 정보 */} + + + {/* 상품 마감일 */} +
+ {isSuccess ? ( +
+ + 구매종료일 : + + {dateFormetter(goods?.goodsPageDto.goodsLimitTime)} +
+ ) : ( +
+ )} +
+ + {/* 상품 카테고리 */} +
+ {isSuccess ? ( +
+ 해당 폼은 + + 제품을 공동구매해요. +
+ ) : ( +
+ )} +
+ +
+

+ 3자 에스크로 방식 결제로 안전하게 거래할 수 있어요. +
+ 환불 및 취소가 어려우니, 신중하게 참여해주세요. +

+
+
+
+ + {/* footer */} +
+ {goods?.goodsMemberAuth === 'SELLER' ? ( +
+ + 편집하기 + + + 공지방 바로가기 + +
+ ) : ( + + 구매 참여하기 + + )} +
+ + +
+ ); +} diff --git a/src/pages/Goods/components/GoodsModify/index.tsx b/src/pages/Goods/components/GoodsModify/index.tsx new file mode 100644 index 0000000..701dc97 --- /dev/null +++ b/src/pages/Goods/components/GoodsModify/index.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function GoodsModify() { + return
GoodsModify
; +} diff --git a/src/pages/Announcement/components/Comments.tsx b/src/pages/Goods/components/GoodsNotice/components/Comments.tsx similarity index 100% rename from src/pages/Announcement/components/Comments.tsx rename to src/pages/Goods/components/GoodsNotice/components/Comments.tsx diff --git a/src/pages/Goods/components/GoodsNotice/components/CommentsContent.tsx b/src/pages/Goods/components/GoodsNotice/components/CommentsContent.tsx new file mode 100644 index 0000000..48b8d40 --- /dev/null +++ b/src/pages/Goods/components/GoodsNotice/components/CommentsContent.tsx @@ -0,0 +1,101 @@ +import addCommentIcon from '@src/asset/icon/addCommentIcon.svg'; +import { GoodsPageDTO } from '@src/types/goods'; +import { useMutation } from 'react-query'; +import { getComment } from '@src/api/goods'; +import React, { useEffect } from 'react'; +import { getFormettedDate } from '@src/utils'; +import { CommentSkeleton } from '@src/components/Skeltons'; +import { PostCommentStateType } from '@src/pages/Goods/index.d'; + +export default function CommentsContent({ + data, + isSuccess, + setContent, +}: { + data: GoodsPageDTO; + isSuccess: boolean; + setContent: React.Dispatch>; +}) { + const { + data: comment, + mutate: getGoodsComment, + isSuccess: isCommentSuccess, + } = useMutation('goodsNotice', () => + getComment(data.goodsId as number, data.boardId as number) + ); + + const handleCommentType = (targetCommentId: number) => { + setContent((prev) => ({ ...prev, targetCommentId })); + }; + + useEffect(() => { + if (isSuccess) getGoodsComment(); + }, [isSuccess]); + + if (!isSuccess || !isCommentSuccess) return ; + + return ( +
+
+
댓글
+
{comment.commentDtoList.length}
+
+ + {/* content */} +
+ {comment.commentDtoList.map((item) => ( + + {/* parent */} +
+
+ 사용자 프로필 이미지 +
{item.parent.memberNickname}
+
+
+ {getFormettedDate(item.parent.created_at)} +
+
+
+
{item.parent.content}
+ handleCommentType(item.parent.commentId)} + > + 답글달기 + 답글달기 + +
+ + {/* reply */} + {item.reply.map((item2) => ( + +
+
+ 사용자 프로필 이미지 +
{item2.memberNickname}
+
+
+
+ {item2.content} +
+ + ))} +
+ + ))} +
+
+ ); +} diff --git a/src/pages/Goods/components/GoodsNotice/components/CommentsInput.tsx b/src/pages/Goods/components/GoodsNotice/components/CommentsInput.tsx new file mode 100644 index 0000000..fe85dfd --- /dev/null +++ b/src/pages/Goods/components/GoodsNotice/components/CommentsInput.tsx @@ -0,0 +1,75 @@ +import { postCommentAtBoard, postCommentAtComment } from '@src/api/goods'; +import SendIcon from '@src/asset/icon/SendIcon.svg'; +import { GoodsPageDTO } from '@src/types/goods'; +import { useMutation } from 'react-query'; +import { PostCommentStateType } from '@src/pages/Goods/index.d'; + +const initContent = { value: '', targetCommentId: -1 }; + +export default function CommentsInput({ + data, + content, + setContent, +}: { + data: GoodsPageDTO; + content: PostCommentStateType; + setContent: React.Dispatch>; +}) { + const handleContent = (e: React.ChangeEvent) => { + setContent((prev) => ({ ...prev, value: e.target.value })); + }; + + const { mutate: postComment } = useMutation( + 'postCommentAtBoard', + () => + postCommentAtBoard( + data.goodsId as number, + data.boardId as number, + content.value + ), + { + onSuccess: () => setContent(initContent), + } + ); + + const { mutate: postReply } = useMutation( + 'postCommentAtComment', + postCommentAtComment, + { + onSuccess: () => setContent(initContent), + } + ); + + const handlePost = () => { + if (content.value.length > 0) { + if (content.targetCommentId === -1) postComment(); + else + postReply({ + goodsId: data.goodsId as number, + boardId: data.boardId as number, + parentCommentId: content.targetCommentId, + content: content.value, + }); + } + }; + + return ( +
+
+ + + +
+
+ ); +} diff --git a/src/pages/Announcement/components/CommentsText.tsx b/src/pages/Goods/components/GoodsNotice/components/CommentsText.tsx similarity index 100% rename from src/pages/Announcement/components/CommentsText.tsx rename to src/pages/Goods/components/GoodsNotice/components/CommentsText.tsx diff --git a/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx b/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx new file mode 100644 index 0000000..420fae3 --- /dev/null +++ b/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx @@ -0,0 +1,62 @@ +import ItemComponent from '@src/pages/Map/components/BottomSheetComponent/components/ItemComponent'; +import { GoodsPageDTO } from '@src/types/goods'; +import { useMutation } from 'react-query'; +import { getNotice } from '@src/api/goods'; +import { useEffect } from 'react'; +import { NoticeSkeleton } from '@src/components/Skeltons'; +import PlaceInfo from '../../PlaceInfo'; + +export default function ProductAbout({ + data, + isSuccess, +}: { + data: GoodsPageDTO; + isSuccess: boolean; +}) { + const { + data: notice, + mutate: getGoodsNotice, + isSuccess: isNoticeSuccess, + } = useMutation('goodsNotice', () => + getNotice(data.goodsId as number, data.boardId as number) + ); + + useEffect(() => { + if (isSuccess) getGoodsNotice(); + }, [isSuccess]); + + if (!isSuccess || !isNoticeSuccess) return ; + + return ( + <> + {/* 상품 정보 */} +
+ +
+ +
+ {/* 위치 정보 */} + + + {/* 공지사항 */} +
+
공지사항
+
{notice.content}
+
+
+ + ); +} diff --git a/src/pages/Announcement/components/User.tsx b/src/pages/Goods/components/GoodsNotice/components/User.tsx similarity index 100% rename from src/pages/Announcement/components/User.tsx rename to src/pages/Goods/components/GoodsNotice/components/User.tsx diff --git a/src/pages/Goods/components/GoodsNotice/index.tsx b/src/pages/Goods/components/GoodsNotice/index.tsx new file mode 100644 index 0000000..687c05e --- /dev/null +++ b/src/pages/Goods/components/GoodsNotice/index.tsx @@ -0,0 +1,43 @@ +import { Link, useOutletContext } from 'react-router-dom'; +import { useState } from 'react'; +import ProductAbout from './components/ProductAbout'; +import CommentsContent from './components/CommentsContent'; +import CommentsInput from './components/CommentsInput'; +import { GoodsContextType, PostCommentStateType } from '../../index.d'; +import DetailHeader from '../DetailHeader'; + +export default function GoodsNotice() { + const { goods, isSuccess } = useOutletContext(); + const [content, setContent] = useState({ + value: '', + targetCommentId: -1, + }); + + return ( +
+ + 편집하기 + + } + /> + +
+ + + + + +
+
+ ); +} diff --git a/src/pages/Goods/components/PlaceInfo/index.tsx b/src/pages/Goods/components/PlaceInfo/index.tsx index 4681bc8..b201888 100644 --- a/src/pages/Goods/components/PlaceInfo/index.tsx +++ b/src/pages/Goods/components/PlaceInfo/index.tsx @@ -7,9 +7,11 @@ import IntroStaticMap from '@src/components/MarkerOnStaticMap'; export default function PlaceInfo({ coordinate, image, + bg, }: { coordinate?: Address; image?: string; + bg?: string; }) { const { kakao } = window; const [address, setAddress] = useState('-'); @@ -39,7 +41,7 @@ export default function PlaceInfo({ ); return ( -
+
+
navigate(url)} diff --git a/src/pages/Goods/index.d.ts b/src/pages/Goods/index.d.ts new file mode 100644 index 0000000..4818182 --- /dev/null +++ b/src/pages/Goods/index.d.ts @@ -0,0 +1,10 @@ +import { GoodsDetailDTO } from '@src/types/goods'; + +export type GoodsContextType = { + goods: GoodsDetailDTO; + isSuccess: boolean; +}; +export type PostCommentStateType = { + value: string; + targetCommentId: number; +}; diff --git a/src/pages/Goods/index.tsx b/src/pages/Goods/index.tsx index 3382be0..6867250 100644 --- a/src/pages/Goods/index.tsx +++ b/src/pages/Goods/index.tsx @@ -1,135 +1,14 @@ -import React, { useRef, useState } from 'react'; -import { useNavigate, Outlet, useLocation, useParams } from 'react-router-dom'; +import React from 'react'; +import { Outlet, useParams } from 'react-router-dom'; import { useQuery } from 'react-query'; import { getGoodsPage } from '@src/api/goods'; -import { dateFormetter } from '@src/utils'; -import { useMotionValueEvent, useScroll } from 'framer-motion'; -import CarouselBox from './components/CarouselBox'; -import HeaderProfile from './components/HeaderProfile'; -import ProductInfo from './components/ProductInfo'; -import ProductContent from './components/ProductContent'; -import ChevronLeft from '../../asset/icon/chevronLeft.svg'; -import PlaceInfo from './components/PlaceInfo'; -import IntroCategory from './components/IntroCategory'; export default function Goods() { const { idx } = useParams(); - const location = useLocation(); - const navigate = useNavigate(); - const targetRef = useRef(null); - const { scrollYProgress } = useScroll({ - container: targetRef, - }); - const [scrollDown, setScrollDown] = useState(false); - const isSubmitted = location.pathname.includes('submitted'); - - const { data: goods, isSuccess } = useQuery('itemDetail', () => + const { data: goods, isSuccess } = useQuery('goodsDetail', () => getGoodsPage(idx as string) ); - useMotionValueEvent(scrollYProgress, 'change', () => { - if (scrollYProgress.get() > 0.05) setScrollDown(true); - else setScrollDown(false); - }); - - return ( -
- {/* header */} -
- -
- - {/* 상품 사진 */} - {isSuccess ? ( - item.goodsImgUrl - )} - /> - ) : ( -
- )} - - {/* 상품 정보 */} -
- - - -
- -
-
- 잠깐! 이것만은 꼭 확인하고 가세요 -
- -
- {/* 상품 위치 정보 */} - - - {/* 상품 마감일 */} -
- {isSuccess ? ( -
- - 구매종료일 : - - {dateFormetter(goods?.goodsPageDto.goodsLimitTime)} -
- ) : ( -
- )} -
- - {/* 상품 카테고리 */} -
- {isSuccess ? ( -
- 해당 폼은 - - 제품을 공동구매해요. -
- ) : ( -
- )} -
- -
-

- 3자 에스크로 방식 결제로 안전하게 거래할 수 있어요. -
- 환불 및 취소가 어려우니, 신중하게 참여해주세요. -

-
-
-
- - -
- ); + return ; } diff --git a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx index cbbb59a..ffd107e 100644 --- a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx +++ b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx @@ -54,7 +54,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) { )}
navigate(`/goods/${goods?.goodsId}`)} + onClick={() => navigate(`/buying/${goods?.goodsId}`)} > {!goods ? (
@@ -68,7 +68,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) { ) : ( 판매자 프로필 이미지 )} @@ -77,7 +77,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) { {!goods ? (
) : ( -
{goods?.sellerInfoDto.sellerNickname}
+
{goods?.sellerInfoDto?.sellerNickname || undefined}
)}
diff --git a/src/pages/Map/components/Loading.tsx b/src/pages/Map/components/Loading.tsx index 097827e..c460ae6 100644 --- a/src/pages/Map/components/Loading.tsx +++ b/src/pages/Map/components/Loading.tsx @@ -5,7 +5,7 @@ export default function Loading({ }) { return (
diff --git a/src/pages/Map/index.tsx b/src/pages/Map/index.tsx index 3ff5ca9..9316b96 100644 --- a/src/pages/Map/index.tsx +++ b/src/pages/Map/index.tsx @@ -196,7 +196,7 @@ export default function Map() { ref={mapRef} center={(position as PositionType) || user.position} isPanto - className="h-[100svh] w-full" + className="h-svh w-full" level={3} onDragEnd={handleDragMap} onZoomChanged={handleDragEndMap} diff --git a/src/pages/Mypage/components/MyJoinList.tsx b/src/pages/Mypage/components/MyJoinList.tsx index a6f7464..eaef7c6 100644 --- a/src/pages/Mypage/components/MyJoinList.tsx +++ b/src/pages/Mypage/components/MyJoinList.tsx @@ -75,7 +75,7 @@ function JoinItems({
구매폼으로 이동하기 @@ -114,7 +114,7 @@ function JoinItems({
구매 공지방으로 이동하기 diff --git a/src/pages/Mypage/components/MyLeadList.tsx b/src/pages/Mypage/components/MyLeadList.tsx index 3b5e80a..d579653 100644 --- a/src/pages/Mypage/components/MyLeadList.tsx +++ b/src/pages/Mypage/components/MyLeadList.tsx @@ -75,7 +75,7 @@ function LeadItems({
구매폼으로 이동하기 @@ -114,7 +114,7 @@ function LeadItems({
구매 공지방으로 이동하기 diff --git a/src/pages/Mypage/components/ProgressLead.tsx b/src/pages/Mypage/components/ProgressLead.tsx index 5a2954f..e43d58b 100644 --- a/src/pages/Mypage/components/ProgressLead.tsx +++ b/src/pages/Mypage/components/ProgressLead.tsx @@ -1,34 +1,21 @@ import { useNavigate, useOutletContext } from 'react-router-dom'; +import { SellHistoryDto } from '@src/types/mypage'; import { MyPageContextType } from '../index.d'; -export default function ProgressLead() { - const { leadData, leadLoading, leadSuccess } = - useOutletContext(); +function LeadGoods({ + item, + leadSuccess, +}: { + item: SellHistoryDto; + leadSuccess: boolean; +}) { const navigate = useNavigate(); - const len = leadData?.length || 0; - - if (leadLoading) - return ( -
-
-
- -
-
- -
-
-
-
-
- ); - return (
- {leadData ? ( + {leadSuccess ? ( 상품 이미지 @@ -36,18 +23,18 @@ export default function ProgressLead() {
)}
- {leadData ? ( -
{leadData[len - 1].goodsName}
+ {leadSuccess ? ( +
{item.goodsName}
) : (
)}
- {leadData ? ( + {leadSuccess ? ( <> -
배송비: {leadData[len - 1].goodsDeliveryPrice}원
/ +
배송비: {item.goodsDeliveryPrice}원
/
- {leadData[len - 1].goodsOrderCount} + {item.goodsOrderCount} 명 분할 중
{' '} @@ -69,9 +56,7 @@ export default function ProgressLead() { @@ -79,3 +64,33 @@ export default function ProgressLead() {
); } + +export default function ProgressLead() { + const { leadData, leadLoading, leadSuccess } = + useOutletContext(); + const len = leadData?.length || 0; + + if (leadLoading) + return ( +
+
+
+ +
+
+ +
+
+
+
+
+ ); + + return len === 0 ? ( +
+ 진행중인 구매리드가 없습니다. +
+ ) : ( + + ); +} diff --git a/src/pages/NotMatch.tsx b/src/pages/NotMatch.tsx index 5a5e822..6d6bfe0 100644 --- a/src/pages/NotMatch.tsx +++ b/src/pages/NotMatch.tsx @@ -5,7 +5,7 @@ export default function NotMatch() { const navigate = useNavigate(); return (
-
+
{ setData(initData); - navigate(`/goods/${res}/submitted`); + navigate(`/buying/${res}/submitted`); }, } ); diff --git a/src/pages/Register/components/Deadline/components/calendarDate.tsx b/src/pages/Register/components/Deadline/components/calendarDate.tsx index 8f10409..ee652ae 100644 --- a/src/pages/Register/components/Deadline/components/calendarDate.tsx +++ b/src/pages/Register/components/Deadline/components/calendarDate.tsx @@ -37,7 +37,7 @@ function CalendarDate({ {open && (
setOpen(false)} /> {open && (
-
+
setOpen(false)}> { const target = new Date(date); const dDay = differenceInDays(target, today); - if (today.getDate() > target.getDate()) return '종료'; + if (today.getTime() > target.getTime()) return '종료'; if (dDay > 99) return '99+'; return `D-${dDay}`; }; + +export const getFormettedDate = (arg: string) => { + const date = new Date(arg); + const year = date.getFullYear(); + const month = `0${date.getMonth() + 1}`.slice(-2); + const day = `0${date.getDate()}`.slice(-2); + const hours = `0${date.getHours()}`.slice(-2); + const minutes = `0${date.getMinutes()}`.slice(-2); + + return `${year}-${month}-${day} ${hours}:${minutes}`; +};