ByteCrew-Uscode · yummjin · Jun 28, 2025 · Jun 28, 2025 · Jun 28, 2025 · Jun 28, 2025
diff --git a/favicon/favicon.ico b/favicon/favicon.ico
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>농기구온</title>
   </head>

diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.81.5",
     "axios": "^1.10.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "daisyui": "^5.0.43",
+    "framer-motion": "^12.19.2",
     "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/App.tsx b/src/app/App.tsx
@@ -1,9 +1,9 @@
-import { Stack } from "./stackflow";
+import { Stack } from './stackflow';
 
 export default function App() {
   return (
     <div className="size-screen">
-      <div className="scrollbar-hide container-mobile fixed inset-0 overflow-hidden">
+      <div className="scrollbar-hide container-mobile fixed inset-0 overflow-hidden tracking-wide">
         <Stack />
       </div>
     </div>

diff --git a/src/app/stackflow/Stack.tsx b/src/app/stackflow/Stack.tsx
@@ -1,5 +1,11 @@
+import { CompleteScreen } from '@/screen/complete';
+import { FormScreen } from '@/screen/form/ui';
 import { HomeScreen } from '@/screen/home/ui';
 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 { fetchSessionData } from '@/shared/utils';
 import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
 import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
 import { stackflow } from '@stackflow/react';
@@ -9,12 +15,20 @@ export const { Stack, useFlow } = stackflow({
   activities: {
     JoinScreen,
     HomeScreen,
+    PhotoUploadScreen,
+    FormScreen,
+    CompleteScreen,
+    PhotoLoadingScreen,
+    PhotoResultScreen,
   },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({
       theme: 'cupertino',
     }),
   ],
-  initialActivity: () => 'HomeScreen',
+  initialActivity: () => {
+    if (fetchSessionData('userInfo')) return 'HomeScreen';
+    return 'JoinScreen';
+  },
 });
diff --git a/src/assets/icons/icon-bell.svg b/src/assets/icons/icon-bell.svg
diff --git a/src/assets/icons/icon-checked.svg b/src/assets/icons/icon-checked.svg
diff --git a/src/assets/icons/icon-help.svg b/src/assets/icons/icon-help.svg
diff --git a/src/assets/icons/icon-search.svg b/src/assets/icons/icon-search.svg
diff --git a/src/assets/icons/icon-unchecked.svg b/src/assets/icons/icon-unchecked.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -10,6 +10,11 @@ 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';
+import BellIcon from './icon-bell.svg';
+import HelpIcon from './icon-help.svg';
+import SearchIcon from './icon-search.svg';
+import CheckIcon from './icon-checked.svg';
+import UnCheckedIcon from './icon-unchecked.svg';
 
 export {
   Logo,
@@ -24,4 +29,9 @@ export {
   HomeSelectedIcon,
   UserSelectedIcon,
   ReservationSelectedIcon,
+  BellIcon,
+  HelpIcon,
+  SearchIcon,
+  CheckIcon,
+  UnCheckedIcon,
 };
diff --git a/src/assets/images/background-loading.png b/src/assets/images/background-loading.png
diff --git a/src/assets/images/call-complete.png b/src/assets/images/call-complete.png
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -1,3 +1,17 @@
-import BackgroundImage from "./background.png";
+import BackgroundImage from './background.png';
+import LoadingBackground from './background-loading.png';
+import PhoneCompleteImage from './call-complete.png';
+import Loader1 from './loader-1.png';
+import Loader2 from './loader-2.png';
+import Loader3 from './loader-3.png';
+import Loader4 from './loader-4.png';
 
-export { BackgroundImage };
+export {
+  BackgroundImage,
+  LoadingBackground,
+  Loader1,
+  Loader2,
+  Loader3,
+  Loader4,
+  PhoneCompleteImage,
+};
diff --git a/src/assets/images/loader-1.png b/src/assets/images/loader-1.png
diff --git a/src/assets/images/loader-2.png b/src/assets/images/loader-2.png
diff --git a/src/assets/images/loader-3.png b/src/assets/images/loader-3.png
diff --git a/src/assets/images/loader-4.png b/src/assets/images/loader-4.png
diff --git a/src/screen/complete/CompleteScreen.tsx b/src/screen/complete/CompleteScreen.tsx
@@ -0,0 +1,30 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { Dock } from '@/shared/ui';
+import { PhoneCompleteImage } from '@/assets/images';
+import Button from '@/shared/ui/Button';
+import { useFlow } from '@/app/stackflow';
+
+export default function PhoneCompleteScreen() {
+  const { pop } = useFlow();
+
+  return (
+    <>
+      <AppScreen>
+        <div className="grid size-full place-items-center">
+          <div className="flex flex-col items-center">
+            <img src={PhoneCompleteImage} className="mb-8 size-50" />
+            <p className="mb-3 text-2xl font-medium">신청이 완료되었습니다</p>
+            <p className="mb-[135px] text-center leading-[30px]">
+              AI가 계약서를 자동으로 작성하였으며 <br />
+              <b>예약 현황</b>에서 언제든지 확인하실 수 있습니다
+            </p>
+            <Button size="lg" className="w-[310px]" onClick={() => pop()}>
+              홈으로 돌아가기
+            </Button>
+          </div>
+        </div>
+      </AppScreen>
+      <Dock />
+    </>
+  );
+}
diff --git a/src/screen/complete/index.ts b/src/screen/complete/index.ts
@@ -0,0 +1 @@
+export { default as CompleteScreen } from './CompleteScreen';
diff --git a/src/screen/form/ui/FormScreen.tsx b/src/screen/form/ui/FormScreen.tsx
@@ -0,0 +1,17 @@
+import { NormalAppBar } from '@/shared/ui';
+import { FormContainer } from '@/widgets/form/ui';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+export default function PhotoUploadScreen() {
+  return (
+    <AppScreen
+      appBar={{
+        backgroundColor: '#fff',
+        ...NormalAppBar('직접 입력해서 신청하기'),
+      }}
+      backgroundColor="#F9F9F9"
+    >
+      <FormContainer />
+    </AppScreen>
+  );
+}
diff --git a/src/screen/form/ui/index.ts b/src/screen/form/ui/index.ts
@@ -0,0 +1 @@
+export { default as FormScreen } from './FormScreen';
diff --git a/src/screen/home/ui/HomeScreen.tsx b/src/screen/home/ui/HomeScreen.tsx
@@ -1,6 +1,6 @@
 import { AppScreen } from '@stackflow/plugin-basic-ui';
 import { BackgroundImage } from '@/assets/images';
-import { BasicAppBar, Dock } from '@/shared/ui';
+import { HomeAppBar, Dock } from '@/shared/ui';
 import { HomeContainer } from '@/widgets/home/ui';
 
 export default function HomeScreen() {
@@ -9,7 +9,7 @@ export default function HomeScreen() {
       <AppScreen
         preventSwipeBack
         backgroundImage={`url(${BackgroundImage})`}
-        appBar={BasicAppBar}
+        appBar={HomeAppBar()}
       >
         <HomeContainer />
       </AppScreen>

diff --git a/src/screen/photo-loading/ui/PhotoLoadingScreen.tsx b/src/screen/photo-loading/ui/PhotoLoadingScreen.tsx
@@ -0,0 +1,34 @@
+import { LoadingBackground } from '@/assets/images';
+import { Loader } from '@/shared/ui';
+import { useSubmitPhoto } from '@/widgets/photo-upload/api';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import type { ActivityComponentType } from '@stackflow/react';
+import { useEffect } from 'react';
+
+const PhotoLoadingScreen: ActivityComponentType<{ data: FormData }> = ({
+  params,
+}: {
+  params: { data: FormData };
+}) => {
+  const { mutate: submitPhoto } = useSubmitPhoto();
+
+  useEffect(() => {
+    submitPhoto(params.data);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <AppScreen backgroundImage={`url(${LoadingBackground})`}>
+      <div className="grid h-screen w-full place-items-center">
+        <div className="flex flex-col items-center">
+          <Loader />
+          <p className="text-s -mt-4 text-center text-xl font-semibold">
+            AI가 사진을 분석하고 있어요...
+          </p>
+        </div>
+      </div>
+    </AppScreen>
+  );
+};
+
+export default PhotoLoadingScreen;
diff --git a/src/screen/photo-loading/ui/index.ts b/src/screen/photo-loading/ui/index.ts
@@ -0,0 +1 @@
+export { default as PhotoLoadingScreen } from './PhotoLoadingScreen';
diff --git a/src/screen/photo-result/ui/PhotoResultScreen.tsx b/src/screen/photo-result/ui/PhotoResultScreen.tsx
@@ -0,0 +1,19 @@
+import type { Tool } from '@/shared/types';
+import { NormalAppBar } from '@/shared/ui';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import type { ActivityComponentType } from '@stackflow/react';
+import { PhotoResultContainer } from '@/widgets/photo-result/ui';
+
+const PhotoLoadingScreen: ActivityComponentType<{ result: Tool[] }> = ({
+  params,
+}: {
+  params: { result: Tool[] };
+}) => {
+  return (
+    <AppScreen appBar={NormalAppBar('')}>
+      <PhotoResultContainer tools={params.result} />
+    </AppScreen>
+  );
+};
+
+export default PhotoLoadingScreen;
diff --git a/src/screen/photo-result/ui/index.ts b/src/screen/photo-result/ui/index.ts
@@ -0,0 +1 @@
+export { default as PhotoResultScreen } from './PhotoResultScreen';
diff --git a/src/screen/photo-upload/ui/PhotoUploadScreen.tsx b/src/screen/photo-upload/ui/PhotoUploadScreen.tsx
@@ -0,0 +1,11 @@
+import { NormalAppBar } from '@/shared/ui';
+import { PhotoUploadContainer } from '@/widgets/photo-upload/ui';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+export default function PhotoUploadScreen() {
+  return (
+    <AppScreen appBar={NormalAppBar('')}>
+      <PhotoUploadContainer />
+    </AppScreen>
+  );
+}
diff --git a/src/screen/photo-upload/ui/index.ts b/src/screen/photo-upload/ui/index.ts
@@ -0,0 +1 @@
+export { default as PhotoUploadScreen } from './PhotoUploadScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as CompleteScreen } from './CompleteScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as FormScreen } from './FormScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as PhotoLoadingScreen } from './PhotoLoadingScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as PhotoResultScreen } from './PhotoResultScreen';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as PhotoUploadScreen } from './PhotoUploadScreen';