Feature/#159 - 로그인 UI 구현 (#196)

packages/frontend/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lightweight-charts": "^4.2.1",

packages/frontend/src/apis/index.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 1000,
+});

packages/frontend/src/pages/login/Login.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import google from '@/assets/google.png';
+import kakao from '@/assets/kakao.png';
+import naver from '@/assets/naver.png';
+
+interface LoginButtonProps {
+  to: string;
+  src: string;
+  alt: string;
+}
+
+export const Login = () => {
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col items-center justify-center">
+      <main className="relative flex flex-col gap-36 rounded-lg bg-gradient-to-br from-[#ffe259] to-[#ffa751] p-16 py-24 shadow-sm">
+        <div className="absolute inset-0 rounded-md bg-white/40 backdrop-blur-sm" />
+        <section className="relative z-10">
+          <h2 className="display-bold24">스마트한 투자의 첫걸음,</h2>
+          <p className="display-medium20">주춤주춤과 함께해요!</p>
+        </section>
+        <section className="relative z-10 flex flex-col gap-4">
+          <LoginButton to="/" src={google} alt="구글 로그인" />
+          <LoginButton to="/" src={kakao} alt="카카오 로그인" />
+          <LoginButton to="/" src={naver} alt="네이버 로그인" />
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export const LoginButton = ({ to, src, alt }: LoginButtonProps) => {
+  return (
+    <Link to={to} className="w-72">
+      <img src={src} alt={alt} />
+    </Link>
+  );
+};

packages/frontend/src/pages/login/index.ts

@@ -0,0 +1 @@
+export * from './Login';

packages/frontend/src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 import { Layout } from '@/components/layouts';
 import { Home } from '@/pages/home';
+import { Login } from '@/pages/login';
 import { MyPage } from '@/pages/my-page';
 import { StockDetail } from '@/pages/stock-detail';
 import { Stocks } from '@/pages/stocks';
@@ -25,6 +26,10 @@ export const router = createBrowserRouter([
         path: '/my-page',
         element: <MyPage />,
       },
+      {
+        path: '/login',
+        element: <Login />,
+      },
     ],
   },
 ]);

yarn.lock

@@ -2752,6 +2752,15 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axios@^1.7.7:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-jest@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.7.0.tgz#f4369919225b684c56085998ac63dbd05be020d5"
@@ -4456,6 +4465,11 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -6711,6 +6725,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"