[FU-219] service tutorial

[eujin-shin]

체크리스트

• 불필요한 주석 처리가 없는가?

작업 내역

• 사이드 메뉴 추가, 헤더 및 페이지 레이아웃 개편
• 서비스 튜토리얼 추가
• 회원가입시 서비스 튜토리얼 트리거

고민한 사항

(웹에서 구현하는 튜토리얼 관련해 레퍼런스를 많이 못 찾았다 보니 시행착오가 많았어서 🙄 다 읽어 보진 않으셔도 괜찮을 것 같습니다!)

• 튜토리얼 진행 상태: 쿼리 파라미터로 확인
  처음에는 튜토리얼 진행 여부를 알아야 하는 각각의 요소에서 searchParam을 확인하고자 하였으나, 이때 관리 포인트가 늘어나고 특히 기존에 profileName을 받던 로직(쿼리 파라미터로 확인해 Localstorage에 저장한 뒤, searchParam을 제거한 url로 리다이렉트)과 충돌이 예상되었습니다.
  따라서 사이드 메뉴 레이아웃은 메인 페이지를 제외한 페이지에 거는 것으로 수정한 뒤, 메인 페이지에서는 searchParam을 확인하는 최상위 컴포넌트의 하위에 사이드 메뉴를 직접 넣어서 tutorial 상태를 prop으로 전달해 주는 방식으로 변경했습니다. (회원가입 직후에 이동하는 링크에도 쿼리 파라미터를 수정함으로써 가입시 자동으로 튜토리얼이 시작되도록 구현했습니다.)

• 특정 요소 하이라이트하기
  튜토리얼 진행시 기존 페이지에 오버레이를 덮은 다음 위에 모달이 올라오는데, 이때 기존 페이지의 특정 요소만 하이라이트해 주기 위해서는
  (1) 특정 요소를 오버레이 위로 올린다
  (2) 오버레이를 특정 요소 제외하고 덮는다
  두 가지 방법이 있을 것 같았습니다. z-index를 쓰면 간단하게 (1)번 방식을 구현할 수 있지 않을까 했지만 모달의 경우 portal에서 렌더링 되어 기존 DOM 계층 자체를 벗어나기 때문에 불가능하다는 점을 간과했습니다… 🫠 결국 css mask 속성을 사용해 강조할 요소의 페이지상 좌표를 기준으로 오버레이를 제외할 영역을 설정해 주는 방식으로 구현했습니다!

• 튜토리얼시 스크롤 조정하기
  위 문제의 처리 방식과 연결되어,,, 적절한 위치를 하이라이트해 주기 위해서는 튜토리얼시 무조건 스크롤이 최상단에 위치해야 한다는 조건이 생겼습니다. 다만 튜토리얼 트리거와 동시에 scrollTop을 수행해 줘도 제대로 맨 위로 이동하지 않는 문제가 있었는데, (아마 fixed로 고정된 헤더가 있어서 문제가 된 것 같습니다 🤔) scroll-margin-top css 속성을 활용해 해결되었습니다! 👍

리뷰 요청사항

• 시급도: 높음
  수요일 마케팅 시작 이전에 릴리즈 버전으로 반영이 필요합니다!
• 로직은 크게 변경된 점이 없지만 🙄 새롭게 작성한 안내 텍스트가 많기도 하고, 튜토리얼시 사용되는 더미 데이터를 임의로 작성해 놔서…! 하단 스크린샷과 gif 참고해 주시면 감사하겠습니다 🙇

스크린샷

[yuseok0215]

고생 많았어! 너무 잘 만들어줬다😊
튜토리얼에 아이콘까지 추가되니깐 더 생동감 있는 서비스가 된 것 같아👍

질문이 있는데 먼저, 사이드바가 나와있는게 디폴트인지 궁금해!(디폴트여야 사이드바를 여는 행위 없이 사용하기 더 편할 것 같아서!)
두 번째는 GIF 보니깐 튜토리얼은 언제든지 다시 볼 수 있다고 되어 있는데 '튜토리얼 그만 보기' 버튼을 눌러도 항상 메인 페이지를 들어갔을 때 저렇게 보여지는 건지, 아니면 '튜토리얼 그만 보기' 버튼을 누르면 영구적으로 해당 사용자는 튜토리얼을 못보게 되는 건지 궁금해!

