Feat/#67 유저 정보 조회 api 관련 로직 구현 및 찜하기 낙관적 업데이트 도입

apps/web/app/_apis/mutations/useAddLike.ts

@@ -7,8 +7,19 @@ export const useAddLike = () => {
 
   return useMutation({
     mutationFn: async (id: string) => await addLike(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [...PlaceQueryKeys.byLike()] })
+    onSuccess: async (response) => {
+      const { placeId } = response
+
+      if (!placeId) return
+
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: [...PlaceQueryKeys.byLike()],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: [...PlaceQueryKeys.detail(String(placeId))],
+        }),
+      ])
     },
     // 공통 에러 처리 필요
     onError: (error) => console.error(error),

apps/web/app/_apis/mutations/useRemoveLike.ts

@@ -7,8 +7,19 @@ export const useRemoveLike = () => {
 
   return useMutation({
     mutationFn: async (id: string) => await removeLike(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [...PlaceQueryKeys.byLike()] })
+    onSuccess: async (response) => {
+      const { placeId } = response
+
+      if (!placeId) return
+
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: [...PlaceQueryKeys.byLike()],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: [...PlaceQueryKeys.detail(String(placeId))],
+        }),
+      ])
     },
     // 공통 에러 처리 필요
     onError: (error) => console.error(error),

apps/web/app/_apis/queries/user.ts

@@ -0,0 +1,15 @@
+import { queryOptions } from '@tanstack/react-query'
+import { getUserData } from '@/_apis/services/user'
+
+export const UserQueryKeys = {
+  all: () => ['user'] as const,
+  detail: () => [...UserQueryKeys.all(), 'detail'] as const,
+}
+
+export const useUserQueries = {
+  detail: () =>
+    queryOptions({
+      queryKey: UserQueryKeys.detail(),
+      queryFn: getUserData,
+    }),
+}

apps/web/app/_apis/schemas/user.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const UserSchema = z.object({
+  nickname: z.string(),
+  profileImageUrl: z.url(),
+  profileBackgroundHexCode: z.string(),
+})
+
+export type User = z.infer<typeof UserSchema>

apps/web/app/_apis/services/category.ts

@@ -3,7 +3,6 @@ import { API_PATH } from '@/_constants/path'
 import { CategorySchema, Category } from '../schemas/category'
 
 export const getCategories = async (): Promise<Category[]> => {
-  const { data: response } = await axiosInstance.get(API_PATH.CATEGORY)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.CATEGORY)
   return CategorySchema.array().parse(data)
 }

apps/web/app/_apis/services/event.ts

@@ -10,31 +10,24 @@ import {
 } from '@/_apis/schemas/event'
 
 export const getPublicEventInfo = async (): Promise<PublicEvent> => {
-  const { data: response } = await axiosInstance.get(API_PATH.EVENT.INFO)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.EVENT.INFO)
   return PublicEventSchema.parse(data)
 }
 
 export const getPrivateEventInfo = async (): Promise<PrivateEvent> => {
-  const { data: response } = await axiosInstance.get(API_PATH.EVENT.INFO)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.EVENT.INFO)
   return PrivateEventSchema.parse(data)
 }
 
 export const participationEvent = async (body: {
   eventId: string
   ticketsCount: number
 }) => {
-  const { data: response } = await axiosInstance.post(
-    API_PATH.EVENT.PARTICIPATIONS,
-    body,
-  )
-  const { data } = response
+  const { data } = await axiosInstance.post(API_PATH.EVENT.PARTICIPATIONS, body)
   return data
 }
 
 export const getEventResult = async (): Promise<EventResult | null> => {
-  const { data: response } = await axiosInstance.get(API_PATH.EVENT.RESULT)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.EVENT.RESULT)
   return EventResultSchema.parse(data)
 }

apps/web/app/_apis/services/like.ts

