Merge pull request #6 from KGU-Vote-System/feature/1

[FEAT] : 로그인 화면 구현

Author: yummjin

package.json

@@ -15,9 +15,13 @@
     "@stackflow/plugin-renderer-basic": "^1.1.13",
     "@stackflow/react": "^1.5.2",
     "@tailwindcss/vite": "^4.1.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "jotai": "^2.12.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -14,16 +14,26 @@
   --color-grad1: #5ba5f8;
   --color-grad2: #7c81ff;
 
-  --text-3xl: 32px;
+  --text-4xl: 32px;
+  --text-3xl: 28px;
   --text-2xl: 24px;
-
   --text-xl: 20px;
 
   --text-lg: 18px;
   --text-md: 16px;
   --text-sm: 14px;
 
   --spacing-normal: 20px;
+  --spacing-normal-half: 10px;
+
+  --radius-lg: 20px;
+  --radius-md: 12px;
+}
+
+@font-face {
+  font-family: 'Fredoka';
+  src: url('../assets/font/fredoka-variable.ttf') format('truetype');
+  font-weight: 600;
 }
 
 :root {
@@ -47,6 +57,18 @@
   color: #111;
 }
 
+/* Chrome, Safari, Edge, Opera */
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 @layer utilities {
   .container-mobile {
     max-width: 402px;
@@ -61,4 +83,12 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+
+  .logo {
+    font-family: Fredoka;
+  }
+
+  .shadow-login {
+    box-shadow: 0px 4px 20px 0px rgba(55, 127, 248, 0.04);
+  }
 }

src/app/global.css

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './global.css';
+import '@stackflow/plugin-basic-ui/index.css';
 import App from './App';
 
 createRoot(document.getElementById('root')!).render(

src/app/main.tsx

@@ -1,16 +1,16 @@
-import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
-import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
-import { stackflow } from "@stackflow/react";
-import { HomeScreen } from "../../screen/home/ui";
+import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
+import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
+import { stackflow } from '@stackflow/react';
+import { LoginScreen } from '@/screen/login/ui';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
-  activities: { HomeScreen },
+  activities: { LoginScreen },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({
-      theme: "cupertino",
+      theme: 'cupertino',
     }),
   ],
-  initialActivity: () => "HomeScreen",
+  initialActivity: () => 'LoginScreen',
 });

src/app/stackflow/Stack.tsx

@@ -0,0 +1,3 @@
+import LoginBg from './bg-login.png';
+
+export { LoginBg };

src/assets/font/fredoka-variable.ttf

@@ -0,0 +1,23 @@
+import { Button, Input } from '@/shared/ui';
+
+export default function LoginForm() {
+  return (
+    <form className="flex w-full flex-col gap-y-15">
+      <div className="flex w-full flex-col gap-[10px]">
+        <Input
+          intent="login"
+          placeholder="학번 8자리"
+          className="no-spinner"
+          type="number"
+        />
+        <Input placeholder="패스워드" intent="login" type="password" />
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <Button>학생으로 로그인</Button>
+        <Button intent="textmain" size="fit">
+          관리자로 로그인
+        </Button>
+      </div>
+    </form>
+  );
+}

src/assets/image/bg-login.png

@@ -0,0 +1 @@
+export { default as LoginForm } from './LoginForm';