Feat/#312 card menu #313
Feat/#312 card menu #313
Conversation
| <IcMenuBtn isLighted={false} /> | ||
| </St.ButtonWrapper> | ||
| <St.ButtonWrapper> | ||
| <IcShareBtn isLighted={false} /> |
There was a problem hiding this comment.
이렇게 static하게 쓸거면 아이콘에 변수를 인터페이스로 빼낼 이유가 있나요???
There was a problem hiding this comment.
이 부분은 추후에 개발될 업데이트 알림을 위해 선언해둔 변수인데, isLighted ?: boolean 으로 변경하는게 좋겠네요!
| import St from "./style"; | ||
|
|
||
| interface LoginCheckProps { | ||
| export interface LoginCheckProps { |
There was a problem hiding this comment.
props를 재사용하는게 맞다고 생각들지 않아요.
당장에 UI가 바뀐다면? 특정 프로퍼티가 안들어온다면? 그 때 다시 의존성을 풀고 수정하나요??
"가짜 중복"의 형태를 띄고 있지는 않은가 고민이 필요해보여요
There was a problem hiding this comment.
오.. 좋은 의견이에요 props 내용이 같다고 중복이 아님을 명심해야겠군요 감사합니다
|
|
||
| import { activeStateToast } from "../../../core/atom/menuBar"; | ||
|
|
||
| export default function useToast() { |
| const { closeHandler, fireToast } = props; | ||
| const setActiveToast = useSetRecoilState(activeStateToast); |
There was a problem hiding this comment.
fireToast는 언제 쓰나요..?
fireToast랑 setActiveToast랑 따로 선언해서 쓰는 게 정녕 최선의 인터페이스인가요?
There was a problem hiding this comment.
앗 로직을 변경하면서 미처 fireToast를 지우지 못했어요. setActiveToast로 메시지를 설정하고, fireToast로 토스트메시지 트리거를 하려고 했었는데, 비동기때문에 메시지가 set되지 않았음에도 toast되는 오류가 있었습니다.
그래서 로직을 다음과 같이 변경했습니다. setActiveToast로 메시지를 설정함과 동시에 훅 내부의 useEffect가 동작하게 만들어, 결론적으로 fireToast는 토스트가 꺼지고 일정시간 뒤에 닫히게 만드는 역할만 수행하게 됩니다. 다시한번 말씀드리자면, Toast 메시지는 setActiveToast를 호출함과 동시에 시작되어요!
더 나은 로직에 대해 의견 주시면 감사드리겠습니다.
| const [activeToast, setActiveStateToast] = useRecoilState(activeStateToast); | ||
| const [isToastOpen, setIsToastOpen] = useState(false); |
There was a problem hiding this comment.
activeToast는 단순히 message, duration만 담고 있는 state라서 isToastOpen이 있어야 컴포넌트를 숨기고 보이게 할 수 있어요!
| }, [activeToast]); | ||
|
|
||
| useEffect(() => { | ||
| setActiveStateToast(activeToast); |
| useEffect(() => { | ||
| setActiveStateToast(activeToast); | ||
| fireToast(); | ||
| }, [activeToast, setActiveStateToast, fireToast]); |
|
모듈은 인터페이스로써 사용자(개발자)에게 "선언적인" 사용을 보장해야 해요. useToast를 사용하는 사람은
|
|
같은 의미로 구현부에서의 어떤 동작을 의미하는가를 "자연어"로 한 번 스스로 설명해보는 것도 좋은 방법이에요 정답 없습니다! 저도 얕게 생각한 것들이고, 같이 더 생각해보면 도움 될 것 같아서 리뷰 남겼던 것이에요!!!!!~ |
| <ToastProvider> | ||
| <Router /> | ||
| {isActiveModal && <ModalStyle />} | ||
| </ToastProvider> |
There was a problem hiding this comment.
St.MobileContainer의 영향범위 밖인데 그래도 괜찮을까요??
NYeonK
left a comment
There was a problem hiding this comment.
너무너무 수고하셨습니다~!! 커밋도 잘 나눠줘서 코드 변해가는 과정 잘 봤습니다👏👏
📌 내용
CardCollection - CardMenu, MenuModal을 구현합니다.
Common - useToast 훅을 구현합니다.
activeToast라는 recoil state에 활성화될 메시지message와 지속될 시간duration을 초단위로 입력한뒤(2.5초 이면 2.5 입력) setActiveToast를 해주면 자동으로 활성화됩니다.📌 질문할 부분
CardCollection컴포넌트에서 선언하여 개발했습니다. 혹시 더 좋은 의견이 있다면 주셔도 좋아요!📸 스크린샷