🎉 로그인 유무에 따라 보이는 UI 변경

src/app/(root)/(routes)/items/[itemId]/components/description-section/DescriptionSection.tsx

@@ -26,8 +26,29 @@ type TradeStateMap = {
 }
 
 const DescriptionSection = ({
-  itemData: { status, cardTitle, category, createdAt, dibs, content, cardId },
+  itemData: {
+    status,
+    cardTitle,
+    category,
+    createdAt,
+    dibs,
+    content,
+    cardId,
+    userId: authorId,
+  },
 }: DescriptionSectionProps) => {
+  // FIX : 로그인 관련 완성되면 실제 데이터로 수정
+  // const { isLoggedIn } = useAuth()
+  // const {currentUser} = useAuth();
+
+  const currentUser = {
+    imageUrl: 'http://asdf~',
+    nickname: '병원에 간 미어캣',
+    userId: 3,
+  }
+  const isLoggedIn = true
+  const isMyItem = currentUser.userId === authorId
+
   const tradeStateMap: TradeStateMap = {
     TRADE_AVAILABLE: {
       style: 'primary',
@@ -49,7 +70,7 @@ const DescriptionSection = ({
           {tradeStateMap[status].text}
         </Badge>
         <h3 className={cn('ml-2', TYPHOGRAPHY.title)}>{cardTitle}</h3>
-        <MoreButton />
+        {isLoggedIn && isMyItem && <MoreButton />}
       </div>
       <div className="flex flex-row items-center">
         <p
@@ -63,7 +84,7 @@ const DescriptionSection = ({
         <p className={cn('text-text-secondary-color', TYPHOGRAPHY.description)}>
           {createdAt}
         </p>
-        <Dibs itemId={cardId} dibsData={dibs} />
+        {isLoggedIn && <Dibs itemId={cardId} dibsData={dibs} />}
       </div>
       <p className="">{content}</p>
     </article>

src/app/(root)/(routes)/items/[itemId]/components/trade-section/SuggestList.tsx

@@ -3,7 +3,7 @@ import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/Tabs'
 import { ItemSuggestion } from '@/types'
 
 type SuggestListProps = {
-  suggestionData: []
+  suggestionData: ItemSuggestion[]
 }
 
 /**

src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { useEffect, useState } from 'react'
 import Button from '@/components/ui/Button'
 import {
   Dialog,
@@ -14,6 +17,7 @@ type TradeSectionProps = {
   priceRange: string
   tradeType: string
   tradeArea: string
+  authorId: number
   itemId: string
 }
 
@@ -23,31 +27,57 @@ type TradeInfo = {
   variant: 'primary' | 'information'
 }
 
-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 ({
+const TradeSection = ({
   priceRange,
   tradeType,
   tradeArea,
+  authorId,
   itemId,
 }: TradeSectionProps) => {
-  const suggestions = await getSuggestionsValue(itemId)
+  // FIX : 로그인 관련 완성되면 실제 데이터로 수정
+  // const { isLoggedIn } = useAuth()
+  // const {currentUser} = useAuth();
+
+  const currentUser = {
+    imageUrl: 'http://asdf~',
+    nickname: '병원에 간 미어캣',
+    userId: 3,
+  }
+
+  const isLoggedIn = true
+  const isMyItem = currentUser.userId === authorId
+  const [suggestions, setSuggestions] = useState([])
+  const [open, setOpen] = useState(false)
 
   const tradeInfo: TradeInfo[] = [
     { title: '가격대', content: priceRange, variant: 'primary' },
     { title: '거래 방식', content: tradeType, variant: 'information' },
     { title: '거래 지역', content: tradeArea, variant: 'information' },
   ]
 
+  const onClickButton = () => {
+    if (isMyItem) {
+      alert('제안확인 페이지로 이동하기')
+    } else {
+      setOpen(true)
+    }
+  }
+
+  useEffect(() => {
+    async function getSuggestionsValue(itemId: string) {
+      try {
+        const res = await getSuggestions(itemId)
+        if (res.status == 200) {
+          const data = await res.json()
+          setSuggestions(data.data.cardList)
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    getSuggestionsValue(itemId)
+  }, [itemId])
+
   return (
     <section className="flex flex-col gap-2 w-full pt-4">
       {tradeInfo.map((v, i) => (
@@ -58,13 +88,13 @@ const TradeSection = async ({
           variant={v.variant}
         />
       ))}
+      {isLoggedIn && (
+        <Button className="mt-6" variant={'primary'} onClick={onClickButton}>
+          {isMyItem ? '제안 확인하기' : '거래 제안하기'}
+        </Button>
+      )}
 
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button className="mt-6" variant={'primary'}>
-            제안 확인하기
-          </Button>
-        </DialogTrigger>
+      <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="p-4 pt-14 gap-6 max-h-[576px]">
           <DialogHeader>
             <DialogTitle>제안 가능한 내 물건 보기</DialogTitle>

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 { cardId, userName, priceRange, tradeType, tradeArea } = data
+  const { cardId, userName, priceRange, tradeType, tradeArea, userId } = 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}
+          authorId={userId}
           itemId={cardId}
         />
       </div>

src/lib/msw/mocks/itemHandlers.ts

@@ -64,7 +64,7 @@ export const itemHandlers = [
                 modifiedAt: '2023-10-24-20:08',
               },
             ],
-            userId: 1,
+            userId: 3,
             userName: '왕쩌는 구범모',
             tradeType: '직거래',
             tradeArea: '서울시 성동구',