[ Feature/quiz 19 ]

[Happhee]

🔥 Related Issues

resolve #19
close #19

💜 작업 내용

• quiz, article 페이지의 공통 헤더 topbar 구현
• quiz 페이지의 버튼 컴포넌트 구현
• quiz 페이지의 버튼 컴포넌트 test 및 story 작성

✅ PR Point

main.ts

• storybook에서 svg 파일을 읽기 위해 웹팩 설정을 진행

 webpackFinal: async (config) => {
    if (!config.resolve || !config.module || !config.module.rules) {
      throw new Error("Webpack Error");
    }

    const imageRule = config.module?.rules?.find((rule) => {
      const test = (rule as { test: RegExp }).test;

      if (!test) {
        return false;
      }

      return test.test(".svg");
    }) as { [key: string]: any };

    imageRule.exclude = /\.svg$/;

    config.module?.rules?.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },

custom.d.ts

svg파일에 대해 타입을 읽을 수 있도록 정의하였습니다.

import { SVGSVGElement } from "react";

declare global {
  module "*.svg" {
    const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    export default ReactComponent;
  }
}

quiz/components/AnswerContextButton

해당 버튼 타입은 총 3가지 입니다.

1. 정답 선택전
2. 정답 선택 후 제출전
3. 정답 제출 완료

이에 따른 test코드와 story를 구현하여 비즈니스 로직 및 ui 테스트를 진행하였습니다.

common/conponents/Topbar

quiz, article 페이지에서 사용하는 공통 topbar 컴포넌트 입니다..!

• 비즈니스로직은 없어서 story 만 테스트를 했습니다..!

😡 Trouble Shooting

👀 스크린샷 / GIF / 링크

📚 Reference

• vitest에서 useContext
• 컴포넌트 테스트 시작하기 - 훅과 컨텍스트
• webpack 환경에서 svg 컴포넌트 만들기
• Next.js 13 + Storybook + SVGR 설정하기

[Happhee]

퀴즈 풀이 케이스에 따른 버튼 테스트 파일입니다.

[soomin9106]

오오 이거 참고해서 저도 Test 사용해보겠습니다 💯

[soomin9106]

storybook 에서 queryClient 사용하는 부분이군용!! 좋습니다 👍

[soomin9106]

아직 TopBar 에 다른 UI 적인 요소가 없군용!
나중에 같이 사용하게 되면은 요 TopBar 사용해서 구현 하면 되겠네요!!

[soomin9106]

"다음 문제 풀기", "정답 제출하기" 요런 내용들은 constants 에 넣어서 저는 상수로 처리 했는데 어떨까용?!

[Happhee]

상수처리 반영한 commit 입니다!! 의견감사해요!

[Happhee]

얜 무시해주세요 ㅠ.ㅠㅠ.