-
Notifications
You must be signed in to change notification settings - Fork 1
[ATOMIC] 컴포넌트 정리
각 컴포넌트가 어떤 기능을 가지고 있는지, 얼마나 반복되는지에 따라 구분합니다.
여기서 기능은 각 UI 요소가 가지고 있는 능력을 말합니다. **컨테스트(맥락)**는 UI 요소 또는 UI 요소로 이루어진 컴포넌트가 인터페이스에서 가지는 목적을 말합니다. (예시)
- 기능: 이미지
- 컨텍스트: 이미지 배너, 썸네일
input, button, label과 같이 분해할 수 없는 화면 요소로 가장 많이 재사용됩니다. 하지만 디자인에 따라 가상요소 혹은 다른 Atoms 요소가 이루어진 기본 컴포넌트가 되기도합니다. (예: checkbox 아이콘 대체)
HTML element 이외에 폰트나 <head> 내부의 메타데이터 태그와 같이 단일 컴포넌트로 사용하기는 힘든 추상적인 요소들도 포함됩니다.
- Link (next/link & LinkButton.tsx)
- form
- button
- label
- input : text, number, checkbox, radio, image-file, password, email, search
- date-range, select(single, multi, creatable), text rich editor
- image : 프로필 이미지, 썸네일, 아이콘
- text : 섹션(section) 제목, 키워드 칩, 캡
Atom들을 결합하여 주변 컨텍스트에서 독립적이거나 컨텍스트를 이루는 하나의 특정한 특징 혹은 기능을 가집니다. 기능 자체를 이름으로 가지기도 합니다. 단독으로 사용하기 어려운 Atom의 경우 Molecule 내 컴포넌트로 자주 재사용됩니다.
- form의 하나의 입력 요소 (label text + input) - 버튼 디자인의 체크박스, 라디오 입력
- 드롭다운 메뉴 => 트리거 버튼, 드롭다운 메뉴 레이어(+ 백드롭 레이어)로 구성
- 알림 바 => alert content, close icon-button...로 구성
- 모달 포탈 => dimmed backdrop, 모달 컨텐츠를 보여줄 영역 상자로 구성
- 페이지네이션 => 이전 페이지, 다음 페이지 버튼, 페이지별 이동 버튼으로 구성
하나의 영역과 특정 컨텍스트를 가집니다. 하나 이상의 Molecule이나 Atom이 결합되어 만들어져 하나 이상의 기능을 가질 수 있습니다. 여러 페이지에서 사용하고 접근할 수 있습니다.
- 스터디 카드 아이템 => 썸네일, 스터디명, 스터디장 정보(프로필 이미지, 이름), 좋아요 버튼, 정보 태그(모집중, 모집 인원, 마감일)
- 커뮤니티 글 리스트 아이템 => 커뮤니티 카테고리, 글 제목, 작성자 프로필, 조회수, 좋아요 수(, 모집 여부 표 - 스터디홍보/프로젝트 모집의 경우)
- 검색창 => search input, 카테고리 선택창(select), 검색 아이콘 버튼
- 콘텐츠 영역 => 스터디 상세 설명 글, 커뮤니티 글 작성으로 저장된 내용을 상세 화면에서 화면에 출력
- 댓글 요소들 : 댓글 입력창(프로필 이미지, 입력 textarea, 취소/등록 버튼), 댓글 아이템(작성자 프로필, 내용, 작성일시, 답글쓰기(, 수정, 삭제 - 본인 댓글인 경우))
각각의 기능을 가진 Molecule이나 Atom이 결합되어 만들어진 Organism이지만 거의 모든 페이지, 혹은 특정 영역 내의 페이지에서 공통으로 사용되는 레이아웃 컴포넌트입니다. 각각이 단독으로 사용되는 경우 없이 하나의 레이아웃이 layout.tsx에서 사용됩니다.
- 기본 레이아웃 => 헤더(w/ GNB) + 컨테이너{컨텐츠 영역} + 푸터
- 헤더 => 로고 링크, 네비게이션 메뉴, 프로필 버튼, 플로팅 마이 메뉴(프로필 버튼 클릭시)
- 푸터 => 로고 이미지, 메뉴(메뉴 제목, 메뉴 링크)
- 컨텐츠 컨테이너 => breakpoints에 따른 너비 설정 + mx-auto
- 사이드바 레이아웃 => 사이드바 네비게이션(Local Navigation - NavItem, NavArea) + 컨텐츠 영역(AsideContentArea)
page를 이루는 구분되는 요소입니다. page에서 구현되는 각 영역의 구성을 결정합니다. 재사용되는 빈도가 낮기 때문에 특정 페이지에서만 사용하는 경우 common에서 관리하지 않고 특정 페이지 내 _componenets 폴더 아래에서 관리합니다. 또는 클라이언트 컴포넌트 사용으로 분리되어야하는 경우 역시 _components 폴더 아래에서 관리합니다. templates 컴포넌트까지의 공통 컴포넌트 내에서 직접 데이터를 가져오거나 fetch post 하지 않고 외부에서 전달받은 데이터를 보여주기 위한 틀로 사용합니다.
- 댓글 영역 => 댓글 영역 요소들을 모은 전체 댓글 영역 레이아웃
- 리스트 => 스터디 카드 리스트
- 카테고리별 스터디 탐색 섹션 => 리스트
- 메인 배너 => 배너 이미지, 검색창
- 그 외 스터디 분류 카테고리 필터링을 위한 탭 버튼, 공유 버튼, 특정 스터디 카드 레이아웃(아이템, 리스트)
- 기타 인터랙션으로 모달 포탈/알림바(notification) 호출이 필요해지는 클라이언트 컴포넌트들...
Layout과 Tamplate, Organism을 사용하여 실제 데이터를 표현합니다. 다른 곳에서 반복되지 않습니다. Next.js의 앱 라우터는 src/app/**/page.tsx 하나하나가 페이지로 라우트되기 때문에 현재 프로젝트에서 따로 common 폴더에서 관리하지 않습니다.