🎉 제안 모달 컴포넌트 구현

team-nabi · Nov 4, 2023 · b63bb12 · b63bb12
1 parent 228f4d0
commit b63bb12
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 32 deletions.
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
@@ -0,0 +1,56 @@
+import SuggestCard from '@/components/domain/card/suggest-card'
+import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/Tabs'
+import { getSuggestions } from '@/services/suggest/suggest'
+import { ItemSuggestion } from '@/types'
+
+type SuggestListProps = {
+  itemId: string
+}
+
+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)
+  }
+}
+/**
+ * TODO : 스크롤바 디자인 수정
+ * TODO : 실제 API 연결(useMutation 사용해서)
+ */
+const SuggestList = async ({ itemId }: SuggestListProps) => {
+  const suggestions = await getSuggestionsValue(itemId)
+  return (
+    <Tabs defaultValue="offer">
+      <TabsList>
+        <TabsTrigger value="offer">오퍼하기</TabsTrigger>
+        <TabsTrigger value="poke">찔러보기</TabsTrigger>
+      </TabsList>
+      {['offer', 'poke'].map((type) => (
+        <TabsContent
+          key={type}
+          value={type}
+          className=" data-[state=inactive]:hidden h-[402px] overflow-y-auto"
+        >
+          {suggestions
+            .filter((v: ItemSuggestion) => v.suggestionType === type)
+            .map((v: ItemSuggestion) => (
+              <SuggestCard
+                key={v.cardId}
+                thumbNail={v.thumbNail}
+                cardTitle={v.cardTitle}
+                itemName={v.itemName}
+                priceRange={v.priceRange}
+                suggestionType={v.suggestionType}
+              />
+            ))}
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}
+
+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
@@ -1,10 +1,19 @@
 import Button from '@/components/ui/Button'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/Dialog'
+import SuggestList from './SuggestList'
 import TradeInfo from './TradeInfo'
 
 type TradeSectionProps = {
   priceRange: string
   tradeType: string
   tradeArea: string
+  itemId: string
 }
 
 type TradeInfo = {
@@ -17,6 +26,7 @@ const TradeSection = ({
   priceRange,
   tradeType,
   tradeArea,
+  itemId,
 }: TradeSectionProps) => {
   const tradeInfo: TradeInfo[] = [
     { title: '가격대', content: priceRange, variant: 'primary' },
@@ -35,9 +45,19 @@ const TradeSection = ({
         />
       ))}
 
-      <Button className="mt-6" variant={'primary'}>
-        제안 확인하기
-      </Button>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="mt-6" variant={'primary'}>
+            제안 확인하기
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="p-4 pt-14 gap-6 max-h-[576px]">
+          <DialogHeader>
+            <DialogTitle>제안 가능한 내 물건 보기</DialogTitle>
+          </DialogHeader>
+          <SuggestList itemId={itemId} />
+        </DialogContent>
+      </Dialog>
     </section>
   )
 }

diff --git 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 (
     <main className="flex-col min-h-screen bg-background-color">
@@ -35,6 +35,7 @@ const ItemPage = async ({ params }: ItemPageProps) => {
           priceRange={priceRange}
           tradeType={tradeType}
           tradeArea={tradeArea}
+          itemId={cardId}
         />
       </div>
     </main>

diff --git 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"
       >
         <div className="h-full w-36 relative">
           <CardImage

diff --git a/src/components/ui/Dialog/Dialog.tsx b/src/components/ui/Dialog/Dialog.tsx
@@ -86,10 +86,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className,
-    )}
+    className={cn('text-lg font-bold leading-none tracking-tight', className)}
     {...props}
   />
 ))

diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts
@@ -2,8 +2,9 @@ const ApiEndPoint = {
   kakaoLogin: () => '/oauth2/authorize/kakao/login',
   googleLogin: () => '/oauth2/authorize/google/login',
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
 }