✍ 주요안건
- 컴포넌트를 어떻게 나눌지 정하기
- 컴포넌트 개발 순서 정하기
- 우선순위, 분배
📑 회의 내용
컴포넌트를 어떻게 나눌지 정하기
경미님 : atom, organism, page 3가지로 나누기.
이벤트는 atom에 들어가지 않는다. 같은 컴포넌트를 돌려쓰면서
재사용되는 애들을 atom에 놓고. organism들이 모여서 페이지.
정민님 : atom design 적용해보면서 atom이 꼭 필요한지에 대한 의문
사휘님 : 크게 나누면 3가지. 경미님과 비슷. base, domian, page
- base : 자기가 속해 있는 도메인외의 다른 곳에서도 사용할 수 있는 애들(재사용할 수 있는 애들)(많이 쓰이는 input, icon 같은)
- domain : organism과 비슷. base들과 나머지들이 합쳐져서, base가 아닌 것들은 만들어서
(ex. 메인페이지 : 헤더 카테고리 내부, 유저리스트, 포스트 아이템, 포스트리스트)
도메인들이 모여서 하나의 페이지
- 헤더는 모든 페이지에서 거의 다 쓰이니까 템플릿으로 빼서 하면 좋지않을까?
- 3단계로 나누기로 결정
❓레벨(회원등급) 어떤식으로 나눌지 + 댓글과 메인페이지에서도 레벨이 같이 보이게 할지 생각해봐야함
컴포넌트 구조
[1단계 - 제일 작으면서 공통으로 쓰이는 애들] -base
Input
IconButton
Icon
TextButton
Avatar
Text
Image
IconCheckbox
Badge
TextCheckbox
Logo
ToggleButton
ImageInput
SpeechBubble
[2단계 - 덩어리] - domain
CategoryNav
PostItem
SignUpForm
( useform hook)
LoginForm
AlarmItem
UserInfo
EditForm
FollowerItem
FollowingItem
DMItem
DMList
MessageContainer
IconCheckForm
TextCheckForm
PostInfo
CommentForm(협업제안 포함)
CommentItem
[3단계 - pages]
만들어야 할 것 : hook, context
컴포넌트 우선순위, 분배
[참고]
디자인 시스템 참고해서 만들기
스토리북 업데이트: 브랜치 따로 파서 진행
📌1단계(base)부터 설계 시작
- 스타일 신경쓰지말고 만들기
- 각자 하나 만들고 남은 base 컴포넌트들 중에서 만드는 방식으로 작업
- 하루하루 슬랙 스레드에 댓글 남기기
- 그때 그때 아직 안만든 컴포넌트 중에 뭐 만들건지 댓글로 남기기 :
"Input" 시작합니다~
- 만들면서 헷갈리거나 애매한 것들 바로 팀원들이랑 공유하고 얘기하기 (+ 슬랙에도 기록하기)
- 브랜치 예시 :
base/Input
📢 회의결과
해보고 어려우면 바꿔도 되고 슬랙에 꼭 기록하기.
이렇게 해보고 비효율적이면 방식 변경
막히면 꼭 팀원들과 나누기! (시간 낭비❌)