Merge branch 'main' of https://github.com/blaybus-hackathon/frontend

bigmooon · bigmooon · commit 84a6c499ed50 · 2025-06-16T21:31:03.000+09:00
diff --git a/public/kakao_login_medium_wide.png b/public/kakao_login_medium_wide.png
diff --git a/src/App.css b/src/App.css
@@ -35,7 +35,7 @@
   --destructive: hsl(0 84.2% 60.2%);
   --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(0 0% 89.8%);
-  --input: hsl(0 0% 89.8%);
+  --input: #c8c8c8;
   --ring: hsl(0 0% 3.9%);
   --chart-1: hsl(12 76% 61%);
   --chart-2: hsl(173 58% 39%);
@@ -78,7 +78,7 @@
   --destructive: hsl(0 62.8% 30.6%);
   --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(0 0% 14.9%);
-  --input: hsl(0 0% 14.9%);
+  --input: #c8c8c8;
   --ring: hsl(0 0% 83.1%);
   --chart-1: hsl(220 70% 50%);
   --chart-2: hsl(160 60% 45%);
diff --git a/src/App.jsx b/src/App.jsx
@@ -34,12 +34,12 @@ function App() {
       <Routes>
         {/* 공통 */}
         <Route index element={<Home />} />
-        <Route path='/signIn' element={<SignIn />} />
         <Route path='/signUp' element={<SignUp />} />
         <Route path='/oauth/kakao/callback' element={<KakaoCallback />} />
 
         {/* 레이아웃 */}
         <Route path='/' element={<Layout />}>
+          <Route path='/signin' element={<SignIn />} />
           {/* <Route index element={<Home />} /> */}
 
           {/* Center */}
diff --git a/src/components/Auth/Authform.jsx b/src/components/Auth/Authform.jsx
@@ -1,7 +1,10 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useNavigate } from "react-router-dom";
-import PropTypes from "prop-types";
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/custom/Button';
+import { Input } from '@/components/ui/custom/Input';
+import { User, LockKeyholeOpen } from 'lucide-react';
+import Kakao from '/kakao_login_medium_wide.png';
+import Logo from '/blaybus_logo_icon_text.svg';
+import PropTypes from 'prop-types';
 
 const AuthForm = ({ type, onSubmit, setLoginType }) => {
   const navigate = useNavigate();
@@ -14,137 +17,96 @@ const AuthForm = ({ type, onSubmit, setLoginType }) => {
     });
   };
 
