feat: post 공통 레이아웃 설정 by jw0202058 · Pull Request #45 · DevKor-github/repicka-web

jw0202058 · 2025-07-03T08:23:52Z

❗ 연관 이슈

📌 내용

안의 내용은 비워두고 헤더랑 네비게이터를 구현햇습니다
마지막에 완료 버튼 누르면 어떻게 넘어갈지 아직 몰라서 작성 완료 로그가 뜨게만 ㅐㅎ뒀어요

☑️ 체크 사항 & 논의 사항

피그마랑 다른 거 없는지
디렉터리 구조 한번 확인해주세요,,,
path 라우팅 안 해도 되는 거 맞죠?

jw0202058 · 2025-07-03T08:43:22Z

pick 만들기에서도 비슷한 레이아웃 써서 WriteLayout 컴포넌트를 common으로 빼야 할 것 같기도

halionaz

좋은데요?
근데 다쓰고 보니 잔소리 엄청 적어놨네ㅋㅋㅋ

로직적으로 막 크게 고칠건 없어보이고 짜잘한 사항들 제 생각 끄적여봤습니다
천천히 읽어보면서 이야기해보시쥬

아 그리고 린트 깨지는거는 좀 문제임
yarn lint하고 yarn lint --fix 해서 해결하거나
Prettier를 고쳐서 나중에 발생할 문제를 미연에 방지해보아요

https://velog.io/@yjw0517/TIL2023.06.27-prettier-%EC%A0%81%EC%9A%A9-%EC%95%88%EB%90%98%EB%8A%94-%ED%98%84%EC%83%81

이 벨로그가 도움이 좀 되지 않을까 싶네요

Copilot

Pull Request Overview

This PR sets up a multi-step post writing layout by replacing the old PostPage with a new PostPages route and introducing a WriteLayout component that wraps individual step pages.

