chore: 푸터, 예시메일 등 디자인 수정 및 빌드 에러 수정

wannabeing · wannabeing · commit d84fd506cfd0 · 2025-06-26T02:37:46.000+09:00
diff --git a/src/components/common/Container.tsx b/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-4 sm:px-6 lg:px-8 ${className}`}>
+    <div className={`max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 ${className}`}>
       {children}
     </div>
   );
diff --git a/src/components/common/EmailTemplate.tsx b/src/components/common/EmailTemplate.tsx
@@ -9,13 +9,16 @@ interface EmailTemplateProps {
 const EmailTemplate: React.FC<EmailTemplateProps> = ({ toEmail, quizLink }) => {
   const navigate = useNavigate();
   return (
-    <div className="font-pretendard p-4 sm:p-6 lg:p-10">
+    <div className="font-pretendard py-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-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>
+            <img 
+              src="/cs25.png" 
+              alt="CS25" 
+              className="h-6 sm:h-8 w-auto"
+            />
           </div>
           <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>
@@ -32,7 +35,7 @@ const EmailTemplate: React.FC<EmailTemplateProps> = ({ toEmail, quizLink }) => {
             <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>
+              <span className="block sm:inline">데일리 문제와 상세한 AI 해설로 CS 지식을 향상시켜보세요.</span>
             </p>
           </div>
 
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -3,9 +3,43 @@ import Container from './Container';
 
 const Footer: React.FC = () => {
   return (
-    <footer className="bg-gray-800 text-white text-center py-10 font-pretendard">
+    <footer className="bg-gray-800 text-white py-10 font-pretendard">
       <Container>
-        <p>&copy; 2025 CS25. All rights reserved.</p>
+        <div className="flex flex-col items-center space-y-4">
+          {/* 연락처 정보 */}
+          <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
+            {/* GitHub 링크 */}
+            <div className="flex items-center space-x-2">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+              <a 
+                href="https://github.com/NBC-finalProject"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-300 hover:text-white transition-colors duration-300 text-sm font-medium"
+              >
+                CS25 Github
+              </a>
+            </div>
+
+            {/* 이메일 */}
+            <div className="flex items-center space-x-2">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <a 
+                href="mailto:noreplycs25@gmail.com"
+                className="text-gray-300 hover:text-white transition-colors duration-300 text-sm font-medium"
+              >
+                noreplycs25@gmail.com
+              </a>
+            </div>
+          </div>
+          
+          {/* 저작권 */}
+          <p className="text-gray-400 text-sm">&copy; 2025 CS25. All rights reserved.</p>
+        </div>
       </Container>
     </footer>
   );
diff --git a/src/components/sections/FeaturesSection.tsx b/src/components/sections/FeaturesSection.tsx
@@ -18,8 +18,8 @@ const FeaturesSection: React.FC = () => {
     },
     {
       icon: (
-        <div className="w-12 h-12 bg-navy-100 rounded-xl flex items-center justify-center">
-          <svg className="w-6 h-6 text-navy-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div className="w-12 h-12 bg-brand-100 rounded-xl flex items-center justify-center">
+          <svg className="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
         </div>
@@ -47,10 +47,18 @@ const FeaturesSection: React.FC = () => {
       <Container>
         <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 학습의 혁신
+            AI 기반 CS 학습의{' '}
+            <span className="bg-gradient-to-r from-brand-600 via-purple-600 to-blue-600 bg-clip-text text-transparent animate-pulse">
+              혁신
+            </span>
           </h2>
           <p className="text-base sm:text-lg md:text-xl text-gray-600 leading-relaxed">
-            AI가 생성하고 해설하는 개인화된 CS 지식 학습 경험
+            AI가 생성하고 해설하는{' '}
+            <span className="font-semibold text-brand-600 hover:scale-105 transition-transform inline-block cursor-default">
+              개인화된
+            </span>{' '}
+            CS 지식 학습 경험{' '}
+            <span className="inline-block animate-bounce delay-100">✨</span>
           </p>
         </div>
         
@@ -59,21 +67,24 @@ const FeaturesSection: React.FC = () => {
             <div 
               key={index}
               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"
+              style={{
+                animationDelay: `${index * 200}ms`
+              }}
             >
-              <div className="mb-4 sm:mb-6">
+              <div className="mb-4 sm:mb-6 group-hover:scale-110 transition-transform duration-300">
                 {feature.icon}
               </div>
               
-              <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 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4 group-hover:text-brand-600 transition-colors">
+                <span className="hover:animate-pulse">{feature.title}</span>
               </h3>
               
-              <p className="text-sm sm:text-base text-gray-600 mb-2 sm:mb-3 leading-relaxed">
+              <p className="text-sm sm:text-base text-gray-600 mb-2 sm:mb-3 leading-relaxed break-keep group-hover:text-gray-700 transition-colors">
                 {feature.description}
               </p>
               
-              <p className="text-xs sm:text-sm text-gray-500">
-                {feature.details}
+              <p className="text-xs sm:text-sm text-gray-500 group-hover:text-gray-600 transition-colors">
+                <span className="inline-block group-hover:animate-bounce">💡</span> {feature.details}
               </p>
             </div>
           ))}
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
@@ -34,10 +34,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSubscribeClick }) => {
               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 justify-center">
-                무료로 구독하기
-                <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>
             
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
@@ -35,29 +35,29 @@ export const useUserProfileSubscription = (enabled: boolean = true) => {
   });
 };
 
-// 사용자 퀴즈 히스토리 조회
-export const useUserQuizHistory = (page: number = 0, size: number = 10, enabled: boolean = true) => {
-  return useQuery({
-    queryKey: userKeys.quizHistory(page, size),
-    queryFn: async () => {
-      const response = await userAPI.getQuizHistory(page, size);
-      return (response as any).data;
-    },
-    enabled,
-  });
-};
+// 사용자 퀴즈 히스토리 조회 (미구현으로 주석 처리)
+// export const useUserQuizHistory = (page: number = 0, size: number = 10, enabled: boolean = true) => {
+//   return useQuery({
+//     queryKey: userKeys.quizHistory(page, size),
+//     queryFn: async () => {
+//       const response = await userAPI.getQuizHistory(page, size);
+//       return (response as any).data;
+//     },
+//     enabled,
+//   });
+// };
 
-// 사용자 랭킹 조회
-export const useUserRanking = (page: number = 0, size: number = 10, enabled: boolean = true) => {
-  return useQuery({
-    queryKey: userKeys.ranking(page, size),
-    queryFn: async () => {
-      const response = await userAPI.getRanking(page, size);
-      return (response as any).data;
-    },
-    enabled,
-  });
-};
+// 사용자 랭킹 조회 (미구현으로 주석 처리)
+// export const useUserRanking = (page: number = 0, size: number = 10, enabled: boolean = true) => {
+//   return useQuery({
+//     queryKey: userKeys.ranking(page, size),
+//     queryFn: async () => {
+//       const response = await userAPI.getRanking(page, size);
+//       return (response as any).data;
+//     },
+//     enabled,
+//   });
+// };
 
 // 사용자 틀린 문제 조회
 export const useUserWrongQuiz = (enabled: boolean = true) => {
diff --git a/src/utils/tokenManager.ts b/src/utils/tokenManager.ts
@@ -65,7 +65,7 @@ class CookieTokenManager implements TokenManager {
       const response = await authAPI.checkAuthStatus();
       
       // 응답 구조: {"httpCode":200,"data":boolean}
-      const isAuthenticated = response?.data === true;
+      const isAuthenticated = (response as any)?.data === true;
       
       return isAuthenticated;
     } catch (error) {
