-
Notifications
You must be signed in to change notification settings - Fork 3
Feat/#317 coach mark #319
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/#317 coach mark #319
Conversation
| export default function useCoachMark() { | ||
| const [isOpened, setIsOpened] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const isCoachMarkShown = localStorage.getItem(COACH_MARK_SESSION_KEY); | ||
| if (!isCoachMarkShown || isOpened) { | ||
| setIsOpened(true); | ||
| localStorage.setItem(COACH_MARK_SESSION_KEY, "true"); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 훅을 코치마크 키로 하드코딩 하는 거랑,
세션 키를 받아서 로컬스토리지로써 state를 조작하는 훅으로 만드는 거랑
장단점이 어떻게 될 것 같나요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
코치마크 키로 하드 코딩은 어떻게 하는
걸 말하나요?👀
| import * as St from "./style"; | ||
|
|
||
| type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM"; | ||
| type ModalTheme = "DEFAULT" | "WHITE_BOTTOM" | "GRAY_CENTER" | "GRAY_BOTTOM" | "COACHMARK"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아하 이런걸 choach mark 라고 하는군요! 배워갑니다👍
| if (theme === "COACHMARK") | ||
| return ( | ||
| <ModalPortal> | ||
| <St.CoachMarkRoot> | ||
| <St.CoachMarkModal ref={outClickCloserRef}> | ||
| <St.CloseBtn type="button" onClick={closeHandler}> | ||
| <IcModalCloseBtn /> | ||
| </St.CloseBtn> | ||
| <St.ModalContents>{children}</St.ModalContents> | ||
| </St.CoachMarkModal> | ||
| </St.CoachMarkRoot> | ||
| </ModalPortal> | ||
| ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
근데 이 Modal 컴포넌트, 계속 이렇게 theme 추가해서 쓰는게 재사용하고 거리가 멀다는 생각이 들어요
차라리 제어권을 호출측에 넘기는 건 어떨지 생각해보면 좋을 것 같아요! 토스트, 모달, 코치마크 전부!
토스의 useOverlay
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오왕 좋은 인사이트 감사해요👍🌟
이번 스프린트가 끝나고 리팩토링해보면 좋을 것 같슴니다! 끝나고 함 이야기 해봐용🙇♀️🙇♂️
📌 내용
📸 스크린샷