ByteCrew-Uscode · yummjin · Jun 28, 2025 · Jun 28, 2025 · Jun 28, 2025 · Jun 28, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>농기구온</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@tanstack/react-query": "^5.81.5",
     "axios": "^1.10.0",
     "clsx": "^2.1.1",
+    "daisyui": "^5.0.43",
     "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/global.css b/src/app/global.css
@@ -1,16 +1,21 @@
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");
-@import "tailwindcss";
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css');
+@import 'tailwindcss';
+@plugin "daisyui" {
+  themes: light --default;
+}
 
 @theme {
-  --color-m: #377ff8;
+  --color-m: #6a8e3f;
+  --color-m-transparent: rgba(106, 142, 63, 0.04);
+  --color-m-hover: #6a8e3f33;
   --color-md: #324160;
   --color-ml: #6da2fe;
   --color-mxl: #ecf5fe;
 
-  --color-s: #767676;
+  --color-s: #191919;
   --color-sd: #333;
-  --color-sl: #dadada;
-  --color-sxl: #f5f5f5;
+  --color-sl: #d9d9d9;
+  --color-sxl: #dadada;
 
   --color-res: #8b9aad;
 
@@ -29,64 +34,82 @@
   --spacing-normal: 20px;
   --spacing-normal-half: 10px;
   --spacing-mt: 24px;
-
+  --spacing-dock-height: 100px;
   --radius-lg: 20px;
   --radius-md: 12px;
 }
 
 @font-face {
-  font-family: "Fredoka";
-  src: url("../assets/font/fredoka-variable.ttf") format("truetype");
+  font-family: 'Fredoka';
+  src: url('../assets/font/fredoka-variable.ttf') format('truetype');
   font-weight: 600, 700;
 }
 
 :root {
   font-family:
-    "Pretendard Variable",
-    "Pretendard",
+    'Pretendard Variable',
+    'Pretendard',
     -apple-system,
     BlinkMacSystemFont,
     system-ui,
     Roboto,
-    "Helvetica Neue",
-    "Segoe UI",
-    "Apple SD Gothic Neo",
-    "Noto Sans KR",
-    "Malgun Gothic",
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
+    'Helvetica Neue',
+    'Segoe UI',
+    'Apple SD Gothic Neo',
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
     sans-serif;
   font-size: 16px;
   color: #111;
   letter-spacing: -0.48px;
 }
 
 /* Chrome, Safari, Edge, Opera */
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-input[type="number"] {
+input[type='number'] {
   -moz-appearance: textfield;
 }
 
 @layer utilities {
   .container-mobile {
-    max-width: 402px;
+    max-width: 390px;
     margin: 0 auto;
+    overflow-x: hidden;
+  }
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 
   .scrollbar-hide::-webkit-scrollbar {
-    display: none;
+    display: none; /* Chrome, Safari, Opera */
+    width: 0;
+    height: 0;
   }
 
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  .scrollbar-hide::-webkit-scrollbar-thumb {
+    background: transparent; /* 혹시라도 Thumb이 남아있으면 제거 */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar-track {
+    background: transparent; /* 트랙도 제거 */
+  }
+
+  .shadow-dock {
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .shadow-homeBox {
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
   }
 
   .overlay {

diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -1,13 +1,13 @@
-import { createRoot } from "react-dom/client";
-import "./global.css";
-import "@stackflow/plugin-basic-ui/index.css";
-import App from "./App";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRoot } from 'react-dom/client';
+import '@stackflow/plugin-basic-ui/index.css';
+import './global.css';
+import App from './App';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
     <App />
-  </QueryClientProvider>
+  </QueryClientProvider>,
 );
diff --git a/src/app/stackflow/Stack.tsx b/src/app/stackflow/Stack.tsx
@@ -1,14 +1,20 @@
-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 { JoinScreen } from '@/screen/join/ui';
+import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
+import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
+import { stackflow } from '@stackflow/react';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
-  activities: {},
+  activities: {
+    JoinScreen,
+    HomeScreen,
+  },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({
-      theme: "cupertino",
+      theme: 'cupertino',
     }),
   ],
+  initialActivity: () => 'HomeScreen',
 });
