Merge pull request #58 from MBTips/feature/로그인-페이지-개발

feat: 로그인 화면 ui 개발 완료

Author: junjeeong

public/image/banner_login.png

@@ -6,6 +6,7 @@ import ChatRecommend from "@/pages/ChatRecommend";
 import ChatTips from "@/pages/ChatTips";
 import ChatTemporature from "@/pages/ChatTemporature";
 import Content from "@/pages/Content";
+import Login from "@/pages/Login";
 
 const App = () => {
   return (
@@ -18,6 +19,7 @@ const App = () => {
         <Route path="/chat-tips" element={<ChatTips />} />
         <Route path="/chat-temporature" element={<ChatTemporature />} />
         <Route path="/content/:id" element={<Content />} />
+        <Route path="/login" element={<Login />} />
       </Routes>
     </Router>
   );

src/App.tsx

@@ -0,0 +1,24 @@
+const TermsAndPrivacy = () => {
+  const togglePopup = (mode: "terms" | "privacy") => {
+    // 이용약관 및 개인정보처리방침 메시지 팝업
+  };
+
+  return (
+    <div className="flex items-center w-screen text-gray-900 text-sm lex">
+      <button
+        onClick={() => togglePopup("terms")}
+        className="flex justify-center border-r w-full hover:font-bold"
+      >
+        이용약관
+      </button>
+      <button
+        onClick={() => togglePopup("privacy")}
+        className="w-full hover:font-bold"
+      >
+        개인정보처리방침
+      </button>
+    </div>
+  );
+};
+
+export default TermsAndPrivacy;

src/components/TermsAndPrivacy.tsx

@@ -0,0 +1,16 @@
+import { MouseEvent } from "react";
+
+const KakaoLoginButton = () => {
+  const handleClick = (e: MouseEvent) => {};
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex justify-center items-center bg-[#F9E622] hover:opacity-80 rounded-lg w-[320px] h-[56px] font-bold text-black"
+    >
+      카카오로 시작하기
+    </button>
+  );
+};
+
+export default KakaoLoginButton;

src/components/button/KakaoLoginButton.tsx

@@ -8,7 +8,7 @@
 
   color-scheme: light dark;
   color: black;
-  background-color: #D0D5DD;
+  background-color: white;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/index.css

@@ -0,0 +1,32 @@
+import KakaoLoginButton from "@/components/button/KakaoLoginButton";
+import TermsAndPrivacy from "@/components/TermsAndPrivacy";
+
+const Login = () => {
+  return (
+    <div className="flex flex-col items-center">
+      <img
+        src="/image/banner_login.png"
+        alt="로그인 페이지 이미지"
+        className="w-full h-[391px]"
+      />
+      <h1 className="mt-8 font-bold text-3xl text-center whitespace-pre-wrap">
+        MBTI 성향 기반
+        <br />
+        AI 채팅 시뮬레이션으로
+        <br />
+        대화 연습과 꿀팁 얻어가세요
+      </h1>
+      <div className="mt-[39px] text-gray-900 text-xl">
+        대화 연습부터, 피드백까지 드려요
+      </div>
+      <div className="mt-[47px]">
+        <KakaoLoginButton />
+      </div>
+      <div className="mt-[72px]">
+        <TermsAndPrivacy />
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/pages/Login.tsx

@@ -23,6 +23,7 @@ const config = {
         foreground: "#000000"
       },
       fontSize: {
+        "3xl": "24px",
         "2xl": "20px",
         xl: "18px",
         lg: "16px",