Merge pull request #61 from wafflestudio/32-feature-post-bookmark

게시글 북마크 영역 ui

Author: c0912jy

src/components/post/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from '@tanstack/react-router'
+import { useParams, useLocation, useNavigate } from '@tanstack/react-router'
 import { X, ChevronLeft, ChevronRight, Heart } from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import PostInfoSection from './PostInfoSection'
@@ -17,6 +17,7 @@ export interface PostData {
 
 export default function PostDetail() {
   const { post_id: postId } = useParams({ from: '/_app/p/$post_id' })
+  const location = useLocation()
   const navigate = useNavigate()
 
   const [postData, setPostData] = useState<PostData | null>(null)
@@ -34,7 +35,19 @@ export default function PostDetail() {
   }, [postId])
 
   const images = postData?.images || []
-  const handleClose = () => navigate({ to: '..' })
+  const handleClose = () => {
+    const returnToPath = location.search.returnToPath
+    const returnToSearch = location.search.returnToSearch
+
+    if (returnToPath) {
+      navigate({
+        to: returnToPath,
+        search: returnToSearch,
+      })
+    } else {
+      navigate({ to: '/' })
+    }
+  }
 
   const moveSlide = (step: number) => {
     if (images.length === 0) return
@@ -59,7 +72,7 @@ export default function PostDetail() {
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60"
+      className="fixed inset-0 z-100 flex items-center justify-center bg-black/60"
       onClick={handleClose}
     >
       <svg width="0" height="0" className="absolute">
@@ -72,7 +85,7 @@ export default function PostDetail() {
 
       <button
         onClick={handleClose}
-        className="absolute top-6 right-6 z-[110] text-white"
+        className="absolute top-6 right-6 z-110 text-white"
       >
         <X className="h-10 w-10" />
       </button>
@@ -91,7 +104,7 @@ export default function PostDetail() {
             {images.map((img, idx) => (
               <div
                 key={idx}
-                className="flex h-full min-w-full flex-shrink-0 items-center justify-center"
+                className="flex h-full min-w-full shrink-0 items-center justify-center"
               >
                 <img
                   src={img}
@@ -122,7 +135,7 @@ export default function PostDetail() {
                   ease: 'easeInOut',
                 }}
                 onAnimationComplete={() => setIsAnimating(false)}
-                className="pointer-events-none absolute z-[20] flex items-center justify-center"
+                className="pointer-events-none absolute z-20 flex items-center justify-center"
               >
                 <Heart
                   className="h-32 w-32 drop-shadow-2xl"

src/entities/feed/ui/FeedList.tsx

@@ -1,9 +1,10 @@
 import type { FeedItem } from '@/entities/feed/model/types'
-import { useNavigate } from '@tanstack/react-router'
+import { useNavigate, useLocation } from '@tanstack/react-router'
 import { FeedCard } from '@/entities/feed/ui/FeedCard'
 
 export function FeedList({ items }: { items: FeedItem[] }) {
   const navigate = useNavigate()
+  const location = useLocation()
 
   return (
     <div className="grid h-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
@@ -15,6 +16,10 @@ export function FeedList({ items }: { items: FeedItem[] }) {
             navigate({
               to: '/p/$post_id',
               params: { post_id: String(postId) },
+              search: {
+                returnToPath: location.pathname,
+                returnToSearch: location.search,
+              },
             })
           }
           onToggleLike={(postId, liked) => console.log('like', postId, liked)}

src/entities/post/api/getBookmarkedPosts.ts

@@ -0,0 +1,20 @@
+import { instance } from '@/shared/api/ky'
+import {
+  BookmarkedPostSchema,
+  ApiResponseSchema,
+} from '@/entities/post/model/schema'
+import type { BookmarkedPost } from '@/entities/post/model/types'
+
+export async function getBookmarkedPosts(): Promise<BookmarkedPost[]> {
+  const response = await instance.get('api/v1/posts/bookmarks')
+
+  const raw = await response.json()
+
+  const parsed = ApiResponseSchema(BookmarkedPostSchema.array()).parse(raw)
+
+  if (!parsed.success) {
+    throw new Error(parsed.message || 'Failed to load bookmarked posts')
+  }
+
+  return parsed.data
+}

src/entities/post/model/hooks/useBookmarkedPostsQuery.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { getBookmarkedPosts } from '@/entities/post/api/getBookmarkedPosts'
+import type { BookmarkedPost } from '@/entities/post/model/types'
+
+export function useBookmarkedPostsQuery() {
+  return useQuery<BookmarkedPost[]>({
+    queryKey: ['posts', 'bookmarks'],
+    queryFn: () => getBookmarkedPosts(),
+    retry: false,
+  })
+}

src/entities/post/model/schema.ts

@@ -0,0 +1,31 @@
+import { z } from 'zod'
+
+export const PostImageSchema = z.object({
+  id: z.number(),
+  url: z.string(),
+  orderIndex: z.number(),
+})
+
+export const BookmarkedPostSchema = z.object({
+  id: z.number(),
+  userId: z.number(),
+  nickname: z.string(),
+  profileImageUrl: z.string(),
+  content: z.string(),
+  albumId: z.number().nullable(),
+  images: z.array(PostImageSchema),
+  likeCount: z.number(),
+  commentCount: z.number(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  liked: z.boolean(),
+  bookmarked: z.boolean(),
+})
+
+export const ApiResponseSchema = <T extends z.ZodTypeAny>(dataSchema: T) =>
+  z.object({
+    code: z.string(),
+    message: z.string(),
+    data: dataSchema,
+    success: z.boolean(),
+  })

src/entities/post/model/types.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod'
+import {
+  BookmarkedPostSchema,
+  PostImageSchema,
+  ApiResponseSchema,
+} from './schema'
+
+export type PostImage = z.infer<typeof PostImageSchema>
+export type BookmarkedPost = z.infer<typeof BookmarkedPostSchema>
+
+export type ApiResponse<T> = z.infer<
+  ReturnType<typeof ApiResponseSchema<z.ZodType<T>>>
+>

src/features/profile-posts/ui/ProfilePostTile.tsx

@@ -1,28 +1,44 @@
 import { Heart, MessageCircle } from 'lucide-react'
 import { useMemo, useState } from 'react'
+import { useNavigate, useLocation } from '@tanstack/react-router'
 
 import { cn } from '@/shared/lib/utils'
 import { ImageFallback } from '@/shared/ui/image-fallback'
 
 type ProfilePostTileProps = {
   className?: string
+  postId: string
   imageSrc?: string
   likeCount: number
   commentCount: number
 }
 
 export function ProfilePostTile({
   className,
+  postId,
   imageSrc,
   likeCount,
   commentCount,
 }: ProfilePostTileProps) {
   const [isImageError, setIsImageError] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation()
 
   const countsLabel = useMemo(() => {
     return `좋아요 ${likeCount}개, 댓글 ${commentCount}개`
   }, [commentCount, likeCount])
 
+  const handleClick = () => {
+    navigate({
+      to: '/p/$post_id',
+      params: { post_id: postId },
+      search: {
+        returnToPath: location.pathname,
+        returnToSearch: location.search,
+      },
+    })
+  }
+
   return (
     <button
       type="button"
@@ -31,6 +47,7 @@ export function ProfilePostTile({
         className
       )}
       aria-label={countsLabel}
+      onClick={handleClick}
     >
       {imageSrc && !isImageError ? (
         <img

src/features/profile-posts/ui/ProfilePostsGrid.tsx

@@ -20,6 +20,7 @@ export function ProfilePostsGrid({ className, items }: ProfilePostsGridProps) {
       {items.map((item) => (
         <ProfilePostTile
           key={item.id}
+          postId={item.id}
           imageSrc={item.imageSrc}
           likeCount={item.likeCount}
           commentCount={item.commentCount}

src/mocks/handlers/post.ts

@@ -15,4 +15,35 @@ export const postHandlers = [
       data: post,
     })
   }),
+  http.get('*/api/v1/posts/bookmarks', () => {
+    const bookmarkedPostIds = ['1', '3', '5', '7', '9']
+    const bookmarkedPosts = posts
+      .filter((p) => bookmarkedPostIds.includes(p.id))
+      .map((p, index) => ({
+        id: Number(p.id),
+        userId: 1,
+        nickname: p.username,
+        profileImageUrl: p.userImage,
+        content: p.caption,
+        albumId: null,
+        images: p.images.map((url, imgIndex) => ({
+          id: Number(p.id) * 100 + imgIndex,
+          url,
+          orderIndex: imgIndex,
+        })),
+        likeCount: p.likeCount,
+        commentCount: p.commentCount,
+        createdAt: p.createdAt,
+        updatedAt: p.createdAt,
+        liked: index % 2 === 0,
+        bookmarked: true,
+      }))
+
+    return HttpResponse.json({
+      code: '200',
+      message: '요청에 성공하였습니다.',
+      data: bookmarkedPosts,
+      success: true,
+    })
+  }),
 ]

src/routes/_app/$profile_name/saved.tsx

@@ -1,13 +1,35 @@
 import { createFileRoute } from '@tanstack/react-router'
 
 import { ProfileContentContainer } from '@/widgets/profile-layout'
+import { ProfilePostsGrid } from '@/features/profile-posts/ui/ProfilePostsGrid'
+import { useBookmarkedPostsQuery } from '@/entities/post/model/hooks/useBookmarkedPostsQuery'
+import type { ProfilePostGridItem } from '@/features/profile-posts/ui/ProfilePostsGrid'
 
 export const Route = createFileRoute('/_app/$profile_name/saved')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
+  const { data: bookmarkedPosts = [], isLoading } = useBookmarkedPostsQuery()
+
+  const items: ProfilePostGridItem[] = bookmarkedPosts.map((post) => ({
+    id: String(post.id),
+    imageSrc: post.images[0]?.url,
+    likeCount: post.likeCount,
+    commentCount: post.commentCount,
+  }))
+
+  if (isLoading) {
+    return (
+      <ProfileContentContainer className="py-6">
+        <div>Loading...</div>
+      </ProfileContentContainer>
+    )
+  }
+
   return (
-    <ProfileContentContainer className="py-6">저장됨</ProfileContentContainer>
+    <ProfileContentContainer className="py-6">
+      <ProfilePostsGrid items={items} />
+    </ProfileContentContainer>
   )
 }