+  const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
+  const REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
+  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  const handleKakaoLogin = () => {
+    window.location.href = KAKAO_AUTH_URL;
+  };
+
   return (
-    <div className="w-full max-w-md bg-white rounded-lg  p-8">
-      <h2 className="text-2xl font-bold text-center mb-6">돌봄 워크 Logo </h2>
+    <div className='bg-white rounded-lg'>
+      <img src={Logo} alt='logo' className='w-1/2 mx-auto py-8' />
 
       {/* 로그인 타입 선택 */}
-      <div className="grid grid-cols-2 mb-6 gap-4">
+      <div className='grid grid-cols-2 mb-8 gap-4'>
         <Button
-          onClick={() => setLoginType("company")}
-          className={`font-medium  ${
-            type === "company"
-              ? " text-white bg-[#522E9A] hover:bg-[#522E9A]/90 "
-              : "bg-[#F6F6F6] text-[#6C6C6C] hover:bg-[#F6F6F6]/90 "
+          onClick={() => setLoginType('company')}
+          className={`w-full h-[3.44rem] font-medium text-lg rounded-[0.31rem] border-none ${
+            type === 'company'
+              ? 'bg-[var(--main)] text-white'
+              : 'bg-[var(--button-inactive)] text-[var(--placeholder-gray)]'
           }`}
         >
           관리자용
         </Button>
         <Button
-          onClick={() => setLoginType("helper")}
-          className={`font-medium  ${
-            type === "helper"
-              ? " text-white bg-[#275280] hover:bg-[#275280]/90 "
-              : "bg-[#F6F6F6] text-[#6C6C6C] hover:bg-[#F6F6F6]/90 "
+          onClick={() => setLoginType('helper')}
+          className={`w-full h-[3.44rem] font-medium text-lg rounded-[0.31rem] border-none ${
+            type === 'helper'
+              ? 'bg-[var(--main)] text-white'
+              : 'bg-[var(--button-inactive)] text-[var(--placeholder-gray)]'
           }`}
         >
           요양보호사용
         </Button>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div className="relative">
-          <div className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground">
-            <NavigationIcon className="h-4 w-4" />
-          </div>
+      <form onSubmit={handleSubmit} className='space-y-4'>
+        <div className='relative text-[var(--placeholder-gray)]'>
+          <User className='absolute left-5 top-1/2 -translate-y-1/2 h-5 w-5 text-[var(--placeholder-gray)] z-1' />
           <Input
-            id="email"
-            type="email"
-            placeholder="아이디를 입력해주세요. "
-            className="w-full rounded-lg bg-background pl-8"
+            id='email'
+            type='email'
+            placeholder='아이디를 입력해주세요.'
+            className='w-full h-12 pl-12 placeholder:text-[var(--placeholder-gray)]'
           />
         </div>
 
-        <div className="relative">
-          <div className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground">
-            <HomeControlsIcon className="h-4 w-4" />
-          </div>
+        <div className='relative text-[var(--placeholder-gray)]'>
+          <LockKeyholeOpen className='absolute left-5 top-1/2 -translate-y-1/2 h-5 w-5 text-[var(--placeholder-gray)] z-1' />
           <Input
-            id="password"
-            type="password"
-            placeholder="비밀번호를 입력해주세요. "
-            className="w-full rounded-lg bg-background pl-8"
+            id='password'
+            type='password'
+            placeholder='비밀번호를 입력해주세요. '
+            className='w-full h-12 pl-12 placeholder:text-[var(--placeholder-gray)]'
           />
         </div>
 
-        <div>
-          {/* 아이디 - 비밀번호 찾기 추가 필요. */}
-          <div className="block text-[#6C6C6C] text-right cursor-pointer hover:underline">
+        <div className='flex justify-end mb-8'>
+          {/* TODO: 아이디 - 비밀번호 찾기 추가 필요. */}
+          <button className='text-[1.06rem] font-medium text-[var(--placeholder-gray)] border-b border-[var(--outline)]'>
             아이디 비밀번호 찾기
-          </div>
+          </button>
         </div>
-        <Button
-          type="submit"
-          className={`w-full ${
-            type === "helper"
-              ? "bg-[#275280] hover:bg-[#275280]/90"
-              : "bg-[#522E9A] hover:bg-[#522E9A]/90"
-          } text-white`}
-        >
+
+        <Button className='w-full h-[3.4rem] rounded-[0.31rem] text-lg font-medium' type='submit'>
           로그인
         </Button>
       </form>
 
       <Button
-        onClick={() => navigate("/helpler/signUp")}
-        className={`mt-2 w-full bg-white hover:bg-white/90 rounded-xs border-1 border-[#522E9A]
-        } text-[#522E9A]`}
+        variant='white'
+        onClick={() => navigate('/helpler/signUp')}
+        className='mt-2 w-full h-[3.4rem] rounded-[0.31rem] text-lg  font-medium'
       >
         돌봄워크 회원가입
       </Button>
-
       {/* 아이콘 추가 Label로 수정 필요. */}
-      <Button
-        type="submit"
-        className={`mt-2 w-full bg-[#FEE500] hover:bg-[#FEE500]/90 rounded-xs 
-        } text-black`}
-      >
-        카카오 로그인
-      </Button>
+
+      {/* TODO: 카카오 로그인 psd 파일 편집 불가인 관계로 */}
+      <button className={`w-full h-[3.4rem] mt-2`} onClick={handleKakaoLogin} type='button'>
+        <img src={Kakao} alt='kakao' className='w-full h-full object-fit' />
+      </button>
     </div>
   );
 };
 
 AuthForm.propTypes = {
-  type: PropTypes.oneOf(["helper", "company"]).isRequired,
+  type: PropTypes.oneOf(['helper', 'company']).isRequired,
   onSubmit: PropTypes.func.isRequired,
   setLoginType: PropTypes.func.isRequired,
 };
 
-function NavigationIcon(prop) {
-  return (
-    <svg
-      {...prop}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM4 20V17.2C4 16.6333 4.14167 16.1167 4.425 15.65C4.725 15.1667 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.65 8.75 13.4C9.81667 13.1333 10.9 13 12 13C13.1 13 14.1833 13.1333 15.25 13.4C16.3167 13.65 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2667 15.1667 19.55 15.65C19.85 16.1167 20 16.6333 20 17.2V20H4ZM6 18H18V17.2C18 17.0167 17.95 16.85 17.85 16.7C17.7667 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5667 14.775 15.35C13.8583 15.1167 12.9333 15 12 15C11.0667 15 10.1417 15.1167 9.225 15.35C8.30833 15.5667 7.4 15.9 6.5 16.35C6.35 16.4333 6.225 16.55 6.125 16.7C6.04167 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0167 9.80833 13.4 9.425C13.8 9.025 14 8.55 14 8C14 7.45 13.8 6.98333 13.4 6.6C13.0167 6.2 12.55 6 12 6C11.45 6 10.975 6.2 10.575 6.6C10.1917 6.98333 10 7.45 10 8C10 8.55 10.1917 9.025 10.575 9.425C10.975 9.80833 11.45 10 12 10Z"
-        fill="#4D4447"
-      />
-    </svg>
-  );
-}
-
-function HomeControlsIcon(prop) {
-  return (
-    <svg
-      {...prop}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6 8H15V6C15 5.16667 14.7083 4.45833 14.125 3.875C13.5417 3.29167 12.8333 3 12 3C11.1667 3 10.4583 3.29167 9.875 3.875C9.29167 4.45833 9 5.16667 9 6H7C7 4.61667 7.48333 3.44167 8.45 2.475C9.43333 1.49167 10.6167 1 12 1C13.3833 1 14.5583 1.49167 15.525 2.475C16.5083 3.44167 17 4.61667 17 6V8H18C18.55 8 19.0167 8.2 19.4 8.6C19.8 8.98333 20 9.45 20 10V20C20 20.55 19.8 21.025 19.4 21.425C19.0167 21.8083 18.55 22 18 22H6C5.45 22 4.975 21.8083 4.575 21.425C4.19167 21.025 4 20.55 4 20V10C4 9.45 4.19167 8.98333 4.575 8.6C4.975 8.2 5.45 8 6 8ZM6 20H18V10H6V20ZM12 17C12.55 17 13.0167 16.8083 13.4 16.425C13.8 16.025 14 15.55 14 15C14 14.45 13.8 13.9833 13.4 13.6C13.0167 13.2 12.55 13 12 13C11.45 13 10.975 13.2 10.575 13.6C10.1917 13.9833 10 14.45 10 15C10 15.55 10.1917 16.025 10.575 16.425C10.975 16.8083 11.45 17 12 17ZM6 20V10V20Z"
-        fill="#3F4946"
-      />
-    </svg>
-  );
-}
-
 export default AuthForm;
diff --git a/src/components/ui/custom/Navbar.jsx b/src/components/ui/custom/Navbar.jsx
@@ -49,13 +49,13 @@ export default function Navbar() {
                 className='text-lg px-6 py-3'
                 onClick={() => {
                   clearProfile();
-                  navigate('/signIn');
+                  navigate('/');
                 }}
               >
                 로그아웃
               </Button>
             ) : (
-              <Button className='text-lg px-10 py-3' onClick={() => navigate('/signIn')}>
+              <Button className='text-lg px-10 py-3' onClick={() => navigate('/signin')}>
                 로그인
               </Button>
             )}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -273,7 +273,7 @@ export default function Home() {
           </div>
 
           <div className='text-center mt-12'>
-            <Button className='text-xl px-12 py-6' onClick={() => navigate('/signIn')}>
+            <Button className='text-xl px-12 py-6' onClick={() => navigate('/signin')}>
               지금 시작하기
               <ChevronRight className='ml-2 w-6 h-6' />
             </Button>
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
@@ -1,31 +1,31 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import AuthForm from "@/components/Auth/Authform";
-import axios from "axios";
-import useProfileStore from "@/store/useProfileStore";
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AuthForm from '@/components/Auth/Authform';
+import axios from 'axios';
+import useProfileStore from '@/store/useProfileStore';
 
 export default function SignIn() {
   const navigate = useNavigate();
-  const [loginType, setLoginType] = useState("helper");
+  const [loginType, setLoginType] = useState('helper');
   const { updateAuth } = useProfileStore();
 
   const handleSubmit = async ({ email, password }) => {
     try {
       console.log(email, password);
 
       const response = await axios.post(
-        "http://localhost:8080/api/sign/in",
+        'http://localhost:8080/api/sign/in',
         {
           userId: email,
           userPw: password,
         },
         {
           withCredentials: true,
-        }
+        },
       );
 
       if (response.status === 200) {
-        console.log("로그인 성공 ", response);
+        console.log('로그인 성공 ', response);
         //parse
         const { chatSenderId, email, userAuth } = response.data;
         //Zustand에 저장
@@ -35,29 +35,21 @@ export default function SignIn() {
           userAuth,
         });
         //zustand 프로필 내용도 저장 (세션에)
-        navigate("/");
+        navigate('/');
       }
     } catch (error) {
-      console.error("로그인 실패:", error);
-      alert("이메일 또는 비밀번호가 올바르지 않습니다.");
+      console.error('로그인 실패:', error);
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
     }
   };
 
   return (
-    <>
-      <div className="min-h-screen flex flex-col">
-        <main className="flex-grow ">
-          <div className="container mx-auto px-4 ">
-            <div className="h-[800px] flex items-center justify-center">
-              <AuthForm
-                type={loginType}
-                onSubmit={handleSubmit}
-                setLoginType={setLoginType}
-              />
-            </div>
-          </div>
-        </main>
+    <main className='flex h-screen items-center'>
+      <div className='container mx-auto'>
+        <div className='flex'>
+          <AuthForm type={loginType} onSubmit={handleSubmit} setLoginType={setLoginType} />
+        </div>
       </div>
-    </>
+    </main>
   );
 }
