✨ 신고하기 모달, 공통 컴포넌트(체크박스, 라디오) 구현, 피드 신고 모킹 API Handler 추가, Storybook 내 MSW 세팅

[suhwan2004]

CheckList

• gap을 이용하여 자식 요소간의 간격을 제어하였나요? (iOS 14 미지원으로 gap -> space between 적용)

작업 이유

• 신고하기 기능 추가 필요로 인해 신고하기 모달 구현
• 신고하기 및 다른 영역에서도 사용되는 공통 컴포넌트인 radio, checkbox 구현
• 신고하기 기능에 사용될 모킹 필요로 인한 모킹 api handler 추가
• 스토리북 내, MSW사용이 가능하도록 세팅이 필요하기에 해당 세팅 추가

작업 사항

1️⃣ 신고하기 모달 구현

신고하기 모달의 경우, 특정 비즈니스 로직(피드를 신고하는 것)이 담겨 있기 때문에 feature 폴더에 위치해두었습니다!
신고하기 클릭 시 동작되는 api 로직의 경우 모킹 api를 넣어둔 상태입니다.

2️⃣ 공통 컴포넌트 ( 체크박스, 라디오 ) 구현

둘 다 shared에 위치해두었습니다.특이사항은 없으나 체크박스의 경우, 좋아요(빈하트, 채워진 하트)등으로 앞으로 아이콘의 확장 여지가 있는 것 같습니다. 라디오도 엄청 늘어나진 않겠지만 어느정도 동일한 것 같구요.

다만, on, off 아이콘을 prop으로 넘겨 뭔가 자율성?을 보장해줄까? 라는 생각을 하다가... 그런 케이스도 많이 없는 것 같고, 왠만해선 정형화된 쌍을 이루는 것 같아서

필요한 때에 따라 checkbox의 consts/index.ts에 추가하는 것으로 해결하자!라는 생각을 하긴 했는데 여러분의 생각이 궁금합니다.

3️⃣ 피드 신고 모킹 API Handler 추가

피드 신고기능에 사용할 모킹 API Handler를 추가했습니다. 템플릿 및 설정은 금일 PR로 올려주신 부분을 어느정도 참고해서 개발을 진행했고, 실제 신고하기 모달을 띄워 모달 로직 포함 모킹 API까지 특이사항 없이 잘 동작됨을 확인했습니다.(병준님 감사합니다...)

현재, PR로 올려주신 MSW 코드 부분과 어느정도 비슷한 파일 위치들을 건드리고 있어서 Merge Conflict가 일어날 예정인데요.
요 부분은 병준님 PR이 Main에 들어간 이후에 자체적으로 Conflict 를 해결하고 squash merge 예정입니다.

만약 신고하기 모달을 포함한 신고하기 모킹 API까지 확인을 원하실 경우 page.tsx에 다음과 같은 코드를 넣어주심 확인이 가능할 것 같습니다.

물론, 스토리북으로도 확인 가능합니다...!

script 영역 추가 코드

  const [isReportModalVisible, setIsReportModalVisible] = useState(true);
  const [reported, setReported] = useState(false);
  const feedId = 123;

  const cancelReportModal = () => {
    setIsReportModalVisible(false);
  };

  const reportFeed = () => {
    setIsReportModalVisible(false);
    setReported(true);
    console.log(reported);
    alert('신고가 완료되었습니다.');
  };

return 내 태그 영역에 추가 코드

        <ReportModal
          isVisible={isReportModalVisible}
          feedId={feedId}
          onCancel={cancelReportModal}
          onReport={reportFeed}
        />

4️⃣ 스토리북 내에서 MSW 사용되도록 세팅 및 @storybook/preview-api 설치

msw가 세팅되었기 때문에, 이어서 스토리북에서도 mock API들이 사용가능하도록 세팅해두었습니다.

또한, package.json 변경사항을 보심 @storybook/preview-api라는 친구가 설치되어 있는데
이 라이브러리의 사용처의 경우, 스토리북 화면 하단의 control ui를 Story 컴포넌트 내에서 수정 가능하도록 하는 useArgs 훅을 사용하기 위해 설치하였고, ReportModal.stories.tsx에서 확인 가능합니다!

이렇게 적고보니 또 한 PR에 많은 것을 넣어버렸네요... 다음부터 분량 조절을 제대로 진행하겠습니다!

리뷰어가 중점적으로 확인해야 하는 부분

• 신고하기 모달의 이 올바른 폴더 위치에 정의되었는지

• 컴포넌트들의 구현 코드 상 특이사항이 있는지

• 신고하기 모킹 부분에 특이사항이 있는지

  
  

발견한 이슈

없음

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-13.d1rrzjx2upcmxq.amplifyapp.com

[BangDori]

• 1️⃣ 신고하기 모달 구현
• 3️⃣ 피드 신고 모킹 API Handler 추가
• 4️⃣ 스토리북 내에서 MSW 사용되도록 세팅 및 @storybook/preview-api 설치

리뷰할 내용이 너무 많아 저 혼자 리뷰하기에는 무리라고 판단하여 위 내용들에 대해서만 리뷰를 진행하였습니다! 나머지 2️⃣ 공통 컴포넌트 ( 체크박스, 라디오 ) 구현에 대해서는 @Legitgoons 님께.. 토스하겠습니다.

[Legitgoons]

수고 많으셨습니다. 간단한 질문과 convention 관련된 부분 몇 가지 남겼습니다!

[Legitgoons]

수고 많으셨습니다! 병합하셔도 좋습니다!

[BangDori]

고생하셨습니다! 남은 코멘트들은 확인후에 수환님이 resolve 하시면 될 것 같아요!

[suhwan2004]

일단 Merge 해두었습니다!

mock type, blindFeed의 위치한 이슈
reportModal과 같은 UI들의 화면에 따라가는 반응형 디자인?에 대한 얘기를 주말에 함께 나눠봐야 겠네요...