Merge pull request #631 from code-zero-to-one/fix/lesson-type

LessonReviewForm 리팩토링 및 3-type 버그 수정

Author: HA-SEUNG-JEONG

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

@@ -2,10 +2,14 @@
 
 import { Image as ImageIcon, Link as LinkIcon, X } from 'lucide-react';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import MarkdownEditor from '@/components/common/ui/editor/markdown-editor';
 import { uploadCommunityMarkdownImage } from '@/features/community/model/community-markdown-image-upload';
+import type { LessonRetrospectivePurpose } from '@/types/api/course.types';
+import { LessonLinkModal } from './lesson-link-modal';
 import { RatingBox } from './lesson-rating-box';
+import { LessonScreenshotModal } from './lesson-screenshot-modal';
 
 export const POSITIVE_CHIPS = [
   '설명이 이해하기 쉬웠어요',
@@ -18,29 +22,22 @@ export const NEGATIVE_CHIPS = [
   '뭘 하는 건지 모르겠어요',
 ];
 
-interface Props {
+export interface LessonFormData {
   starRating: number;
-  onStarRatingChange: (v: number) => void;
-  highlightAnswer: string;
-  unexpectedAnswer: string;
-  selectedChips: Set<string>;
+  expectationAnswer: string;
+  surpriseAnswer: string;
+  artifactImageUrl: string | null;
+  artifactLink: string | null;
+  checklistFlags: boolean[];
   feedbackText: string;
-  submitDisabled: boolean;
-  submitting: boolean;
-  alreadySubmitted: boolean;
-  showArtifact: boolean;
+}
+
+interface LessonFormProps {
+  retrospectivePurpose: LessonRetrospectivePurpose;
   retrospectivePrompt?: string;
-  onHighlightAnswerChange: (v: string) => void;
-  onUnexpectedAnswerChange: (v: string) => void;
-  onToggleChip: (chip: string) => void;
-  onFeedbackChange: (v: string) => void;
-  artifactImagePreviewUrl?: string | null;
-  artifactLink?: string | null;
-  onAttachScreenshot: () => void;
-  onAttachLink: () => void;
-  onRemoveArtifactImage?: () => void;
-  onRemoveArtifactLink?: () => void;
-  onSubmit: () => void;
+  alreadySubmitted: boolean;
+  submitting: boolean;
+  onSubmit: (data: LessonFormData) => void;
 }
 
 function QuestionBlock({
@@ -97,29 +94,69 @@ function SectionTitle({ bold, suffix }: { bold: string; suffix: string }) {
 }
 
 export function LessonReviewForm({
-  starRating,
-  onStarRatingChange,
-  highlightAnswer,
-  unexpectedAnswer,
-  selectedChips,
-  feedbackText,
-  submitDisabled,
-  submitting,
-  alreadySubmitted,
-  showArtifact,
+  retrospectivePurpose,
   retrospectivePrompt,
-  onHighlightAnswerChange,
-  onUnexpectedAnswerChange,
-  onToggleChip,
-  onFeedbackChange,
-  artifactImagePreviewUrl,
-  artifactLink,
-  onAttachScreenshot,
-  onAttachLink,
-  onRemoveArtifactImage,
-  onRemoveArtifactLink,
+  alreadySubmitted,
+  submitting,
   onSubmit,
-}: Props) {
+}: LessonFormProps) {
+  const isQuiz = retrospectivePurpose === 'SUBJECTIVE_QUIZ';
+
+  const [starRating, setStarRating] = useState(0);
+  const [expectationAnswer, setExpectationAnswer] = useState('');
+  const [surpriseAnswer, setSurpriseAnswer] = useState('');
+  const [selectedChips, setSelectedChips] = useState<Set<string>>(new Set());
+  const [feedbackText, setFeedbackText] = useState('');
+  const [artifactImageUrl, setArtifactImageUrl] = useState<string | null>(null);
+  const [artifactPreviewUrl, setArtifactPreviewUrl] = useState<string | null>(
+    null,
+  );
+  const [artifactLink, setArtifactLink] = useState<string | null>(null);
+  const [screenshotOpen, setScreenshotOpen] = useState(false);
+  const [linkOpen, setLinkOpen] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (artifactPreviewUrl) URL.revokeObjectURL(artifactPreviewUrl);
+    };
+  }, [artifactPreviewUrl]);
+
+  // Backend requires both answers non-blank for all types; artifact required for non-quiz
+  const isFormValid =
+    starRating > 0 &&
+    expectationAnswer.trim().length > 0 &&
+    surpriseAnswer.trim().length > 0 &&
+    (isQuiz || !!artifactImageUrl) &&
+    selectedChips.size >= 2;
+
+  const submitDisabled = !isFormValid || submitting || alreadySubmitted;
+
+  function toggleChip(chip: string) {
+    setSelectedChips((prev) => {
+      const next = new Set(prev);
+      if (next.has(chip)) next.delete(chip);
+      else next.add(chip);
+      return next;
+    });
+  }
+
+  function handleSubmit() {
+    if (submitDisabled) return;
+    const chips = [...selectedChips];
+    const checklistFlags = [...POSITIVE_CHIPS, ...NEGATIVE_CHIPS].map((c) =>
+      chips.includes(c),
+    );
+    onSubmit({
+      starRating,
+      expectationAnswer,
+      surpriseAnswer,
+      artifactImageUrl,
+      artifactLink,
+      checklistFlags,
+      feedbackText,
+    });
+  }
+
   return (
     <div className="flex w-full flex-col gap-700">
       {/* Title */}
@@ -143,46 +180,50 @@ export function LessonReviewForm({
             별점을 선택해 오늘 레슨 내용 이해도를 알려주세요.
           </p>
         </div>
-        <RatingBox rating={starRating} onChange={onStarRatingChange} />
+        <RatingBox rating={starRating} onChange={setStarRating} />
       </div>
 
-      {/* Q1 — highlight */}
+      {/* Q1 — always required by backend (highlightAnswer) */}
       <div className="flex flex-col gap-350">
         <QuestionBlock
-          question="오늘 가장 신기했던 코드 하나만 적어볼까요?"
+          question="이번 레슨, 어떤 기대로 시작했나요?"
           helper="어려웠던 점이나 뿌듯했던 순간을 기록해 보세요. 이 기록들은 모여서 당신만의 멋진 포트폴리오가 됩니다."
-          value={highlightAnswer}
+          value={expectationAnswer}
           placeholder="예 : Cursor에서 Cmd+K를 누르면 Claude가 바로 나타나는 게 신기했다."
-          onChange={onHighlightAnswerChange}
-          tall
+          onChange={setExpectationAnswer}
+          tall={!isQuiz}
         />
       </div>
 
-      {/* Q2 — unexpected */}
+      {/* Q2 — always required by backend (unexpectedAnswer); retrospectivePrompt overrides text for SUBJECTIVE_QUIZ */}
       <div className="flex flex-col gap-350">
         <QuestionBlock
           question={
             retrospectivePrompt ?? '직접 해보니 생각과 달랐던 의외의 순간은?'
           }
           helper="예상과 다르게 잘 됐거나, 막혔던 순간을 솔직하게 적어주세요."
-          value={unexpectedAnswer}
-          placeholder="예 : 코드 한 줄만 바꿨는데 전체 디자인이 바뀌어서 놀랐다."
-          onChange={onUnexpectedAnswerChange}
+          value={surpriseAnswer}
+          placeholder={
+            isQuiz
+              ? '내용을 작성해 주세요. 정답은 없습니다.'
+              : '예 : 코드 한 줄만 바꿨는데 전체 디자인이 바뀌어서 놀랐다.'
+          }
+          onChange={setSurpriseAnswer}
         />
       </div>
 
-      {/* Project completion — only for 실습 type (artifactSubmissionRequired) */}
-      {showArtifact && (
+      {/* Artifact section — PRACTICE_PROOF and ARTIFACT_SHARE (backend requires artifact for !isQuiz) */}
+      {!isQuiz && (
         <div className="flex flex-col gap-350">
           <SectionTitle
             bold="오늘의 프로젝트 완성 알리기"
             suffix="이미지는 필수로 등록해주세요(링크는 선택)"
           />
           <div className="flex flex-col gap-200">
-            {artifactImagePreviewUrl ? (
+            {artifactPreviewUrl ? (
               <div className="relative">
                 <Image
-                  src={artifactImagePreviewUrl}
+                  src={artifactPreviewUrl}
                   alt="첨부 스크린샷"
                   width={400}
                   height={202}
@@ -192,7 +233,12 @@ export function LessonReviewForm({
                 <button
                   type="button"
                   aria-label="스크린샷 삭제"
-                  onClick={onRemoveArtifactImage}
+                  onClick={() => {
+                    if (artifactPreviewUrl)
+                      URL.revokeObjectURL(artifactPreviewUrl);
+                    setArtifactImageUrl(null);
+                    setArtifactPreviewUrl(null);
+                  }}
                   className="absolute -right-75 -top-75 flex h-250 w-250 items-center justify-center rounded-full bg-gray-800 text-background-default"
                 >
                   <X className="h-150 w-150" />
@@ -201,7 +247,7 @@ export function LessonReviewForm({
             ) : (
               <button
                 type="button"
-                onClick={onAttachScreenshot}
+                onClick={() => setScreenshotOpen(true)}
                 className="flex h-800 w-full items-center justify-center gap-75 rounded-100 border border-gray-400 bg-background-default font-designer-18b text-gray-800"
               >
                 <ImageIcon className="h-300 w-300" />
@@ -216,7 +262,7 @@ export function LessonReviewForm({
                 <button
                   type="button"
                   aria-label="링크 삭제"
-                  onClick={onRemoveArtifactLink}
+                  onClick={() => setArtifactLink(null)}
                   className="ml-200 shrink-0 text-gray-400 hover:text-gray-800"
                 >
                   <X className="h-250 w-250" />
@@ -225,7 +271,7 @@ export function LessonReviewForm({
             ) : (
               <button
                 type="button"
-                onClick={onAttachLink}
+                onClick={() => setLinkOpen(true)}
                 className="flex h-800 w-full items-center justify-center gap-75 rounded-100 border border-gray-400 bg-background-default font-designer-18b text-gray-800"
               >
                 <LinkIcon className="h-300 w-300" />
@@ -247,7 +293,7 @@ export function LessonReviewForm({
                 chip={chip}
                 selected={selectedChips.has(chip)}
                 positive
-                onClick={() => onToggleChip(chip)}
+                onClick={() => toggleChip(chip)}
               />
             ))}
           </div>
@@ -257,14 +303,14 @@ export function LessonReviewForm({
                 key={chip}
                 chip={chip}
                 selected={selectedChips.has(chip)}
-                onClick={() => onToggleChip(chip)}
+                onClick={() => toggleChip(chip)}
               />
             ))}
           </div>
         </div>
         <textarea
           value={feedbackText}
-          onChange={(e) => onFeedbackChange(e.target.value)}
+          onChange={(e) => setFeedbackText(e.target.value)}
           placeholder="어떠한 피드백도 좋아요! 간략히 적어주세요! (선택사항)"
           className="h-1625 w-full resize-none rounded-200 border border-gray-300 bg-background-default px-300 py-250 font-designer-16m text-gray-800 outline-none placeholder:text-gray-400 focus:border-border-brand"
         />
@@ -274,7 +320,7 @@ export function LessonReviewForm({
       <button
         type="button"
         disabled={submitDisabled}
-        onClick={onSubmit}
+        onClick={handleSubmit}
         className={cn(
           'flex h-1000 w-full items-center justify-center gap-150 rounded-100 font-designer-24b text-text-inverse transition-colors',
           submitDisabled
@@ -297,6 +343,20 @@ export function LessonReviewForm({
             ? '제출 중...'
             : '제출하고 다음 Lesson 하러 가기'}
       </button>
+
+      <LessonScreenshotModal
+        open={screenshotOpen}
+        onClose={() => setScreenshotOpen(false)}
+        onConfirm={(imageUrl, previewUrl) => {
+          setArtifactImageUrl(imageUrl);
+          setArtifactPreviewUrl(previewUrl);
+        }}
+      />
+      <LessonLinkModal
+        open={linkOpen}
+        onClose={() => setLinkOpen(false)}
+        onConfirm={(url) => setArtifactLink(url)}
+      />
     </div>
   );
 }