diff --git a/.env b/.env new file mode 100644 index 0000000..e69de29 diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..460e575 --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +VITE_API_URL=http://localhost:8080 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..a38cb0e --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_API_URL=https://api.scheduler.bkdhome.p-e.kr \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e3da9f1..c52217d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,7 +54,8 @@ "sonner": "^2.0.7", "tailwind-merge": "^3.3.1", "vaul": "^1.1.2", - "zod": "^4.1.12" + "zod": "^4.1.12", + "zustand": "^5.0.8" }, "devDependencies": { "@eslint/js": "^9.36.0", @@ -6491,6 +6492,35 @@ "funding": { "url": "https://github.com/sponsors/colinhacks" } + }, + "node_modules/zustand": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz", + "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index c652eea..bfecb36 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "sonner": "^2.0.7", "tailwind-merge": "^3.3.1", "vaul": "^1.1.2", - "zod": "^4.1.12" + "zod": "^4.1.12", + "zustand": "^5.0.8" }, "devDependencies": { "@eslint/js": "^9.36.0", diff --git a/src/App.tsx b/src/App.tsx index 4636987..73b0313 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,32 +2,13 @@ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' +import SignUpPage from './ui/page/signup/SignUpPage' function App() { - const [count, setCount] = useState(0) - + return ( -
-
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+
+
) } diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 6f304b5..c507030 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -66,7 +66,7 @@ function Calendar({ defaultClassNames.month_caption ), dropdowns: cn( - "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", + "w-full flex flex-row-reverse items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns ), dropdown_root: cn( diff --git a/src/index.css b/src/index.css index f1d8c73..0e53474 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,124 @@ @import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} + +html, body, #root { + height: 100%; +} diff --git a/src/ui/component/Header.tsx b/src/ui/component/Header.tsx new file mode 100644 index 0000000..45522ae --- /dev/null +++ b/src/ui/component/Header.tsx @@ -0,0 +1,5 @@ +import { + Drawer, + DrawerTrigger +} from "@/components/ui/drawer"; +import { useState } from 'react'; \ No newline at end of file diff --git a/src/ui/page/signup/SignUpPage.tsx b/src/ui/page/signup/SignUpPage.tsx new file mode 100644 index 0000000..816b58d --- /dev/null +++ b/src/ui/page/signup/SignUpPage.tsx @@ -0,0 +1,58 @@ +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { useState } from 'react'; +import { format } from 'date-fns'; +import { Label } from '@/components/ui/label'; +import { Calendar } from '@/components/ui/calendar'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; + +export default function SignUpPage() { + const [open, setOpen] = useState(false); + const [date, setDate] = useState(new Date()); + + return ( +
+
+ + + + + + + + format(month, "yyyy년 MM월") + }} + onSelect={(date) => { + if (date) { + setDate(date); + setOpen(false); + } + }} + selected={date} + defaultMonth={date} + captionLayout="dropdown" + /> + + + +
+
+ ); +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 6c86777..df2f41f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' +import path from 'path' // https://vite.dev/config/ export default defineConfig({ @@ -8,4 +9,9 @@ export default defineConfig({ react(), tailwindcss() ], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src") + } + } })