[merge/ design_로그인회원가입-퍼블리싱_#12] Design 로그인회원가입 퍼블리싱 #12

src/components/common/Button.tsx

@@ -5,25 +5,28 @@ interface ButtonProps {
   text: string;
   size: "md" | "lg";
   to?: string;
-  className?: string;
+  css?: string;
+  logo?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Button = ({ text, to, size, className, onClick }: ButtonProps) => {
+const Button = ({ text, to, size, css, logo, onClick }: ButtonProps) => {
   const navigate = useNavigate();
-  const BASE_STYLE = "flex justify-center items-center bg-[#A1A1A1] font-bold";
+  const BASE_STYLE =
+    "flex justify-center items-center bg-main-green01 border border-[1px] border-main-green rounded-[5px] font-bold text-main-beige01";
 
   const SIZE_STYLE = {
-    lg: "w-[320px] h-[39px] font-bold",
-    md: "w-[89px] h-[29px] font-bold",
+    lg: "w-[354px] h-[39px] font-bold",
+    md: "w-[86px] h-[29px] font-bold",
   }[size];
 
   return (
     <>
       <button
-        className={twMerge(BASE_STYLE, SIZE_STYLE, className)}
+        className={twMerge(BASE_STYLE, SIZE_STYLE, css)}
         onClick={(e) => (to ? navigate(to) : onClick && onClick(e))}
       >
+        {logo && <img src={logo} alt={`${text} 로고`} />}
         {text}
       </button>
     </>

src/components/layout/AuthLayout.tsx

@@ -1,12 +1,25 @@
 import { Outlet } from "react-router";
 import Header from "./Header";
+import "../../styles/AuthLayout.css";
+import BackgroundImg from "../../assets/auth_background.svg";
 
 const AuthLayout = () => {
   return (
     <>
       <Header />
-      <section className="flex justify-center items-center h-screen">
-        <Outlet />
+      <section
+        className="flex justify-center items-center
+          bg-no-repeat bg-cover bg-center relative
+        "
+        style={{
+          backgroundImage: `url(${BackgroundImg})`,
+          height: "calc(100vh - 50px)",
+        }}
+      >
+        <div className="absolute inset-0 blur"></div>
+        <div className="relative z-10">
+          <Outlet />
+        </div>
       </section>
     </>
   );

src/index.css

@@ -1 +1,22 @@
 @import "tailwindcss";
+
+@theme {
+  --color-main-beige: #ffead9;
+  --color-main-beige01: #fff6e9;
+  --color-main-beige02: #EBE9E2;
+  --color-main-green: #1F281E;
+  --color-main-green01: #6E8370;
+  --color-main-green02: #CAD2CB;
+  --color-logo-green-light: #2B3E34;
+  --color-logo-green:dark: #62C588;
+  --color-header-green: #657166;
+  --color-header-green-hoverdark: #AEDCC4;
+  --color-header-header-green-hoverlight: #2B3E34;
+  --color-header-red: #FF6854;
+  --color-header-red-hoverdark: #FF523C;
+  --color-header-red:hoverlightk: #FF1D00;
+  --color-kakao: #FEE500;
+  --color-black01: #212121;
+  --color-gray01: #AFAFAF;
+  --color-gray02: #E8E8E8;
+}

src/pages/SignIn.tsx

@@ -1,16 +1,36 @@
 import Button from "../components/common/Button";
+import "../styles/AuthLayout.css";
+import KakaoLogo from "../assets/kakao_logo.svg";
+import GoogleLogo from "../assets/google_logo.svg";
 
 const SignIn = () => {
   return (
-    <div className="w-[520px] h-[440px] bg-[#D6D6D6] p-[100px]">
-      <div>
-        <div className="flex flex-col gap-[20px] pb-[40px] border-b-[1px]">
-          <Button text="카카오 계정으로 로그인" size="lg" />
-          <Button text="Google 계정으로 로그인" size="lg" />
+    <div className=" w-[554px] h-[414px] bg-[#ffffff94] px-[100px] py-[50px] rounded-[10px]">
+      <div className="">
+        <div className="text-center mb-[50px]">
+          <span className="text-logo-green-light font-bold text-[20px]">
+            LOGIN
+          </span>
         </div>
-        <div className="flex flex-col pt-[40px] gap-[5px]">
-          <span className="text-sm text-center">아직 회원이 아니신가요?</span>
-          <Button text="회원가입하러 가기" to="/signUp" size="lg" />
+        <div className="relative flex flex-col gap-[20px] pb-[40px] border-b-[1px]">
+          <Button
+            text="카카오 로그인"
+            size="lg"
+            css="bg-kakao border-gray01 text-black gap-[10px]"
+            logo={KakaoLogo}
+          />
+          <Button
+            text="구글 로그인"
+            size="lg"
+            css="bg-white border-gray01 text-black gap-[10px]"
+            logo={GoogleLogo}
+          />
+        </div>
+        <div className="relative flex flex-col pt-[40px] gap-[5px]">
+          <span className="text-sm text-center font-semibold">
+            아직 회원이 아니신가요?
+          </span>
+          <Button text="회원가입" to="/signUp" size="lg" />
         </div>
       </div>
     </div>

src/pages/SignUp.tsx

@@ -1,12 +1,29 @@
 import Button from "../components/common/Button";
+import KakaoLogo from "../assets/kakao_logo.svg";
+import GoogleLogo from "../assets/google_logo.svg";
 
 const SignUp = () => {
   return (
-    <div className="w-[520px] h-[298px] bg-[#D6D6D6] p-[100px]">
+    <div className="w-[554px] h-[309px] bg-[#ffffff94] px-[100px] py-[50px] rounded-[10px]">
+      <div className="text-center mb-[50px]">
+        <span className="text-logo-green-light font-bold text-[20px]">
+          SIGN UP
+        </span>
+      </div>
       <div>
         <div className="flex flex-col gap-[20px]">
-          <Button text="카카오 계정으로 가입하기" size="lg" />
-          <Button text="Google 계정으로 가입하기" size="lg" />
+          <Button
+            text="카카오 계정으로 가입하기"
+            size="lg"
+            css="bg-kakao border-gray01 text-black gap-[10px]"
+            logo={KakaoLogo}
+          />
+          <Button
+            text="구글 계정으로 가입하기"
+            size="lg"
+            css="bg-white border-gray01 text-black gap-[10px]"
+            logo={GoogleLogo}
+          />
         </div>
       </div>
     </div>

src/pages/SignUpCompanyInfo.tsx

@@ -1,38 +1,45 @@
+import { useState } from "react";
 import Button from "../components/common/Button";
 
 const SignUpCompanyInfo = () => {
+  const [companyInfo, setCompanyInfo] = useState<string | undefined>("");
+
+  const handleCompanyInfo = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCompanyInfo(e.target.value);
+  };
+
   return (
-    <div className="flex justify-center items-center w-[450px] h-[385px] bg-[#D6D6D6] px-[50px] py-[100px]">
-      <div className="flex flex-col gap-[20px]">
+    <div className="flex flex-col justify-center items-center w-[450px] h-[479px] bg-[#ffffff94] px-[100px]">
+      <div className="text-center">
+        <span className="text-logo-green-light font-bold text-[20px]">
+          개인정보 등록
+        </span>
+      </div>
+      <div className="flex flex-col gap-[20px] my-[50px]">
         <div className="flex flex-col gap-[10px]">
           <span className="font-bold">이름</span>
-          <input
-            type="text"
-            value="홍길동"
-            disabled
-            className="w-[250px] h-[33px] pl-[10px] bg-[#9A9A9A] font-bold"
-          />
+          <div className="pl-[10px]">
+            <span className="text-black01">홍길동</span>
+          </div>
         </div>
         <div className="flex flex-col gap-[10px]">
           <span className="font-bold">이메일</span>
-          <input
-            type="text"
-            value="[email protected]"
-            disabled
-            className="w-[250px] h-[33px] pl-[10px] bg-[#9A9A9A] font-bold"
-          />
+          <div className="pl-[10px]">
+            <span className="text-black01">[email protected]</span>
+          </div>
         </div>
         <div className="flex flex-col gap-[10px]">
           <span className="font-bold">소속</span>
           <input
             type="text"
-            value="이룸 7팀"
-            className="w-[250px] h-[33px] pl-[10px] bg-[#9A9A9A] font-bold focus:outline-none"
+            value={companyInfo}
+            onChange={handleCompanyInfo}
+            className="w-[250px] h-[33px] pl-[10px] bg-transparent focus:outline-none border-b-[1px] border-b-gray01"
           />
         </div>
-        <div className="flex justify-center">
-          <Button text="등록하기" size="md" to="/" />
-        </div>
+      </div>
+      <div className="flex justify-center">
+        <Button text="등록하기" size="md" to="/" />
       </div>
     </div>
   );

src/styles/AuthLayout.css

@@ -0,0 +1,3 @@
+.blur {
+  backdrop-filter: blur(0.5px);
+}