🎨 공용 컴포넌트 추가 (드롭다운, 헤더, 페이지 컨테이너)

[suhwan2004]

CheckList

• [ V] gap을 이용하여 자식 요소간의 간격을 제어하였나요? (iOS 14 미지원으로 gap -> space between 적용)

작업 이유

• 공통 컴포넌트(드롭다운, 헤더, 페이지 컨테이너 추가)
• 프로젝트 내 svgr 적용

작업 사항

1️⃣ 드롭다운 컴포넌트 추가

Dropdown 컴포넌트의 경우, Shared에 추가하였으며 Dropdonw을 열 버튼과 클릭 시 누르면 나오는 메뉴의 위치(top, right로 자체조정되는...)의 경우 prop으로 받아서 처리하는 것으로 구현해두었습니다.

왠만하면, left, right, middle 다음과 같이 position이라는 const를 만들어서 처리하려 했는데 피그마 확인 시에 right의 끝으로 트리거 버튼이 보이는 케이스가 있으나 이게 진짜 끝에 일자로 붙지 않아서 이건 자체적으로 prop으로 넘겨줘야 되겠구나 생각했던 것 같습니다

2️⃣ 헤더 컴포넌트 구현

Header 컴포넌트의 경우 PageContainer에서밖에 사용되지 않는 컴포넌트이나 일단 분리의 목적으로 Shared에 추가해두었습니다. 이건 PageContainer에 넣을지에 대한 여러분의 의견이 궁금합니다.

페이지 컨테이너의 부속 느낌이다 보니, stories 파일은 따로 만들지 않았습니다.

3️⃣ 페이지 컨테이너 컴포넌트 구현

PageContainer의 경우, Header 컴포넌트를 참조하고 있는데 shared에 넣을 시에 동일 계층의 컴포넌트 참조가 되어 widget에 넣어두었습니다.

기본적으로 fixed를 걸고, 헤더의 height 만큼 (현재는, 저희 프로젝트내 헤더는 44px 사용되는 중) margin top을 컨테이너 내 컨텐츠영역을 감싸는 div에 주었습니다.

래핑하는 컴포넌트이다 보니, stories 파일은 따로 만들지 않았으나, page.tsx에 실적용 시켜두었습니다 ( 헤더 컴포넌트도 여기서 확인 가능합니다!)

4️⃣ 프로젝트 내 SVGR 적용

처음에는 디스코드로 svg sprite를 도입하는 방향으로 얘기를 나누었었는데요. svg sprite를 위한 provider를 만들어서 실제 적용하였을 때 document.body에 react의 포탈로

export default function GlobalSVGProvider() {
  return createPortal(spliteSvgCode, document.body);
}

이렇게 spliteSvgCode라는 svg아이콘 덩어리 태그를 넣어주는 로직이 있는데 이부분에서 document의 경우 ssr내 존재하지 않기에, mounted되어 돔이 생성된 후에 이 작업을 해야 해결이 가능했습니다.

아래 참조 url 내 방식처럼 useEffect를 사용하여 이 부분은 해결하였으나, 실제 렌더링 시에 useEffect에서 moutned된 것이 체킹되기 전인 1~2초동안 아이콘이 화면에 안보이는 이슈가 있었습니다.

그래서, 결국은 svg sprite를 포기하고, svgr 세팅을 진행했고 연계로 다음과 같은 작업도 추가로 진행했습니다.

• turbopack을 쓰는 next.js에 맞춰 추가 세팅 (next.config.mjs 에서 확인 가능합니다.)
• storybook에서 svgr 적용 안되는 이슈 수정 (storybook 폴더의 main.ts에서 확인 가능합니다)

참고한 주소입니다.
svg sprite 구성
https://velog.io/@adultlee/Svg-sprite-%EA%B8%B0%EB%B2%95%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%82%B4%EA%B0%80-%EC%89%AC%EC%9A%B4-Icon-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%9C%EB%B0%9C

svg sprite ssr 내 문제 해결 방법
https://coggiee.medium.com/svg-sprite-icon-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%9C-hydration-error-%EC%B2%98%EB%A6%AC-99f082f08331

리뷰어가 중점적으로 확인해야 하는 부분

• 공용 컴포넌트의 재사용성과 확장성이 충분한가요?
• 공용 컴포넌트의 props 구조가 효율적인가요?
• 공용 컴포넌트의 폴더 위치가 합당한가요?
• svg sprite 유보 및 svgr 도입에 대해 놓친 것은 없나요?
  
  

발견한 이슈

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-9.d1rrzjx2upcmxq.amplifyapp.com

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[BangDori]

• FSD Architecture에서는 다른 레이어에서 모듈을 불러올 때 Public API를 통해 모듈을 불러오도록 규칙을 지켜주셔야 합니다.
• 공용 컴포넌트의 폴더 위치와 근거가 합당했다고 생각합니다.
• 우선 현재는 PR에 대해서는 svgr 방식으로 병합하되 회의를 통해서 svg sprite와 같은 기법의 도입에 대해 고민할 필요가 있다고 생각합니다! (svg-sprite의 장점이 너무나도 크기에...)

[BangDori]

이전 리뷰에서 놓친 내용이 있어서 아래 리뷰들도 같이 확인 부탁드릴게요!!!

[BangDori]

수환님 코드를 리뷰하면서 이해하려고 많은 고민을 했는데, 고민한 시간이 전혀 아깝지 않았던 시간이였네요. 수환님이 얼마나 범용성과 확장성을 고려하시면서 코드를 작성하시는지에 대해 배울 수 있었습니다..!

이번 PR에서 많은 배움을 주셔서 감사합니다. 현재 Resolve되지 않은 코멘트들은 수환님이 확인하시고 Resolve 처리 하시면 될 거 같습니다!! 고생하셨습니다