diff --git a/src/pages/center/MyPage.jsx b/src/pages/center/MyPage.jsx
@@ -1,7 +1,8 @@
-import Header from '@/components/ui/temp/Header';
+import { useEffect } from 'react';
 import Profile from '@/assets/images/elder-basic-profile.png';
 import { useManagerProfile } from '@/hooks/center/service/useManagerProfile';
 import { useManagerProfileStore } from '@/store/center/useManagerProfileStore';
+import { useHeaderPropsStore } from '@/store/useHeaderPropsStore';
 import { useNavigate } from 'react-router-dom';
 import ManagerInfoDisplay from '@/components/Center/MyPage/ManagerInfoDisplay';
 import ManagerInfoEdit from '@/components/Center/MyPage/ManagerInfoEdit';
@@ -10,13 +11,26 @@ import { Button } from '@/components/ui/custom/Button';
 export default function MyPage() {
   const { data: managerProfile, isLoading, saveManagerProfile } = useManagerProfile();
   const { isEditMode, toggleEditMode, setFormData, formData } = useManagerProfileStore();
+  const setHeaderProps = useHeaderPropsStore((state) => state.setHeaderProps);
+  const clearHeaderProps = useHeaderPropsStore((state) => state.clearHeaderProps);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    setHeaderProps({
+      type: 'logo',
+      hasBorder: false,
+    });
+
+    return () => {
+      clearHeaderProps();
+    };
+  }, [clearHeaderProps, setHeaderProps]);
+
   // TODO: 로딩 컴포넌트 필요
   if (isLoading) return <div>Loading...</div>;
   if (!managerProfile) {
     alert('관리자 정보를 불러오지 못했습니다.');
-    navigate('/signin');
+    navigate('/signIn');
   }
 
   // save formData when edit mode is true
@@ -46,7 +60,6 @@ export default function MyPage() {
 
   return (
     <div className='h-screen max-w-2xl mx-auto'>
-      <Header variant='logo' hasBorder={false} />
       {/* 헤더 밑 공간 */}
       <div className='pt-[1.88rem] bg-[#f5f5f5]'>
         {/* 마이페이지 전체 컨테이너 */}
