diff --git a/src/app/(root)/(routes)/items/[itemId]/components/trade-section/SuggestList.tsx b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/SuggestList.tsx new file mode 100644 index 00000000..fb73cd7a --- /dev/null +++ b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/SuggestList.tsx @@ -0,0 +1,44 @@ +import SuggestCard from '@/components/domain/card/suggest-card' +import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/Tabs' +import { ItemSuggestion } from '@/types' + +type SuggestListProps = { + suggestionData: [] +} + +/** + * TODO : 스크롤바 디자인 수정 + * TODO : 실제 API 연결(useMutation 사용해서) + */ +const SuggestList = async ({ suggestionData }: SuggestListProps) => { + return ( + + + 오퍼하기 + 찔러보기 + + {['offer', 'poke'].map((type) => ( + + {suggestionData + .filter((v: ItemSuggestion) => v.suggestionType === type) + .map((v: ItemSuggestion) => ( + + ))} + + ))} + + ) +} + +export default SuggestList diff --git a/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx index 344fdfde..5dcf3a13 100644 --- a/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx @@ -1,10 +1,20 @@ import Button from '@/components/ui/Button' +import { + Dialog, + DialogTrigger, + DialogContent, + DialogHeader, + DialogTitle, +} from '@/components/ui/Dialog' +import { getSuggestions } from '@/services/suggest/suggest' +import SuggestList from './SuggestList' import TradeInfo from './TradeInfo' type TradeSectionProps = { priceRange: string tradeType: string tradeArea: string + itemId: string } type TradeInfo = { @@ -13,11 +23,25 @@ type TradeInfo = { variant: 'primary' | 'information' } -const TradeSection = ({ +async function getSuggestionsValue(itemId: string) { + try { + const res = await getSuggestions(itemId) + const data = await res.json() + + return data.data.cardList + } catch (e) { + console.log(e) + } +} + +const TradeSection = async ({ priceRange, tradeType, tradeArea, + itemId, }: TradeSectionProps) => { + const suggestions = await getSuggestionsValue(itemId) + const tradeInfo: TradeInfo[] = [ { title: '가격대', content: priceRange, variant: 'primary' }, { title: '거래 방식', content: tradeType, variant: 'information' }, @@ -35,9 +59,19 @@ const TradeSection = ({ /> ))} - + + + + + + + 제안 가능한 내 물건 보기 + + + + ) } diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx index bd9fd11d..ed2427b4 100644 --- a/src/app/(root)/(routes)/items/[itemId]/page.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/page.tsx @@ -23,7 +23,7 @@ async function getItemValue(itemId: string) { const ItemPage = async ({ params }: ItemPageProps) => { const data = await getItemValue(params.itemId) console.log(data) - const { userName, priceRange, tradeType, tradeArea } = data + const { cardId, userName, priceRange, tradeType, tradeArea } = data return (
@@ -35,6 +35,7 @@ const ItemPage = async ({ params }: ItemPageProps) => { priceRange={priceRange} tradeType={tradeType} tradeArea={tradeArea} + itemId={cardId} />
diff --git a/src/components/domain/card/suggest-card/SuggestCard.tsx b/src/components/domain/card/suggest-card/SuggestCard.tsx index 81fbc64f..a1b8bb62 100644 --- a/src/components/domain/card/suggest-card/SuggestCard.tsx +++ b/src/components/domain/card/suggest-card/SuggestCard.tsx @@ -25,6 +25,7 @@ const SuggestCard = ({ justify={'start'} align={'center'} gap={'space'} + className="h-full" >
(({ className, ...props }, ref) => ( )) diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 0d4ecfbd..45b54d9b 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -3,8 +3,9 @@ const ApiEndPoint = { googleLogin: () => '/oauth2/authorize/google/login', getValidateUser: () => '/users', test: () => '/test', - item: (itemId:string) => `/${itemId}`, + item: (itemId: string) => `/${itemId}`, items: (cursorId: number) => `/items?cursorId=${cursorId}`, + suggestions: (itemId: string) => `/${itemId}/available-cards`, } as const export default ApiEndPoint diff --git a/src/lib/msw/mocks/handlers.ts b/src/lib/msw/mocks/handlers.ts index 6072aaff..c4abf05f 100644 --- a/src/lib/msw/mocks/handlers.ts +++ b/src/lib/msw/mocks/handlers.ts @@ -1,5 +1,11 @@ import { authHandlers } from './authHandlers' import { itemHandlers } from './itemHandlers' +import { suggestHandlers } from './suggestHandlers' import { testHandlers } from './testHandler' -export const handlers = [...testHandlers, ...authHandlers, ...itemHandlers] +export const handlers = [ + ...testHandlers, + ...authHandlers, + ...itemHandlers, + ...suggestHandlers, +] diff --git a/src/lib/msw/mocks/itemHandlers.ts b/src/lib/msw/mocks/itemHandlers.ts index 8bc6b4b8..f7f36680 100644 --- a/src/lib/msw/mocks/itemHandlers.ts +++ b/src/lib/msw/mocks/itemHandlers.ts @@ -27,7 +27,7 @@ export const itemHandlers = [ message: '성공했습니다.', data: { cardResponseDto: { - cardId: 1, + cardId: 3, cardTitle: '아이폰 16 팝니다', category: '전자기기', itemName: '아이폰 16', diff --git a/src/lib/msw/mocks/suggestHandlers.ts b/src/lib/msw/mocks/suggestHandlers.ts new file mode 100644 index 00000000..1b0b8ef4 --- /dev/null +++ b/src/lib/msw/mocks/suggestHandlers.ts @@ -0,0 +1,70 @@ +import { rest } from 'msw' +import ApiEndPoint from '@/config/apiEndPoint' +import { Environment } from '@/config/environment' +import { DEFAULT_ITEM_THUMBNAIL_IMG } from '@/constants/image' + +const baseUrl = Environment.apiAddress() + +export const suggestHandlers = [ + rest.get( + `${baseUrl}${ApiEndPoint.suggestions('3')}`, + async (_req, res, ctx) => { + return res( + ctx.status(200), + ctx.json({ + code: 'S001', + message: '성공했습니다.', + data: { + cardList: [ + { + _id: 1, + cardId: 1, + thumbNail: DEFAULT_ITEM_THUMBNAIL_IMG, + cardTitle: 'xxx', + itemName: '다이슨 청소기', + priceRange: '10만원대', + suggestionType: 'offer', + }, + { + _id: 2, + cardId: 2, + thumbNail: DEFAULT_ITEM_THUMBNAIL_IMG, + cardTitle: 'xxx', + itemName: '애플 워치', + priceRange: '20만원대', + suggestionType: 'poke', + }, + { + _id: 3, + cardId: 5, + thumbNail: DEFAULT_ITEM_THUMBNAIL_IMG, + cardTitle: 'xxx', + itemName: '에어팟 프로', + priceRange: '20만원대', + suggestionType: 'poke', + }, + { + _id: 3, + cardId: 6, + thumbNail: DEFAULT_ITEM_THUMBNAIL_IMG, + cardTitle: 'xxx', + itemName: '에어팟 프로', + priceRange: '20만원대', + suggestionType: 'poke', + }, + { + _id: 3, + cardId: 7, + thumbNail: DEFAULT_ITEM_THUMBNAIL_IMG, + cardTitle: 'xxx', + itemName: '에어팟 프로', + priceRange: '20만원대', + suggestionType: 'poke', + }, + ], + }, + }), + ) + }, + ), +] diff --git a/src/services/suggest/suggest.ts b/src/services/suggest/suggest.ts new file mode 100644 index 00000000..36caa409 --- /dev/null +++ b/src/services/suggest/suggest.ts @@ -0,0 +1,9 @@ +import ApiEndPoint from '@/config/apiEndPoint' +import apiClient from '../apiClient' + +const getSuggestions = async (itemId: string) => { + const response = await apiClient.get(ApiEndPoint.suggestions(itemId)) + return response +} + +export { getSuggestions } diff --git a/src/types/index.ts b/src/types/index.ts index f75f7ae9..30eb03d4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ -import {Category, Status} from "./item" +import { Category, Status } from './item' export interface Item { _id: number @@ -13,27 +13,37 @@ export interface Item { status: string } -export interface ItemDetail{ - cardId: number - cardTitle: string - category: Category - itemName: string - pokeAvailable: boolean - createdAt: string - modifiedAt: string - viewCount: number - priceRange: string - content: string - status: Status - images: ItemImage[] - dibsCount: number - userId: number - userName: string - tradeType: string - tradeArea: string +export interface ItemDetail { + cardId: number + cardTitle: string + category: Category + itemName: string + pokeAvailable: boolean + createdAt: string + modifiedAt: string + viewCount: number + priceRange: string + content: string + status: Status + images: ItemImage[] + dibsCount: number + userId: number + userName: string + tradeType: string + tradeArea: string } export interface ItemImage { - _id: number - image: string + _id: number + image: string +} + +export interface ItemSuggestion { + _id: number + cardId: number + thumbNail: string + cardTitle: string + itemName: string + priceRange: Category + suggestionType: 'poke' | 'offer' }