오늘의 고민: 레이아웃 구조를 효율적으로 잡는다?

새로운 프로젝트를 들어가며,
프론트엔드 메뉴와 헤더, 레이아웃 구조를 먼저 잡게 되었다.
이 때 내가 고민한 구조에 대해 기록해두고자 한다 !

구조

RootRayout > Header, Container
-------------------------------ㄴ> page.tsx
즉, 루트레이아웃이 있고, 그 안에 헤더와 container가 동일한 선상에 있다.
이 때 container는 children을 가져서 모든 페이지가 container안에 불러와진다.

사진과 함께

위에 내가 첨부한 사진과 함께 보자면
1번은 Header에 속하는 영역이고,
3번은 Container에 속하는 영역이다.
이 때 2번을 레이아웃쪽에 구현할지, container안에 있는 각 페이지에 구현할지 고민이 많았다.

그 이유는, 2번은 각 페이지의 설명을 나타낸다.
따라서 각 페이지마다 모두 내용이 달라야한다는 것이고,
이 때는 메뉴에 정의되지 않은 상세페이지까지 있다는 것을 고려해야한다.

내가 생각한 방법

1. 1번은 Header, 2번과 3번은 container영역에 속하도록 둔다.
   각 페이지 page.tsx에서 각 페이지의 설명을 정의한다.
   ❌ -> 여기서 문제는 2번을 container 영역에 속하게 두면 1번 divider과 2번 divider이 맞지 않는다는 것이다. 왜냐하면 container에는 예쁜 UI를 위해 padding 값이 적용되어 있으므로 ..!
   
   이런식으로 빨간선과 초록선이 맞지 않듯이, container안에 들어가버리게 되면 자꾸 padding값이 생기고 만다.

2. 그럼 전체 레이아웃에서 container의 padding값을 아예 없애버려서 두 라인을 맞춰준 뒤, 각 페이지의 내용마다 padding값을 준다
   ❌ -> 이렇게 되면 한 번에 통용하는 레이아웃을 건드리게 되고, 각 페이지마다 padding값을 설정해줘야 한다는 번거로움이 애써 생겨버리고 만다.. 협업에는 더더욱 불편한 점..

3. 그럼 Header 안에서 2번을 구현한다면?
   구현 방법은 Header안에서 좌측에 표현되는 메뉴 경로들을 정의해놓은 menuItems.ts 파일에 title, desc 요소를 추가해준다. 이후 next.js의 usePathName을 이용해 pathname을 불러오고, 일치하는 경로의 title과 desc를 불러오게끔 한다.
   ❌ -> 그럼 좌측 메뉴로 정의되지 않고 표현되는 상세페이지의 설명은 어떻게 할 것인가..
   

4. 억지를 부려보자.. header에서 divider만 나타내주고, 각 페이지에서 설명을 구현한다. 다만 divider 안에 설명이 들어가야하므로 position:absolute로 에라 모르겠다 겹쳐버리자!
   ❌ -> 당연히 안 된다. 레이아웃의 z-index가 훨씬 강하므로, 어떻게 설정해줘도 다 안으로 숨기 마련이다..

5. 각 페이지에서 설명을 호출하지 않는다. 대신, 레이아웃단에서 Header 밑에 컴포넌트를 생성하고, 그 컴포넌트 안에 설명을 구현한다. 이 설명은 pathname을 비교하여 가져오되, const.ts로 설명을 한군데에 모두 정의해놓는다.
   ✔️ -> 결국 이 방식을 택했다. 하지만 이 방식이 맞나 고민한건, 사용하고 있던 템플릿의 구조는 각 페이지마다 설명을 구현했다. 과연 pathname을 계속 비교해가며 페이지의 설명을 불러오는 것이 맞는걸까? 고민했지만..
   이 방식으로 하면, const 파일로 정의하여 협업 및 유지보수에 편할 뿐더러, 2번의 padding값에 끙끙 댈 필요가 없어졌다..

마치며

결국 어떻게 보면 라인 .. 선 하나의 길이가 안 맞아서 고생고생 한 것 같지만
그래도 그 안에는 처음 바늘에 실 넣을 때 효과적으로 잘 넣어보자! 라는 생각하에 수많은 고민이 있었다.. 어떻게 보면 어이없는 고민이지만, 이 방법보다 더 효과적인 방법이 있을테고, 이 방법이 꼭 정답이 아니라는 것을 안다. 아무튼 오늘의 고민 기록!