diff --git a/src/assets/icons/icon-camera-solid.svg b/src/assets/icons/icon-camera-solid.svg
diff --git a/src/assets/icons/icon-camera.svg b/src/assets/icons/icon-camera.svg
diff --git a/src/assets/icons/icon-edit.svg b/src/assets/icons/icon-edit.svg
diff --git a/src/assets/icons/icon-home-selected.svg b/src/assets/icons/icon-home-selected.svg
diff --git a/src/assets/icons/icon-home.svg b/src/assets/icons/icon-home.svg
diff --git a/src/assets/icons/icon-phone.svg b/src/assets/icons/icon-phone.svg
diff --git a/src/assets/icons/icon-reservation-selected.svg b/src/assets/icons/icon-reservation-selected.svg
diff --git a/src/assets/icons/icon-reservation.svg b/src/assets/icons/icon-reservation.svg
diff --git a/src/assets/icons/icon-tractor-black.svg b/src/assets/icons/icon-tractor-black.svg
diff --git a/src/assets/icons/icon-tractor.png b/src/assets/icons/icon-tractor.png
diff --git a/src/assets/icons/icon-user-selected.svg b/src/assets/icons/icon-user-selected.svg
diff --git a/src/assets/icons/icon-user.svg b/src/assets/icons/icon-user.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -0,0 +1,27 @@
+import Logo from './icon-tractor.png';
+import CameraIcon from './icon-camera.svg';
+import TractorBlackIcon from './icon-tractor-black.svg';
+import PhoneIcon from './icon-phone.svg';
+import CameraSolidIcon from './icon-camera-solid.svg';
+import EditIcon from './icon-edit.svg';
+import HomeIcon from './icon-home.svg';
+import UserIcon from './icon-user.svg';
+import ReservationIcon from './icon-reservation.svg';
+import HomeSelectedIcon from './icon-home-selected.svg';
+import UserSelectedIcon from './icon-user-selected.svg';
+import ReservationSelectedIcon from './icon-reservation-selected.svg';
+
+export {
+  Logo,
+  CameraIcon,
+  TractorBlackIcon,
+  PhoneIcon,
+  CameraSolidIcon,
+  EditIcon,
+  HomeIcon,
+  UserIcon,
+  ReservationIcon,
+  HomeSelectedIcon,
+  UserSelectedIcon,
+  ReservationSelectedIcon,
+};
diff --git a/src/assets/images/background.png b/src/assets/images/background.png
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -0,0 +1,3 @@
+import BackgroundImage from "./background.png";
+
+export { BackgroundImage };
diff --git a/src/screen/home/ui/HomeScreen.tsx b/src/screen/home/ui/HomeScreen.tsx
@@ -0,0 +1,19 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { BackgroundImage } from '@/assets/images';
+import { BasicAppBar, Dock } from '@/shared/ui';
+import { HomeContainer } from '@/widgets/home/ui';
+
+export default function HomeScreen() {
+  return (
+    <>
+      <AppScreen
+        preventSwipeBack
+        backgroundImage={`url(${BackgroundImage})`}
+        appBar={BasicAppBar}
+      >
+        <HomeContainer />
+      </AppScreen>
+      <Dock />
+    </>
+  );
+}
diff --git a/src/screen/home/ui/index.ts b/src/screen/home/ui/index.ts
@@ -0,0 +1 @@
+export { default as HomeScreen } from './HomeScreen';
diff --git a/src/screen/join/ui/JoinScreen.tsx b/src/screen/join/ui/JoinScreen.tsx
@@ -0,0 +1,11 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { BackgroundImage } from '@/assets/images';
+import { JoinContainer } from '@/widgets/join/ui';
+
+export default function JoinScreen() {
+  return (
+    <AppScreen preventSwipeBack backgroundImage={`url(${BackgroundImage})`}>
+      <JoinContainer />
+    </AppScreen>
+  );
+}
diff --git a/src/screen/join/ui/index.ts b/src/screen/join/ui/index.ts
@@ -0,0 +1 @@
+export { default as JoinScreen } from './JoinScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import BackgroundImage from "./background.png";

		export { BackgroundImage };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as HomeScreen } from './HomeScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as JoinScreen } from './JoinScreen';