[ Feature/dev 97 ] 퀴즈에서 아티클로 다시 넘어가기

[soomin9106]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-97/%ED%80%B4%EC%A6%88%EC%97%90%EC%84%9C-%EC%95%84%ED%8B%B0%ED%81%B4%EB%A1%9C-%EB%8B%A4%EC%8B%9C-%EB%84%98%EC%96%B4%EA%B0%80%EA%B8%B0

💜 작업 내용

• TopBar 고정 (메인, 문제풀이, 워크북, 아티클)
• 퀴즈 풀기 전과 퀴즈 풀기 후 아티클 보기 워딩 변경
• 아티클 돌아가기 클릭 시 아티클 보이기

✅ PR Point

• 퀴즈 풀기 전 / 후 아티클 보기 워딩 처리: useMutationState 를 통해 문제 풀이 정보를 받아와 문제 풀기 전/후 워딩 처리

const problemAnswersInfo = useMutationState<ProblemAnswerMuationState>({
    filters: {
      mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER, problemId],
    },
    select: (mutation) => {
      return {
        data: mutation.state.data as ApiResponse<AnswerCheckInfo>,
        variables: mutation.state.variables as ProblemAnswerBody,
      };
    },
  });

• 아티클 돌아가기 클릭 시 아티클 보이기: 기존 문제풀이 state 를 지켜야 해서 페이지 이동 대신 toggle 형태로 처리
• useProblemIdsViewModel 모델에 getArticleId 추가 => 현재 문제에 해당하는 아티클 아이디 사용
• CancelButton 컴포넌트 추가하여 X 버튼 클릭 시 토글 처리 가능하도록 함

export default function CancelButton({ handleToggle }: CancelButtonProps) {
  return (
    <div className="">
        <XIcon data-testid="x-menu" width={36} height={36} className="mr-[23px]" onClick={handleToggle} />
    </div>
  )
}

👀 스크린샷 / GIF / 링크

• 퀴즈 풀기 전
  

• 퀴즈 푼 후
  

• 아티클 열었을 때
  

[soomin9106]

PR 포인트 (코드 설명) 및 스크린샷 추가 예정입니다!!

[Happhee]

테스트코드 추가해주세요!!

[Happhee]

빠르게 작업하셨네요!! 수고하셨습니다~!!

[Happhee]

외부에서 제어하지 않고 articleDropdown wrapper에서 제어하신 이유가 있을까요?

[soomin9106]

ArticleDropDownWrapper 하위에 있는 ArticleDropDown 은 toggle 에 영향을 받지 않도록 구성하고 싶어서 wrapper 로 하나 더 감쌌습니다!!

[Happhee]

해당 div를classname의 용도로만 사용하는 것이라면 cancelButton이 classname을 상속받을 수 있도록 props를 지정해주면 좋을 것 같습니다.

[soomin9106]

반영 했습니당

[Happhee]

이렇게 조건문으로 분리하는 로직도 model로 만들면 어떨까요..? 컴포넌트에서는 오로지 뷰의 요소만 있었으면 좋겠습니다..!

[soomin9106]

조건문 분리 로직을 모델로 분리했습니다!

[soomin9106]

@Happhee
WorkbookDetailInfoWrapper 의 높이가 달라서 카드 크기가 달라지는 것 같아 높이를 추가 했습니다! 괜찮을지 확인 부탁해용!! 😄

[Happhee]

@soomin9106 아네네!! 다 확인했는데 이상없네요!! 수고 많으셨어요!