[eujin-shin]

고생 많았어! 너무 잘 만들어줬다😊 튜토리얼에 아이콘까지 추가되니깐 더 생동감 있는 서비스가 된 것 같아👍

질문이 있는데 먼저, 사이드바가 나와있는게 디폴트인지 궁금해!(디폴트여야 사이드바를 여는 행위 없이 사용하기 더 편할 것 같아서!) 두 번째는 GIF 보니깐 튜토리얼은 언제든지 다시 볼 수 있다고 되어 있는데 '튜토리얼 그만 보기' 버튼을 눌러도 항상 메인 페이지를 들어갔을 때 저렇게 보여지는 건지, 아니면 '튜토리얼 그만 보기' 버튼을 누르면 영구적으로 해당 사용자는 튜토리얼을 못보게 되는 건지 궁금해!

(1) 닫혀 있는 게 디폴트 상태야! 근데 말해 준 대로 열려 있는 게 더 나을 것 같아서 바꿔 놓을게 👍
(2) 튜토리얼 그만 보기를 눌러도 메인 페이지에서 사이드바를 열면 계속 남아 있어! 지금 있는 버튼은 튜토리얼 진행을 멈추는(?) 버튼인데 듣고 보니 '그만 보기'는 뭔가 앞으로 그만 보겠다는 말처럼 느껴지긴 한다 🤔 닫기…? 같은 표현이 더 알맞은 것 같기도 👀

[rheeri]

유진아 고생 넘무 많았다!! 🙇‍♀️💗👏✨ 튜토리얼 생기니깐 너무 좋은데?!
사이드바 구현도 이래저래 건드릴 코드가 많았을텐데 깔꼼하게 잘 나와서 👍!!

의견은 일단 헤더에 서비스안내/고객센터에 아이콘 들어가도 좋을 것 같은데 지금이 더 깔끔하다고 생각하면 유지해도 좋아! 그리구 로그아웃이 지금 빨간색으로 하이라이트 되어있어서 그런지 사이드바에서 제일 눈에 띄는 감이 있는데 이것도 아이콘(나가기 모양)+검정글씨 or 로그아웃 버튼으로 대체해도 괜찮지 않을까 하는 의견이 있어!!

이건 뭐라도 피드백 해주려고 생각해낸거고 사실 이미 넘 완벽 그자체.. ✨

[eujin-shin]

유진아 고생 넘무 많았다!! 🙇‍♀️💗👏✨ 튜토리얼 생기니깐 너무 좋은데?! 사이드바 구현도 이래저래 건드릴 코드가 많았을텐데 깔꼼하게 잘 나와서 👍!!

의견은 일단 헤더에 서비스안내/고객센터에 아이콘 들어가도 좋을 것 같은데 지금이 더 깔끔하다고 생각하면 유지해도 좋아! 그리구 로그아웃이 지금 빨간색으로 하이라이트 되어있어서 그런지 사이드바에서 제일 눈에 띄는 감이 있는데 이것도 아이콘(나가기 모양)+검정글씨 or 로그아웃 버튼으로 대체해도 괜찮지 않을까 하는 의견이 있어!!

이건 뭐라도 피드백 해주려고 생각해낸거고 사실 이미 넘 완벽 그자체.. ✨

헤더쪽 아이콘은 넣으려고 고민해 봤는데 일단 마땅한 아이콘을 못 찾았고… 🥲 그래서 아이콘만 있을 때 직관적으로 안 보이면 텍스트랑 같이 있어야 할 것 같았는데, 그렇게 넣으려니까 조금 덜 깔끔해지는 것 같더라고 (ㅜㅜ) 로그아웃 버튼은 반영해 둘게!! 좋은 것 가타 👍