refactor: 오늘의 문제 리팩토링 및 메인 모바일버전 리팩토링

Author: wannabeing

src/components/common/Container.tsx

@@ -7,7 +7,7 @@ interface ContainerProps {
 
 const Container: React.FC<ContainerProps> = ({ children, className = '' }) => {
   return (
-    <div className={`max-w-4xl mx-auto px-5 ${className}`}>
+    <div className={`max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${className}`}>
       {children}
     </div>
   );

src/components/common/EmailTemplate.tsx

@@ -9,67 +9,67 @@ interface EmailTemplateProps {
 const EmailTemplate: React.FC<EmailTemplateProps> = ({ toEmail, quizLink }) => {
   const navigate = useNavigate();
   return (
-    <div className="font-pretendard p-10">
-      <div className="max-w-2xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
+    <div className="font-pretendard p-4 sm:p-6 lg:p-10">
+      <div className="max-w-2xl mx-auto bg-white rounded-xl sm:rounded-2xl shadow-lg overflow-hidden">
         {/* Header with Logo */}
-        <div className="bg-gradient-to-r from-brand-500 to-brand-600 p-8 text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <span className="text-3xl font-bold text-white">CS</span>
-            <span className="text-3xl font-bold text-blue-100">25</span>
+        <div className="bg-gradient-to-r from-brand-500 to-brand-600 p-6 sm:p-8 text-center">
+          <div className="flex items-center justify-center space-x-2 mb-3 sm:mb-4">
+            <span className="text-2xl sm:text-3xl font-bold text-white">CS</span>
+            <span className="text-2xl sm:text-3xl font-bold text-blue-100">25</span>
           </div>
-          <h1 className="text-2xl font-bold text-white">오늘의 CS 문제</h1>
-          <p className="text-brand-100 mt-2">AI가 준비한 맞춤형 문제를 확인하세요</p>
+          <h1 className="text-xl sm:text-2xl font-bold text-white">오늘의 CS 문제</h1>
+          <p className="text-sm sm:text-base text-brand-100 mt-2">AI가 준비한 맞춤형 문제를 확인하세요</p>
         </div>
 
         {/* Content */}
-        <div className="p-8">
-          <div className="text-center mb-8">
-            <div className="w-20 h-20 bg-brand-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <svg className="w-10 h-10 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div className="p-6 sm:p-8">
+          <div className="text-center mb-6 sm:mb-8">
+            <div className="w-16 h-16 sm:w-20 sm:h-20 bg-brand-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
+              <svg className="w-8 h-8 sm:w-10 sm:h-10 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
             </div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">오늘의 문제를 풀어보세요!</h2>
-            <p className="text-gray-600 leading-relaxed mb-6">
-              안녕하세요! CS25에서 오늘의 맞춤형 CS 문제를 보내드립니다.<br />
-              AI가 생성한 문제와 상세한 해설로 CS 지식을 향상시켜보세요.
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">오늘의 문제를 풀어보세요!</h2>
+            <p className="text-sm sm:text-base text-gray-600 leading-relaxed mb-4 sm:mb-6 px-2 sm:px-0">
+              안녕하세요! CS25에서 오늘의 맞춤형 CS 문제를 보내드립니다.<br className="hidden sm:block" />
+              <span className="block sm:inline">AI가 생성한 문제와 상세한 해설로 CS 지식을 향상시켜보세요.</span>
             </p>
           </div>
 
           {/* Action Button */}
-          <div className="text-center mb-8">
+          <div className="text-center mb-6 sm:mb-8">
             <button
               onClick={() => navigate('/quiz')}
-              className="inline-block bg-gradient-to-r from-brand-500 to-brand-600 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 hover:from-brand-600 hover:to-brand-700 hover:shadow-lg"
+              className="inline-block bg-gradient-to-r from-brand-500 to-brand-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-full font-semibold text-base sm:text-lg transition-all duration-300 hover:from-brand-600 hover:to-brand-700 hover:shadow-lg w-full sm:w-auto max-w-xs"
             >
               🧠 연습문제 풀기
             </button>
           </div>
 
           {/* Today's Topic Preview */}
-          <div className="bg-gray-50 rounded-xl p-6 mb-8">
-            <h3 className="text-lg font-bold text-gray-900 mb-2">오늘의 주제</h3>
-            <div className="flex flex-wrap gap-2">
-              <span className="bg-brand-100 text-brand-700 px-3 py-1 rounded-full text-sm font-medium">알고리즘</span>
-              <span className="bg-navy-100 text-navy-700 px-3 py-1 rounded-full text-sm font-medium">시간복잡도</span>
+          <div className="bg-gray-50 rounded-lg sm:rounded-xl p-4 sm:p-6 mb-6 sm:mb-8">
+            <h3 className="text-base sm:text-lg font-bold text-gray-900 mb-2">오늘의 주제</h3>
+            <div className="flex flex-wrap gap-2 justify-center sm:justify-start">
+              <span className="bg-brand-100 text-brand-700 px-3 py-1 rounded-full text-xs sm:text-sm font-medium">알고리즘</span>
+              <span className="bg-navy-100 text-navy-700 px-3 py-1 rounded-full text-xs sm:text-sm font-medium">시간복잡도</span>
             </div>
           </div>
 
           {/* Subscription Settings */}
-          <div className="text-center mb-8">
+          <div className="text-center mb-6 sm:mb-8">
             <button
               disabled
-              className="inline-flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-medium text-sm border border-gray-200 transition-all duration-200 hover:shadow-sm"
+              className="inline-flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 sm:px-4 py-2 rounded-lg font-medium text-xs sm:text-sm border border-gray-200 transition-all duration-200 hover:shadow-sm"
             >
-              <span className="text-base">⚙️</span>
+              <span className="text-sm sm:text-base">⚙️</span>
               <span>구독 설정</span>
             </button>
           </div>
 
           {/* Footer */}
-          <div className="border-t border-gray-200 pt-6">
-            <div className="text-center text-gray-500 text-sm space-y-2">
-              <p>
+          <div className="border-t border-gray-200 pt-4 sm:pt-6">
+            <div className="text-center text-gray-500 text-xs sm:text-sm space-y-2">
+              <p className="px-2 sm:px-0">
                 이 메일은 <span className="font-medium text-gray-700">{toEmail}</span> 계정으로 발송되었습니다.
               </p>
               <p>

src/components/common/Section.tsx

@@ -23,7 +23,7 @@ const Section: React.FC<SectionProps> = ({
   };
 
   return (
-    <section className={`py-20 font-pretendard ${getBgColor()} ${className}`}>
+    <section className={`py-12 sm:py-16 lg:py-20 font-pretendard ${getBgColor()} ${className}`}>
       {children}
     </section>
   );

src/components/common/SubscriptionModal.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Modal from './Modal';
 import { useQuizCategories } from '../../hooks/useQuiz';
 import { useRequestEmailVerification, useVerifyCode, useCreateSubscription, useCheckEmail } from '../../hooks';
+import { getCategoryLabel } from '../../utils/categoryUtils';
 
 interface SubscriptionModalProps {
   isOpen: boolean;
@@ -20,6 +21,7 @@ interface FormErrors {
   weekdays?: string;
   period?: string;
   verification?: string;
+  subscription?: string;
 }
 
 type Step = 'form' | 'verification' | 'success';
@@ -44,18 +46,6 @@ const SubscriptionModal: React.FC<SubscriptionModalProps> = ({ isOpen, onClose }
   const verifyCodeMutation = useVerifyCode();
   const createSubscriptionMutation = useCreateSubscription();
 
-  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) 
@@ -209,21 +199,38 @@ const SubscriptionModal: React.FC<SubscriptionModalProps> = ({ isOpen, onClose }
       { email: formData.email, code: verificationCode },
       {
         onSuccess: () => {
+          // 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;
+            }
+          };
+
           // 인증 성공 후 구독 생성
           createSubscriptionMutation.mutate(
             {
               email: formData.email,
               category: formData.categories[0], // 첫 번째 선택된 카테고리만 전송
               days: formData.weekdays,
-              period: formData.period,
+              period: getMonthsFromPeriod(formData.period), // 숫자로 변환해서 전송
             },
             {
               onSuccess: () => {
                 setStep('success');
               },
               onError: (error) => {
                 console.error('구독 생성 실패:', error);
-                setFormErrors({ verification: '구독 생성에 실패했습니다. 다시 시도해주세요.' });
+                const errorMessage = error?.message || '구독 생성에 실패했습니다. 다시 시도해주세요.';
+                setFormErrors({ subscription: errorMessage });
               },
             }
           );
@@ -505,6 +512,18 @@ const SubscriptionModal: React.FC<SubscriptionModalProps> = ({ isOpen, onClose }
         >
           {verifyCodeMutation.isPending || createSubscriptionMutation.isPending ? '처리 중...' : '인증 완료'}
         </button>
+        
+        {/* 구독 생성 에러 메시지 */}
+        {formErrors.subscription && (
+          <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-red-700 text-sm flex items-center">
+              <svg className="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              {formErrors.subscription}
+            </p>
+          </div>
+        )}
       </form>
 
       <button

src/components/sections/FeaturesSection.tsx

@@ -43,36 +43,36 @@ const FeaturesSection: React.FC = () => {
   ];
 
   return (
-    <Section className="py-20">
+    <Section className="py-12 sm:py-16 lg:py-20">
       <Container>
-        <div className="text-center max-w-3xl mx-auto mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
+        <div className="text-center max-w-3xl mx-auto mb-12 sm:mb-16 px-4 sm:px-0">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6 text-gray-900">
             AI 기반 CS 학습의 혁신
           </h2>
-          <p className="text-xl text-gray-600 leading-relaxed">
+          <p className="text-base sm:text-lg md:text-xl text-gray-600 leading-relaxed">
             AI가 생성하고 해설하는 개인화된 CS 지식 학습 경험
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 px-4 sm:px-0">
           {features.map((feature, index) => (
             <div 
               key={index}
-              className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
+              className="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
             >
-              <div className="mb-6">
+              <div className="mb-4 sm:mb-6">
                 {feature.icon}
               </div>
 
-              <h3 className="text-xl font-bold text-gray-900 mb-4 group-hover:text-navy-700 transition-colors">
+              <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4 group-hover:text-navy-700 transition-colors">
                 {feature.title}
               </h3>
 
-              <p className="text-gray-600 mb-3 leading-relaxed">
+              <p className="text-sm sm:text-base text-gray-600 mb-2 sm:mb-3 leading-relaxed">
                 {feature.description}
               </p>
 
-              <p className="text-sm text-gray-500">
+              <p className="text-xs sm:text-sm text-gray-500">
                 {feature.details}
               </p>
             </div>

src/components/sections/HeroSection.tsx

@@ -8,46 +8,46 @@ interface HeroSectionProps {
 
 const HeroSection: React.FC<HeroSectionProps> = ({ onSubscribeClick }) => {
   return (
-    <Section className="text-center pt-20 pb-32 bg-gradient-to-br from-gray-50 via-blue-50 to-brand-50">
+    <Section className="text-center pt-16 sm:pt-20 pb-20 sm:pb-32 bg-gradient-to-br from-gray-50 via-blue-50 to-brand-50">
       <Container>
         <div className="max-w-4xl mx-auto">
-          <div className="inline-flex items-center bg-brand-100 rounded-full px-6 py-2 mb-8">
-            <span className="text-sm font-medium text-brand-700">🤖 AI가 생성하고 해설하는 CS 지식</span>
+          <div className="inline-flex items-center bg-brand-100 rounded-full px-4 sm:px-6 py-2 mb-6 sm:mb-8">
+            <span className="text-xs sm:text-sm font-medium text-brand-700">🤖 AI가 생성하고 해설하는 CS 지식</span>
           </div>
 
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight tracking-tight text-gray-900">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 leading-tight tracking-tight text-gray-900">
             AI가 전하는<br />
             <span className="bg-gradient-to-r from-brand-600 to-navy-600 bg-clip-text text-transparent">
               데일리 CS 지식
             </span><br />
            메일로 만나보세요!
           </h1>
 
-          <p className="text-xl md:text-2xl mb-12 text-gray-700 max-w-2xl mx-auto leading-relaxed">
-            AI가 매일 새로운 CS 문제를 생성하고 상세히 해설<br />
-            <span className="text-lg text-gray-600">개인 수준에 맞는 알고리즘, 자료구조, 운영체제 등</span>
+          <p className="text-base sm:text-lg md:text-xl lg:text-2xl mb-8 sm:mb-12 text-gray-700 max-w-2xl mx-auto leading-relaxed px-4 sm:px-0">
+            AI가 매일 새로운 CS 문제를 생성하고 상세히 해설<br className="hidden sm:block" />
+            <span className="block sm:inline text-sm sm:text-base md:text-lg text-gray-600">개인 수준에 맞는 알고리즘, 자료구조, 운영체제 등</span>
           </p>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center">
             <button
               onClick={onSubscribeClick}
-              className="bg-gradient-to-r from-brand-500 to-brand-600 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 hover:from-brand-600 hover:to-brand-700 hover:scale-105 hover:shadow-xl group"
+              className="bg-gradient-to-r from-brand-500 to-brand-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-full font-semibold text-base sm:text-lg transition-all duration-300 hover:from-brand-600 hover:to-brand-700 hover:scale-105 hover:shadow-xl group w-full sm:w-auto max-w-xs"
             >
-              <span className="flex items-center">
+              <span className="flex items-center justify-center">
                 무료로 구독하기
-                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-4 h-4 sm:w-5 sm:h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                 </svg>
               </span>
             </button>
 
-            <div className="flex items-center text-gray-600 text-sm">
-              <div className="flex -space-x-2 mr-3">
-                <div className="w-8 h-8 bg-gradient-to-r from-brand-400 to-brand-500 rounded-full border-2 border-white"></div>
-                <div className="w-8 h-8 bg-gradient-to-r from-navy-400 to-navy-500 rounded-full border-2 border-white"></div>
-                <div className="w-8 h-8 bg-gradient-to-r from-brand-500 to-navy-500 rounded-full border-2 border-white"></div>
+            <div className="flex items-center text-gray-600 text-xs sm:text-sm">
+              <div className="flex -space-x-1 sm:-space-x-2 mr-2 sm:mr-3">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-r from-brand-400 to-brand-500 rounded-full border-2 border-white"></div>
+                <div className="w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-r from-navy-400 to-navy-500 rounded-full border-2 border-white"></div>
+                <div className="w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-r from-brand-500 to-navy-500 rounded-full border-2 border-white"></div>
               </div>
-              <span>이미 <strong className="text-gray-800">1,000+</strong> 취준생이 사용 중</span>
+              <span className="text-center sm:text-left">이미 <strong className="text-gray-800">1,000+</strong> 취준생이 사용 중</span>
             </div>
           </div>
         </div>

src/components/sections/TodayEmailFormSection.tsx

@@ -10,24 +10,24 @@ const TodayEmailFormSection: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <Section className="py-20">
+    <Section className="py-12 sm:py-16 lg:py-20">
       <Container>
-        <div className="text-center max-w-3xl mx-auto mb-12">
-          <div className="inline-flex items-center bg-brand-100 rounded-full px-6 py-2 mb-8">
-            <span className="text-sm font-medium text-brand-700">📧 메일 미리보기</span>
+        <div className="text-center max-w-3xl mx-auto mb-8 sm:mb-12 px-4 sm:px-0">
+          <div className="inline-flex items-center bg-brand-100 rounded-full px-4 sm:px-6 py-2 mb-6 sm:mb-8">
+            <span className="text-xs sm:text-sm font-medium text-brand-700">📧 메일 미리보기</span>
           </div>
 
-          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 text-gray-900">
             매일 받게 될 <span className="bg-gradient-to-r from-brand-600 to-navy-600 bg-clip-text text-transparent">CS 지식</span>
           </h2>
 
-          <p className="text-lg text-gray-600 leading-relaxed mb-8">
+          <p className="text-base sm:text-lg text-gray-600 leading-relaxed mb-6 sm:mb-8">
             아래와 같은 형태의 맞춤형 메일을 받아보실 수 있습니다.
           </p>
         </div>
 
         {/* Email Template Preview */}
-        <div className="max-w-4xl mx-auto">
+        <div className="max-w-4xl mx-auto px-4 sm:px-0">
           <EmailTemplate
             toEmail="your-email@example.com"
             quizLink="/todayQuiz"