feat: Add Todo page mockup and layout Wrapper components

Key Changes: - Created Wrapper components (Fullscreen, Column, Container, ListedComponent) to standardize the application's overall layout. - Refactored the structure of major components like App.tsx and PageContainer.tsx to use the new Wrapper components. - Added a simple TodoBoard mockup page at the /todos route. - Adjusted flexbox classes for the TodoBoard component to allow its width to resize flexibly based on screen size.
2025-09-25 17:40:27 +09:00
parent f7c1c26f5e
commit 5313dae892
12 changed files with 349 additions and 29 deletions
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@base-ui-components/react": "^1.0.0-beta.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-slot": "^1.2.3",
    "@tabler/icons-react": "^3.35.0",
    "@tailwindcss/vite": "^4.1.13",
@@ -35,6 +36,7 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
+    "tailwind-scrollbar": "^4.0.2",
    "tw-animate-css": "^1.3.8",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,19 @@
-import Topbar from './components/Topbar';
-import PageContainer from './components/PageContainer';
-import Sidebar from './components/Sidebar';
-import { ThemeButton } from './components/ThemeButton';
+import Topbar from '@/components/Topbar';
+import PageContainer from '@/components/PageContainer';
+import Sidebar from '@/components/Sidebar';
+import { FullscreenWrapper, ColumnWrapper } from '@/components/ui/Wrappers';
+import { ThemeButton } from '@/components/ThemeButton';

 const App = () => {
  return (
-    <div className="flex h-screen">
+    <FullscreenWrapper>
      <Sidebar />
-      <div className="flex flex-col flex-1">
+      <ColumnWrapper>
        <Topbar />
        <PageContainer />
-      </div>
-      <div className="absolute bottom-4 right-4">
+      </ColumnWrapper>
      <ThemeButton />
-      </div>
-    </div>
+    </FullscreenWrapper>
  );
 };

--- a/src/components/PageContainer.tsx
+++ b/src/components/PageContainer.tsx
@@ -1,5 +1,7 @@
 import { Routes, Route } from 'react-router-dom';

+import { ContainerWrapper } from '@/components/ui/Wrappers';
+
 import Home from './pages/Home';
 import Dashboard from './pages/Dashboard';
 import Todos from './pages/Todos';
@@ -7,12 +9,14 @@ import NotFound from './pages/default/NotFound';

 const PageContainer = () => {
  return (
+    <ContainerWrapper>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/todos" element={<Todos />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
+    </ContainerWrapper>
  );
 };

