Merge pull request #327 from boostcampwm-2024/dev-fe

[FE] Dev fe -> release
boostcampwm-2024 · Dec 5, 2024 · 8bf6da5 · 8bf6da5
2 parents fd4a280 + 520f4b1
commit 8bf6da5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 54 deletions.
diff --git 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/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
@@ -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>
     </>

diff --git 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';
@@ -25,35 +25,34 @@ 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 = () => {
     localStorage.removeItem('accessToken');
     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">
@@ -65,7 +64,7 @@ export const MainPage = () => {
               <button className="underline mr-4" onClick={handleLogout}>
                 로그아웃
               </button>
-              <ActionButton label="마이페이지" navigatePath="/mypage" />
+              {/* <ActionButton label="마이페이지" navigatePath="/mypage" /> */}
             </div>
           ) : (
             <button
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ export const PinPage = () => { @@
               }}
               error={errors.pin}
             />
-            <CustomButton text="들어가기" onClick={handleJoin} />
+            <CustomButton text="들어가기" onClick={handleJoin} className="mt-4" />
           </div>
         </div>
       );
@@ Expand Down @@