[FEAT] : 모든 기능 구현 완료

package.json

@@ -21,9 +21,11 @@
     "clsx": "^2.1.1",
     "daisyui": "^5.0.43",
     "framer-motion": "^12.19.2",
+    "jotai": "^2.12.5",
     "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.59.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },

src/app/global.css

@@ -13,7 +13,7 @@
   --color-mxl: #ecf5fe;
 
   --color-s: #191919;
-  --color-sd: #333;
+  --color-sd: #919090;
   --color-sl: #d9d9d9;
   --color-sxl: #dadada;
 

src/app/stackflow/Stack.tsx

@@ -5,6 +5,8 @@ import { JoinScreen } from '@/screen/join/ui';
 import { PhotoLoadingScreen } from '@/screen/photo-loading/ui';
 import { PhotoResultScreen } from '@/screen/photo-result/ui';
 import { PhotoUploadScreen } from '@/screen/photo-upload/ui';
+import { ReservationScreen } from '@/screen/reservation/ui';
+import { UserScreen } from '@/screen/user/ui';
 import { fetchSessionData } from '@/shared/utils';
 import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
 import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
@@ -20,11 +22,14 @@ export const { Stack, useFlow } = stackflow({
     CompleteScreen,
     PhotoLoadingScreen,
     PhotoResultScreen,
+    ReservationScreen,
+    UserScreen,
   },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({
       theme: 'cupertino',
+      backgroundColor: '#F9F9F9',
     }),
   ],
   initialActivity: () => {

src/assets/icons/index.ts

@@ -15,8 +15,15 @@ import HelpIcon from './icon-help.svg';
 import SearchIcon from './icon-search.svg';
 import CheckIcon from './icon-checked.svg';
 import UnCheckedIcon from './icon-unchecked.svg';
+import LogoutIcon from './icon-logout.svg';
+import CustomerIcon from './icon-customer.svg';
+import CloseIcon from './icon-close.svg';
+import SearchColoredIcon from './icon-search-colored.svg';
 
 export {
+  CloseIcon,
+  SearchColoredIcon,
+  CustomerIcon,
   Logo,
   CameraIcon,
   TractorBlackIcon,
@@ -34,4 +41,5 @@ export {
   SearchIcon,
   CheckIcon,
   UnCheckedIcon,
+  LogoutIcon,
 };

src/screen/form/ui/FormScreen.tsx

@@ -1,17 +1,35 @@
 import { NormalAppBar } from '@/shared/ui';
 import { FormContainer } from '@/widgets/form/ui';
+import ToolPickModal from '@/widgets/form/ui/ToolPickModal';
 import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { useState } from 'react';
 
 export default function PhotoUploadScreen() {
+  const [selectedTool, setSelectedTool] = useState('');
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [selectedPrice, setSelectedPrice] = useState(0);
+
   return (
-    <AppScreen
-      appBar={{
-        backgroundColor: '#fff',
-        ...NormalAppBar('직접 입력해서 신청하기'),
-      }}
-      backgroundColor="#F9F9F9"
-    >
-      <FormContainer />
-    </AppScreen>
+    <>
+      <AppScreen
+        appBar={{
+          backgroundColor: '#fff',
+          ...NormalAppBar('직접 입력해서 신청하기'),
+        }}
+        backgroundColor="#F9F9F9"
+      >
+        <FormContainer
+          selectedPrice={selectedPrice}
+          selectedTool={selectedTool}
+          selectedLocation={selectedLocation}
+        />
+      </AppScreen>
+      <ToolPickModal
+        setSelectedPrice={setSelectedPrice}
+        selectedTool={selectedTool}
+        setSelectedTool={setSelectedTool}
+        setSelectedLocationName={setSelectedLocation}
+      />
+    </>
   );
 }

src/screen/reservation/ui/ReservationScreen.tsx

@@ -0,0 +1,18 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { CenteredAppBar, Dock } from '@/shared/ui';
+import { ReservationContainer } from '@/widgets/reservation/ui';
+
+export default function ReservationScreen() {
+  return (
+    <>
+      <AppScreen
+        preventSwipeBack
+        appBar={CenteredAppBar('예약 현황')}
+        backgroundColor="#F9F9F9"
+      >
+        <ReservationContainer />
+      </AppScreen>
+      <Dock />
+    </>
+  );
+}

src/screen/reservation/ui/index.ts

@@ -0,0 +1 @@
+export { default as ReservationScreen } from './ReservationScreen';

src/screen/user/ui/UserScreen.tsx

@@ -0,0 +1,50 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { CenteredAppBar, Dock } from '@/shared/ui';
+import { fetchSessionData, removeSessionData } from '@/shared/utils';
+import type { User } from '@/shared/types';
+import { CustomerIcon, LogoutIcon } from '@/assets/icons';
+
+export default function UserScreen() {
+  const { name, jumin } = fetchSessionData('userInfo') as User;
+  return (
+    <>
+      <AppScreen
+        preventSwipeBack
+        appBar={CenteredAppBar('나의 정보')}
+        backgroundColor="#F9F9F9"
+      >
+        <div className="p-normal flex size-full flex-col">
+          <div className="shadow-homeBox p-normal mb-10 flex h-[166px] w-full items-center gap-x-5 rounded-md bg-white">
+            <img
+              src="https://imagescdn.gettyimagesbank.com/500/202001/jv11978931.jpg"
+              className="size-[70px] rounded-full object-cover object-center"
+            />
+            <div className="flex flex-col gap-y-3 font-normal">
+              <p className="text-xl">{name}</p>
+              <p>
+                {jumin.slice(0, 6)}-{jumin[7]}******
+              </p>
+            </div>
+          </div>
+          <div className="ml-[25px] flex flex-col gap-y-7">
+            <button className="flex cursor-pointer gap-x-3 text-xl outline-none">
+              <img src={CustomerIcon} />
+              고객센터
+            </button>
+            <button
+              className="flex cursor-pointer gap-x-3 text-xl outline-none"
+              onClick={() => {
+                removeSessionData('userInfo');
+                window.location.href = '/';
+              }}
+            >
+              <img src={LogoutIcon} />
+              로그아웃
+            </button>
+          </div>
+        </div>
+      </AppScreen>
+      <Dock />
+    </>
+  );
+}

src/screen/user/ui/index.ts

@@ -0,0 +1 @@
+export { default as UserScreen } from './UserScreen';

src/shared/api/request.ts

@@ -1,4 +1,6 @@
 export const REQUEST = {
   JOIN: '/api/ocr/idcard',
   PHOTO_UPLOAD: '/chat/image',
+  RESERVATION_SEARCH: '/api/reserve',
+  LOCATION: '/api/locations/',
 };

src/shared/atom/index.ts

@@ -0,0 +1 @@
+export * from './modal';

src/shared/atom/modal.ts

@@ -0,0 +1,26 @@
+import { atom } from 'jotai';
+
+import type { ModalItem } from '@/shared/types';
+import { MODAL } from '@/shared/constants';
+
+type ModalInfo = {
+  [key in ModalItem]: { isOpen: boolean };
+};
+
+const modals = Object.fromEntries(
+  Object.keys(MODAL).map(key => [key, { isOpen: false }]),
+) as ModalInfo;
+
+export const modalAtom = atom<ModalInfo>(modals);
+
+export const updateModal = atom(
+  null,
+  (get, set, update: { key: ModalItem; isOpen: boolean }) => {
+    const currentModal = get(modalAtom);
+    const updatedModal = {
+      ...currentModal,
+      [update.key]: { isOpen: update.isOpen },
+    };
+    set(modalAtom, updatedModal);
+  },
+);

src/shared/constants/dock.tsx

@@ -3,28 +3,28 @@ import { PATH } from './path';
 import {
   HomeIcon,
   HomeSelectedIcon,
-  // ReservationIcon,
-  // ReservationSelectedIcon,
-  // UserIcon,
-  // UserSelectedIcon,
+  ReservationIcon,
+  ReservationSelectedIcon,
+  UserIcon,
+  UserSelectedIcon,
 } from '@/assets/icons';
 
 export const DOCK = {
-  // ['']: {
-  //   title: '예약 현황',
-  //   icon: <img src={ReservationIcon} className="size-[30px]" />,
-  //   selectedIcon: <img src={ReservationSelectedIcon} className="size-[30px]" />,
-  // },
+  [PATH.RESERVATION]: {
+    title: '예약 현황',
+    icon: <img src={ReservationIcon} className="size-[30px]" />,
+    selectedIcon: <img src={ReservationSelectedIcon} className="size-[30px]" />,
+  },
   [PATH.HOME]: {
     title: '홈',
     icon: <img src={HomeIcon} className="size-[30px]" />,
     selectedIcon: <img src={HomeSelectedIcon} className="size-[30px]" />,
   },
-  // ['.']: {
-  //   title: '나의 정보',
-  //   icon: <img src={UserIcon} className="size-[30px]" />,
-  //   selectedIcon: <img src={UserSelectedIcon} className="size-[30px]" />,
-  // },
+  [PATH.USER]: {
+    title: '나의 정보',
+    icon: <img src={UserIcon} className="size-[30px]" />,
+    selectedIcon: <img src={UserSelectedIcon} className="size-[30px]" />,
+  },
 };
 
 export const DOCK_ITEMS = Object.keys(DOCK) as Array<DockItem>;

src/shared/constants/index.ts

@@ -1,2 +1,3 @@
 export * from './path';
 export * from './dock';
+export * from './modal';

src/shared/constants/modal.ts

@@ -0,0 +1,3 @@
+export const MODAL = {
+  TOOL_PICK: 'toolPickModal',
+} as const;

src/shared/constants/path.ts

@@ -6,4 +6,6 @@ export const PATH = {
   PHOTO_LOADING: 'PhotoLoadingScreen',
   PHOTO_RESULT: 'PhotoResultScreen',
   FORM: 'FormScreen',
+  RESERVATION: 'ReservationScreen',
+  USER: 'UserScreen',
 } as const;

src/shared/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useImageUpload } from './useImageUpload';
+export { default as useModal } from './useModal';