@@ -2,22 +2,18 @@ import axiosInstance from '@/_lib/axiosInstance'
 import { API_PATH } from '@/_constants/path'
 
 type Response = {
-  placeId: string
+  placeId: number
   message: string
 }
 
 export const addLike = async (placeId: string): Promise<Response> => {
-  const { data: response } = await axiosInstance.post(
-    API_PATH.PLACES.LIKE.POST(placeId),
-  )
-  const { data } = response
+  const { data } = await axiosInstance.post(API_PATH.PLACES.LIKE.POST(placeId))
   return data
 }
 
 export const removeLike = async (placeId: string): Promise<Response> => {
-  const { data: response } = await axiosInstance.delete(
+  const { data } = await axiosInstance.delete(
     API_PATH.PLACES.LIKE.DELETE(placeId),
   )
-  const { data } = response
   return data
 }

apps/web/app/_apis/services/place.ts

@@ -25,21 +25,19 @@ export const getPlacesByRanking = async (
   sort: RankingPlaceSort,
   campus: CampusType,
 ): Promise<BasePlace[]> => {
-  const { data: response } = await axiosInstance.get(
+  const { data } = await axiosInstance.get(
     API_PATH.PLACES.BY_RANKING(sort, campus),
   )
-  const { data } = response
   return BasePlaceSchema.array().parse(data)
 }
 
 export const getPlacesByCategory = async (
   id: string,
   campus: CampusType,
 ): Promise<BasePlace[]> => {
-  const { data: response } = await axiosInstance.get(
+  const { data } = await axiosInstance.get(
     API_PATH.PLACES.BY_CATEGORY(id, campus),
   )
-  const { data } = response
   return BasePlaceSchema.array().parse(data)
 }
 
@@ -49,21 +47,19 @@ export const getPlacesByMap = async ({
   maxLatitude,
   maxLongitude,
 }: MapBounds): Promise<PlaceByMap[]> => {
-  const { data: response } = await axiosInstance.get(
+  const { data } = await axiosInstance.get(
     API_PATH.PLACES.BY_MAP({
       minLatitude,
       minLongitude,
       maxLatitude,
       maxLongitude,
     }),
   )
-  const { data } = response
   return PlaceByMapSchema.array().parse(data)
 }
 
 export const getPlaceDetail = async (id: string): Promise<PlaceDetail> => {
-  const { data: response } = await axiosInstance.get(API_PATH.PLACES.DETAIL(id))
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.PLACES.DETAIL(id))
   return PlaceDetailSchema.parse(data)
 }
 
@@ -89,16 +85,14 @@ export const getSearchPlaceByKakao = async ({
 export const getPlaceByPreview = async (
   kakaoPlaceId: string,
 ): Promise<PlaceByPreview> => {
-  const { data: response } = await axiosInstance.get(
+  const { data } = await axiosInstance.get(
     API_PATH.PLACES.NEW.PREVIEW(kakaoPlaceId),
   )
-  const { data } = response
   return PlaceByPreviewSchema.parse(data)
 }
 
 export const getPlacesByLike = async (): Promise<BasePlace[]> => {
-  const { data: response } = await axiosInstance.get(API_PATH.PLACES.LIKE.GET)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.PLACES.LIKE.GET)
   return BasePlaceSchema.array().parse(data)
 }
 

apps/web/app/_apis/services/request.ts

@@ -8,15 +8,11 @@ import {
 } from '@/_apis/schemas/request'
 
 export const getRequests = async (): Promise<Request[]> => {
-  const { data: response } = await axiosInstance.get(API_PATH.REQUEST.LIST)
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.REQUEST.LIST)
   return RequestSchema.array().parse(data)
 }
 
 export const getRequestDetail = async (id: string): Promise<RequestDetail> => {
-  const { data: response } = await axiosInstance.get(
-    API_PATH.REQUEST.DETAIL(id),
-  )
-  const { data } = response
+  const { data } = await axiosInstance.get(API_PATH.REQUEST.DETAIL(id))
   return RequestDetailSchema.parse(data)
 }

apps/web/app/_apis/services/user.ts

@@ -0,0 +1,8 @@
+import axiosInstance from '@/_lib/axiosInstance'
+import { API_PATH } from '@/_constants/path'
+import { User, UserSchema } from '@/_apis/schemas/user'
+
+export const getUserData = async (): Promise<User> => {
+  const { data } = await axiosInstance.get(API_PATH.USER)
+  return UserSchema.parse(data)
+}

apps/web/app/_constants/path.ts

@@ -45,6 +45,7 @@ export const API_PATH = {
       `/auth/oauth2?code=${code}&redirectUri=${redirectUri}`,
     TOKEN: '/auth/token',
   },
+  USER: '/users/me',
 }
 
 export const CLIENT_PATH = {

apps/web/app/places/[id]/_components/LikeButton/LikeButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { motion } from 'motion/react'
 import { Icon } from '@repo/ui/components/Icon'
 import { useAddLike } from '@/_apis/mutations/useAddLike'
@@ -14,20 +14,37 @@ type Props = {
 export const LikeButton = ({ placeId, initIsLiked }: Props) => {
   const [isLiked, setIsLiked] = useState(initIsLiked)
   const [isAnimating, setIsAnimating] = useState(false)
-  const { mutate: addLike } = useAddLike()
-  const { mutate: removeLike } = useRemoveLike()
-  const toggleLikeMutate = isLiked ? removeLike : addLike
+  const { mutate: addLike, isPending: isAdding } = useAddLike()
+  const { mutate: removeLike, isPending: isRemoving } = useRemoveLike()
+
+  const isPending = isAdding || isRemoving
 
   const onClick = () => {
+    if (isPending) return
+
+    // 현재 상태 저장 (에러 시 롤백용)
+    const prevIsLiked = isLiked
+    // 낙관적 업데이트 (UI 먼저 변경)
+    const nextIsLiked = !prevIsLiked
+    setIsLiked(nextIsLiked)
+
+    const toggleLikeMutate = nextIsLiked ? addLike : removeLike
+
+    // 애니메이션 트리거
+    if (nextIsLiked) {
+      setIsAnimating(true)
+      setTimeout(() => setIsAnimating(false), 200)
+    }
+
     toggleLikeMutate(placeId, {
-      onSuccess: () => {
-        setIsLiked((prev) => !prev)
-        setIsAnimating(true)
-        setTimeout(() => setIsAnimating(false), 200) // 0.2초 동안 팝 애니메이션
-      },
+      onError: () => setIsLiked(prevIsLiked), // 실패 시 롤백
     })
   }
 
+  useEffect(() => {
+    setIsLiked(initIsLiked)
+  }, [initIsLiked])
+
   return (
     <motion.button
       onClick={onClick}

apps/web/app/profile/_components/ProfileMenuItem/ProfileMenuItem.tsx

@@ -0,0 +1,19 @@
+import { Icon, IconType } from '@repo/ui/components/Icon'
+import { Flex, JustifyBetween } from '@repo/ui/components/Layout'
+import { Text } from '@repo/ui/components/Text'
+
+type Props = {
+  href: string
+  title: string
+  icon: IconType
+}
+
+export const ProfileMenuItem = ({ href, title, icon }: Props) => (
+  <JustifyBetween as={'a'} href={href}>
+    <Flex className={'gap-2.5'}>
+      <Icon type={icon} size={18} />
+      <Text variant={'body1'}>{title}</Text>
+    </Flex>
+    <Icon type={'arrowRight'} size={18} color={'--color-gray-200'} />
+  </JustifyBetween>
+)

apps/web/app/profile/_components/ProfileMenuItem/index.ts

@@ -0,0 +1 @@
+export { ProfileMenuItem } from './ProfileMenuItem'