✨ feat(stories): add link to story route

Author: kimnamheeee

src/widgets/stories/ui/StoriesCarousel.tsx

@@ -7,25 +7,64 @@ import {
 } from '@/shared/ui/carousel'
 
 export function StoriesCarousel() {
+  const stories = [
+    {
+      id: '1',
+      profileName: 'test',
+      storyId: '1',
+    },
+    {
+      id: '2',
+      profileName: 'test',
+      storyId: '2',
+    },
+    {
+      id: '3',
+      profileName: 'test',
+      storyId: '3',
+    },
+    {
+      id: '4',
+      profileName: 'test',
+      storyId: '4',
+    },
+    {
+      id: '5',
+      profileName: 'test',
+      storyId: '5',
+    },
+    {
+      id: '6',
+      profileName: 'test',
+      storyId: '6',
+    },
+    {
+      id: '7',
+      profileName: 'test',
+      storyId: '7',
+    },
+    {
+      id: '8',
+      profileName: 'test',
+      storyId: '8',
+    },
+    {
+      id: '9',
+      profileName: 'test',
+      storyId: '9',
+    },
+    {
+      id: '10',
+      profileName: 'test',
+      storyId: '10',
+    },
+  ]
   return (
     <Carousel className="h-fit w-full" opts={{ slidesToScroll: 4 }}>
       <CarouselContent>
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
-        <StoryItem />
+        {stories.map((story) => (
+          <StoryItem key={story.id} {...story} />
+        ))}
       </CarouselContent>
       <CarouselNext className="top-1/2 right-0 translate-y-[-50%]" />
       <CarouselPrevious className="top-1/2 left-0 translate-y-[-50%]" />

src/widgets/stories/ui/StoryItem.tsx

@@ -1,16 +1,31 @@
+import { Link } from '@tanstack/react-router'
 import { ImageFallback } from '@/shared/ui/image-fallback'
 import { CarouselItem } from '@/shared/ui/carousel'
 
-export function StoryItem() {
+interface StoryItemProps {
+  profileName: string
+  storyId: string
+}
+
+export function StoryItem({ profileName, storyId }: StoryItemProps) {
   return (
     <CarouselItem className="flex basis-1/8 flex-col items-center gap-1">
-      <div className="flex size-20 items-center justify-center rounded-full bg-linear-to-tr from-pink-500 via-red-500 to-yellow-400 p-1">
-        <div className="flex size-full items-center justify-center rounded-full bg-white p-1">
-          <div className="flex size-full items-center justify-center overflow-hidden rounded-full bg-gray-200">
-            <ImageFallback />
+      <Link
+        to="/stories/$profile_name/$story_id"
+        params={{
+          profile_name: profileName,
+          story_id: storyId,
+        }}
+        className="group focus:outline-none"
+      >
+        <div className="flex size-20 items-center justify-center rounded-full bg-linear-to-tr from-pink-500 via-red-500 to-yellow-400 p-1 transition group-hover:brightness-110">
+          <div className="flex size-full items-center justify-center rounded-full bg-white p-1">
+            <div className="flex size-full items-center justify-center overflow-hidden rounded-full bg-gray-200">
+              <ImageFallback />
+            </div>
           </div>
         </div>
-      </div>
+      </Link>
 
       <span className="text-xs">닉네임</span>
     </CarouselItem>