Merge pull request #161 from wafflestudio/158-bug-story

✨ feat: d

Author: c0912jy

src/entities/story/api/getStoryDetail.ts

@@ -0,0 +1,10 @@
+import { instance } from '@/shared/api/ky'
+import { StoryFeedItemSchema } from '@/entities/story/model/schema'
+import type { StoryFeedItem } from '@/entities/story/model/types'
+
+export async function getStoryDetail(userId: string): Promise<StoryFeedItem> {
+  const response = await instance.get(`api/v1/stories/user/${userId}`)
+  const raw = (await response.json()) as { data: unknown }
+  const parsed = StoryFeedItemSchema.parse(raw.data)
+  return parsed
+}

src/features/story-viewer/ui/StoryOptionsModal.tsx

@@ -3,6 +3,7 @@ import { useCurrentUser } from '@/shared/auth/useCurrentUser'
 interface StoryOptionsModalProps {
   isOpen: boolean
   onClose: () => void
+  isMine: boolean
   userId: string | number
   onDelete?: () => void
   onReport?: () => void
@@ -12,18 +13,15 @@ interface StoryOptionsModalProps {
 export function StoryOptionsModal({
   isOpen,
   onClose,
-  userId,
+  isMine,
   onDelete,
   onReport,
   onAccountInfo,
 }: StoryOptionsModalProps) {
-  const { data: me, isLoading } = useCurrentUser()
+  const { isLoading } = useCurrentUser()
 
   if (!isOpen || isLoading) return null
 
-  const isMine =
-    me?.userId !== undefined && String(me.userId) === String(userId)
-
   return (
     <div
       className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"

src/features/story-viewer/ui/StoryViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import {
   X,
   ChevronLeft,
@@ -8,7 +8,7 @@ import {
   MoreHorizontal,
 } from 'lucide-react'
 import { useNavigate, Link } from '@tanstack/react-router'
-import { useQueryClient } from '@tanstack/react-query'
+import { useQueryClient, useQuery } from '@tanstack/react-query'
 import type { StoryFeedItem, Story } from '@/entities/story/model/types'
 import { useStoryViewer } from '../model/useStoryViewer'
 import { STORY_VIEWER_UI } from './constants'
@@ -17,6 +17,7 @@ import ReportModal from '@/components/post/ReportModal'
 import AccountInfoModal from '@/components/post/AccountInfoModal'
 import { instance } from '@/shared/api/ky'
 import { useCurrentUser } from '@/shared/auth/useCurrentUser'
+import { getStoryDetail } from '@/entities/story/api/getStoryDetail'
 import instagramLogo from '@/assets/instagram-black-logo.png'
 
 interface StoryViewerProps {
@@ -30,25 +31,36 @@ const formatRelativeTime = (createdAt: string) => {
   const diffInMinutes = Math.floor(
     (now.getTime() - created.getTime()) / (1000 * 60)
   )
-
   if (diffInMinutes < 1) return '방금 전'
   if (diffInMinutes < 60) return `${diffInMinutes}분 전`
-
   const diffInHours = Math.floor(diffInMinutes / 60)
   return `${diffInHours}시간 전`
 }
 
 export function StoryViewer({ feed, userId }: StoryViewerProps) {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
-  const { data: me } = useCurrentUser()
+  const { data: me, isLoading: isMeLoading } = useCurrentUser()
 
   const [imageError, setImageError] = useState(false)
   const [isOptionsOpen, setIsOptionsOpen] = useState(false)
   const [isReportOpen, setIsReportOpen] = useState(false)
   const [isAccountInfoOpen, setIsAccountInfoOpen] = useState(false)
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false)
 
+  const { data: detailData, isLoading: isDetailLoading } = useQuery({
+    queryKey: ['stories', 'user', userId],
+    queryFn: () => getStoryDetail(userId),
+    enabled: !!userId,
+  })
+
+  const enrichedFeed = useMemo(() => {
+    if (!detailData) return feed
+    return feed.map((item) =>
+      String(item.userId) === String(userId) ? detailData : item
+    )
+  }, [feed, detailData, userId])
+
   const {
     currentUser,
     currentStory,
@@ -59,9 +71,10 @@ export function StoryViewer({ feed, userId }: StoryViewerProps) {
     handleNext,
     handlePrev,
     togglePause,
-  } = useStoryViewer(feed, userId)
+  } = useStoryViewer(enrichedFeed, userId)
 
   const isMine =
+    !isMeLoading &&
     me?.userId !== undefined &&
     currentUser?.userId !== undefined &&
     String(me.userId) === String(currentUser.userId)
@@ -72,7 +85,13 @@ export function StoryViewer({ feed, userId }: StoryViewerProps) {
     }
   }, [imageError, isPaused, togglePause])
 
-  if (!currentUser || !currentStory) return null
+  if (isDetailLoading || !currentUser || !currentStory) {
+    return (
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-600 border-t-white" />
+      </div>
+    )
+  }
 
   const isFirstStoryOfFirstUser =
     currentUserIndex === 0 && currentStoryIndex === 0
@@ -111,9 +130,9 @@ export function StoryViewer({ feed, userId }: StoryViewerProps) {
       const response = await instance
         .delete(`api/v1/stories/${currentStory.id}`)
         .json<{ isSuccess: boolean; code: string; message: string }>()
-
       if (response.isSuccess) {
         queryClient.invalidateQueries({ queryKey: ['stories', 'feed'] })
+        queryClient.invalidateQueries({ queryKey: ['stories', 'user', userId] })
         navigate({ to: '/', search: { page: 1 } })
       }
     } catch (error) {
@@ -274,6 +293,7 @@ export function StoryViewer({ feed, userId }: StoryViewerProps) {
       <StoryOptionsModal
         isOpen={isOptionsOpen}
         onClose={handleCloseOptions}
+        isMine={isMine}
         userId={currentUser.userId}
         onReport={handleOpenReport}
         onAccountInfo={handleOpenAccountInfo}

src/mocks/handlers/story.ts

@@ -116,29 +116,41 @@ export const storyHandlers = [
   http.get('*/api/v1/stories/user/:userId', ({ params }) => {
     const { userId: userIdParam } = params
     const userId = Number(userIdParam)
-    const userStories = stories.filter((story) => story.userId === userId)
-    const isMyStory = userId === MOCK_USER_ID
 
-    const StoryItemSchema = z.object({
-      storyId: z.number(),
-      imageUrl: z.string(),
-      createdAt: z.string(),
-      viewCount: z.number().nullable(),
-    })
+    const user = users.find((u) => u.userId === userId)
+    if (!user) {
+      return HttpResponse.json(
+        {
+          code: '404',
+          message: '사용자를 찾을 수 없습니다.',
+          isSuccess: false,
+        },
+        { status: 404 }
+      )
+    }
 
-    const storyItems = userStories.map((story) =>
-      StoryItemSchema.parse({
-        storyId: story.storyId,
-        imageUrl: story.imageUrl,
-        createdAt: story.createdAt,
-        viewCount: isMyStory ? story.viewCount : null,
-      })
-    )
+    const userStories = stories
+      .filter((story) => story.userId === userId)
+      .map((s) => ({
+        id: s.storyId,
+        userId: String(s.userId),
+        imageUrl: s.imageUrl,
+        createdAt: s.createdAt,
+        viewCount: s.viewCount,
+      }))
+
+    const responseData = StoryFeedItemSchema.parse({
+      userId: String(user.userId),
+      nickname: user.nickname,
+      profileImageUrl: user.profileImageUrl,
+      hasUnseenStory: false,
+      stories: userStories,
+    })
 
-    const responseBody = ApiResponseSchema(StoryItemSchema.array()).parse({
+    const responseBody = ApiResponseSchema(StoryFeedItemSchema).parse({
       code: '200',
       message: '요청에 성공하였습니다.',
-      data: storyItems,
+      data: responseData,
       isSuccess: true,
     })
 

src/routes/stories/$user_id.tsx

@@ -1,34 +1,47 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { StoryViewer } from '@/features/story-viewer/ui/StoryViewer'
 import { useStoryFeedQuery } from '@/entities/story/model/hooks/useStoryFeedQuery'
+import { useQuery } from '@tanstack/react-query'
+import { getStoryDetail } from '@/entities/story/api/getStoryDetail'
 
 export const Route = createFileRoute('/stories/$user_id')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
   const { user_id } = Route.useParams()
-  const { data: feedData, isLoading } = useStoryFeedQuery()
 
-  if (isLoading) {
+  const { data: feedData, isLoading: isFeedLoading } = useStoryFeedQuery()
+
+  const { data: detailData, isLoading: isDetailLoading } = useQuery({
+    queryKey: ['stories', 'user', user_id],
+    queryFn: () => getStoryDetail(user_id),
+    enabled: !!user_id,
+  })
+
+  if (isFeedLoading || isDetailLoading) {
     return (
       <div className="flex h-screen w-full items-center justify-center bg-black">
         <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-600 border-t-white" />
       </div>
     )
   }
 
-  if (!feedData || feedData.length === 0) {
+  if (!feedData || !detailData) {
     return (
       <div className="flex h-screen w-full items-center justify-center bg-black text-white">
         <p>표시할 스토리가 없습니다.</p>
       </div>
     )
   }
 
+  const mergedFeed = feedData.map((item) =>
+    String(item.userId) === String(user_id) ? detailData : item
+  )
+
   return (
     <div className="h-screen w-full bg-black">
-      <StoryViewer feed={feedData} userId={user_id} />
+      <StoryViewer feed={mergedFeed} userId={user_id} />
     </div>
   )
 }