Merge pull request #45 from DevKor-github/feat/#37/post-layout

feat: post 공통 레이아웃 설정

Author: jw0202058

src/common/components/Button/index.tsx

@@ -4,7 +4,7 @@ import * as s from './style.css';
 interface Props extends PropsWithChildren {
   color?: 'gray' | 'main' | 'softgray' | 'deemedgray';
   onClick?: () => void;
-  style? : HTMLAttributes<HTMLDivElement>['style'];
+  style?: HTMLAttributes<HTMLDivElement>['style'];
 }
 const Btn = ({ children, color = 'softgray', onClick, style }: Props) => {
   return (

src/common/components/Button/style.css.ts

@@ -15,7 +15,7 @@ export const Button = cva({
     fontStyle: 'normal',
     fontWeight: '500',
     lineHeight: 'normal',
-    letterSpacing: '-0.05rem'
+    letterSpacing: '-0.05rem',
   },
   variants: {
     color: {
@@ -25,16 +25,16 @@ export const Button = cva({
       },
       gray: {
         backgroundColor: 'systemGray5',
-        color: '100'
+        color: '100',
       },
       softgray: {
         backgroundColor: 'systemGray5',
-        color: '80'
+        color: '80',
       },
       deemedgray: {
         backgroundColor: 'systemGray5',
-        color: '54'
-      }
-    }
-  }
-})
+        color: '54',
+      },
+    },
+  },
+});

src/common/components/SafeArea/style.css.ts

@@ -2,4 +2,5 @@ import { css } from '@styled-system/css';
 
 export const Container = css({
   position: 'absolute',
+  bottom: 0
 });

src/pages/PostPage/index.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router';
+import * as s from './style.css';
+
+const Header = () => {
+  const navigator = useNavigate();
+
+  const handleClose = () => {
+    navigator(-1);
+  };
+
+  return (
+    <header>
+      <div className={s.Container}>
+        <button className={`mgc_close_line ${s.closeBtn}`} onClick={handleClose}></button>
+        <span className={s.headerText}> 글쓰기 </span>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/pages/PostPage/postCard.tsx

@@ -0,0 +1,50 @@
+import Header from './header';
+import Navigator from './navigator';
+import Step1 from '@/pages/PostPages/StepPages/step1';
+import Step2 from '@/pages/PostPages/StepPages/step2';
+import Step3 from '@/pages/PostPages/StepPages/step3';
+import Step4 from '@/pages/PostPages/StepPages/step4';
+import Step5 from '@/pages/PostPages/StepPages/step5';
+import Step6 from '@/pages/PostPages/StepPages/step6';
+// import StepIndicator from './'   // [TODO] stepindicator 만들어서 추가하기
+import { useState } from 'react';
+
+import * as s from './style.css';
+
+const MAX_STEP = 6;
+
+const steps = [
+  <Step1 />,
+  <Step2 />,
+  <Step3 />,
+  <Step4 />,
+  <Step5 />,
+  <Step6 />,
+];
+
+const WriteLayout = () => {
+
+  const [step, setStep] = useState(1);
+
+  const isFirst = step === 1;
+  const isLast = step === MAX_STEP;
+
+  const goPrev = () => {
+    setStep((prev) => Math.max(1, prev - 1));  // 이전 상태 고려 (prev), 최소 1
+  }
+
+  const goNext = () => {
+    if (step < MAX_STEP) setStep(step + 1);
+    else console.log('작성 완료');
+  };
+
+  return (
+    <div className={s.entireLayout}>
+      <Header />
+      <div className={s.innerPage}>{steps[step - 1]}</div>
+      <Navigator goNext={goNext} goPrev={goPrev} isFirst={isFirst} isLast={isLast} />
+    </div>
+  );
+};
+
+export default WriteLayout;

src/pages/PostPage/style.css.ts

@@ -0,0 +1,33 @@
+import Btn from '@/common/components/Button';
+import * as s from './style.css';
+
+interface NavigatorProps {
+  goNext: () => void;
+  goPrev: () => void;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+const Navigator = ({ goNext, goPrev, isFirst, isLast }: NavigatorProps) => {
+
+  const label = isLast ? '완료' : '다음';
+
+  return (
+    <footer>
+      <div className={s.stepBtn}>
+        {!isFirst && (
+          <div className={s.halfFlex}>
+            <Btn onClick={goPrev}>
+              이전
+            </Btn>
+          </div>
+        )}
+        <Btn onClick={goNext} color="main" style={isFirst ? { width: '100%' } : { flex: '1 1 0' }}>
+          {label}
+        </Btn>
+      </div>
+    </footer>
+  );
+};
+
+export default Navigator;

src/pages/PostPages/WriteLayout/header.tsx

@@ -0,0 +1,48 @@
+import { css } from '@styled-system/css';
+
+export const stepBtn = css({
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  gap: '1rem',
+  padding: '0rem 1rem 2.625rem 1rem',
+});
+
+export const entireLayout = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+});
+
+export const innerPage = css({
+  flex: 1,
+  overflowY: 'auto',
+});
+
+export const Container = css({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  height: '4.44rem',
+});
+
+export const closeBtn = css({
+  position: 'absolute',
+  left: '1rem',
+  cursor: 'pointer',
+  width: '1.25rem',
+  color: '80',
+  flexShrink: '1',
+  aspectRatio: '1/1',
+  fontSize: '1.25rem',
+});
+
+export const headerText = css({
+  flex: '1',
+  textAlign: 'center',
+  fontSize: '1.25rem',
+  fontWeight: '600',
+});
+
+export const halfFlex = css ({
+  flex: '1 1 0'
+})