Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@NYeonK
Copy link
Contributor

@NYeonK NYeonK commented Aug 14, 2023

  • 브랜치명, 브랜치 알맞게 설정
  • Reviewer, Assignees, Label, Milestone, Issue(PR 작성 후에) 붙이기
  • PR이 승인된 경우 해당 브랜치는 삭제하기

📌 내용

  • 카드 뷰의 코치마크를 구현합니다.
  • 유저에게 1번만 보여주기 위해 localStorage에 저장했습니다.

📸 스크린샷

mobile (4)

@NYeonK NYeonK self-assigned this Aug 14, 2023
@NYeonK NYeonK linked an issue Aug 14, 2023 that may be closed by this pull request
4 tasks
@NYeonK NYeonK requested a review from ilmerry August 14, 2023 15:00
Comment on lines +5 to +14
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");
}
}, []);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 훅을 코치마크 키로 하드코딩 하는 거랑,
세션 키를 받아서 로컬스토리지로써 state를 조작하는 훅으로 만드는 거랑
장단점이 어떻게 될 것 같나요?

Copy link
Contributor Author

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";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 이런걸 choach mark 라고 하는군요! 배워갑니다👍

Comment on lines 22 to 34
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>
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

근데 이 Modal 컴포넌트, 계속 이렇게 theme 추가해서 쓰는게 재사용하고 거리가 멀다는 생각이 들어요
차라리 제어권을 호출측에 넘기는 건 어떨지 생각해보면 좋을 것 같아요! 토스트, 모달, 코치마크 전부!
토스의 useOverlay

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오왕 좋은 인사이트 감사해요👍🌟
이번 스프린트가 끝나고 리팩토링해보면 좋을 것 같슴니다! 끝나고 함 이야기 해봐용🙇‍♀️🙇‍♂️

@NYeonK NYeonK merged commit d11f703 into release/2.1.0 Aug 15, 2023
@NYeonK NYeonK deleted the feat/#317-coach_mark branch August 15, 2023 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ CardCollection - MenuUpdate ] 새로운 메뉴 알림 기능 구현

4 participants