빌더 피드 QA 수정 및 댓글 기능 추가

.claude/rules/no-lucide-icon-substitution.md

@@ -0,0 +1,40 @@
+# No lucide-react Icon Substitution for Design Assets
+
+## Rule
+
+When a Figma design specifies a custom icon (non-standard shape, brand icon, or project-specific glyph), **do NOT substitute it with a lucide-react icon**.
+
+## What This Means
+
+If the designer used a custom SVG icon that isn't in lucide-react:
+
+```tsx
+// ❌ Wrong — lucide-react substitute when Figma has a custom icon
+import { CircleCheck } from 'lucide-react';
+<CircleCheck className="h-250 w-250" />
+
+// ✅ Correct — inline SVG from Figma asset
+<svg width="20" height="20" viewBox="..." fill="currentColor" aria-hidden="true">
+  <path d="..." />
+</svg>
+```
+
+## How to Get the Real Icon
+
+1. In Figma MCP, call `get_design_context` on the parent node
+2. Find the icon child node (usually named with the icon type)
+3. Call `get_screenshot` on that child node to get the asset URL
+4. Download immediately: `curl -s -o public/<route>/<name>.svg "<asset-url>"`
+5. Verify: `file public/<route>/<name>.svg` — must say SVG, not HTML
+6. Use as inline SVG with `fill="currentColor"` for color inheritance
+
+## When lucide-react IS Allowed
+
+lucide-react is the standard icon library for generic UI icons (arrows, close buttons, chevrons, etc.) that have no custom Figma counterpart. Use it freely for:
+- Navigation icons (ChevronLeft, ChevronRight, X, ArrowLeft, etc.)
+- Form icons (Search, Eye, EyeOff, etc.)
+- Generic utility icons not specified as custom assets in Figma
+
+## The Problem This Prevents
+
+lucide-react substitutes silently change the visual identity of design-specific icons. The designer chose a specific icon shape intentionally — substituting it breaks brand consistency.

e2e/class/builder-feed.spec.ts

