+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+ CS
+ 25
+
+
+
+
+ 인증코드
+
+
+ + CS25에서 요청하신 인증을 위해 아래의 코드를 입력해주세요. +
+ + {/* Verification Code */} +
+
+
+ {/* Info Text */}
+
+ {verificationCode}
+
+ 인증코드
+
+
+
+
+
+
+
+ 중요 안내
+해당 코드는 3분간 유효합니다.
+
+ {children}
+
+ );
+};
+
+export default Container;
\ No newline at end of file
diff --git a/src/components/common/EmailTemplate.tsx b/src/components/common/EmailTemplate.tsx
new file mode 100644
index 0000000..e70584f
--- /dev/null
+++ b/src/components/common/EmailTemplate.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface EmailTemplateProps {
+ toEmail: string;
+ quizLink: string;
+}
+
+const EmailTemplate: React.FC
+
+ );
+};
+
+export default EmailTemplate;
\ No newline at end of file
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
new file mode 100644
index 0000000..7594e21
--- /dev/null
+++ b/src/components/common/Footer.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Container from './Container';
+
+const Footer: React.FC = () => {
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
new file mode 100644
index 0000000..cb6a8d9
--- /dev/null
+++ b/src/components/common/Header.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useLoginModal } from '../../hooks/useModal';
+import { useAuth, useLogout } from '../../hooks/useAuth';
+
+const Header: React.FC = () => {
+ const { openLoginModal } = useLoginModal();
+ const [isScrolled, setIsScrolled] = useState(false);
+ const navigate = useNavigate();
+
+ // 인증 상태와 로그아웃 기능 가져오기
+ const { isAuthenticated, isLoading } = useAuth();
+ const logoutMutation = useLogout();
+
+ // 디버깅용 로그
+ // React.useEffect(() => {
+ // console.log('🎯 Header auth state:', { isAuthenticated, isLoading });
+ // }, [isAuthenticated, isLoading]);
+
+ // 로그아웃 핸들러
+ const handleLogout = async () => {
+ try {
+ await logoutMutation.mutateAsync();
+ navigate('/'); // 로그아웃 후 홈으로 이동
+ } catch (error) {
+ console.error('❌ 로그아웃 실패:', error);
+ // 에러가 발생해도 홈으로 이동 (사용자 경험 개선)
+ navigate('/');
+ }
+ };
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+ setIsScrolled(scrollTop > 100);
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ return (
+
+ {/* Header with Logo */}
+
+
+
+
+ {/* Content */}
+
+ 
+
+
+ 오늘의 CS 문제
+AI가 준비한 맞춤형 문제를 확인하세요
+
+
+
+
+
+ {/* Action Button */}
+
+
+
+ 오늘의 문제를 풀어보세요!
+
+ 안녕하세요! CS25에서 오늘의 맞춤형 CS 문제를 보내드립니다.
+ 데일리 문제와 상세한 AI 해설로 CS 지식을 향상시켜보세요.
+
+
+
+
+ {/* Today's Topic Preview */}
+
+
+
+ {/* Subscription Settings */}
+ 오늘의 주제
+
+ 알고리즘
+ 시간복잡도
+
+
+
+
+
+ {/* Footer */}
+
+
+
+
+ + 이 메일은 {toEmail} 계정으로 발송되었습니다. +
++ 매일 새로운 CS 지식으로 성장하는 개발자가 되어보세요! 🚀 +
+
+
+
+
+
+ navigate('/')}
+ >
+
+
+
+
+ {isAuthenticated ? (
+ // 로그인된 상태
+
+
+
+
+
+ ) : (
+ // 로그인되지 않은 상태
+
+ )}
+
+
+ CS25와 함께
+ handleSocialLogin('kakao')}>
+ 카카오로 시작하기
+
+
+ handleSocialLogin('github')}>
+ GitHub로 시작하기
+
+
+ handleSocialLogin('naver')}>
+ 네이버로 시작하기
+
+
+
+ );
+};
+
+export default LoginForm;
\ No newline at end of file
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
new file mode 100644
index 0000000..b11274a
--- /dev/null
+++ b/src/components/common/Modal.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ children: React.ReactNode;
+ title?: string;
+ size?: 'sm' | 'md' | 'lg' | 'xl';
+ closable?: boolean;
+}
+
+const Modal: React.FC
+ CS25와 함께
시작하기
+
+
+ 소셜 계정으로 간편하게 로그인하고
+ AI가 전하는 더 많은 기능을 경험해보세요!
+
+ 로그인하시면 서비스 이용약관과
+ 개인정보처리방침에 동의하게 됩니다 +
+ + 개인정보처리방침에 동의하게 됩니다 +
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/src/components/common/ModalManager.tsx b/src/components/common/ModalManager.tsx
new file mode 100644
index 0000000..2b0d791
--- /dev/null
+++ b/src/components/common/ModalManager.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useModalContext } from '../../contexts/ModalContext';
+import Modal from './Modal';
+
+const ModalManager: React.FC = () => {
+ const { modals, closeModal } = useModalContext();
+
+ if (modals.length === 0) {
+ return null;
+ }
+
+ return (
+ <>
+ {modals.map((modal) => (
+
+ {/* Header */}
+ {(title || closable) && (
+
+
+ {title &&
+ )}
+
+ {/* Content */}
+ {title}
} + {closable && ( + + )} +
+ {children}
+
+
+ {/* Question Box */}
+
+ );
+};
+
+export default QuizComponent;
\ No newline at end of file
diff --git a/src/components/common/Section.tsx b/src/components/common/Section.tsx
new file mode 100644
index 0000000..10bb7db
--- /dev/null
+++ b/src/components/common/Section.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface SectionProps {
+ children: React.ReactNode;
+ className?: string;
+ backgroundColor?: 'white' | 'gray' | 'brand';
+}
+
+const Section: React.FC
+ Q. {question}
+
+
+ {/* Quiz Form */}
+
+
+
+ );
+
+ const renderSuccessStep = () => (
+
+
+
+
+
+
+
+
+
+
+ 인증 메일을 발송했습니다
+{formData.email}로
+인증번호가 포함된 메일을 발송했습니다.
+
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+ 구독이 완료되었습니다!
+
+ 선택하신 요일에 맞춰
+ 기술 면접 문제를 발송해드리겠습니다.
+
+
+
+
+ 이메일: {formData.email}
+분야: {formData.categories.map(cat => + categories.find(c => c.id === cat)?.label).join(', ')}
+요일: {formData.weekdays.map(day => + weekdays.find(w => w.id === day)?.label).join(', ')}
+구독 기간: {periods.find(p => p.id === formData.period)?.label}
+
+ {/* Email Section (Read-only) */}
+
+
+
+
+
+ {/* Categories */}
+
+
+
+
+ 인증됨
+
+
+
+
+
+
+ {/* Difficulty Level */}
+
+ {availableCategories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+ {/* Frequency */}
+
+
+
+
+
+ {/* Time Preference */}
+
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+ {/* Unsubscribe */}
+
+
+
+
+
+
+ ),
+ title: 'AI 문제 생성',
+ description: '개인 수준에 맞는 CS 문제를 AI가 실시간 생성',
+ details: '학습 패턴을 분석해 최적화된 문제 제공'
+ },
+ {
+ icon: (
+
+
+
+ ),
+ title: 'AI 해설',
+ description: '문제와 함께 AI가 생성한 상세한 해설 제공',
+ details: '코드 예시와 개념 설명으로 완벽 이해'
+ },
+ {
+ icon: (
+
+
+
+ ),
+ title: '데일리 메일',
+ description: '매일 아침 새로운 CS 지식을 메일로 전송',
+ details: '알고리즘, 자료구조, 운영체제, 네트워크 등'
+ }
+ ];
+
+ return (
+
+
+
+ + AI 기반 CS 학습의{' '} + + 혁신 + +
++ AI가 생성하고 해설하는{' '} + + 개인화된 + {' '} + CS 지식 학습 경험{' '} + ✨ +
+
+ {features.map((feature, index) => (
+
+
+
+ ))}
+
+ {feature.icon}
+
+
+ + {feature.title} +
+ ++ {feature.description} +
+ ++ 💡 {feature.details} +
+
+
+ AI가 전하는
+
+
+
+ AI가 생성하고 해설하는 CS 지식
+
+
+
+ AI가 전하는
+
+ 데일리 CS 지식
+
+ 메일로 만나보세요!
+
+
+
+ AI가 매일 새로운 CS 문제를 생성하고 상세히 해설
+ 개인 수준에 맞는 알고리즘, 자료구조, 운영체제 등
+
+
+
+
+
+
+
+
+
+
+
+ 이미 1,000+ 취준생이 사용 중
+
+
+
+ 프로필을 불러오는 중...
+
+ {/* 헤더 */}
+
+
+
+
+ {/* 프로필 카드 */}
+
+
+ 마이페이지
+
+
+ + 나의 프로필 +
+ ++ 학습 현황과 성과를 확인해보세요! +
+
+
+
+ {/* 탭 네비게이션 */}
+
+ {/* 프로필 이미지 */}
+
+
+
+ {profile?.name?.[0]?.toUpperCase() || 'U'}
+
+
+
+ {/* 프로필 정보 */}
+
+
+ + {profile?.name || '사용자'} +
+ + {/* 통계 */} +
+
+
+
+ {profile?.score || 0}
+ 점수
+
+
+ #{profile?.rank || 0}
+ 랭킹
+
+
+
+ {/* 탭 콘텐츠 */}
+
+
+
+
+ {/* 개요 탭 */}
+ {activeTab === 'overview' && (
+
+
+
+ )}
+
+ {/* 내가 틀린 푼 문제 보기 탭 */}
+ {activeTab === 'wrong-quiz' && (
+ 프로필 정보
+ + {/* 기본 정보 */} +
+
+
+ {/* 구독 관리 */}
+ {profile?.subscriptionId && (
+
+
+
+
+
+
+
+
+
+ {profile?.name || '사용자'}
+ 이름
+
+
+
+
+
+ {profile?.score || 0}
+ 현재 점수
+
+
+
+
+
+ #{profile?.rank || 0}
+ 현재 랭킹
+
+
+ )}
+
+ {/* 안내 메시지 */}
+
+
+
+
+
+ 구독 관리
+이메일 알림 설정을 관리하세요
+ +
+
+
+
+
+
+
+ 학습 팁
++ 꾸준한 문제 풀이를 통해 점수를 높이고 랭킹을 올려보세요! +
+
+
+ )}
+
+ {/* 카테고리별 정답률 탭 */}
+ {activeTab === 'correct-rate' && (
+ 틀린 문제 보기
+ + {wrongQuizLoading ? ( +
+
+
+ ) : wrongQuizData && wrongQuizData.wrongQuizList && wrongQuizData.wrongQuizList.length > 0 ? (
+ 틀린 문제를 불러오는 중...
+
+ {wrongQuizData.wrongQuizList.map((quiz: WrongQuizDto, index: number) => (
+
+ ) : (
+
+
+ ))}
+ + {quiz.question} +
+ +
+
+
+ 내 답안:
+
+ {quiz.userAnswer}
+
+
+
+
+ 정답:
+
+ {quiz.answer}
+
+
+
+ {quiz.commentary && (
+
+
+ )}
+
+ 💡 해설:
+
+ + {quiz.commentary} +
+
+
+ )}
+
+
+
+ 완벽해요!
+아직 틀린 문제가 없습니다. 계속 열심히 해보세요!
+
+
+ )}
+
+
+ 카테고리별 정답률
+ + {correctRateLoading ? ( +
+
+
+ ) : correctRateData && correctRateData.correctRates && Object.keys(correctRateData.correctRates).length > 0 ? (
+ 정답률 데이터를 불러오는 중...
+
+ {/* 바 차트 */}
+
+ ) : (
+
+
+
+ {/* 통계 카드 */}
+
+ {Object.entries(correctRateData.correctRates).map(([category, rate]) => {
+ const rateNum = Number(rate);
+ return (
+
+
+
+ );
+ })}
+
+ {category}
+ {rateNum.toFixed(1)}%
+
+
+
+ = 80 ? 'bg-green-500' :
+ rateNum >= 60 ? 'bg-yellow-500' :
+ 'bg-red-500'
+ }`}
+ style={{ width: `${Math.max(rateNum, 5)}%` }}
+ >
+
+
+
+
+
+ {Object.values(correctRateData.correctRates).filter(rate => Number(rate) >= 80).length}
+
+ 우수한 카테고리 (≥80%)
+
+
+
+ {(Object.values(correctRateData.correctRates).reduce((sum: number, rate) => sum + Number(rate), 0) / Object.values(correctRateData.correctRates).length).toFixed(1)}%
+
+ 전체 평균 정답률
+
+
+
+ {Object.values(correctRateData.correctRates).filter(rate => Number(rate) < 60).length}
+
+ 개선 필요 카테고리 (<60%)
+
+
+ )}
+
+
+
+ 아직 데이터가 없어요
+문제를 풀어보시면 카테고리별 정답률을 확인할 수 있습니다!
+
+
+ 퀴즈를 불러올 수 없습니다.
+잠시 후 다시 시도해주세요.
+
+
+
+
+ {isCorrect ? '🎉 정답입니다!' : '❌ 틀렸습니다!'}
+
+
+
+
+
+
+
+ 해설
+{currentQuiz.explanation}
+
+
+ + 정답: {currentQuiz.options.find(opt => opt.id === currentQuiz.correctAnswer)?.text} +
+
+
+
+
+ 📚 오늘의 CS 문제
+
+
+ + AI가 준비한 오늘의 연습문제 +
+ ++ 매일 새로운 CS 지식을 확인하고 실력을 향상시켜보세요 +
+
+
+
+
+ ),
+ size: 'sm'
+ });
+ };
+
+ const formatErrorMessage = (errorMessage: string) => {
+ // "field: message" 형태의 에러가 있는지 확인
+ if (errorMessage.includes(': ')) {
+ // 여러 필드 에러를 파싱
+ const errors = errorMessage.split(', ').map(error => {
+ const [field, message] = error.split(': ');
+ return { field: field?.trim(), message: message?.trim() };
+ });
+
+ return (
+
+
+
+ 구독정보가 성공적으로 수정되었습니다.
+
+ {errors.map((error, index) => (
+
+ );
+ } else {
+ // 단일 에러 메시지
+ return (
+
+
+ {error.message}
+
+ ))}
+
+
+ {errorMessage}
+
+ );
+ }
+ };
+
+ const handleUpdateError = (error: any) => {
+ const errorMessage = error?.message || error?.response?.data?.message || '구독정보 수정에 실패했습니다.';
+
+ openModal({
+ title: '수정 실패',
+ content: (
+
+
+ ),
+ size: 'md'
+ });
+ };
+
+ // 구독정보가 로드되면 폼 데이터 초기화
+ useEffect(() => {
+ if (subscription) {
+ setFormData({
+ category: subscription.category,
+ email: subscription.email,
+ weekdays: subscription.days,
+ period: '', // 기간 연장은 기본적으로 선택하지 않음
+ active: subscription.active
+ });
+ }
+ }, [subscription]);
+
+ // period 문자열을 월 단위 숫자로 변환
+ const getMonthsFromPeriod = (period: string): number => {
+ switch (period) {
+ case 'ONE_MONTH':
+ return 1;
+ case 'THREE_MONTHS':
+ return 3;
+ case 'SIX_MONTHS':
+ return 6;
+ case 'ONE_YEAR':
+ return 12;
+ default:
+ return 0;
+ }
+ };
+
+ // 구독 기간 연장이 1년 제한을 초과하는지 확인
+ const validateSubscriptionPeriod = (selectedPeriod: string): boolean => {
+ if (!selectedPeriod || !subscription?.startDate || !subscription?.endDate) {
+ return true; // 필요한 데이터가 없으면 검증 통과
+ }
+
+ const startDate = new Date(subscription.startDate);
+ const endDate = new Date(subscription.endDate);
+ const extensionMonths = getMonthsFromPeriod(selectedPeriod);
+
+ // 현재 종료일에 연장 기간을 더한 날짜
+ const newEndDate = new Date(endDate);
+ newEndDate.setMonth(newEndDate.getMonth() + extensionMonths);
+
+ // 시작일로부터 1년 후 날짜
+ const oneYearFromStart = new Date(startDate);
+ oneYearFromStart.setFullYear(oneYearFromStart.getFullYear() + 1);
+
+ // 새로운 종료일이 시작일로부터 1년을 초과하는지 확인
+ return newEndDate <= oneYearFromStart;
+ };
+
+ const getCategoryLabel = (category: string) => {
+ switch (category.toLowerCase()) {
+ case 'frontend':
+ return '프론트엔드';
+ case 'backend':
+ return '백엔드';
+ case 'certification':
+ return '자격증';
+ default:
+ return category;
+ }
+ };
+
+ // API 응답이 {data: []} 형태인지 확인하고 처리
+ const categoryList = (categoriesData && typeof categoriesData === 'object' && 'data' in categoriesData)
+ ? categoriesData.data
+ : categoriesData;
+ const categories = Array.isArray(categoryList) ? categoryList.map((category: string) => ({
+ id: category,
+ label: getCategoryLabel(category)
+ })) : [];
+
+ const weekdays = [
+ { id: 'MONDAY', label: '월' },
+ { id: 'TUESDAY', label: '화' },
+ { id: 'WEDNESDAY', label: '수' },
+ { id: 'THURSDAY', label: '목' },
+ { id: 'FRIDAY', label: '금' },
+ { id: 'SATURDAY', label: '토' },
+ { id: 'SUNDAY', label: '일' }
+ ];
+
+ const periods = [
+ { id: 'ONE_MONTH', label: '1개월' },
+ { id: 'THREE_MONTHS', label: '3개월' },
+ { id: 'SIX_MONTHS', label: '6개월' },
+ { id: 'ONE_YEAR', label: '1년' }
+ ];
+
+ const handleCategoryChange = (categoryId: string) => {
+ setFormData(prev => ({
+ ...prev,
+ category: categoryId
+ }));
+ if (formErrors.category) {
+ setFormErrors(prev => ({ ...prev, category: undefined }));
+ }
+ };
+
+ const handleWeekdayChange = (weekdayId: string) => {
+ setFormData(prev => ({
+ ...prev,
+ weekdays: prev.weekdays.includes(weekdayId)
+ ? prev.weekdays.filter(id => id !== weekdayId)
+ : [...prev.weekdays, weekdayId]
+ }));
+ if (formErrors.weekdays) {
+ setFormErrors(prev => ({ ...prev, weekdays: undefined }));
+ }
+ };
+
+ const handlePeriodChange = (periodId: string) => {
+ // 같은 기간을 다시 클릭하면 선택 해제 (빈 문자열로 설정)
+ const newPeriod = formData.period === periodId ? '' : periodId;
+
+ setFormData(prev => ({
+ ...prev,
+ period: newPeriod
+ }));
+
+ // 기간 연장 제한 실시간 검증
+ if (newPeriod && !validateSubscriptionPeriod(newPeriod)) {
+ setFormErrors(prev => ({
+ ...prev,
+ period: '구독 기간 연장 시 시작일로부터 1년을 초과할 수 없습니다.'
+ }));
+ } else if (formErrors.period) {
+ setFormErrors(prev => ({ ...prev, period: undefined }));
+ }
+ };
+
+ const handleActiveChange = (active: boolean) => {
+ if (!active) {
+ // 구독 해지 확인 모달
+ const modalId = openModal({
+ title: '구독 해지 확인',
+ content: (
+
+
+
+ 구독정보 수정에 실패했습니다.
+ {formatErrorMessage(errorMessage)} +
+
+ ),
+ size: 'sm'
+ });
+ } else {
+ setFormData(prev => ({
+ ...prev,
+ active: active
+ }));
+ }
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ const errors: FormErrors = {};
+
+ if (!formData.category) {
+ errors.category = '카테고리를 선택해주세요.';
+ }
+
+ if (formData.weekdays.length === 0) {
+ errors.weekdays = '최소 하나의 요일을 선택해주세요.';
+ }
+
+ // 구독 기간 연장 제한 검증
+ if (formData.period && !validateSubscriptionPeriod(formData.period)) {
+ errors.period = '구독 기간 연장 시 시작일로부터 1년을 초과할 수 없습니다.';
+ }
+
+ if (Object.keys(errors).length > 0) {
+ setFormErrors(errors);
+ return;
+ }
+
+ setFormErrors({});
+
+ const requestData = {
+ category: formData.category,
+ email: formData.email,
+ days: formData.weekdays,
+ period: getMonthsFromPeriod(formData.period),
+ active: formData.active,
+ };
+
+ updateMutation.mutate({
+ subscriptionId: subscriptionId!,
+ data: requestData
+ }, {
+ onSuccess: handleUpdateSuccess,
+ onError: handleUpdateError,
+ });
+ };
+
+ if (subscriptionLoading) {
+ return (
+
+
+
+ 구독을 해지하시겠습니까?
+구독을 해지하면 문제 발송이 중단됩니다.
+ +
+
+
+
+
+
+
+ 구독정보를 불러오는 중...
+
+
+ 구독정보를 불러올 수 없습니다.
+ +
+
+
+
+
+
+
+ {/* 이메일 정보 (수정 불가) */}
+ 구독정보 수정
+구독 설정을 변경할 수 있습니다.
+
+
+
+ {/* 구독 정보 */}
+ 이메일 주소
+{subscriptionData?.email}
+이메일은 변경할 수 없습니다.
+
+
+
+
+ 구독 정보
+
+
+
+ 구독 시작일
+ {subscriptionData?.startDate}
+
+
+ 구독 종료일
+ {subscriptionData?.endDate}
+
+
+ 구독 진행일
+
+ {subscriptionData?.startDate ? Math.ceil((new Date().getTime() - new Date(subscriptionData.startDate).getTime()) / (1000 * 60 * 60 * 24)) : 0}일차
+
+
+
+ 구독 상태
+
+ {subscriptionData?.active ? '활성화' : '비활성화'}
+
+
+
+
+
+ {/* Email Template Preview */}
+
+ 메일 미리보기
+
+
+ + 매일 받게 될 CS 지식 +
+ ++ 아래와 같은 형태의 맞춤형 메일을 받아보실 수 있습니다. +
+
+
+
+ {/* Settings Modal */}
+
+
+ ),
+ size: 'sm'
+ });
+ return;
+ }
+
+ // 주관식인 경우 답안 확인
+ if (displayQuiz?.quizType === 'SUBJECTIVE' && subjectiveAnswer.trim() === '') {
+ openModal({
+ title: '답안 입력 필요',
+ content: (
+
+
+
+ 선택지를 먼저 클릭해주세요!
+
+
+ ),
+ size: 'sm'
+ });
+ return;
+ }
+
+ if (quizId && subscriptionId && displayQuiz) {
+ try {
+ // API로 답안 제출 (기록용)
+ const submitAnswer = displayQuiz.quizType === 'MULTIPLE_CHOICE' ? selectedAnswer! : subjectiveAnswer;
+ const submitResponse = await quizAPI.submitTodayQuizAnswer(quizId, submitAnswer, subscriptionId);
+
+ if (displayQuiz.quizType === 'MULTIPLE_CHOICE') {
+ // 객관식: 클라이언트에서 정답 검증
+ const correctAnswerNumber = parseInt(displayQuiz.answerNumber || '1');
+ const isCorrect = selectedAnswer === correctAnswerNumber;
+ const choiceText = displayQuiz[`choice${correctAnswerNumber}` as keyof QuizData] as string;
+ const cleanAnswerText = choiceText ? choiceText.replace(/^\d+\.\s*/, '') : '';
+ const answerText = `${correctAnswerNumber}번. ${cleanAnswerText}`;
+
+ const result: AnswerResult = {
+ isCorrect,
+ answer: answerText,
+ commentary: displayQuiz.commentary
+ };
+
+ setAnswerResult(result);
+ setIsSubmitted(true);
+ } else {
+ // 먼저 기본 결과 표시 (AI 피드백 없이)
+ const initialResult: AnswerResult = {
+ isCorrect: false, // 일단 false로 설정, AI 피드백에서 업데이트
+ answer: displayQuiz.answer || '',
+ commentary: displayQuiz.commentary
+ };
+
+ setAnswerResult(initialResult);
+ setIsSubmitted(true);
+ setIsAiFeedbackLoading(true);
+
+ let answerId: string;
+
+ // API 응답에서 answerId 추출
+ if (submitResponse && typeof submitResponse === 'object') {
+ if ('data' in submitResponse && submitResponse.data) {
+ answerId = (submitResponse.data as any).toString();
+ } else if ('answerId' in submitResponse) {
+ answerId = (submitResponse as any).answerId.toString();
+ } else {
+ answerId = (submitResponse as any).toString();
+ }
+ } else {
+ answerId = (submitResponse as any).toString();
+ }
+
+ console.log('추출된 answerId:', answerId);
+
+ try {
+ // AI 피드백 요청
+ console.log('AI 피드백 요청 중:', `/quizzes/${answerId}/feedback`);
+ const feedbackResponse = await quizAPI.getAiFeedback(answerId);
+ console.log('AI 피드백 응답:', feedbackResponse);
+ let feedbackData: AiFeedbackResponse;
+
+ // API 응답 구조 처리
+ if (feedbackResponse && typeof feedbackResponse === 'object') {
+ feedbackData = ('data' in feedbackResponse) ? feedbackResponse.data as AiFeedbackResponse : feedbackResponse as AiFeedbackResponse;
+ } else {
+ throw new Error('피드백 응답 형식이 올바르지 않습니다.');
+ }
+
+ // AI 피드백 받은 후 결과 업데이트
+ const updatedResult: AnswerResult = {
+ isCorrect: feedbackData.isCorrect,
+ answer: displayQuiz.answer || '',
+ commentary: displayQuiz.commentary,
+ aiFeedback: feedbackData.aiFeedback
+ };
+
+ setAnswerResult(updatedResult);
+ setIsAiFeedbackLoading(false);
+ } catch (feedbackError) {
+ console.error('AI 피드백 요청 실패:', feedbackError);
+
+ const errorResult: AnswerResult = {
+ isCorrect: false,
+ answer: displayQuiz.answer || '',
+ commentary: displayQuiz.commentary,
+ aiFeedback: 'AI 피드백을 가져오는데 실패했습니다.'
+ };
+
+ setAnswerResult(errorResult);
+ setIsAiFeedbackLoading(false);
+ }
+ }
+ } catch (error: any) {
+
+ // 400 에러 체크 및 메시지 처리
+ if (error?.status === 400) {
+ const errorMessage = error?.message || '잘못된 요청입니다. 답안 제출에 실패했습니다.';
+
+ openModal({
+ title: '알림',
+ content: (
+
+
+
+ 답안을 입력해주세요!
+
+
+ ),
+ size: 'sm'
+ });
+ return;
+ }
+
+ // 추가적인 400 에러 체크 (다른 형태일 수 있음)
+ // if (error?.message?.includes('400') || error?.toString()?.includes('400')) {
+ // console.log('Found 400 in message, showing alert');
+ // alert('이미 제출한 문제입니다.');
+ // return;
+ // }
+
+ // 기타 API 실패해도 클라이언트에서 정답 검증
+ let isCorrect: boolean;
+ let answerText: string;
+
+ if (displayQuiz.quizType === 'MULTIPLE_CHOICE') {
+ const correctAnswerNumber = parseInt(displayQuiz.answerNumber || '2');
+ isCorrect = selectedAnswer === correctAnswerNumber;
+ const choiceText = displayQuiz[`choice${correctAnswerNumber}` as keyof QuizData] as string;
+ const cleanAnswerText = choiceText ? choiceText.replace(/^\d+\.\s*/, '') : '';
+ answerText = `${correctAnswerNumber}번. ${cleanAnswerText}`;
+ } else {
+ // 주관식의 경우
+ isCorrect = subjectiveAnswer.trim().toLowerCase() === (displayQuiz.answer || '').toLowerCase();
+ answerText = displayQuiz.answer || '';
+ }
+
+ const result: AnswerResult = {
+ isCorrect,
+ answer: answerText,
+ commentary: displayQuiz.commentary || '해설 정보가 없습니다.'
+ };
+
+ setAnswerResult(result);
+ setIsSubmitted(true);
+ }
+ }
+ };
+
+ const handleOptionClick = (value: number) => {
+ if (!isSubmitted && displayQuiz?.quizType === 'MULTIPLE_CHOICE') {
+ setSelectedAnswer(value);
+ }
+ };
+
+ if (isLoading) {
+ return (
+
+
+
+ {errorMessage}
+
+
+
+ 퀴즈를 불러오는 중...
+
+
+
+
+ 📚 오늘의 CS 문제
+
+
+ + AI가 준비한 오늘의 문제 +
+ ++ 매일 새로운 CS 지식을 확인하고 실력을 향상시켜보세요 +
+
+
+ {/* Total Count & Difficulty */}
+
+ {selectionRates && (
+
+
+ {/* Question Box */}
+
+
+
+ 총 {isSubmitted ? selectionRates.totalCount + 1 : selectionRates.totalCount}명이 이 문제를 풀었습니다
+
+
+ )}
+
+
+
+ {/* Quiz Form */}
+
+ Q. {displayQuiz?.question}
+
+ {/* 카테고리 & 난이도 표시 - 질문 아래 */}
+
+ {displayQuiz?.category?.main && (
+
+
+ {getMainCategoryLabel(displayQuiz.category.main)}
+
+ )}
+ {displayQuiz?.category?.sub && (
+
+ {getSubCategoryLabel(displayQuiz.category.sub)}
+
+ )}
+ {displayQuiz?.quizLevel && (
+
+ {getDifficultyDisplay(displayQuiz.quizLevel).label}
+
+ )}
+