[BOM-1172] refactor: 챌린지 코멘트 날짜 필터 UI 개선

web/babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   presets: [
     ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
   ],
 };

web/jest.config.cjs

@@ -6,6 +6,9 @@
 /** @type {import('jest').Config} */
 const config = {
   clearMocks: true,
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
   testEnvironment: 'jsdom',
 };
 

web/src/mocks/datas/challenge.ts

@@ -158,8 +158,8 @@ export const CHALLENGES: Challenge[] = [
     id: 8,
     title: '매일 아침 뉴스레터 읽기',
     generation: 2,
-    startDate: '2026-01-06',
-    endDate: '2026-01-20',
+    startDate: '2026-07-07',
+    endDate: '2026-07-18',
     participantCount: 35,
     newsletters: [
       {

web/src/mocks/datas/challengeComments.ts

@@ -1,4 +1,97 @@
+const buildTimelineComment = ({
+  commentId,
+  date,
+  hour,
+  nickname,
+  articleTitle,
+  comment,
+}: {
+  commentId: number;
+  date: string;
+  hour: number;
+  nickname: string;
+  articleTitle: string;
+  comment: string;
+}) => ({
+  commentId,
+  nickname,
+  profileImageUrl: `https://i.pravatar.cc/150?img=${commentId % 70}`,
+  newsletterName: '타임라인 뉴스',
+  isSubscribed: true,
+  articleTitle,
+  createdAt: `${date}T${String(hour).padStart(2, '0')}:00:00.000Z`,
+  comment,
+  isMyComment: false,
+  likeCount: commentId % 12,
+  isLiked: commentId % 3 === 0,
+  replyCount: commentId % 4,
+});
+
+const TIMELINE_COMMENTS = [
+  ...Array.from({ length: 8 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 100 + index,
+      date: '2026-03-03',
+      hour: 18 - index,
+      nickname: `타임라인유저${index + 1}`,
+      articleTitle: `3월 3일 뉴스레터 ${index + 1}`,
+      comment: `3월 3일 ${index + 1}번째 코멘트입니다. 한 날짜에서 여러 페이지가 이어지는지 확인합니다.`,
+    }),
+  ),
+  ...Array.from({ length: 3 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 300 + index,
+      date: '2026-03-02',
+      hour: 14 - index,
+      nickname: `월요일독자${index + 1}`,
+      articleTitle: `3월 2일 뉴스레터 ${index + 1}`,
+      comment: `3월 2일 ${index + 1}번째 코멘트입니다.`,
+    }),
+  ),
+  ...Array.from({ length: 4 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 200 + index,
+      date: '2026-02-27',
+      hour: 16 - index,
+      nickname: `금요일독자${index + 1}`,
+      articleTitle: `2월 27일 뉴스레터 ${index + 1}`,
+      comment: `2월 27일 ${index + 1}번째 코멘트입니다. 날짜가 넘어간 뒤에도 목록이 이어지는지 확인합니다.`,
+    }),
+  ),
+  ...Array.from({ length: 5 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 400 + index,
+      date: '2026-02-24',
+      hour: 10 - index,
+      nickname: `화요일독자${index + 1}`,
+      articleTitle: `2월 24일 뉴스레터 ${index + 1}`,
+      comment: `2월 24일 ${index + 1}번째 코멘트입니다.`,
+    }),
+  ),
+  ...Array.from({ length: 2 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 500 + index,
+      date: '2026-02-17',
+      hour: 9 - index,
+      nickname: `수요일독자${index + 1}`,
+      articleTitle: `2월 17일 뉴스레터 ${index + 1}`,
+      comment: `2월 17일 ${index + 1}번째 코멘트입니다.`,
+    }),
+  ),
+  ...Array.from({ length: 6 }, (_, index) =>
+    buildTimelineComment({
+      commentId: 600 + index,
+      date: '2026-02-10',
+      hour: 15 - index,
+      nickname: `목요일독자${index + 1}`,
+      articleTitle: `2월 10일 뉴스레터 ${index + 1}`,
+      comment: `2월 10일 ${index + 1}번째 코멘트입니다.`,
+    }),
+  ),
+];
+
 export const CHALLENGE_COMMENTS = [
+  ...TIMELINE_COMMENTS,
   {
     commentId: 1,
     nickname: '김철수',

web/src/mocks/handlers/challenge.ts

@@ -12,6 +12,7 @@ import type {
   GetChallengeCommentsResponse,
   GetChallengeCommentRepliesResponse,
   GetChallengeEligibilityResponse,
+  GetChallengeInfoResponse,
   GetMemberChallengeProgressResponse,
   GetMemberChallengeStreakResponse,
   GetDailyGuideCommentsResponse,
@@ -124,6 +125,24 @@ const buildTeamProgressResponse = (
   };
 };
 
+const buildChallengeInfoResponse = (
+  challengeId: number,
+): GetChallengeInfoResponse => {
+  const challenge = CHALLENGES.find((item) => item.id === challengeId);
+  const startDate = challenge?.startDate ?? '2026-01-05';
+  const endDate = challenge?.endDate ?? '2026-02-04';
+  const totalDays = buildWeekdayDates(startDate, endDate).length;
+
+  return {
+    name: challenge?.title ?? '한달 뉴스레터 읽기 챌린지',
+    startDate,
+    endDate,
+    generation: challenge?.generation ?? 1,
+    totalDays,
+    requiredDays: Math.ceil(totalDays * 0.8),
+  };
+};
+
 export const challengeHandlers = [
   http.get(`${baseURL}/challenges`, ({ request }) => {
     const url = new URL(request.url);
@@ -141,6 +160,12 @@ export const challengeHandlers = [
     return HttpResponse.json(CHALLENGES);
   }),
 
+  http.get(`${baseURL}/challenges/:challengeId`, ({ params }) => {
+    const response = buildChallengeInfoResponse(Number(params.challengeId));
+
+    return HttpResponse.json(response);
+  }),
+
   http.get(`${baseURL}/challenges/:challengeId/eligibility`, ({ params }) => {
     const { challengeId } = params;
 

web/src/pages/challenge/comments/components/CommentCardSkeleton.tsx

@@ -0,0 +1,17 @@
+import Skeleton from '@/components/Skeleton/Skeleton';
+import { useDevice } from '@/hooks/useDevice';
+
+const CommentCardSkeleton = () => {
+  const device = useDevice();
+  const isMobile = device === 'mobile';
+
+  return (
+    <Skeleton
+      width="100%"
+      height={isMobile ? '156px' : '172px'}
+      borderRadius="12px"
+    />
+  );
+};
+
+export default CommentCardSkeleton;