라우트 수정

src/routes/stories/$profile_name/$story_id.tsx

@@ -1,9 +1,57 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { StoryViewer } from '@/features/story-viewer/ui/StoryViewer'
+import { useQuery } from '@tanstack/react-query'
+import { getStoryDetail } from '@/entities/story/api/getStoryDetail'
+import { useProfile } from '@/entities/user/model/hooks/useProfile'
+import { useMemo } from 'react'
+import type { StoryFeedItem } from '@/entities/story/model/types'
 
 export const Route = createFileRoute('/stories/$profile_name/$story_id')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/stories/$profile_name/$story_id"!</div>
+  const { profile_name: userId } = Route.useParams()
+  const { data: profileData } = useProfile(Number(userId))
+
+  const { data: detailData, isLoading: isDetailLoading } = useQuery({
+    queryKey: ['stories', 'user', userId],
+    queryFn: () => getStoryDetail(userId),
+    enabled: !!userId,
+  })
+
+  const userStoryFeedItem: StoryFeedItem | undefined = useMemo(() => {
+    if (!detailData || !profileData) return undefined
+    return {
+      userId: String(profileData.userId),
+      nickname: profileData.nickname,
+      profileImageUrl: profileData.profileImageUrl,
+      hasUnseenStory: detailData.hasUnseenStory,
+      stories: detailData.stories,
+    }
+  }, [detailData, profileData])
+
+  const feed = useMemo(() => {
+    if (!userStoryFeedItem) return []
+    return [userStoryFeedItem]
+  }, [userStoryFeedItem])
+
+  if (isDetailLoading || !userStoryFeedItem) {
+    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>
+    )
+  }
+
+  return (
+    <div className="h-screen w-full bg-black">
+      <StoryViewer
+        feed={feed}
+        userId={userId}
+        detailUser={userStoryFeedItem}
+        isDetailLoading={isDetailLoading}
+      />
+    </div>
+  )
 }

src/widgets/profile-header/ui/ProfileAvatar.tsx

@@ -10,6 +10,7 @@ type ProfileAvatarProps = {
   hasStory?: boolean
   hasUnseenStory?: boolean
   userId?: number
+  firstStoryId?: number
 }
 
 export function ProfileAvatar({
@@ -18,6 +19,7 @@ export function ProfileAvatar({
   hasStory = false,
   hasUnseenStory = false,
   userId,
+  firstStoryId,
 }: ProfileAvatarProps) {
   const avatarContent = avatarUrl ? (
     <img
@@ -41,7 +43,7 @@ export function ProfileAvatar({
     <div className="relative flex cursor-pointer items-center justify-center">
       <div
         className={cn(
-          'absolute size-[164px] rounded-full p-[3px]',
+          'absolute size-[166px] rounded-full p-[2px]',
           ringClassName
         )}
       >
@@ -51,9 +53,15 @@ export function ProfileAvatar({
     </div>
   )
 
-  if (userId) {
+  if (userId && firstStoryId) {
     return (
-      <Link to="/stories/$user_id" params={{ user_id: String(userId) }}>
+      <Link
+        to="/stories/$profile_name/$story_id"
+        params={{
+          profile_name: String(userId),
+          story_id: String(firstStoryId),
+        }}
+      >
         {content}
       </Link>
     )

src/widgets/profile-header/ui/ProfileHeader.tsx

@@ -86,6 +86,7 @@ export function ProfileHeader({
               hasStory={hasStory}
               hasUnseenStory={userStoriesData?.hasUnseenStory}
               userId={userId}
+              firstStoryId={userStoriesData?.stories[0]?.id}
             />
           </div>