diff --git a/package.json b/package.json index 479896d..ba787ee 100644 --- a/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dcae9d8..c8be69f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,12 @@ importers: '@tailwindcss/vite': specifier: ^4.1.7 version: 4.1.7(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)) + class-variance-authority: + specifier: ^0.7.1 + version: 0.7.1 + clsx: + specifier: ^2.1.1 + version: 2.1.1 jotai: specifier: ^2.12.4 version: 2.12.4(@types/react@19.1.5)(react@19.1.0) @@ -32,6 +38,12 @@ importers: react-dom: specifier: ^19.1.0 version: 19.1.0(react@19.1.0) + react-hook-form: + specifier: ^7.56.4 + version: 7.56.4(react@19.1.0) + tailwind-merge: + specifier: ^3.3.0 + version: 3.3.0 tailwindcss: specifier: ^4.1.7 version: 4.1.7 @@ -759,6 +771,13 @@ packages: resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==} engines: {node: '>=18'} + class-variance-authority@0.7.1: + resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==} + + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -1263,6 +1282,12 @@ packages: react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} + react-hook-form@7.56.4: + resolution: {integrity: sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 || ^19 + react@19.1.0: resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==} engines: {node: '>=0.10.0'} @@ -1311,6 +1336,9 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + tailwind-merge@3.3.0: + resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==} + tailwindcss@4.1.7: resolution: {integrity: sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==} @@ -1979,6 +2007,12 @@ snapshots: chownr@3.0.0: {} + class-variance-authority@0.7.1: + dependencies: + clsx: 2.1.1 + + clsx@2.1.1: {} + color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -2383,6 +2417,10 @@ snapshots: react-fast-compare@3.2.2: {} + react-hook-form@7.56.4(react@19.1.0): + dependencies: + react: 19.1.0 + react@19.1.0: {} resolve-from@4.0.0: {} @@ -2437,6 +2475,8 @@ snapshots: dependencies: has-flag: 4.0.0 + tailwind-merge@3.3.0: {} + tailwindcss@4.1.7: {} tapable@2.2.2: {} diff --git a/src/app/global.css b/src/app/global.css index 62b1eae..4590063 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -14,9 +14,9 @@ --color-grad1: #5ba5f8; --color-grad2: #7c81ff; - --text-3xl: 32px; + --text-4xl: 32px; + --text-3xl: 28px; --text-2xl: 24px; - --text-xl: 20px; --text-lg: 18px; @@ -24,6 +24,16 @@ --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); + } } diff --git a/src/app/main.tsx b/src/app/main.tsx index ee6a891..a272ae2 100644 --- a/src/app/main.tsx +++ b/src/app/main.tsx @@ -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( diff --git a/src/app/stackflow/Stack.tsx b/src/app/stackflow/Stack.tsx index f48e0b7..be5e13f 100644 --- a/src/app/stackflow/Stack.tsx +++ b/src/app/stackflow/Stack.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', }); diff --git a/src/assets/font/fredoka-variable.ttf b/src/assets/font/fredoka-variable.ttf new file mode 100644 index 0000000..97d4563 Binary files /dev/null and b/src/assets/font/fredoka-variable.ttf differ diff --git a/src/assets/image/bg-login.png b/src/assets/image/bg-login.png new file mode 100644 index 0000000..8042ad5 Binary files /dev/null and b/src/assets/image/bg-login.png differ diff --git a/src/assets/image/index.ts b/src/assets/image/index.ts new file mode 100644 index 0000000..5de9c45 --- /dev/null +++ b/src/assets/image/index.ts @@ -0,0 +1,3 @@ +import LoginBg from './bg-login.png'; + +export { LoginBg }; diff --git a/src/features/login/ui/LoginForm.tsx b/src/features/login/ui/LoginForm.tsx new file mode 100644 index 0000000..299503a --- /dev/null +++ b/src/features/login/ui/LoginForm.tsx @@ -0,0 +1,23 @@ +import { Button, Input } from '@/shared/ui'; + +export default function LoginForm() { + return ( +
+
+ + +
+
+ + +
+
+ ); +} diff --git a/src/features/login/ui/index.ts b/src/features/login/ui/index.ts new file mode 100644 index 0000000..5c49358 --- /dev/null +++ b/src/features/login/ui/index.ts @@ -0,0 +1 @@ +export { default as LoginForm } from './LoginForm'; diff --git a/src/screen/home/ui/HomeScreen.tsx b/src/screen/home/ui/HomeScreen.tsx deleted file mode 100644 index c7d566c..0000000 --- a/src/screen/home/ui/HomeScreen.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { AppScreen } from '@stackflow/plugin-basic-ui'; - -export default function HomeScreen() { - return home; -} diff --git a/src/screen/home/ui/index.ts b/src/screen/home/ui/index.ts deleted file mode 100644 index f5f2e85..0000000 --- a/src/screen/home/ui/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as HomeScreen } from "./HomeScreen"; diff --git a/src/screen/login/ui/LoginScreen.tsx b/src/screen/login/ui/LoginScreen.tsx new file mode 100644 index 0000000..feadb11 --- /dev/null +++ b/src/screen/login/ui/LoginScreen.tsx @@ -0,0 +1,17 @@ +import { AppScreen } from '@stackflow/plugin-basic-ui'; + +import { LoginBg } from '@/assets/image'; +import { BasicAppBar } from '@/shared/ui'; +import { LoginContainer } from '@/widgets/login/ui'; + +export default function LoginScreen() { + return ( + + + + ); +} diff --git a/src/screen/login/ui/index.ts b/src/screen/login/ui/index.ts new file mode 100644 index 0000000..2c7718c --- /dev/null +++ b/src/screen/login/ui/index.ts @@ -0,0 +1 @@ +export { default as LoginScreen } from './LoginScreen'; diff --git a/src/shared/ui/AppBar.tsx b/src/shared/ui/AppBar.tsx new file mode 100644 index 0000000..502665e --- /dev/null +++ b/src/shared/ui/AppBar.tsx @@ -0,0 +1,11 @@ +import { LoginBg } from '@/assets/image'; + +const baseStyle = { height: '58px', border: false }; + +export const BasicAppBar = { + ...baseStyle, + backgroundImage: `url(${LoginBg})`, + renderLeft: () => ( + took! + ), +}; diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/Button.tsx new file mode 100644 index 0000000..515534b --- /dev/null +++ b/src/shared/ui/Button.tsx @@ -0,0 +1,48 @@ +import type { ButtonHTMLAttributes } from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/shared/utils'; + +interface ButtonsProps + extends ButtonHTMLAttributes, + VariantProps { + children?: React.ReactNode; +} + +const ButtonVariants = cva( + 'rounded-md cursor-pointer font-medium focus:outline-none hover:brightness-90', + { + variants: { + intent: { + primary: 'bg-md text-white', + textmain: 'text-m', + }, + size: { + fit: 'w-full h-fit text-lg', + sm: '', + md: '', + lg: 'w-full h-14 text-xl', + }, + }, + defaultVariants: { + intent: 'primary', + size: 'lg', + }, + }, +); + +export default function Button({ + intent, + size, + children, + className, + ...props +}: ButtonsProps) { + return ( + + ); +} diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx new file mode 100644 index 0000000..7a82af5 --- /dev/null +++ b/src/shared/ui/Input.tsx @@ -0,0 +1,39 @@ +import type { InputHTMLAttributes } from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/shared/utils'; + +type InputProps = InputHTMLAttributes & + VariantProps; + +const InputVariants = cva('w-full focus:outline-none', { + variants: { + intent: { + login: 'rounded-md border-[1px] border-s', + primary: '', + }, + size: { + fit: 'w-full h-fit text-lg', + sm: '', + md: '', + lg: 'w-full h-14 px-6 py-4', + }, + }, + defaultVariants: { + intent: 'primary', + size: 'lg', + }, +}); + +export default function Input({ + intent, + className, + size, + ...props +}: InputProps) { + return ( + + ); +} diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts new file mode 100644 index 0000000..8feb210 --- /dev/null +++ b/src/shared/ui/index.ts @@ -0,0 +1,3 @@ +export * from './AppBar'; +export { default as Button } from './Button'; +export { default as Input } from './Input'; diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts new file mode 100644 index 0000000..57f9f48 --- /dev/null +++ b/src/shared/utils/index.ts @@ -0,0 +1 @@ +export * from './string'; diff --git a/src/shared/utils/string.ts b/src/shared/utils/string.ts new file mode 100644 index 0000000..9ad0df4 --- /dev/null +++ b/src/shared/utils/string.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/widgets/login/ui/LoginContainer.tsx b/src/widgets/login/ui/LoginContainer.tsx new file mode 100644 index 0000000..c3d7fd1 --- /dev/null +++ b/src/widgets/login/ui/LoginContainer.tsx @@ -0,0 +1,19 @@ +import { LoginForm } from '@/features/login/ui'; + +export default function LoginContainer() { + return ( +
+
+
+
+ 로그인 후 + + 간편하게 투표하세요! + +
+ +
+
+
+ ); +} diff --git a/src/widgets/login/ui/index.ts b/src/widgets/login/ui/index.ts new file mode 100644 index 0000000..6647b78 --- /dev/null +++ b/src/widgets/login/ui/index.ts @@ -0,0 +1 @@ +export { default as LoginContainer } from './LoginContainer'; diff --git a/tsconfig.app.json b/tsconfig.app.json index c9ccbd4..4cb2e5d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -6,6 +6,10 @@ "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, /* Bundler mode */ "moduleResolution": "bundler", diff --git a/vite.config.ts b/vite.config.ts index a6ac34c..839a56b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,4 +2,9 @@ import { defineConfig } from 'vite'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [tailwindcss()], + resolve: { + alias: { + '@': '/src', + }, + }, });