diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 0813568b..4b4bb6ac 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -13,11 +13,15 @@
"playwright:test": "playwright test"
},
"dependencies": {
+ "@radix-ui/react-dialog": "^1.1.2",
+ "@radix-ui/react-label": "^2.1.0",
+ "@radix-ui/react-slot": "^1.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.454.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-router-dom": "^6.28.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7"
},
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 43a2b2ae..5e2247b5 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -1,34 +1,14 @@
-import { useState } from "react";
import "./App.css";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+import Home from "./pages/Home.tsx";
function App() {
- const [count, setCount] = useState(0);
-
return (
- <>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
+
+
+ } />
+
+
);
}
diff --git a/packages/frontend/src/components/ui/button.tsx b/packages/frontend/src/components/ui/button.tsx
new file mode 100644
index 00000000..10beb6d9
--- /dev/null
+++ b/packages/frontend/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils.ts";
+
+export default {};
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/packages/frontend/src/components/ui/dialog.tsx b/packages/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..4fb79fc7
--- /dev/null
+++ b/packages/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils.ts";
+
+export default {};
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/packages/frontend/src/components/ui/input.tsx b/packages/frontend/src/components/ui/input.tsx
new file mode 100644
index 00000000..68551b92
--- /dev/null
+++ b/packages/frontend/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/packages/frontend/src/components/ui/label.tsx b/packages/frontend/src/components/ui/label.tsx
new file mode 100644
index 00000000..683faa79
--- /dev/null
+++ b/packages/frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/packages/frontend/src/pages/Home.tsx b/packages/frontend/src/pages/Home.tsx
new file mode 100644
index 00000000..ed8ccbb6
--- /dev/null
+++ b/packages/frontend/src/pages/Home.tsx
@@ -0,0 +1,108 @@
+import { Dispatch, FormEvent, SetStateAction, useState } from "react";
+import { NavigateFunction, useNavigate } from "react-router-dom";
+
+import { Button } from "@/components/ui/button.tsx";
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Label } from "@/components/ui/label.tsx";
+
+type CreateSpaceButtonProps = {
+ navigate: NavigateFunction;
+ spaceName: string;
+ setSpaceName: Dispatch>;
+};
+
+function CreateSpaceButton({
+ navigate,
+ spaceName,
+ setSpaceName,
+}: CreateSpaceButtonProps) {
+ const [error, setError] = useState("");
+ const handleCreateSpace = (e: FormEvent) => {
+ e.preventDefault();
+ const targetSpaceName = spaceName.trim();
+
+ if (targetSpaceName === "") {
+ setError("이름을 입력해주세요.");
+ return;
+ }
+
+ navigate(`/space/${targetSpaceName}`);
+ };
+
+ return (
+
+ );
+}
+
+function JoinSpaceButton() {
+ return (
+
+ );
+}
+
+export default function Home() {
+ const navigate = useNavigate();
+ const [spaceName, setSpaceName] = useState("");
+
+ return (
+
+
+ Honey Flow
+
+ 끈적끈적 꿀처럼 이루어지는 협업 지식 관리 툴 🍯
+
+
+
+
+
+
+