Conversation
Leeyoonji23
requested review from
jisooooooooooo,
kwonsaebom and
shinjigu
as code owners
빌드 결과빌드 실패 😵 |
🎨 스토리북 배포 완료!변경된 컴포넌트의 디자인을 확인해주세요. |
빌드 결과빌드 성공 🎉 |
🎨 스토리북 배포 완료!변경된 컴포넌트의 디자인을 확인해주세요. |
jisooooooooooo
left a comment
jisooooooooooo
left a comment
There was a problem hiding this comment.
네모의 지옥..🟧🟩🟨
넘넘 ! 고생하셨숨당! !!
There was a problem hiding this comment.
p3) width: 'fit-content' 가 모든 variant에 중복되고 있어 baseGrid에 포함시켜도 좋을 거 같은데 따로 빼두신 이유가 있을까요?
빌드 결과빌드 성공 🎉 |
🎨 스토리북 배포 완료!변경된 컴포넌트의 디자인을 확인해주세요. |
kwonsaebom
left a comment
kwonsaebom
left a comment
There was a problem hiding this comment.
너무 너무 수고 많으셨습니다 !!
코드가 너무 깔끔해서 많이 배워 갑니다 .. 배움에는 끝이 없네요 ..
| import * as styles from './Mandalart.css'; | ||
| import { MOCK_MANDALART_DATA } from './mock'; | ||
|
|
||
| export type Cycle = 'DAILY' | 'WEEKLY' | 'ONCE'; |
There was a problem hiding this comment.
p3) 여기 부분은 다른 컴포넌트에서도 사용돼서 타입으로 따로 분리해주셔도 좋을 것 같아요 ..!
There was a problem hiding this comment.
이건 따로 이슈 파서 진행하는 게 좋을 것 같아요!
새봄 님이 만드신 CycleDropDown에서 사용돼서 한꺼번에 수정하도록 하겠습니다람쥐
| }, | ||
| selectors: { | ||
| '&[data-completed="true"]': { | ||
| border: '0.3rem solid #305088', |
There was a problem hiding this comment.
p2) 여기 부분 색상 토큰 처리 하면 어떨까요 ?!!
There was a problem hiding this comment.
이 부분 디쌤들이 의논하고 알려주신다고 하셔서 추후에 수정하겠습니다.... (to be continued..)
shinjigu
left a comment
shinjigu
left a comment
There was a problem hiding this comment.
대대적인 리팩토링이네요 ㅡㅡ 특히 SQUARE_TYPES 객체와 팩토리 함수 패턴 너무 좋아요 !!
색상 토큰화와 타입 분리 작업 마무리까지 파이팅입니다 ~~ 너무 너무 너무 수고하셨서요 😎
| argTypes: { | ||
| type: { | ||
| control: 'select', | ||
| options: ['TODO_SUB', 'TODO_MAIN', 'TODO_EDIT', 'MY_MANDAL'], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
p5) 스토리북에서 직접 타입을 선택할 수 있게 한 게 너무 좋네요 !! 컴포넌트 테스트가 훨씬 편해질 것 같아요 ㅡㅡ
| const handleGoalClick = (position: number) => { | ||
| setSelectedGoal(selectedGoal === position ? null : position); | ||
| onGoalClick?.(position); | ||
| }; |
There was a problem hiding this comment.
p3) onGoalClick 호출을 상태 업데이트 전에 하는 게 좋지 않을까요 ?? 부모 컴포넌트에서 최신 상태를 받을 수 있도록 하면 좋을 것 같다는 생각이 들었습니다 !!
| const SQUARE_TYPES = { | ||
| TODO_SUB: { | ||
| width: '9.6rem', | ||
| height: '9.6rem', | ||
| mainFont: fonts.body04, | ||
| subFont: fonts.caption01, |
|
default, hover 상태일 때 만다르트 박스 색상이 둘이 바뀐 건지 피그마랑 다른 거 같은데 확인 부탁드려욤 |
빌드 결과빌드 성공 🎉 |
🎨 스토리북 배포 완료!변경된 컴포넌트의 디자인을 확인해주세요. |
4 participants
💡 Summary
✅ Tasks
만다라트 크기 별 분기 추가했습니다.
96px -> TODO_SUB
196px -> TODO_MAIN
160px -> TODO_EDIT
298px -> MY_MANDAL
뷰에 쓰이는 쓰임대로 네이밍 했는데, 혹시 더 좋은 의견 있으시면 주시면 감사하겠습니다!
border(테두리)는 지구가 말한 대로 토큰 사용하려고 했는데, 토큰 자체가 gradient라 background-image로만 넣을 수 있다고 해서 일단 헥스값으로 넣었습니다.
좋은 방법 알려주세요!
👀 To Reviewer
이렇게 사용합니다.
📸 Screenshot
스토리북으로 확인 가능합니다.