feature: login 페이지 마크업, yarn.lock 버그해결

package.json

@@ -79,6 +79,9 @@
       "eslint --cache --fix"
     ]
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"

src/domain/login/components/AuthLoginButton.tsx

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+
+interface AuthLoginButtonProps {
+  icon: ReactNode;
+  text: string;
+  onClick: () => void;
+  backgroundColor?: string;
+  color?: string;
+}
+export default function AuthLoginButton({ icon, text, onClick, backgroundColor, color }: AuthLoginButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      style={{ backgroundColor, color }}
+      className="w-[300px] rounded-lg flex items-center p-[12px] gap-[12px]"
+    >
+      <div className="absolute w-[20x] h-[20px]">{icon}</div>
+      <div className="text-[15px] font-bold flex-1">{text}</div>
+    </button>
+  );
+}

src/domain/login/index.tsx

@@ -1,3 +1,32 @@
+import { ReactComponent as KakaoIcon } from '@/assets/kakao.svg';
+import { ReactComponent as NaverIcon } from '@/assets/naver.svg';
+import AuthLoginButton from '@/domain/login/components/AuthLoginButton';
+
 export default function Login() {
-  return <h1>로그인 페이지</h1>;
+  return (
+    <main className="bg-white flex flex-col justify-center items-center">
+      <div className="text-[64px] mb-[120px] font-extrabold">LOGO</div>
+      <div className="text-grey-placeholder mb-[20px]">계정을 만들고 어쩌구 저쩌구를 즐겨보세요</div>
+      <div className="flex flex-col gap-[8px]">
+        <AuthLoginButton
+          icon={<KakaoIcon />}
+          backgroundColor="#FEE500"
+          color="#3C1E1E"
+          text="카카오 로그인"
+          onClick={() => {
+            console.log('카카오');
+          }}
+        />
+        <AuthLoginButton
+          icon={<NaverIcon />}
+          backgroundColor="#03C75A"
+          color="#ffffff"
+          text="네이버 로그인"
+          onClick={() => {
+            console.log('네이버');
+          }}
+        />
+      </div>
+    </main>
+  );
 }

vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+import react from '@vitejs/plugin-react';
+
 export default defineConfig({
   plugins: [svgr(), react(), tsconfigPaths()],
   build: {