[refactor] 레이아웃 리팩토링

[mgYang53]

📄 설명

현재 여러 페이지에서 MainLayout의 px-layout-padding (120px) 제약을 우회하기 위해 CSS 핵을 사용 중입니다.

핵 패턴	사용 위치	목적
w-screen ml-[calc(-50vw+50%)]	SubPageHeader, BookLogList	MainLayout 패딩을 벗어나 전체 너비 sticky 헤더
-mt-xlarge	MeetingCreatePage, TopicCreatePage	sticky 위치 보정
w-screen relative left-1/2 -translate-x-1/2	BookLogList	전체 너비 배경색

근본 원인: 전체 너비 sticky 요소가 필요한 페이지가 MainLayout(패딩 있음) 안에 있기 때문.
해결 방향: 이미 존재하는 FullWidthLayout(패딩 없음)을 활용하여 핵 제거. 뒤로가기 헤더를 SubPageHeader / FormPageHeader 두 가지 공통 컴포넌트로 통일. 모든 sticky 헤더에 스크롤 시 shadow-drop-bottom 자동 적용.

상세 설계: docs/LAYOUT_REFACTORING_PLAN.md

✅ 해야 할 일

Step 1: sticky 헤더 사용 페이지 9개를 FullWidthLayout으로 이동

• src/routes/index.tsx에서 다음 페이지들을 FullWidthLayout children으로 이동
  • SubPageHeader 사용: BookDetailPage, BookReviewHistoryPage, MeetingDetailPage, PreOpinionListPage
  • FormPageHeader 사용: GatheringSettingPage, MeetingSettingPage, MeetingCreatePage (생성/수정), TopicCreatePage

Step 2: SubPageHeader에서 뷰포트 핵 제거 + 스크롤 shadow 내장

• src/shared/components/SubPageHeader.tsx에서 w-screen ml-[calc(-50vw+50%)] 제거
• scroll 이벤트 리스너 추가하여 scrollY > 0일 때 shadow-drop-bottom 자동 토글
• PreOpinionListPage의 외부 IntersectionObserver 로직(sentinelRef, isStuck, observer) 삭제

Step 3: 이동된 각 페이지에 콘텐츠 제약 래퍼 추가

• BookDetailPage: BookInfo에 mx-auto max-w-layout-max px-layout-padding 래퍼 추가
• BookReviewHistoryPage: <section> 콘텐츠에 래퍼 추가
• GatheringSettingPage: SubPageHeader → FormPageHeader 교체, 본문에 bg-grey-100 + 래퍼
• PreOpinionListPage: IntersectionObserver 제거, 콘텐츠에 래퍼 추가
• MeetingDetailPage: 인라인 TextButton → SubPageHeader 교체, 콘텐츠에 래퍼 추가
• MeetingSettingPage: 주석 처리된 헤더 → FormPageHeader 교체, 본문에 bg-grey-100 + 래퍼
• MeetingCreatePage: 본문에 bg-grey-100 + 래퍼 추가
• TopicCreatePage: 본문에 bg-grey-100 + 래퍼 추가

Step 4: BookLogList 뷰포트 핵 제거

• src/features/book/components/BookLogList.tsx sticky 필터 헤더에서 w-screen ml-[calc(-50vw+50%)] 제거
• full-bleed 회색 배경 영역에서 w-screen relative left-1/2 -translate-x-1/2 제거 + max-w-[1200px] → max-w-layout-max px-layout-padding 교체

Step 5: FormPageHeader 공통 컴포넌트 생성

• src/shared/components/FormPageHeader.tsx 신규 생성
  • Props: title, actionLabel, onAction, isActionDisabled?
  • sticky top-gnb-height + 전체 너비 + 내부 콘텐츠 가운데 정렬
  • 스크롤 shadow 내장 (scrollY > 0 → shadow-drop-bottom)
  • 뒤로가기: TextButton with ChevronLeft (SubPageHeader와 일관성)

Step 6: 폼 페이지에 FormPageHeader 적용

• GatheringSettingPage: SubPageHeader → FormPageHeader 교체 + bg-grey-100 본문
• MeetingSettingPage: 주석 헤더 → FormPageHeader 교체 + bg-grey-100 본문
• MeetingCreatePage: 인라인 헤더 → FormPageHeader 교체 + bg-grey-100 본문
• TopicCreatePage: 인라인 헤더 → FormPageHeader 교체 + bg-grey-100 본문

검증

• CSS 핵 잔존 확인 (grep 결과 0건)
• 시각 검증: sticky 헤더 전체 너비, 콘텐츠 1200px 정렬, 스크롤 shadow, FormPageHeader 페이지 bg-grey-100 본문
• 기능 검증: 뒤로가기 버튼, 폼 제출 버튼 정상 작동
• pnpm build 성공

📝 메모

수정 파일 목록 (12개)

파일	변경 유형
src/routes/index.tsx	9개 페이지 라우트를 FullWidthLayout으로 이동
src/shared/components/SubPageHeader.tsx	뷰포트 핵 제거 + 스크롤 shadow 내장
src/shared/components/FormPageHeader.tsx	신규 생성
src/features/book/components/BookLogList.tsx	뷰포트 핵 2곳 제거
src/pages/Books/BookDetailPage.tsx	콘텐츠 래퍼 추가
src/pages/Books/BookReviewHistoryPage.tsx	콘텐츠 래퍼 추가
src/pages/PreOpinions/PreOpinionListPage.tsx	IntersectionObserver 제거 + 래퍼
src/pages/Meetings/MeetingDetailPage.tsx	SubPageHeader 적용 + 래퍼
src/pages/Gatherings/GatheringSettingPage.tsx	SubPageHeader → FormPageHeader + bg-grey-100
src/pages/Meetings/MeetingSettingPage.tsx	FormPageHeader 적용 + bg-grey-100
src/pages/Meetings/MeetingCreatePage.tsx	FormPageHeader 적용 + bg-grey-100
src/pages/Topics/TopicCreatePage.tsx	FormPageHeader 적용 + bg-grey-100

변경하지 않는 페이지

HomePage, BookListPage, GatheringListPage, RecordListPage, CreateGatheringPage, GatheringDetailPage(이미 FullWidthLayout), InvitePage, LoginPage, OnboardingPage, LandingPage