--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -19,7 +19,7 @@ const Sidebar = () => {
  const location = useLocation();
  return (
    <nav className="flex flex-col min-w-[240px] max-w-[480px] bg-sidebar border">
-      <div className="flex flex-col m-2 gap-2">
+      <div className="flex flex-col flex-1 m-2 gap-2">
        <p className="text-muted-foreground text-sm font-bold pl-2">Menus</p>
        {items.map((item) => (
          <Button
--- a/src/components/ThemeButton.tsx
+++ b/src/components/ThemeButton.tsx
@@ -13,10 +13,12 @@ export const ThemeButton = () => {
  }, [theme]);

  return (
+    <div className="absolute bottom-4 right-4">
      <Button onClick={() => toggleTheme(theme)} variant="outline" size="icon">
        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0" />
        <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100" />
        <span className="sr-only">Toggle theme</span>
      </Button>
+    </div>
  );
 };
--- a/src/components/TodoBoard.tsx
+++ b/src/components/TodoBoard.tsx
@@ -0,0 +1,57 @@
+import { Checkbox } from '@/components/ui/checkbox';
+
+const TodoBoard = (data: { name: string }) => {
+  return (
+    <div className="flex flex-col gap-2 flex-1 max-w-2xl min-w-96 min-h-60 bg-black/5 dark:bg-sidebar rounded-2xl p-4 shadow-xs">
+      <h1 className="text-lg font-light">{data.name}</h1>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 1" />
+        <p className="tracking-wide font-light">안녕하세요!</p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 2" />
+        <p className="tracking-wide font-light">당신의 첫 할 일을</p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 3" />
+        <p className="tracking-wide font-light">여기에 적어보세요.</p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 4" />
+        <p className="tracking-wide font-light">
+          매일 꾸준히 노력하는 습관을 가져볼까요?
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 3" />
+        <p className="tracking-wide font-light">
+          할 일은 다음과 같이 적을 수 있어요.
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 3" />
+        <div className="flex space-x-1">
+          <p className="tracking-wide font-bold underline">매일</p>
+          <p className="tracking-wide font-light">
+            아침 간단히 외출 및 가벼운 산책하기
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 3" />
+        <div className="flex space-x-1">
+          <p className="tracking-wide font-bold underline">오늘</p>
+          <p className="tracking-wide font-light">고양이 사료 주문하기</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="urmom 3" />
+        <p className="tracking-wide font-light">
+          이 이외에도, 여러가지 할 일을 적을 수 있답니다!
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TodoBoard;
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -6,11 +6,12 @@ import { items } from './Sidebar';
 const Topbar = () => {
  const location = useLocation();
  return (
-    <div className="flex bg-sidebar p-2 gap-2 border-t border-r border-b border-l-0">
+    <div className="flex bg-sidebar p-2 gap-0.5 border-t border-r border-b border-l-0 items-center">
      <Button variant="ghost" size="sm" className="font-semibold">
        {items.find((item) => item.href === location.pathname)?.name}
        {/* TODO: Add Sidebar Items(Pages, etc...) to Zustand Store */}
      </Button>
+      <p className="text-muted-foreground text-sm font-light">{'/'}</p>
    </div>
  );
 };
--- a/src/components/pages/Todos.tsx
+++ b/src/components/pages/Todos.tsx
@@ -1,8 +1,13 @@
+import TodoBoard from '../TodoBoard';
+import { ListedComponentWrapper } from '@/components/ui/Wrappers';
+
 const Todos = () => {
  return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold">Todos</h1>
-    </div>
+    <ListedComponentWrapper>
+      <TodoBoard name="내 할 일 목록 1" />
+      <TodoBoard name="내 할 일 목록 2" />
+      <TodoBoard name="내 할 일 목록 3" />
+    </ListedComponentWrapper>
  );
 };

--- a/src/components/ui/Wrappers.tsx
+++ b/src/components/ui/Wrappers.tsx
@@ -0,0 +1,27 @@
+interface WrapperProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const ContainerWrapper = ({ children }: WrapperProps) => {
+  return (
+    <div className="flex flex-1 overflow-x-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-primary/20 scrollbar-track-transparent">
+      {children}
+    </div>
+  );
+};
+
+export const ListedComponentWrapper = ({ children }: WrapperProps) => {
+  return (
+    <div className="flex flex-1 justify-center gap-4 items-baseline p-4">
+      {children}
+    </div>
+  );
+};
+
+export const FullscreenWrapper = ({ children }: WrapperProps) => {
+  return <div className="flex flex-1 h-screen">{children}</div>;
+};
+
+export const ColumnWrapper = ({ children }: WrapperProps) => {
+  return <div className="flex flex-col flex-1 overflow-hidden">{children}</div>;
+};
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,6 +1,10 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css');
@import 'tailwindcss';
@import 'tw-animate-css';
+@plugin 'tailwind-scrollbar' {
+  nocompatible: true;
+  preferredstrategy: 'pseudoelements';
+}

@custom-variant dark (&:is(.dark *));

--- a/yarn.lock
+++ b/yarn.lock
@@ -552,6 +552,39 @@ __metadata:
  languageName: node
  linkType: hard

+"@radix-ui/primitive@npm:1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/primitive@npm:1.1.3"
+  checksum: 10c0/88860165ee7066fa2c179f32ffcd3ee6d527d9dcdc0e8be85e9cb0e2c84834be8e3c1a976c74ba44b193f709544e12f54455d892b28e32f0708d89deda6b9f1d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-checkbox@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@radix-ui/react-checkbox@npm:1.3.3"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.3"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/5eeb78e37a6c9611a638a80b309c931dd6f1f8968357ab2abb453505392fa1397491441447ca2d5f4381faaac7fab2dc84c780e8ce27d931bd203fa014088b74
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.1.2":
  version: 1.1.2
  resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
@@ -565,7 +598,59 @@ __metadata:
  languageName: node
  linkType: hard

-"@radix-ui/react-slot@npm:^1.2.3":
+"@radix-ui/react-context@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-context@npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/cece731f8cc25d494c6589cc681e5c01a93867d895c75889973afa1a255f163c286e390baa7bc028858eaabe9f6b57270d0ca6377356f652c5557c1c7a41ccce
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-presence@npm:1.1.5":
+  version: 1.1.5
+  resolution: "@radix-ui/react-presence@npm:1.1.5"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/d0e61d314250eeaef5369983cb790701d667f51734bafd98cf759072755562018052c594e6cdc5389789f4543cb0a4d98f03ff4e8f37338d6b5bf51a1700c1d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@radix-ui/react-primitive@npm:2.1.3"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.2.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/fdff9b84913bb4172ef6d3af7442fca5f9bba5f2709cba08950071f819d7057aec3a4a2d9ef44cf9cbfb8014d02573c6884a04cff175895823aaef809ebdb034
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.2.3":
  version: 1.2.3
  resolution: "@radix-ui/react-slot@npm:1.2.3"
  dependencies:
@@ -580,6 +665,78 @@ __metadata:
  languageName: node
  linkType: hard

+"@radix-ui/react-use-controllable-state@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
+  dependencies:
+    "@radix-ui/react-use-effect-event": "npm:0.0.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/f55c4b06e895293aed4b44c9ef26fb24432539f5346fcd6519c7745800535b571058685314e83486a45bf61dc83887e24826490d3068acc317fb0a9010516e63
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-effect-event@npm:0.0.2":
+  version: 0.0.2
+  resolution: "@radix-ui/react-use-effect-event@npm:0.0.2"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/e84ff72a3e76c5ae9c94941028bb4b6472f17d4104481b9eab773deab3da640ecea035e54da9d6f4df8d84c18ef6913baf92b7511bee06930dc58bd0c0add417
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/9f98fdaba008dfc58050de60a77670b885792df473cf82c1cef8daee919a5dd5a77d270209f5f0b0abfaac78cb1627396e3ff56c81b735be550409426fe8b040
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-previous@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-previous@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/52f1089d941491cd59b7f52a5679a14e9381711419a0557ce0f3bc9a4c117078224efec54dcced41a3653a13a386a7b6ec75435d61a273e8b9f5d00235f2b182
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-size@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/851d09a816f44282e0e9e2147b1b571410174cc048703a50c4fa54d672de994fd1dfff1da9d480ecfd12c77ae8f48d74f01adaf668f074156b8cd0043c6c21d8
+  languageName: node
+  linkType: hard
+
 "@rolldown/pluginutils@npm:1.0.0-beta.35":
  version: 1.0.0-beta.35
  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.35"
@@ -1089,6 +1246,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/prismjs@npm:^1.26.0":
+  version: 1.26.5
+  resolution: "@types/prismjs@npm:1.26.5"
+  checksum: 10c0/5619cb449e0d8df098c8759d6f47bf8fdd510abf5dbdfa999e55c6a2545efbd1e209cc85a33d8d9f4ff2898089a1a6d9a70737c9baffaae635c46852c40d384a
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^19.1.7":
  version: 19.1.9
  resolution: "@types/react-dom@npm:19.1.9"
@@ -1455,7 +1619,7 @@ __metadata:
  languageName: node
  linkType: hard

-"clsx@npm:^2.1.1":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
  version: 2.1.1
  resolution: "clsx@npm:2.1.1"
  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -1944,6 +2108,7 @@ __metadata:
  dependencies:
    "@base-ui-components/react": "npm:^1.0.0-beta.3"
    "@eslint/js": "npm:^9.33.0"
+    "@radix-ui/react-checkbox": "npm:^1.3.3"
    "@radix-ui/react-slot": "npm:^1.2.3"
    "@tabler/icons-react": "npm:^3.35.0"
    "@tailwindcss/vite": "npm:^4.1.13"
@@ -1963,6 +2128,7 @@ __metadata:
    react-dom: "npm:^19.1.1"
    react-router-dom: "npm:^7.9.1"
    tailwind-merge: "npm:^3.3.1"
+    tailwind-scrollbar: "npm:^4.0.2"
    tailwindcss: "npm:^4.1.13"
    tw-animate-css: "npm:^1.3.8"
    typescript: "npm:~5.8.3"
@@ -2729,6 +2895,18 @@ __metadata:
  languageName: node
  linkType: hard

+"prism-react-renderer@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "prism-react-renderer@npm:2.4.1"
+  dependencies:
+    "@types/prismjs": "npm:^1.26.0"
+    clsx: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: 10c0/ebbe8feb975224344bbdd046b3a937d121592dbe4b8f22ba0be31f5af37b9a8219f441138ef6cab1c5b96f2aa6b529015200959f7e5e85b60ca69c81d35edcd4
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^5.0.0":
  version: 5.0.0
  resolution: "proc-log@npm:5.0.0"
@@ -3088,6 +3266,17 @@ __metadata:
  languageName: node
  linkType: hard

+"tailwind-scrollbar@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "tailwind-scrollbar@npm:4.0.2"
+  dependencies:
+    prism-react-renderer: "npm:^2.4.1"
+  peerDependencies:
+    tailwindcss: 4.x
+  checksum: 10c0/942dd9ec381e09f65220fb9370f6ec1de137e88b9c7a043ee1eafd0397da1d0c4a9780e833ed159892106da820611867d358c73e05509746329cd0414102c587
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:4.1.13, tailwindcss@npm:^4.1.13":
  version: 4.1.13
  resolution: "tailwindcss@npm:4.1.13"