qna-viewer-react/Layout_fix.md

레이아웃 Y좌표 불일치 문제 해결 기록

1. 문제 상황

• FeedbackListPage, IssueListPage, FeedbackDetailPage, FeedbackCreatePage 등 여러 페이지의 제목과 메인 콘텐츠의 시작 위치(Y좌표)가 미세하게 달라 일관성이 없어 보임.

2. 시도 및 실패 원인 분석

시도 1: 모든 페이지에 <Separator /> 추가

• 내용: 일부 페이지에만 있던 구분선을 모든 페이지에 추가하여 JSX 구조를 유사하게 만들었음.
• 실패 원인: 각 페이지의 최상위 div에 적용된 space-y-4 클래스가 문제였음. 이 클래스는 첫 번째 자식을 제외한 모든 자식에게 margin-top을 추가함. Separator를 추가하면서 마진이 적용되는 대상이 변경되었고, 이는 페이지마다 다른 결과를 낳아 여전히 불일치를 유발함.

시도 2: space-y-4 제거 및 제목 구조 통일

• 내용: 자동 여백을 제거하고, 모든 페이지의 제목 블록(div > h1+p) 구조를 동일하게 맞췄음.
• 실패 원인: 제목 블록 자체는 통일되었지만, 그 바로 다음에 오는 콘텐츠 컴포넌트(DynamicTable vs FeedbackFormCard)가 달랐음. 각 컴포넌트는 자신만의 기본 스타일과 최상위 태그(예: Card)를 가지고 있어, 제목 블록과의 상호작용에서 미세하게 다른 여백을 만들어냄.

시도 3: items-start 사용

• 내용: flex 컨테이너의 정렬을 items-center에서 items-start로 변경했음.
• 실패 원인: 이 방법은 제목 블록 내부의 요소들을 정렬하는 데는 유효했지만, 문제의 근본 원인인 제목 블록과 그 아래 콘텐츠 사이의 간격에는 아무런 영향을 주지 못했음. 완전히 잘못된 지점을 수정한 것임.

시도 4 & 5: PageHeader/PageTitle 및 PageLayout 컴포넌트 추상화

• 내용: 페이지의 상단부와 전체 레이아웃을 재사용 가능한 컴포넌트로 만들어 구조를 중앙화했음. 이는 소프트웨어 공학적으로 올바른 방향이었음.
• 실패 원인: 추상화는 올바랐지만, PageLayout의 구현이 문제의 핵심을 해결하지 못했음. PageLayout은 PageTitle과 그 아래의 children(메인 콘텐츠)을 그냥 연달아 렌더링했을 뿐, 두 요소 사이의 관계와 간격을 명시적으로 제어하지 않았음. 결국, 각기 다른 children 컴포넌트가 PageTitle과 상호작용하며 발생하는 미세한 여백 차이를 막지 못함.

시도 6: PageLayout 내부 div 제거

• 내용: PageLayout 내부에서 children을 감싸던 불필요한 div를 제거하여 구조를 단순화했음.
• 실패 원인: 이 역시 문제의 진짜 원인이 아니었음. PageLayout의 구조는 이미 충분히 단순했음. 문제는 PageLayout 외부에서, 즉 각 페이지에서 children으로 전달되는 컴포넌트들의 최상위 요소 스타일이 다르다는 점이었음.

---

3. 최종 해결 방안: PageLayout을 통한 명시적이고 일관된 콘텐츠 래핑

• 근본 원인 재정의: PageLayout의 children으로 전달되는 DynamicTable과 FeedbackFormCard는 그 자체로 Card 컴포넌트를 최상위 요소로 가짐. 하지만 이 컴포넌트들이 렌더링될 때, React의 조건부 렌더링(error && ..., schema && ...)과 결합되면서 최종 DOM 구조에서 미세한 차이를 유발함.

• 해결책: PageLayout이 children을 직접 렌더링하는 대신, 모든 children을 동일한 스타일의 div로 한번 감싸서 렌더링하도록 PageLayout 자체를 수정한다. 이 div는 PageTitle의 Separator가 만드는 하단 여백(mb-4)을 받아, 그 아래에 위치하게 된다.

• 구현:

  1. PageLayout.tsx 파일을 수정하여, {children}을 <div className="page-content">{children}</div>와 같이 명시적인 컨테이너로 감싼다. (클래스 이름은 설명을 위함이며, 실제로는 클래스가 필요 없을 수 있음)
  2. 이 컨테이너는 PageTitle의 Separator 바로 다음에 위치하게 되므로, 모든 페이지에서 동일한 Y좌표를 갖게 된다.
  3. 각 페이지에서는 PageLayout으로 감싸기만 하고, 추가적인 div나 여백 클래스를 사용하지 않는다.

이 방법은 PageLayout이 자신의 자식들을 어떻게 배치할지에 대한 모든 제어권을 갖게 하여, 외부(각 페이지)의 구조적 차이가 레이아웃에 영향을 미칠 가능성을 원천적으로 차단한다.