첫 커밋

src/pages/transaction/cash-receit/hand-written-issuance-page.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { CashReceitHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step1';
+import { CashReceitHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step2';
+import { ProcessStep } from '@/entities/transaction/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const CashReceitHandWrittenIssuancePage = () => {
+  const { navigate } = useNavigate();
+
+  // 1 or 2
+  const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+
+  useSetHeaderTitle('수기 발행');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetFooterMode(false);
+  
+  const onClickToChangeTab = () => {
+    if(processStep === ProcessStep.One){
+      setProcessStep(ProcessStep.Two);
+    }
+    else if(processStep === ProcessStep.Two){
+      // 완료시?
+      alert('완료');
+      navigate(PATHS.transaction.cashReceit.list);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <div className="option-list">
+              <div className="issue-progress">
+                <div className="bar">
+                  <div 
+                    className="fill" 
+                    style={{ width: '50%' }}
+                  ></div>
+                </div>
+                { (processStep === ProcessStep.One) &&
+                  <CashReceitHandWrittenIssuanceStep1></CashReceitHandWrittenIssuanceStep1>
+                }
+                { (processStep === ProcessStep.Two) &&
+                  <CashReceitHandWrittenIssuanceStep2
+                    setProcessStep={ setProcessStep }
+                  ></CashReceitHandWrittenIssuanceStep2>
+                }
+              </div>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToChangeTab() }
+              >다음</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};