Merge branch 'dev'

uju-in · May 5, 2024 · 6d728c3 · 6d728c3
2 parents cdc8c3b + ee66eb6
commit 6d728c3
Show file tree

Hide file tree

Showing 49 changed files with 989 additions and 453 deletions.
diff --git a/src/app/(route)/(withLayout)/items/[itemId]/_component/ItemDetailPage.tsx b/src/app/(route)/(withLayout)/items/[itemId]/_component/ItemDetailPage.tsx
diff --git a/src/app/(route)/(withLayout)/items/[itemId]/_component/ItemDetailView.tsx b/src/app/(route)/(withLayout)/items/[itemId]/_component/ItemDetailView.tsx
@@ -1,11 +1,9 @@
 'use client'
 
 import { useItemDetail } from '@/app/_hook/api/items/useItemDetail'
-import { Suspense } from 'react'
 import { cn } from '@/app/_utils/twMerge'
-import { QueryErrorResetBoundary } from '@tanstack/react-query'
-import ErrorBoundary from '@/app/_components/errorBoundary'
-import ErrorFullback from '@/app/_components/errorFullback'
+import ErrorHandlingWrapper from '@/app/_components/errorHandlingWrapper'
+import ErrorFallback from '@/app/_components/errorFallback'
 import ReviewSection from './ReviewSection'
 import { ReviewSectionSkeletonUI } from './ReviewSkeletonUI'
 import Breadcrumb from './Breadcrumb'
@@ -29,15 +27,12 @@ export default function ItemDetailView(props: Props) {
       <div
         className={cn('hidden h-[8px] bg-[#EEE]', 'mo:mt-[16px] mo:block')}
       />
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary onReset={reset} FallbackComponent={ErrorFullback}>
-            <Suspense fallback={<ReviewSectionSkeletonUI />}>
-              <ReviewSection itemInfo={itemInfo} />
-            </Suspense>
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>
+      <ErrorHandlingWrapper
+        fallbackComponent={ErrorFallback}
+        suspenseFallback={<ReviewSectionSkeletonUI />}
+      >
+        <ReviewSection itemInfo={itemInfo} />
+      </ErrorHandlingWrapper>
     </>
   )
 }
diff --git a/src/app/(route)/(withLayout)/items/[itemId]/_component/Review.tsx b/src/app/(route)/(withLayout)/items/[itemId]/_component/Review.tsx
@@ -5,9 +5,7 @@ import Image from 'next/image'
 import useOutsideClick from '@/app/_hook/common/useOutsideClick'
 import { ReviewResponse } from '@/app/_types/review.type'
 import { cn } from '@/app/_utils/twMerge'
-import { dateFormatter } from '../../../../../_utils/dateFormatter'
-
-import StarRating from './StarRating'
+import UserProfile from '@/app/(route)/(withLayout)/items/[itemId]/_component/UserProfile'
 import ReviewModal from './ReviewModal'
 import EditButtons from './EditButtons'
 import ReviewLikeButton from './ReviewLikeButton'
