diff --git a/web-app/.editorconfig b/web-app/.editorconfig
new file mode 100644
index 0000000..bb4b3b6
--- /dev/null
+++ b/web-app/.editorconfig
@@ -0,0 +1,16 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,jsx,ts,tsx}]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2
diff --git a/web-app/.gitignore b/web-app/.gitignore
new file mode 100644
index 0000000..a128bbe
--- /dev/null
+++ b/web-app/.gitignore
@@ -0,0 +1,48 @@
+# Dependencies
+node_modules
+
+# Build outputs
+build/
+dist/
+.output/
+
+# React Router
+.react-router/
+
+# Vite
+.vite/
+vite.config.ts.timestamp-*
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+
+# TypeScript
+*.tsbuildinfo
\ No newline at end of file
diff --git a/web-app/Dockerfile b/web-app/Dockerfile
new file mode 100644
index 0000000..207bf93
--- /dev/null
+++ b/web-app/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/web-app/app/app.css b/web-app/app/app.css
new file mode 100644
index 0000000..99345d8
--- /dev/null
+++ b/web-app/app/app.css
@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+@theme {
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/web-app/app/root.tsx b/web-app/app/root.tsx
new file mode 100644
index 0000000..9fc6636
--- /dev/null
+++ b/web-app/app/root.tsx
@@ -0,0 +1,75 @@
+import {
+ isRouteErrorResponse,
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+
+export default function App() {
+ return ;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = "Oops!";
+ let details = "An unexpected error occurred.";
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? "404" : "Error";
+ details =
+ error.status === 404
+ ? "The requested page could not be found."
+ : error.statusText || details;
+ } else if (import.meta.env.DEV && error && error instanceof Error) {
+ details = error.message;
+ stack = error.stack;
+ }
+
+ return (
+
+ {message}
+ {details}
+ {stack && (
+
+ {stack}
+
+ )}
+
+ );
+}
diff --git a/web-app/app/routes.ts b/web-app/app/routes.ts
new file mode 100644
index 0000000..eae305f
--- /dev/null
+++ b/web-app/app/routes.ts
@@ -0,0 +1,8 @@
+import {type RouteConfig} from "@react-router/dev/routes";
+import { index, route } from '@react-router/dev/routes';
+
+export default [
+ index("routes/home.tsx"),
+ route('users', './routes/users.tsx'),
+ route('*', './routes/catch-all.tsx'),
+] satisfies RouteConfig;
diff --git a/web-app/app/routes/catch-all.tsx b/web-app/app/routes/catch-all.tsx
new file mode 100644
index 0000000..906377c
--- /dev/null
+++ b/web-app/app/routes/catch-all.tsx
@@ -0,0 +1,3 @@
+export function clientLoader() {
+ throw new Response("Not Found", { status: 404 });
+}
diff --git a/web-app/app/routes/home.tsx b/web-app/app/routes/home.tsx
new file mode 100644
index 0000000..158a034
--- /dev/null
+++ b/web-app/app/routes/home.tsx
@@ -0,0 +1,8 @@
+
+export default function Home() {
+ return (
+
+ Home
+
+ )
+}
diff --git a/web-app/app/routes/users.tsx b/web-app/app/routes/users.tsx
new file mode 100644
index 0000000..e2602fb
--- /dev/null
+++ b/web-app/app/routes/users.tsx
@@ -0,0 +1,7 @@
+export default function Users() {
+ return (
+
+ 유저목록
+
+ )
+}
diff --git a/web-app/app/welcome/logo-dark.svg b/web-app/app/welcome/logo-dark.svg
new file mode 100644
index 0000000..dd82028
--- /dev/null
+++ b/web-app/app/welcome/logo-dark.svg
@@ -0,0 +1,23 @@
+
diff --git a/web-app/app/welcome/logo-light.svg b/web-app/app/welcome/logo-light.svg
new file mode 100644
index 0000000..7328492
--- /dev/null
+++ b/web-app/app/welcome/logo-light.svg
@@ -0,0 +1,23 @@
+
diff --git a/web-app/app/welcome/welcome.tsx b/web-app/app/welcome/welcome.tsx
new file mode 100644
index 0000000..8ac6e1d
--- /dev/null
+++ b/web-app/app/welcome/welcome.tsx
@@ -0,0 +1,89 @@
+import logoDark from "./logo-dark.svg";
+import logoLight from "./logo-light.svg";
+
+export function Welcome() {
+ return (
+
+
+
+
+
+
+
+
+
+
+