Merge pull request #142 from wafflestudio/141-feature-final

✨ feat: 스토리 조회수 구현

Author: c0912jy

src/entities/story/model/types.ts

@@ -4,6 +4,7 @@ export interface Story {
   imageUrl: string
   createdAt: string
   expiresAt?: string
+  viewCount?: number
 }
 
 export interface StoryFeedItem {

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

@@ -226,14 +226,25 @@ export function StoryViewer({ feed, userId }: StoryViewerProps) {
               </p>
             </div>
           ) : (
-            <img
-              key={currentStory.imageUrl}
-              src={currentStory.imageUrl}
-              className="h-full w-full object-cover select-none"
-              alt="story"
-              onError={() => setImageError(true)}
-              referrerPolicy="no-referrer"
-            />
+            <>
+              <img
+                key={currentStory.imageUrl}
+                src={currentStory.imageUrl}
+                className="h-full w-full object-cover select-none"
+                alt="story"
+                onError={() => setImageError(true)}
+                referrerPolicy="no-referrer"
+              />
+
+              {/* 내 스토리일 때 좌측 하단에 조회수 표시 */}
+              {isMine && currentStory.viewCount !== undefined && (
+                <div className="absolute bottom-4 left-4 z-50 flex flex-col items-start gap-1">
+                  <span className="text-[13px] font-semibold text-white drop-shadow-md">
+                    {currentStory.viewCount}명이 읽음
+                  </span>
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

src/mocks/handlers/story.ts

@@ -16,6 +16,7 @@ const StoryFeedItemSchema = z.object({
       userId: z.string(),
       imageUrl: z.string(),
       createdAt: z.string(),
+      viewCount: z.number().optional(),
     })
   ),
 })
@@ -69,6 +70,7 @@ export const storyHandlers = [
             userId: String(s.userId),
             imageUrl: s.imageUrl,
             createdAt: s.createdAt,
+            viewCount: s.viewCount,
           }))
 
         if (userStories.length === 0) return null