test : merge commit

team-devbuddy · Jun 25, 2024 · 2ee5d30 · 2ee5d30
2 parents 1d55fcf + cd2652d
commit 2ee5d30
Show file tree

Hide file tree

Showing 21 changed files with 204 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.0",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/react-vote-19th b/react-vote-19th
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import localFont from 'next/font/local';
 import './globals.css';
-import Header from '../components/layout/Header';
-import Footer from '@/components/layout/Footer';
+import Header from '@/components/layout/Header';
+import RecoilProvider from '@/components/layout/RecoilProvider'; // 추가
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -14,6 +14,7 @@ export const metadata: Metadata = {
     icon: '/logo.png',
   },
 };
+
 const pretendard = localFont({
   src: '../lib/fonts/PretendardVariable.woff2',
   display: 'swap',
@@ -26,19 +27,21 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
+ return (
     <html lang="ko" className={`${pretendard.variable}`}>
-      <body className={`${pretendard.className} `}>
-        {/* Full Container */}
-        <div className="flex h-full w-full items-center justify-center">
-          {/* Mobile Container */}
-          <div className="flex h-screen w-full max-w-[600px] flex-col bg-BG-black">
-            <Header />
-            {/* Content */}
-            <div className="flex flex-1 items-center justify-center">{children}</div>
-            {/* <Footer /> */}
+      <body className={`${pretendard.className}`}>
+        <RecoilProvider>
+          {/* Full Container */}
+          <div className="flex h-full w-full items-center justify-center">
+            {/* Mobile Container */}
+            <div className="flex h-screen w-full max-w-[600px] flex-col bg-BG-black">
+              <Header />
+              {/* Content */}
+              <div className="flex flex-1 items-center justify-center">{children}</div>
+              {/* <Footer /> */}
+            </div>
           </div>
-        </div>
+        </RecoilProvider>
       </body>
     </html>
   );

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,37 +1,41 @@
 'use client';
-
 import React from 'react';
 import InputField from '@/components/layout/InputField';
 import { useForm } from '@/hooks/useForm';
 
 import { LoginValidation } from '@/lib/utils';
-
-import { LoginFormData } from '@/lib/types';
+import { LoginFormData, initialLoginValues } from '@/lib/types';
 import { loginInputFields } from '@/lib/data';
 import { loginRequest } from '@/lib/actions/loginAction';
 import { useRouter } from 'next/navigation';
+import { useSetRecoilState } from 'recoil';
+import { authState } from '@/lib/state/atom';
 
 function LoginPage() {
   const router = useRouter();
+  const setAuthState = useSetRecoilState(authState);
   const { values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue } = useForm<LoginFormData>({
-    initialValues: {
-      userId: '',
-      password: '',
-    },
+    initialValues: initialLoginValues,
     onSubmit: async (values) => {
       try {
-        const result = await loginRequest(values);
+        const result = await (await loginRequest(values)).json();
+        setAuthState({
+          isLoggedIn: true,
+          username: result.username,
+        });
         localStorage.setItem('token', result.token);
+        localStorage.setItem('username', result.username);
         router.push('/');
       } catch (error) {
-        console.error('로그인 중 오류 발생', error);
+        console.error('로그인 실패', error);
       }
     },
     validate: LoginValidation,
   });
 
   const isFormValid = Object.values(values).every((value) => value !== '') && Object.keys(errors).length === 0;
 
+
   return (
     <div className="relative flex w-full items-center justify-center overflow-y-auto bg-BG-black text-white">
       <div className="z-20 w-full px-4 py-8">

diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
@@ -7,28 +7,23 @@ import InputField from '@/components/layout/InputField';
 import Dropdown from '@/components/layout/Dropdown';
 
 import { SignUpValidation } from '@/lib/utils';
-import { FormData } from '@/lib/types';
+import { FormData, initialFormData } from '@/lib/types';
 import { inputFields, teamOptions, departmentOptions } from '@/lib/data';
 import { signUpRequest } from '@/lib/actions/signUpAction';
 import { useRouter } from 'next/navigation';
+
 function SignUpPage() {
   const router = useRouter();
   const { values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue } = useForm<FormData>({
-    initialValues: {
-      name: '',
-      userId: '',
-      password: '',
-      confirmPassword: '',
-      email: '',
-      team: '',
-      department: '',
-    },
+    initialValues: initialFormData,
     onSubmit: async (values) => {
-      const result = await signUpRequest(values);
-      if (result) {
+      try {
+        const response = await signUpRequest(values);
+        const result = await response.json();
+        console.log('회원가입 성공:', result);
         router.push('/login');
-      } else {
-        console.error('회원가입 실패');
+      } catch (error) {
+        console.error('회원가입실패:', error);
       }
     },
     validate: SignUpValidation,
@@ -77,7 +72,7 @@ function SignUpPage() {
             />
           )}
 
-          <div className="relative mx-auto mb-5 flex w-5/6 items-center justify-between space-x-4">
+          <div className="flex w-5/6 mx-auto items-center justify-between gap-4">
             <InputField
               id="email"
               type="email"
@@ -90,7 +85,7 @@ function SignUpPage() {
               handleClear={(id, value) => setFieldValue(id as keyof FormData, value)}
             />
             <button
-              className="focus:shadow-outline mb-4 min-w-12 rounded bg-gray-600 px-1.5 py-1 text-white hover:bg-gray-700 focus:outline-none"
+              className="focus:shadow-outline mb-4 w-16 min-w-12 rounded bg-gray-600 px-2 py-1 text-white hover:bg-gray-700 focus:outline-none"
               type="button">
               인증
             </button>

diff --git a/src/components/DemoDayVote/DemoDayVoteReult.tsx b/src/components/DemoDayVote/DemoDayVoteReult.tsx
@@ -18,7 +18,7 @@ export default function DemoDayVoteResult() {
       try {
         const response = await voteResult(accessToken);
         const result: VoteResult[] = await response.json();
-
+        console.log('투표 결과:', result);
         setVoteResults(result);
       } catch (error) {
         console.error('투표 결과 조회 중 오류 발생', error);

diff --git a/src/components/PartLeaderVote/BackEndVote.tsx b/src/components/PartLeaderVote/BackEndVote.tsx
@@ -17,7 +17,7 @@ export default function BackEndVote() {
     const token = localStorage.getItem('token') || '';
     try {
       const response = await LeaderVoteAction(memberId, token);
-
+      console.log('투표 결과:', response);
       if (response.ok) {
         alert('투표가 완료되었습니다.');
         router.push('/vote/back-end/result');
@@ -34,6 +34,7 @@ export default function BackEndVote() {
         const response = await candiateList(accessToken);
 
         const candidates = response.members || [];
+        console.log('Candidates123123:', candidates);
 
         if (Array.isArray(candidates)) {
           const filteredCandidates = candidates.filter(

diff --git a/src/components/PartLeaderVote/BackLeaderVoteResult.tsx b/src/components/PartLeaderVote/BackLeaderVoteResult.tsx
@@ -29,6 +29,7 @@ export default function BackLeaderVoteResult() {
             (candidate: Candidate) => candidate.id >= 19 && candidate.id <= 28,
           );
           setCandidateList(filteredCandidates);
+          console.log('Candidates:', filteredCandidates);
         } else {
           console.error('Expected an array of candidates');
         }

diff --git a/src/components/PartLeaderVote/FrontEndVote.tsx b/src/components/PartLeaderVote/FrontEndVote.tsx
@@ -17,7 +17,7 @@ export default function FrontEndVote() {
     const token = localStorage.getItem('token') || '';
     try {
       const response = await LeaderVoteAction(memberId, token);
-
+      console.log('투표 결과:', response);
       if (response.ok) {
         alert('투표가 완료되었습니다.');
         router.push('/vote/front-end/result');
@@ -39,6 +39,7 @@ export default function FrontEndVote() {
           // Select candidates with index 0 to 9
           const filteredCandidates = candidates.slice(0, 10);
           setCandidateList(filteredCandidates);
+          console.log('Candidates:', filteredCandidates);
         } else {
           console.error('Expected an array of candidates');
         }

diff --git a/src/components/PartLeaderVote/FrontLeaderVoteResult.tsx b/src/components/PartLeaderVote/FrontLeaderVoteResult.tsx
@@ -27,6 +27,7 @@ export default function FrontLeaderVoteResult() {
           // Select candidates with index 0 to 9
           const filteredCandidates = sortedCandidates.slice(0, 10);
           setCandidateList(filteredCandidates);
+          console.log('Candidates:', filteredCandidates);
         } else {
           console.error('Expected an array of candidates');
         }

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,62 +1,47 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { authState } from '@/lib/state/atom';
 
 function Header() {
-  const router = useRouter();
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [username, setUsername] = useState('');
-
-  useEffect(() => {
-    const token = localStorage.getItem('token');
-    const name = localStorage.getItem('username');
-    if (token) {
-      setIsLoggedIn(true);
-      setUsername(name || '');
-    }
-  }, []);
+  const { isLoggedIn, username } = useRecoilValue(authState);
+  const setAuthState = useSetRecoilState(authState);
 
   const handleLogout = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('username');
-    setIsLoggedIn(false);
-    router.push('/');
+    setAuthState({
+      isLoggedIn: false,
+      username: '',
+    });
   };
 
+  const authButtons = isLoggedIn 
+    ? [
+      { label: `${username}님`, href: '/', onClick: undefined, className: 'text-white text-sm sm:text-lg' },
+      { label: '로그아웃', href: '/', onClick: handleLogout, className: 'rounded border border-gray-600 px-2 py-1 text-gray-600 hover:bg-gray-100 hover:text-black text-sm sm:px-4 sm:py-2 sm:text-lg' },
+    ]
+    : [
+      { label: '로그인', href: '/login', onClick: undefined, className: 'rounded border border-gray-600 px-2 py-1 text-gray-600 hover:bg-gray-100 hover:text-black text-sm sm:px-4 sm:py-2 sm:text-lg' },
+      { label: '회원가입', href: '/sign-up', onClick: undefined, className: 'hover:bg-main-dark rounded bg-main px-2 py-1 text-white text-sm sm:px-4 sm:py-2 sm:text-lg' },
+    ];
+
   return (
-    <header className="flex w-full justify-between border-b border-gray-200 bg-BG-black px-10 py-4">
-      <div className="flex items-center space-x-4">
+    <header className="flex w-full justify-between border-b border-gray-200 bg-BG-black px-10 sm:px-14 py-4">
+      <div className="flex items-center space-x-2 sm:space-x-4">
         <Link href="/">
           <Image src="/colorLogo.svg" alt="logo" width={40} height={40} className="cursor-pointer" />
         </Link>
       </div>
-      <div className="flex items-center space-x-4">
-        {isLoggedIn ? (
-          <>
-            <span className="text-white">{username}님</span>
-            <button
-              className="rounded border border-gray-600 px-2 py-1 text-gray-600 hover:bg-gray-100 hover:text-black"
-              onClick={handleLogout}>
-              로그아웃
-            </button>
-          </>
-        ) : (
-          <>
-            <button
-              className="rounded border border-gray-600 px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-black"
-              onClick={() => router.push('/login')}>
-              로그인
-            </button>
-            <button
-              className="hover:bg-main-dark rounded bg-main px-4 py-2 text-white"
-              onClick={() => router.push('/sign-up')}>
-              회원가입
+      <div className="flex items-center space-x-2 sm:space-x-4">
+        {authButtons.map((button, index) => (
+          <Link key={index} href={button.href}>
+            <button onClick={button.onClick} className={button.className}>
+              {button.label}
             </button>
-          </>
-        )}
+          </Link>
+        ))}
       </div>
     </header>
   );

diff --git a/src/components/layout/InputField.tsx b/src/components/layout/InputField.tsx
@@ -2,28 +2,18 @@ import React from 'react';
 import Image from 'next/image';
 import CheckBox from '/public/image/CheckBox.svg';
 import Xmark from '/public/image/Xmark.svg';
-import {InputFieldProps} from '@/lib/types'
+import { InputFieldProps } from '@/lib/types';
 
-
-const InputField: React.FC<InputFieldProps> = ({
-  id,
-  type,
-  placeholder,
-  value,
-  touched,
-  error,
-  handleChange,
-  handleBlur,
-  handleClear,
-}) => {
+const InputField = ({
+  id, type, placeholder, value, touched, error, handleChange, handleBlur, handleClear
+}: InputFieldProps) => {
   const maxLength = id === 'name' ? 10 : id === 'userId' ? 12 : undefined;
+  const borderColor = touched && error ? 'border-gray-600' : touched && !error ? 'border-main' : 'border-gray-600';
 
   return (
     <div className="relative mb-2 w-5/6 mx-auto">
       <input
-        className={`w-full bg-transparent border-b-2 py-2 px-3 text-white placeholder-gray-500 focus:outline-none ${
-          touched && error ? 'border-gray-600' : touched && !error ? 'border-main' : 'border-gray-600'
-        }`}
+        className={`w-full bg-transparent border-b-2 py-2 px-3 text-white placeholder-gray-500 focus:outline-none ${borderColor}`}
         id={id}
         type={type}
         placeholder={placeholder}

diff --git a/src/components/layout/RecoilProvider.tsx b/src/components/layout/RecoilProvider.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { RecoilRoot } from 'recoil';
+
+export default function RecoilProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <RecoilRoot>
+      {children}
+    </RecoilRoot>
+  );
+}