@@ -78,35 +76,7 @@ export default function Review(props: PropsType) {
       >
         {/** 프로필 사진, 닉네임, 날짜, 평점, 레벨 */}
         <div className="flex justify-between">
-          <div className="flex">
-            <Image
-              width={40}
-              height={40}
-              src={memberInfo.profileImage}
-              alt="member profile"
-              className="mr-[8px] h-[40px] w-[40px] rounded-full"
-            />
-            <div>
-              <div className="flex items-center">
-                <p className="mr-[4.52px] text-[12px] font-[700]">
-                  {memberInfo.nickname}
-                </p>
-                <div className="flex h-[13px] w-[27px] justify-center rounded-[4px] bg-[#000]">
-                  <p className="text-[8px] font-[700] text-white">
-                    Lv. {memberInfo.level}
-                  </p>
-                </div>
-              </div>
-              <div className="mt-[4px] flex">
-                {/** 리뷰 별점 */}
-                <StarRating rate={reviewSummary.rate} />
-                <div className="mx-[10px] h-[12px] border-l-[0.5px] border-[#B3B3B3] " />
-                <p className="flex items-center text-[10px] font-[500] text-[#747474]">
-                  {dateFormatter(reviewSummary.createdAt)}
-                </p>
-              </div>
-            </div>
-          </div>
+          <UserProfile memberInfo={memberInfo} reviewSummary={reviewSummary} />
           <div className={cn('hidden', 'mo:block')}>
             <ReviewLikeButton
               reviewId={reviewSummary.reviewId}

diff --git a/src/app/(route)/(withLayout)/items/[itemId]/_component/UserProfile.tsx b/src/app/(route)/(withLayout)/items/[itemId]/_component/UserProfile.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import StarRating from '@/app/(route)/(withLayout)/items/[itemId]/_component/StarRating'
+import { MemberInfo, ReviewInfo } from '@/app/_types/review.type'
+import { dateFormatter } from '@/app/_utils/dateFormatter'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+
+interface PropsType {
+  memberInfo: MemberInfo
+  reviewSummary: ReviewInfo
+}
+
+export default function UserProfile({ memberInfo, reviewSummary }: PropsType) {
+  const router = useRouter()
+
+  const handleViewProfile = (
+    e: React.MouseEvent<HTMLImageElement | HTMLParagraphElement>,
+  ) => {
+    e.stopPropagation()
+
+    router.push(`/mypage?nickname=${memberInfo.nickname}`)
+  }
+
+  return (
+    <div className="flex">
+      <Image
+        width={40}
+        height={40}
+        src={memberInfo.profileImage}
+        alt="member profile"
+        className="mr-[8px] h-[40px] w-[40px] cursor-pointer rounded-full"
+        onClick={handleViewProfile}
+      />
+      <div>
+        <div className="flex items-center">
+          <p
+            className="mr-[4.52px] cursor-pointer text-[12px] font-[700] "
+            onClick={handleViewProfile}
+          >
+            {memberInfo.nickname}
+          </p>
+          <div className="flex h-[13px] w-[27px] justify-center rounded-[4px] bg-[#000]">
+            <p className="text-[8px] font-[700] text-white">
+              Lv. {memberInfo.level}
+            </p>
+          </div>
+        </div>
+        <div className="mt-[4px] flex">
+          {/** 리뷰 별점 */}
+          <StarRating rate={reviewSummary.rate} />
+          <div className="mx-[10px] h-[12px] border-l-[0.5px] border-[#B3B3B3] " />
+          <p className="flex items-center text-[10px] font-[500] text-[#747474]">
+            {dateFormatter(reviewSummary.createdAt)}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/(route)/(withLayout)/items/[itemId]/page.tsx b/src/app/(route)/(withLayout)/items/[itemId]/page.tsx
@@ -1,6 +1,9 @@
 import { cn } from '@/app/_utils/twMerge'
+import ErrorHandlingWrapper from '@/app/_components/errorHandlingWrapper'
+import Loading from '@/app/_components/loading'
+import ErrorFallback from '@/app/_components/errorFallback'
 import MoItemDetailHeader from './_component/MoItemDetailHeader'
-import ItemDetailPage from './_component/ItemDetailPage'
+import ItemDetailView from './_component/ItemDetailView'
 
 type Props = {
   params: { itemId: number }
@@ -15,7 +18,12 @@ export default function DetailPage({ params }: Props) {
       <article
         className={cn('mx-auto mt-[32px] min-h-[650px] w-[720px]', 'mo:w-full')}
       >
-        <ItemDetailPage itemId={itemId} />
+        <ErrorHandlingWrapper
+          fallbackComponent={ErrorFallback}
+          suspenseFallback={<Loading />}
+        >
+          <ItemDetailView itemId={itemId} />
+        </ErrorHandlingWrapper>
       </article>
     </>
   )

diff --git a/src/app/(route)/(withLayout)/mypage/_components/EmptyMessage.tsx b/src/app/(route)/(withLayout)/mypage/_components/EmptyMessage.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import Link from 'next/link'
+
+export default function EmptyMessage({
+  menu,
+  path,
+}: {
+  menu: string
+  path: string
+}) {
+  return (
+    <div className="flex h-full flex-col items-center gap-[26px] pt-[200px]">
+      <strong className="text-[20px] font-[500]">등록한 {menu}가 없어요</strong>
+      <Link href={path}>
+        <span className="font-[600] text-[#858585]">
+          등록한 {menu}가 없어요
+        </span>
+      </Link>
+    </div>
+  )
+}
diff --git a/src/app/(route)/(withLayout)/mypage/_components/MypageNav.tsx b/src/app/(route)/(withLayout)/mypage/_components/MypageNav.tsx
@@ -0,0 +1,58 @@
+import { cn } from '@/app/_utils/twMerge'
+import Image from 'next/image'
+import Link from 'next/link'
+import { SideMenu } from '../_constants/mypageSideMenu'
+
+export default function MypageNav({ menu = 'MY투표' }: { menu: string }) {
+  return (
+    <nav>
+      <ul className="flex flex-col gap-[12px]">
+        {/** 기능 구현 시 제거 예정 */}
+        <li className="flex w-full items-center gap-[16px] rounded-[4px] p-[12px_25px] text-[18px] font-semibold">
+          <Image
+            src="/image/icon/icon-inventory.svg"
+            alt="icon"
+            width={36}
+            height={36}
+          />
+          <span>인벤토리</span>
+          <div className="ml-[96px] rounded-[100px] bg-[#838383] px-[10px] py-[6px] text-[14px] font-[600] text-white">
+            개발중
+          </div>
+        </li>
+        <li className="flex w-full items-center gap-[16px] rounded-[4px] p-[12px_25px] text-[18px] font-semibold">
+          <Image
+            src="/image/icon/icon-feed.svg"
+            alt="icon"
+            width={36}
+            height={36}
+          />
+          <span>MY피드</span>
+          <div className="ml-[96px] rounded-[100px] bg-[#838383] px-[10px] py-[6px] text-[14px] font-[600] text-white">
+            개발중
+          </div>
+        </li>
+
+        {SideMenu.map(({ label, id }) => (
+          <Link key={id} href={`/mypage?menu=${label}`}>
+            <li
+              className={cn(
+                'flex w-full items-center gap-[16px] rounded-[4px] p-[12px_25px] text-[18px] font-semibold',
+                { 'bg-[#dfdfdf]': menu === label },
+                { 'bg-[#F7F7F7]': menu !== label },
+              )}
+            >
+              <Image
+                src={`/image/icon/icon-${id}.svg`}
+                alt="icon"
+                width={36}
+                height={36}
+              />
+              <span>{label}</span>
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </nav>
+  )
+}
diff --git a/src/app/(route)/(withLayout)/mypage/_components/Profile.tsx b/src/app/(route)/(withLayout)/mypage/_components/Profile.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import { editProfileState } from '@/app/_atoms/editProfileState'
+import { useUserProfile } from '@/app/_hook/api/mypage/useUserProfile'
+import { useClientCookies } from '@/app/_hook/common/useClientCookies'
+import useGetSearchParam from '@/app/_hook/common/useGetSearchParams'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useSetRecoilState } from 'recoil'
+
+export default function Profile() {
+  const clientCookies = useClientCookies()
+
+  const currentUserNickname = clientCookies.getClientCookie('nickname')
+
+  const postNickname =
+    useGetSearchParam('nickname') || clientCookies.getClientCookie('nickname')
+
+  const setProfile = useSetRecoilState(editProfileState)
+
+  const router = useRouter()
+
+  const { profile } = useUserProfile(postNickname)
+
+  const { memberProfile } = profile
+  const { nickname, profileImage, level, hobby, career, content, mbti } =
+    memberProfile
+
+  return (
+    <div className="flex w-[340px] flex-col items-center bg-white p-[32px_45px_55px] text-[14px] shadow-[0_0_7.8px_3px_rgba(0,0,0,0.10)]">
+      <Image
+        src={profileImage}
+        alt="profile image"
+        width={113}
+        height={113}
+        className="mb-[23px] rounded-full"
+        loading="eager"
+      />
+      <p className="mb-[8px] text-[20px] font-bold">{nickname}</p>
+      <p className="mb-[12px] text-[16px] font-bold text-[#747474]">
+        Lv. {level}
+      </p>
+      <p className="text-center text-[#8a8a8a]">{content}</p>
+
+      <div className="my-[43px] flex w-full flex-col gap-[10px]">
+        <div className="flex w-full justify-between px-[19px]">
+          <span className="font-bold">MBTI</span>
+          <span className="font-medium text-[#808080]">{mbti}</span>
+        </div>
+        <div className="flex w-full justify-between px-[19px]">
+          <span className="font-bold">취미</span>
+          <span className="font-medium text-[#808080]">{hobby}</span>
+        </div>
+        <div className="flex w-full justify-between px-[19px]">
+          <span className="font-bold">경력</span>
+          <span className="font-medium text-[#808080]">{career}년차</span>
+        </div>
+      </div>
+      {currentUserNickname === nickname && (
+        <button
+          type="button"
+          className="flex w-full items-center justify-center gap-[7px] rounded-full bg-[#494949] py-[8px] text-[16px] font-bold text-white"
+          onClick={() => {
+            setProfile(memberProfile)
+            router.push('/join')
+          }}
+        >
+          <Image
+            src="/image/icon/icon-pencil_white.svg"
+            width={24}
+            height={24}
+            alt="pencil"
+          />
+          <span>내 프로필 편집</span>
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/(route)/(withLayout)/mypage/_components/UserContentTabs.tsx b/src/app/(route)/(withLayout)/mypage/_components/UserContentTabs.tsx
@@ -0,0 +1,17 @@
+import ErrorHandlingWrapper from '@/app/_components/errorHandlingWrapper'
+import ErrorFallback from '@/app/_components/errorFallback'
+import Loading from '@/app/_components/loading'
+import VoteContentTabs from './VoteContentTabs'
+
+export default function UserContentTabs() {
+  return (
+    <article className="mt-[46px] flex flex flex-col justify-center">
+      <ErrorHandlingWrapper
+        fallbackComponent={ErrorFallback}
+        suspenseFallback={<Loading />}
+      >
+        <VoteContentTabs />
+      </ErrorHandlingWrapper>
+    </article>
+  )
+}