Merge pull request #9 from 9oormDari/feature/User

[#6] 로그인 회원가입 완성 및 로컬 배포 자동화
9oormDari · Sep 26, 2024 · ed282df · ed282df
2 parents 1a68606 + 30021fd
commit ed282df
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 22 deletions.
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
@@ -1,16 +1,21 @@
-import { Suspense } from 'react';
-import { Outlet } from 'react-router-dom';
-import Header from '../components/Header/Header.tsx';
+import { Outlet, useLocation } from 'react-router-dom';
+
 import Footer from '../components/Footer/Footer.tsx';
+import Header from '../components/Header/Header.tsx';
+import { Suspense } from 'react';
 
 export default function NotFoundPage() {
+    const location = useLocation();
+    const hideFooter =
+        location.pathname === '/login' || location.pathname === '/register';
+
     return (
         <div>
             <Header />
             <Suspense fallback={'loading...'}>
                 <Outlet />
             </Suspense>
-            <Footer />
+            {!hideFooter && <Footer />}
         </div>
     );
 }
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -1,37 +1,56 @@
+import cn from '../lib/cn.ts';
 import { useNavigate } from 'react-router-dom';
 
 export default function Login() {
     const navigate = useNavigate();
 
     return (
-        <div className="flex items-center justify-center min-h-[500px] py-[50px]">
-            <div className="w-full max-w-xs flex flex-col items-center gap-[50px]">
+        <div
+            className={cn(
+                'flex items-center justify-center min-h-[500px] pt-[50px]'
+            )}
+        >
+            <div
+                className={cn(
+                    'w-full max-w-xs flex flex-col items-center gap-[50px]'
+                )}
+            >
                 {/* 로그인 텍스트 영역 */}
                 <div className="text-center">
                     <h1 className="text-4xl font-bold">로그인</h1>
                 </div>
 
                 {/* 아이디 및 비밀번호 입력 필드 영역 */}
-                <div className="flex flex-col items-center gap-[10px]">
+                <div className={cn('flex flex-col items-center gap-[10px]')}>
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="text"
                         placeholder="아이디"
                     />
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="password"
                         placeholder="비밀번호"
                     />
                 </div>
 
                 {/* 로그인 및 회원가입 버튼 영역 */}
-                <div className="flex flex-col items-center gap-[10px]">
-                    <button className="w-[500px] h-[70px] bg-black text-white font-bold rounded hover:bg-black focus:outline-none focus:ring-2 focus:ring-black">
+                <div className={cn('flex flex-col items-center gap-[10px]')}>
+                    <button
+                        className={cn(
+                            'w-[500px] h-[70px] bg-[#5A82F1] text-white font-bold rounded hover:bg-[#4A72D1] focus:outline-none focus:ring-2 focus:ring-[#5A82F1]'
+                        )}
+                    >
                         로그인
                     </button>
                     <button
-                        className="w-[500px] h-[70px] bg-black text-white font-bold rounded hover:bg-black focus:outline-none focus:ring-2 focus:ring-black"
+                        className={cn(
+                            'w-[500px] h-[70px] bg-[#575757] text-white font-bold rounded hover:bg-[#474747] focus:outline-none focus:ring-2 focus:ring-[#575757]'
+                        )}
                         onClick={() => navigate('/register')}
                     >
                         회원가입

diff --git a/src/pages/register.tsx b/src/pages/register.tsx
@@ -1,42 +1,72 @@
+import cn from '../lib/cn.ts';
+import { useNavigate } from 'react-router-dom';
+
 export default function Register() {
+    const navigate = useNavigate();
+
     return (
-        <div className="flex items-center justify-center min-h-[500px] py-[50px]">
-            <div className="w-full max-w-xs flex flex-col items-center gap-[50px]">
+        <div
+            className={cn(
+                'flex items-center justify-center min-h-[500px] pt-[50px]'
+            )}
+        >
+            <div
+                className={cn(
+                    'w-full max-w-xs flex flex-col items-center gap-[50px]'
+                )}
+            >
                 {/* 회원가입 텍스트 영역 */}
                 <div className="text-center">
                     <h1 className="text-4xl font-bold">회원가입</h1>
                 </div>
 
                 {/* 입력 필드 영역 */}
-                <div className="flex flex-col items-center gap-[10px]">
+                <div className={cn('flex flex-col items-center gap-[10px]')}>
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="text"
                         placeholder="닉네임"
                     />
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="text"
                         placeholder="아이디"
                     />
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="password"
                         placeholder="비밀번호"
                     />
                     <input
-                        className="w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className={cn(
+                            'w-[500px] h-[70px] px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#E9EBF8]'
+                        )}
                         type="password"
                         placeholder="비밀번호 확인"
                     />
                 </div>
 
                 {/* 확인 및 취소 버튼 영역 */}
-                <div className="flex w-[500px] gap-[10px]">
-                    <button className="w-1/2 h-[70px] bg-black text-white font-bold rounded hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black">
+                <div className={cn('flex w-[500px] gap-[10px]')}>
+                    <button
+                        className={cn(
+                            'w-1/2 h-[70px] bg-[#5A82F1] text-white font-bold rounded hover:bg-[#4A72D1] focus:outline-none focus:ring-2 focus:ring-[#5A82F1]'
+                        )}
+                    >
                         확인
                     </button>
-                    <button className="w-1/2 h-[70px] bg-[#939393] text-white font-bold rounded hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500">
+                    <button
+                        className={cn(
+                            'w-1/2 h-[70px] bg-[#A2A2A2] text-white font-bold rounded hover:bg-[#929292] focus:outline-none focus:ring-2 focus:ring-[#A2A2A2]'
+                        )}
+                        onClick={() => navigate(-1)}
+                    >
                         취소
                     </button>
                 </div>

diff --git a/vite.config.ts b/vite.config.ts
@@ -12,4 +12,9 @@ export default defineConfig({
             layout: '_layout',
         }),
     ],
+    server: {
+        port: 5174,
+        host: true,
+        strictPort: false,
+    },
 });