@@ -106,6 +106,7 @@ function makeFeedDetail(): { content: BuilderFeedDetailResponse } {
       lessonId: 101,
       content: '피드 상세 내용입니다.',
       imageUrls: [],
+      artifactUrl: null,
       author: { memberId: 2, nickname: '테스터', role: 'STUDENT' },
       likeCount: 5,
       commentCount: 1,

next.config.ts

@@ -145,8 +145,7 @@ const nextConfig: NextConfig = {
       },
       {
         protocol: 'https',
-        hostname:
-          'uploaded-files-qa.32cd2fa416bea795bf67cbf65411103b.r2.cloudflarestorage.com',
+        hostname: '**.r2.cloudflarestorage.com',
         pathname: '/**',
       },
       ...(isProd

src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-builder-feed-detail-modal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Heart, MessageCircle, X } from 'lucide-react';
+import { Heart, Link as LinkIcon, MessageCircle, X } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 
@@ -22,6 +22,10 @@ interface Props {
   onClose: () => void;
 }
 
+function isImageUrl(url: string): boolean {
+  return /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i.test(url);
+}
+
 export function LessonBuilderFeedDetailModal({ feedId, onClose }: Props) {
   const { data: feed, isLoading } = useGetBuilderFeedDetail(feedId ?? 0);
 
@@ -91,6 +95,30 @@ export function LessonBuilderFeedDetailModal({ feedId, onClose }: Props) {
                 </p>
               </div>
 
+              {/* Artifact — retrospective screenshot or link */}
+              {feed.artifactUrl &&
+                (isImageUrl(feed.artifactUrl) ? (
+                  <div className="relative aspect-video overflow-hidden rounded-100 bg-gray-200">
+                    <Image
+                      src={feed.artifactUrl}
+                      alt="제출 스크린샷"
+                      fill
+                      unoptimized
+                      className="object-contain"
+                    />
+                  </div>
+                ) : (
+                  <a
+                    href={feed.artifactUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-100 break-all font-designer-14m text-background-brand-default hover:underline"
+                  >
+                    <LinkIcon className="h-200 w-200 shrink-0" />
+                    {feed.artifactUrl}
+                  </a>
+                ))}
+
               {/* Content */}
               <MarkdownContentCore content={feed.content} />
 

src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-detail-modal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import DOMPurify from 'dompurify';
 import {
   Heart,
   HelpCircle,
@@ -67,11 +68,25 @@ function stripHtml(html: string): string {
 }
 
 function HtmlContent({ html }: { html: string }) {
+  const isHtml = /<[a-z]/i.test(html);
+
+  if (!isHtml) {
+    return (
+      <div className="tiptap-editor">
+        <div className="tiptap whitespace-pre-wrap font-designer-16r leading-relaxed text-gray-800">
+          {html}
+        </div>
+      </div>
+    );
+  }
+
+  const sanitized =
+    typeof window !== 'undefined' ? DOMPurify.sanitize(html) : html;
   return (
     <div className="tiptap-editor">
       <div
         className="tiptap font-designer-16r leading-relaxed text-gray-800"
-        dangerouslySetInnerHTML={{ __html: html }}
+        dangerouslySetInnerHTML={{ __html: sanitized }}
       />
     </div>
   );

src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-review-form.tsx

@@ -38,6 +38,7 @@ interface LessonFormProps {
   artifactSubmissionRequired: boolean;
   alreadySubmitted: boolean;
   submitting: boolean;
+  isLastLesson?: boolean;
   onSubmit: (data: LessonFormData) => void;
 }
 
@@ -100,6 +101,7 @@ export function LessonReviewForm({
   artifactSubmissionRequired,
   alreadySubmitted,
   submitting,
+  isLastLesson = false,
   onSubmit,
 }: LessonFormProps) {
   const isQuiz = retrospectivePurpose === 'SUBJECTIVE_QUIZ';
@@ -348,7 +350,9 @@ export function LessonReviewForm({
           ? '이미 제출했어요'
           : submitting
             ? '제출 중...'
-            : '제출하고 다음 Lesson 하러 가기'}
+            : isLastLesson
+              ? '완주하고 축하 페이지로 가기'
+              : '제출하고 다음 Lesson 하러 가기'}
       </button>
 
       <LessonScreenshotModal

src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-screenshot-modal.tsx

@@ -22,6 +22,14 @@ export function LessonScreenshotModal({ open, onClose, onConfirm }: Props) {
   if (!open) return null;
 
   async function handleFileSelect(file: File) {
+    const MAX_SIZE = 5 * 1024 * 1024;
+    if (file.size > MAX_SIZE) {
+      showToast(
+        `이미지 파일 크기는 5MB 이하만 첨부할 수 있어요. (현재: ${(file.size / 1024 / 1024).toFixed(1)}MB)`,
+        'error',
+      );
+      return;
+    }
     setUploading(true);
     try {
       const url = await uploadCommunityMarkdownImage(file);

src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx

@@ -108,6 +108,16 @@ export default function LessonPage({
     [drawerChapters],
   );
 
+  const isLastLesson = useMemo(() => {
+    const allLessons = drawerChapters.flatMap((c) => c.lessons);
+    if (allLessons.length === 0) return false;
+    const isLast = allLessons.at(-1)?.lessonId === lessonId;
+    const allOthersCompleted = allLessons.every(
+      (l) => l.lessonId === lessonId || l.status === 'COMPLETED',
+    );
+    return isLast && allOthersCompleted;
+  }, [drawerChapters, lessonId]);
+
   const alreadySubmitted = lesson?.retrospectiveSubmitted ?? false;
 
   function toggleChapter(chapterId: number) {
@@ -257,6 +267,7 @@ export default function LessonPage({
                 }
                 alreadySubmitted={alreadySubmitted}
                 submitting={submitRetrospective.isPending}
+                isLastLesson={isLastLesson}
                 onSubmit={handleSubmit}
               />
             ) : null}

src/app/(landing)/class/[slug]/(learning)/_components/feed-tab.tsx

@@ -4,7 +4,7 @@ import { ChevronDown } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import { PlanSelectionModal } from '@/components/pages/class/plan-selection-modal';
 import { useAuth } from '@/features/auth/model/use-auth';
@@ -32,8 +32,6 @@ const SORT_API_MAP: Record<SortOption, 'LATEST' | 'POPULAR'> = {
   인기순: 'POPULAR',
 };
 
-const FILTER_OPTIONS: FeedFilter[] = ['전체', '운영자 PICK', '내 피드'];
-
 const FILTER_API_MAP: Record<FeedFilter, 'ALL' | 'OPERATOR_PICK' | 'MY'> = {
   전체: 'ALL',
   '운영자 PICK': 'OPERATOR_PICK',
@@ -65,6 +63,26 @@ export function FeedTab() {
     size: PAGE_SIZE,
   });
 
+  const { data: operatorPickProbe } = useGetBuilderFeeds({
+    courseId,
+    filter: 'OPERATOR_PICK',
+    size: 1,
+  });
+  const hasOperatorPick = (operatorPickProbe?.totalCount ?? 0) > 0;
+
+  useEffect(() => {
+    if (!hasOperatorPick && filter === '운영자 PICK') {
+      setFilter('전체');
+      setCurrentPage(0);
+    }
+  }, [hasOperatorPick, filter]);
+
+  const filterOptions: FeedFilter[] = [
+    '전체',
+    ...(hasOperatorPick ? (['운영자 PICK'] as FeedFilter[]) : []),
+    '내 피드',
+  ];
+
   const lessonOptions = useMemo(
     () =>
       curriculum?.chapters.flatMap((ch) =>
@@ -132,16 +150,16 @@ export function FeedTab() {
         <div className="mb-400 flex items-center justify-between">
           {/* Filter chips */}
           <div className="flex gap-225">
-            {FILTER_OPTIONS.map((f) => (
+            {filterOptions.map((f) => (
               <button
                 key={f}
                 type="button"
                 onClick={() => handleFilterChange(f)}
                 className={cn(
-                  'rounded-875 px-325 py-125 font-designer-20b transition-colors',
+                  'rounded-full px-325 py-125 font-designer-20b transition-colors',
                   filter === f
                     ? 'border border-background-brand-default text-background-brand-default'
-                    : 'border border-gray-400 text-gray-400',
+                    : 'border border-gray-450 text-gray-450',
                 )}
               >
                 {f}

src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx

@@ -4,6 +4,7 @@ import { ChevronDown, Search } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
+import { QnaAnsweredIcon } from '@/components/common/ui/icons/course-icons';
 import {
   useGetCourseDetail,
   useGetCourseQnas,
@@ -82,17 +83,17 @@ export function QnaTab() {
       {/* ── Controls row ── */}
       <div className="mb-500 flex flex-wrap items-center gap-200">
         {/* Filter tabs */}
-        <div className="flex items-center gap-150">
+        <div className="flex items-center gap-225">
           {FILTER_TABS.map((tab) => (
             <button
               key={tab.value}
               type="button"
               onClick={() => setFilter(tab.value)}
               className={cn(
-                'rounded-full border px-325 py-125 font-designer-14m transition-colors',
+                'rounded-full border px-325 py-125 font-designer-20b transition-colors',
                 filter === tab.value
-                  ? 'border-rose-500 text-rose-500'
-                  : 'border-border-subtle text-gray-500 hover:border-gray-400',
+                  ? 'border-background-brand-default text-background-brand-default'
+                  : 'border-gray-450 text-gray-450',
               )}
             >
               {tab.label}
@@ -197,18 +198,21 @@ export function QnaTab() {
               <div className="mb-200 flex items-center gap-150">
                 <span
                   className={cn(
-                    'rounded-full border px-175 py-75 font-designer-14m',
+                    'flex items-center gap-50 rounded-full border px-250 py-125 font-designer-14m',
                     q.answerStatus === 'ANSWERED'
-                      ? 'border-rose-500 text-rose-500'
+                      ? 'border-qna-answered bg-qna-answered-bg text-qna-answered'
                       : 'border-border-subtle text-gray-500',
                   )}
                 >
+                  {q.answerStatus === 'ANSWERED' && (
+                    <QnaAnsweredIcon className="h-250 w-250" />
+                  )}
                   {q.answerStatus === 'ANSWERED' ? '답변완료' : '답변 대기'}
                 </span>
-                <span className="flex items-center gap-75 font-designer-14r text-gray-500">
+                <span className="flex items-center gap-75 rounded-full border border-border-subtle px-250 py-125 font-designer-14m text-gray-500">
                   나도 궁금해요 {q.curiousCount}
                 </span>
-                <span className="flex items-center gap-75 font-designer-14r text-gray-500">
+                <span className="flex items-center gap-75 rounded-full border border-border-subtle px-250 py-125 font-designer-14m text-gray-500">
                   유용해요 {q.usefulCount}
                 </span>
               </div>