From db92f55b7a7ff4a832a1e23ae0ac4c03ceef856e Mon Sep 17 00:00:00 2001
From: ijun17 <ijun17@naver.com>
Date: Thu, 5 Dec 2024 22:13:01 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=B9=84=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/features/auth/LoginModal.tsx | 39 +++++++++++++++++++----------
 FE/src/pages/MainPage.tsx           | 13 +++++-----
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/FE/src/features/auth/LoginModal.tsx b/FE/src/features/auth/LoginModal.tsx
index 294a9ff..b86d0ab 100644
--- a/FE/src/features/auth/LoginModal.tsx
+++ b/FE/src/features/auth/LoginModal.tsx
@@ -29,25 +29,25 @@ export const LoginModal = ({ isOpen, onClose }: Props) => {
       onClick={onClose}
     >
       <div
-        className="component-popup max-w-md bg-white w-[90%] animate-popup border-4 border-blue-200"
+        className="component-popup max-w-md w-[90%] animate-popup border-4 border-blue-200"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="text-center mb-6">
           <div className="text-lg font-bold w-full h-16 flex">
             <button
-              className={`w-[50%] h-full px-4 transition ${!isSignUp ? 'text-blue-500' : 'text-gray-200'} cursor-pointer`}
+              className={`w-[50%] h-full px-4 transition ${!isSignUp ? 'text-blue-500' : 'text-gray-400'} cursor-pointer`}
               onClick={() => setIsSignUp(false)}
             >
               로그인
             </button>
             <button
-              className={`w-[50%] h-full px-4 transition ${isSignUp ? 'text-blue-500' : 'text-gray-200'} cursor-pointer`}
+              className={`w-[50%] h-full px-4 transition ${isSignUp ? 'text-blue-500' : 'text-gray-400'} cursor-pointer`}
               onClick={() => setIsSignUp(true)}
             >
               회원가입
             </button>
           </div>
-          <div className="relative w-full h-[2px] mx-auto bg-gray-200 rounded-full cursor-pointer">
+          <div className="relative w-full h-[2px] mx-auto bg-gray-300 rounded-full cursor-pointer">
             <div
               className={`absolute w-[50%] h-[2px] bg-blue-500 rounded-full transition-transform duration-400 ${
                 isSignUp ? 'translate-x-[100%]' : ''
@@ -63,7 +63,7 @@ export const LoginModal = ({ isOpen, onClose }: Props) => {
             <LoginForm handleLogin={handleLogin} />
           )}
           <button
-            className="mt-2 mb-4 w-full bg-gray-200 h-11 rounded-md hover:bg-gray-300"
+            className="mt-2 mb-4 w-full bg-gray-300 h-11 rounded-md hover:bg-gray-400"
             onClick={onClose}
           >
             취소
@@ -79,8 +79,8 @@ type LoginFormProps = {
 };
 
 const LoginForm: React.FC<LoginFormProps> = ({ handleLogin }) => {
-  const [email, setEmail] = useState('admin');
-  const [password, setPassword] = useState('admin');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [emailError, setEmailError] = useState('');
   const [passwordError, setPasswordError] = useState('');
 
@@ -96,6 +96,11 @@ const LoginForm: React.FC<LoginFormProps> = ({ handleLogin }) => {
     handleLogin(email, password);
   };
 
+  // 비회원 로그인
+  const loginNonMember = () => {
+    handleLogin('admin', 'admin');
+  };
+
   return (
     <div className="flex flex-col justify-between h-[240px]">
       <div>
@@ -120,12 +125,20 @@ const LoginForm: React.FC<LoginFormProps> = ({ handleLogin }) => {
         />
       </div>
 
-      <button
-        className="w-full px-4 py-3 mt-4 text-sm font-semibold text-blue-900 bg-yellow-400 rounded-md hover:bg-yellow-500"
-        onClick={onSubmit}
-      >
-        로그인
-      </button>
+      <div>
+        <button
+          className="w-full px-4 py-3 text-white text-sm font-semibold rounded-md bg-gradient-to-r from-sky-300 to-indigo-500 hover:from-sky-400 hover:to-indigo-600"
+          onClick={loginNonMember}
+        >
+          비회원으로 즐기기
+        </button>
+        <button
+          className="w-full px-4 py-3 mt-2 text-sm font-semibold text-blue-900 bg-yellow-400 rounded-md hover:bg-yellow-500"
+          onClick={onSubmit}
+        >
+          로그인
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/FE/src/pages/MainPage.tsx b/FE/src/pages/MainPage.tsx
index 3426047..ed7b0bc 100644
--- a/FE/src/pages/MainPage.tsx
+++ b/FE/src/pages/MainPage.tsx
@@ -25,13 +25,12 @@ export const MainPage = () => {
   }, []);
 
   const handleQuizCreate = () => {
-    // dev Mode
-    navigate('/quiz/setup');
-    // if (isLoggedIn) navigate('/quiz/setup');
-    // else {
-    //   alert('로그인이 필요한 서비스 입니다.');
-    //   navigate('/login');
-    // }
+    const token = localStorage.getItem('accessToken');
+    if (token) {
+      navigate('/quiz/setup');
+    } else {
+      setIsOpenLoginModal(true);
+    }
   };
 
   const handleLogout = () => {

From 7c6fb2be6f75e223b13d4110dd42de05a6874046 Mon Sep 17 00:00:00 2001
From: ijun17 <ijun17@naver.com>
Date: Thu, 5 Dec 2024 22:26:51 +0900
Subject: [PATCH 2/4] =?UTF-8?q?design:=20=EB=B2=84=ED=8A=BC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B0=84=EA=B2=A9=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/features/game/pages/PinPage.tsx |  2 +-
 FE/src/features/quiz/QuizSetupPage.tsx | 21 ++++-----------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/FE/src/features/game/pages/PinPage.tsx b/FE/src/features/game/pages/PinPage.tsx
index 62f8286..8846e51 100644
--- a/FE/src/features/game/pages/PinPage.tsx
+++ b/FE/src/features/game/pages/PinPage.tsx
@@ -58,7 +58,7 @@ export const PinPage = () => {
           }}
           error={errors.pin}
         />
-        <CustomButton text="들어가기" onClick={handleJoin} />
+        <CustomButton text="들어가기" onClick={handleJoin} className="mt-4" />
       </div>
     </div>
   );
diff --git a/FE/src/features/quiz/QuizSetupPage.tsx b/FE/src/features/quiz/QuizSetupPage.tsx
index 8a9de94..69141a6 100644
--- a/FE/src/features/quiz/QuizSetupPage.tsx
+++ b/FE/src/features/quiz/QuizSetupPage.tsx
@@ -6,21 +6,7 @@ import { CreateQuizSetPayload } from '@/api/rest/quizTypes';
 import { Header } from '@/components/Header';
 import CustomButton from '@/components/CustomButton';
 import QuizsetCategory from '@/constants/quizsetCategory';
-/*
-{
- title: string,              // 퀴즈셋의 제목
- category: string,   // 퀴즈셋 카테고리
- quizSet: {                 // 퀴즈들
-   quiz: string,             // 퀴즈 질문
-   limitTime: number,       // 제한 시간 (선택)
-   choices: {                // 선택지
-     content: string,        // 선택지 내용
-     order: number          // 선택지 번호
-     isAnswer: boolean
-   }[],
- }[]
-}
-*/
+
 type Choice = {
   choiceContent: string;
   choiceOrder: number;
@@ -274,13 +260,14 @@ export const QuizSetupPage: React.FC = () => {
               />
               <div className="">
                 {/* 선택지 추가 버튼 */}
-                <div className="flex justify-between items-center mb-2">
+                <div className="flex justify-between items-center mb-2 mt-4">
                   <span className="text-lg font-bold text-blue-500">선택지</span>
                   <CustomButton
                     text="선택지 추가"
                     onClick={() => addChoice(quizIndex)}
                     size="third"
                     color="green"
+                    className="w-24 h-10"
                   />
                 </div>
                 {/* 선택지 입력 */}
@@ -332,7 +319,7 @@ export const QuizSetupPage: React.FC = () => {
 
           {/* 퀴즈 추가/제출 버튼 */}
           <CustomButton text="퀴즈 추가" onClick={addQuiz} className="w-full" color="yellow" />
-          <CustomButton text="퀴즈셋 생성하기" onClick={handleSubmit} className="w-full" />
+          <CustomButton text="퀴즈셋 생성하기" onClick={handleSubmit} className="w-full mt-4" />
         </div>
       </div>
     </>

From bc9abd48829b4cf05be59cdf5e318c90432f3e25 Mon Sep 17 00:00:00 2001
From: ijun17 <ijun17@naver.com>
Date: Thu, 5 Dec 2024 22:29:23 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EC=9D=BC=EB=8B=A8=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EC=A7=80=20=EC=95=8A=EA=B2=8C=20=ED=95=B4?=
 =?UTF-8?q?=EB=86=93=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/pages/MainPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FE/src/pages/MainPage.tsx b/FE/src/pages/MainPage.tsx
index ed7b0bc..d906c6d 100644
--- a/FE/src/pages/MainPage.tsx
+++ b/FE/src/pages/MainPage.tsx
@@ -64,7 +64,7 @@ export const MainPage = () => {
               <button className="underline mr-4" onClick={handleLogout}>
                 로그아웃
               </button>
-              <ActionButton label="마이페이지" navigatePath="/mypage" />
+              {/* <ActionButton label="마이페이지" navigatePath="/mypage" /> */}
             </div>
           ) : (
             <button

From 154f73e1f53dde4a7a433083f7ccc3953c2bf223 Mon Sep 17 00:00:00 2001
From: ijun17 <ijun17@naver.com>
Date: Thu, 5 Dec 2024 22:32:25 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=95=A1=EC=85=98=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/pages/MainPage.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/FE/src/pages/MainPage.tsx b/FE/src/pages/MainPage.tsx
index d906c6d..b455e9d 100644
--- a/FE/src/pages/MainPage.tsx
+++ b/FE/src/pages/MainPage.tsx
@@ -1,6 +1,6 @@
 // import { HeaderBar } from '@/components/HeaderBar';
 import { useNavigate } from 'react-router-dom';
-import { useState, useEffect, FC } from 'react';
+import { useState, useEffect } from 'react';
 import { socketService } from '@/api/socket';
 import Lottie from 'lottie-react';
 import mainCube from '../assets/lottie/mainLottie.json';
@@ -38,21 +38,21 @@ export const MainPage = () => {
     location.reload();
   };
 
-  type ActionButtonProps = {
-    label: string;
-    navigatePath: string;
-  };
+  // type ActionButtonProps = {
+  //   label: string;
+  //   navigatePath: string;
+  // };
 
-  const ActionButton: FC<ActionButtonProps> = ({ label, navigatePath }) => {
-    return (
-      <button
-        className="text-white px-6 py-3 rounded-md bg-indigo-500 hover:bg-indigo-600 transition-all duration-300"
-        onClick={() => navigate(navigatePath)}
-      >
-        {label}
-      </button>
-    );
-  };
+  // const ActionButton: FC<ActionButtonProps> = ({ label, navigatePath }) => {
+  //   return (
+  //     <button
+  //       className="text-white px-6 py-3 rounded-md bg-indigo-500 hover:bg-indigo-600 transition-all duration-300"
+  //       onClick={() => navigate(navigatePath)}
+  //     >
+  //       {label}
+  //     </button>
+  //   );
+  // };
   return (
     <div className="bg-gradient-to-r from-sky-200 to-indigo-400 min-h-screen pb-4">
       <div className="flex justify-between items-center max-w-screen-xl mx-auto p-4">