feat : implement HelpScreen

Author: yummjin

src/app/stackflow/Stack.tsx

@@ -1,5 +1,6 @@
 import { CompleteScreen } from '@/screen/complete';
 import { FormScreen } from '@/screen/form/ui';
+import { HelpScreen } from '@/screen/help/ui';
 import { HomeScreen } from '@/screen/home/ui';
 import { JoinScreen } from '@/screen/join/ui';
 import { PhotoLoadingScreen } from '@/screen/photo-loading/ui';
@@ -24,6 +25,7 @@ export const { Stack, useFlow } = stackflow({
     PhotoResultScreen,
     ReservationScreen,
     UserScreen,
+    HelpScreen,
   },
   plugins: [
     basicRendererPlugin(),

src/assets/images/image-info.png

@@ -5,8 +5,12 @@ import Loader1 from './loader-1.png';
 import Loader2 from './loader-2.png';
 import Loader3 from './loader-3.png';
 import Loader4 from './loader-4.png';
+import InfoImage from './image-info.png';
+import InfoImage2 from './image-info2.png';
 
 export {
+  InfoImage,
+  InfoImage2,
   BackgroundImage,
   LoadingBackground,
   Loader1,

src/assets/images/image-info2.png

@@ -0,0 +1,18 @@
+import { InfoImage, InfoImage2 } from '@/assets/images';
+import { CenteredAppBar } from '@/shared/ui';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+export default function HelpScreen() {
+  return (
+    <AppScreen appBar={CenteredAppBar('도움말')} backgroundColor="#Fff">
+      <div className="p-normal flex size-full flex-col">
+        <p className="ml-2 text-2xl font-semibold">임대사업소 운영 시간</p>
+        <p className="mb-4 ml-2 text-xl text-[#f00]">
+          09:00 ~ 18:00(일요일 및 공휴일 휴무)
+        </p>
+        <img src={InfoImage} alt="info" className="mb-4 size-fit" />
+        <img src={InfoImage2} alt="info" className="size-fit" />
+      </div>
+    </AppScreen>
+  );
+}

src/assets/images/index.ts

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

src/screen/help/ui/HelpScreen.tsx

@@ -2,14 +2,21 @@ import { AppScreen } from '@stackflow/plugin-basic-ui';
 import { BackgroundImage } from '@/assets/images';
 import { HomeAppBar, Dock } from '@/shared/ui';
 import { HomeContainer } from '@/widgets/home/ui';
+import { useFlow } from '@/app/stackflow';
+import { PATH } from '@/shared/constants';
 
 export default function HomeScreen() {
+  const { push } = useFlow();
+
   return (
     <>
       <AppScreen
         preventSwipeBack
         backgroundImage={`url(${BackgroundImage})`}
-        appBar={HomeAppBar()}
+        appBar={HomeAppBar(
+          () => {},
+          () => push(PATH.HELP, {}),
+        )}
       >
         <HomeContainer />
       </AppScreen>

src/screen/help/ui/index.ts

@@ -8,4 +8,5 @@ export const PATH = {
   FORM: 'FormScreen',
   RESERVATION: 'ReservationScreen',
   USER: 'UserScreen',
+  HELP: 'HelpScreen',
 } as const;