Replaces PostPage route with PostPageRoutes and removes deprecated src/pages/PostPage/* files
Adds six step pages (Step1–Step6) under src/pages/PostPages/stepPages/ with inline centering styles
Implements WriteLayout (header, navigator, safe area) and associated styling in src/common/components/WriteLayout/

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/pages/routes.tsx	Updated `/post` route to use `PostPageRoutes`
src/pages/PostPages/stepPages/step1.tsx	Added centered placeholder for step 1
src/pages/PostPages/stepPages/step2.tsx	Added centered placeholder for step 2
src/pages/PostPages/stepPages/step3.tsx	Added centered placeholder for step 3
src/pages/PostPages/stepPages/step4.tsx	Added centered placeholder for step 4
src/pages/PostPages/stepPages/step5.tsx	Added centered placeholder for step 5
src/pages/PostPages/stepPages/step6.tsx	Added centered placeholder for step 6
src/pages/PostPages/index.tsx	Introduced `PostPage` that uses `WriteLayout`
src/common/components/WriteLayout/*	Added `WriteLayout`, `Header`, `Navigator` + CSS

Comments suppressed due to low confidence (1)

src/common/components/WriteLayout/header.tsx:5

The variable name navigator may be confused with the global window.navigator. Consider renaming it to navigate to clearly reflect it's a navigation function.

    const navigator = useNavigate();

Copilot · 2025-07-03T12:51:23Z

+import Btn from '@/common/components/Button';
+import * as s from './style.css';
+
+const MAX_STEP = 6;


Hardcoding MAX_STEP increases the risk of mismatches if steps are added or removed. Consider deriving this value from the length of the stepPages array or a config constant.

내가 먼저 말함 ㅅㄱ

Copilot · 2025-07-03T12:51:23Z

@@ -0,0 +1,18 @@
+const Step1 = () => {
+    return (
+        <div


All step pages duplicate the same inline centering styles. Extract these into a shared styled component or CSS class to reduce duplication and simplify future updates.

halionaz · 2025-07-03T13:00:46Z

아아 디렉토리 이제 봤네
Pick도 퍼널이 비슷하긴 한데 Step들이 다 다를거 같아서
WriteLayout은 features/posts?작명은맘대로하로 빼도 될듯함

그리고 stepPages 폴더 안에 있는 Step들도 각각이 path 라우트가 되는게 아니라 지나가는 State Page니까
WriteLayout이랑 가까운 features 폴더에서 관리하는게 좋을듯??
더 좋은 아이디어가 있다면 언제든 환ㅇ영이에요

jw0202058 · 2025-07-03T15:28:47Z

아 바로 위에 거에는 왜 코멘트가 안 달림?
근데 지금 공통 레이아웃으로 만들어둔 게 헤더랑 네비게이터 버튼뿐이라 재활용할 수 있지 않을까여?? 아님 말고요...
@halionaz

halionaz · 2025-07-03T15:35:19Z

@jw0202058
common으로 하려면 renderStep() 으로 스텝 컴포넌트 넣어주는걸 부모단에서 할 수 있도록 바꿔줘야 할듯?
근데 피그마 다시 보니까 Pick쪽은 퍼널이 아닌데?
순차적으로 진행되는게 아니라 하나하나가 확인창 / 수정창 / 수락창이라 따로 구현하는게 편할거 같긴 해요

jw0202058 · 2025-07-03T15:39:10Z

아 그러네 으ㅏㄹ겠습니당

halionaz

아 height: 100% 이상하게 적용되는 이유 찾음

이거 제 브랜치에서 수정하긴 했는데 SafeArea/style.css.ts 파일의 Container를

export const Container = css({
  position: 'absolute',
  bottom: 0,
});

이렇게 수정해야 됩니다... 제 코드 문제였ㅅ음

halionaz

🚀 어뿌루부

halionaz · 2025-07-04T05:37:06Z

+  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>
+  );


아주좋군요 😎

이정원 added 2 commits July 3, 2025 16:59

feat: post 공통 레이아웃 설정

d4cf213

fix: 버튼 간격 재설정

d8fdb10

chore(docs): WriteLayout을 common component로 이동

dc82a4e

halionaz reviewed Jul 3, 2025

View reviewed changes

halionaz requested a review from Copilot July 3, 2025 12:50

Copilot AI reviewed Jul 3, 2025

View reviewed changes

이정원 added 2 commits July 4, 2025 00:17

fix: yarn lint --fix

5e59bc5

style: 약간의 수정들

5010a03

이정원 added 2 commits July 4, 2025 00:41

chore(docs): WriteLayout 위치 다시 옮기기

40f14f4

fix: 경로 수정

6da80ff

halionaz reviewed Jul 3, 2025

View reviewed changes

Comment thread src/pages/PostPages/WriteLayout/index.tsx Outdated

이정원 added 3 commits July 4, 2025 13:11

fix

c8fcd0c

refactor: step 관련 로직들을 모두 index.tsx로 옮김 그리고 내부 페이지 배열로 변경

c1e0d09

refactor: css 따로 빼기

1512b19

jw0202058 requested a review from halionaz July 4, 2025 05:07

halionaz approved these changes Jul 4, 2025

View reviewed changes

jw0202058 merged commit d140ea9 into dev Jul 4, 2025

jw0202058 deleted the feat/#37/post-layout branch July 4, 2025 05:47

Uh oh!

Conversation

jw0202058 commented Jul 3, 2025 • edited by halionaz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❗ 연관 이슈

📌 내용

☑️ 체크 사항 & 논의 사항

Uh oh!

jw0202058 commented Jul 3, 2025

Uh oh!

halionaz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

halionaz Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

halionaz commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jw0202058 commented Jul 3, 2025

Uh oh!

halionaz commented Jul 3, 2025

Uh oh!

jw0202058 commented Jul 3, 2025

Uh oh!

halionaz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

halionaz left a comment

Choose a reason for hiding this comment

Uh oh!

halionaz Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

jw0202058 Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jw0202058 commented Jul 3, 2025 •

edited by halionaz

Loading

halionaz commented Jul 3, 2025 •

edited

Loading

halionaz left a comment •

edited

Loading