feat: group profile

src/app/my-map/[mapId]/crew-info-editable-item.tsx

@@ -11,6 +11,7 @@ import BottomModal from '@/components/common/bottom-modal'
 import { api } from '@/utils/api'
 import { notify } from '@/components/common/custom-toast'
 import useFetch from '@/hooks/use-fetch'
+import Link from 'next/link'
 
 const RoleButton = ({
   role,
@@ -128,7 +129,10 @@ const CrewInfoEditableItem = ({
 
   return (
     <>
-      <li className="flex h-[52px] items-center justify-between">
+      <Link
+        href={`/profile/${member.id}`}
+        className="flex h-[52px] items-center justify-between"
+      >
         <div className="flex items-center gap-2">
           <Avatar
             value={member.nickname}
@@ -153,8 +157,9 @@ const CrewInfoEditableItem = ({
         ) : (
           <button
             type="button"
-            className="flex items-center gap-[2px]"
-            onClick={() => {
+            className="flex h-full items-center gap-[2px]"
+            onClick={(e) => {
+              e.preventDefault()
               setIsOpenRoleModal(true)
             }}
           >
@@ -164,7 +169,7 @@ const CrewInfoEditableItem = ({
             <Icon type="caretDown" size="md" stroke="neutral-200" />
           </button>
         )}
-      </li>
+      </Link>
 
       <BottomModal
         layout="none"

src/app/my-map/[mapId]/crew-info-list.tsx

@@ -5,6 +5,8 @@ import type { User } from '@/models/user'
 import cn from '@/utils/cn'
 import CrewInfoReadOnlyItem from './crew-info-read-only-item'
 import CrewInfoEditableItem from './crew-info-editable-item'
+import { useEffect } from 'react'
+import { updateMapIdCookie } from '@/services/map-id'
 
 interface CrewInfoListProps extends ClassName {
   user: User
@@ -45,6 +47,10 @@ const CrewInfoList = ({
   const isMyMap = mapInfo.createBy.id === user.id
   const members = mapInfo.users
 
+  useEffect(() => {
+    updateMapIdCookie(mapInfo.id)
+  }, [mapInfo.id])
+
   return (
     <section className={cn('', className)}>
       <div className="flex gap-1">

src/app/my-map/[mapId]/crew-info-read-only-item.tsx

@@ -3,6 +3,7 @@ import Chip from '@/components/common/chip'
 import Typography from '@/components/common/typography'
 import type { MapMemberData } from '@/models/map'
 import { korRole } from './constant'
+import Link from 'next/link'
 
 const CrewInfoReadOnlyItem = ({
   member,
@@ -14,7 +15,11 @@ const CrewInfoReadOnlyItem = ({
   isMe: boolean
 }) => {
   return (
-    <li className="flex h-[52px] items-center justify-between">
+    <Link
+      role="listitem"
+      href={`/profile/${member.id}`}
+      className="flex h-[52px] items-center justify-between"
+    >
       <div className="flex items-center gap-2">
         <Avatar
           value={member.nickname}
@@ -35,7 +40,7 @@ const CrewInfoReadOnlyItem = ({
       <Typography size="body3" color="neutral-200">
         {korRole[member.role]}
       </Typography>
-    </li>
+    </Link>
   )
 }
 

src/app/place/[placeId]/place-liked-users.tsx

@@ -4,6 +4,7 @@ import type { LikeUser } from '@/components/place/types'
 import type { ClassName } from '@/models/common'
 import type { User } from '@/models/user'
 import cn from '@/utils/cn'
+import Link from 'next/link'
 
 interface PlaceLikedUserProps extends ClassName {
   me: User | null
@@ -14,7 +15,12 @@ const PlaceLikedUser = ({ likedUser, className, me }: PlaceLikedUserProps) => {
   return (
     <ul className={cn('flex flex-col pb-6', className)}>
       {likedUser.map((user) => (
-        <li key={user.id} className="flex items-center gap-2 pt-2">
+        <Link
+          role="listitem"
+          href={`/profile/${user.id}`}
+          key={user.id}
+          className="flex items-center gap-2 pt-2"
+        >
           <Avatar
             value={user.nickname}
             imageUrl={user.profileImage}
@@ -23,7 +29,7 @@ const PlaceLikedUser = ({ likedUser, className, me }: PlaceLikedUserProps) => {
           <Typography size="body1" color="neutral-100">
             {user.nickname}
           </Typography>
-        </li>
+        </Link>
       ))}
     </ul>
   )

src/app/profile/[id]/liked-place-panel.tsx

@@ -0,0 +1,82 @@
+import type { PlaceType } from '@/models/api/place'
+import type { MapInfo } from '@/models/map'
+import type { User } from '@/models/user'
+import { getMapId } from '@/services/map-id'
+import { api } from '@/utils/api'
+import { useEffect, useState } from 'react'
+import PlaceItem from './place-item'
+import { APIError } from '@/models/api'
+import { notify } from '@/components/common/custom-toast'
+import EmptyPlaceList from '@/components/place/empty-place-list'
+import PlacePopupSkeleton from '@/components/place/place-popup-skeleton'
+
+const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => {
+  const [mapId, setMapId] = useState<MapInfo['id']>('')
+  const [places, setPlaces] = useState<PlaceType[]>()
+
+  const renderPlaces = () => {
+    if (typeof places === 'undefined') {
+      return (
+        <div className="flex flex-col gap-2.5 py-[18px]">
+          <PlacePopupSkeleton />
+          <PlacePopupSkeleton />
+          <PlacePopupSkeleton />
+        </div>
+      )
+    }
+    if (places.length === 0) {
+      return (
+        <EmptyPlaceList
+          className="pt-[75px]"
+          message="등록하거나 좋아요한 맛집이 없어요"
+        />
+      )
+    }
+
+    return (
+      <div className="flex flex-col gap-2.5 py-[18px]">
+        {places.map((place) => (
+          <PlaceItem
+            key={place.place.id}
+            className="w-full border-[1px] border-neutral-500 bg-neutral-600"
+            mapId={mapId}
+            selectedPlace={place}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  useEffect(() => {
+    const getLikedPlace = async () => {
+      try {
+        const currentMapId = await getMapId()
+        if (!currentMapId) {
+          throw new Error('잘못된 접근입니다.')
+        }
+        setMapId(currentMapId)
+        const { data } = await api.place.like.mapId.userId.get({
+          mapId: currentMapId,
+          userId,
+        })
+        setPlaces(data)
+      } catch (error) {
+        if (error instanceof APIError) {
+          notify.error(error.message)
+        } else {
+          notify.error('에러가 발생했습니다.')
+        }
+      }
+    }
+
+    getLikedPlace()
+  }, [userId])
+
+  return (
+    <div role="tabpanel" id="tappanel-liked" aria-labelledby="tap-liked">
+      {renderPlaces()}
+    </div>
+  )
+}
+
+export default LikedPlacePanel

src/app/profile/[id]/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import AccessibleIconButton from '@/components/common/accessible-icon-button'
+import Avatar from '@/components/common/avatar'
+import Typography from '@/components/common/typography'
+import useFetch from '@/hooks/use-fetch'
+import useSafeRouter from '@/hooks/use-safe-router'
+import type { User } from '@/models/user'
+import { api } from '@/utils/api'
+import TasteRate from './taste-rate'
+import { useState } from 'react'
+import LikedPlacePanel from './liked-place-panel'
+import RegisterededPlacePanel from './registered-place-panel'
+
+type PlaceFilter = 'register' | 'liked'
+
+const Profile = ({ params: { id } }: { params: { id: User['id'] } }) => {
+  const router = useSafeRouter()
+  const { data: userData } = useFetch(() => api.users.id.get(id))
+  const [type, setType] = useState<PlaceFilter>('register')
+
+  const getIsSelected = (currentType: PlaceFilter) => type === currentType
+
+  return (
+    <div className="flex flex-col gap-6">
+      <header className="relative flex items-center pt-4">
+        <AccessibleIconButton
+          icon={{ type: 'caretLeft', size: 'xl' }}
+          label="이전 페이지"
+          className="p-[10px]"
+          onClick={() => router.back()}
+        />
+        <Typography
+          className="absolute left-1/2 translate-x-[-50%]"
+          as="h1"
+          size="body0"
+        >
+          그룹원 프로필
+        </Typography>
+      </header>
+
+      <div className="flex flex-col items-center gap-[18px]">
+        <div className="flex flex-col items-center gap-6">
+          <Avatar
+            value={userData?.nickname}
+            imageUrl={userData?.profileImage}
+            className={`h-20 w-20 text-[40px] ${!userData?.profileImage && 'border-2 border-[#17171A] border-opacity-20'}`}
+          />
+          <Typography size="h3">{userData?.nickname}</Typography>
+        </div>
+        <TasteRate userId={id} />
+        <div className="h-[18px] w-full bg-neutral-600"></div>
+      </div>
+      <section className="flex flex-col px-5">
+        <div role="tablist" className="flex items-center gap-4">
+          <button
+            role="tab"
+            className={`border-b-[1px] pb-1 ${getIsSelected('register') ? 'border-neutral-000' : 'border-transparent'}`}
+            id="tap-register"
+            aria-controls="tappanel-register"
+            aria-selected={getIsSelected('register')}
+            onClick={() => setType('register')}
+          >
+            <Typography size="body1">맛집 등록</Typography>
+          </button>
+          <button
+            role="tab"
+            className={`border-b-[1px] pb-1 ${getIsSelected('liked') ? 'border-neutral-000' : 'border-transparent'}`}
+            id="tap-liked"
+            aria-controls="tappanel-liked"
+            aria-selected={getIsSelected('liked')}
+            onClick={() => setType('liked')}
+          >
+            <Typography size="body1">좋아요</Typography>
+          </button>
+        </div>
+        {type === 'liked' ? (
+          <LikedPlacePanel userId={id} />
+        ) : (
+          <RegisterededPlacePanel userId={id} />
+        )}
+      </section>
+    </div>
+  )
+}
+
+export default Profile