Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge : Pratice 페이지 #41

Merged
merged 13 commits into from
Feb 27, 2024
Merged

Merge : Pratice 페이지 #41

merged 13 commits into from
Feb 27, 2024

Conversation

sheepdog13
Copy link
Contributor

@sheepdog13 sheepdog13 commented Feb 22, 2024

PR 체크리스트

아래 항목을 확인해 주세요:

  • 커밋 메시지가 우리의 가이드라인을 따르고 있는지 확인하세요
  • 변경 사항에 대한 테스트가 추가되었는지 확인하세요 (버그 수정 / 기능 추가)
  • 문서가 추가되거나 업데이트되었는지 확인하세요 (버그 수정 / 기능 추가)

PR 유형

이 PR은 어떤 종류의 변경을 가져오나요?

  • 버그 수정
  • 새로운 기능 추가
  • 코드 스타일 업데이트 (서식, 로컬 변수)
  • 리팩터링 (기능 변경 없음, API 변경 없음)
  • 빌드 관련 변경
  • CI 관련 변경
  • 문서 내용 변경
  • 애플리케이션 / 인프라 변경
  • 기타... 설명:

관련 이슈

이슈 번호: #34

현재 동작은 무엇인가요?

practice 페이지가 없습니다

새로운 동작은 무엇인가요?

  • main페이지의 실전모의고사를 클릭하면 id 7번 문제를 보여줍니다.
  • 문제는 get요청으로 받아온뒤 redux에 저장했습니다. isloading으로 pending중에는 loading 컴포넌트를 보여줍니다.
  • 정답을 클릭하면 노란색으로 바꿉니다
  • 정답을 클릭하면 redux에 정답유무, 문제 번호, 고른 답의 값을 배열로 저장합니다.
  • 홈버튼을 누르면 홈 modal, 마지막 문제를 클릭하면 마지막 문제임을 알리는 modal을 띄웁니다.
  • 반응형을 largeMobile 300px을 기준으로 smallMobile 250px을 기준으로 구현했습니다.

이 PR은 호환성 변경을 도입하나요?

  • 아니요

redux와 redux toolkit을 설치했습니다.

기타 정보

  • practice 페이지
스크린샷 2024-02-27 오후 2 18 37
  • 모달창들
스크린샷 2024-02-27 오후 2 21 40 스크린샷 2024-02-27 오후 2 19 41
  • redux state들
스크린샷 2024-02-27 오후 2 33 11 스크린샷 2024-02-27 오후 2 20 46 스크린샷 2024-02-27 오후 2 21 09

- 이전 다음 버튼 구현
- 버튼 문제의 index에 따라 활성화,비활성화 구현
- 문제 페이지에서 사용자가 선택하는 문제를 전역으로 관리하기 위한 redux toolkit 세팅
- 사용자가 클릭한 답 choices에 저장
- 답을 고쳤을경우 답 교체
- 선택했던 정답 bg 노란색으로 변경
- 이전 다음 버튼 색상 변경
Zamoca42
Zamoca42 previously approved these changes Feb 22, 2024
- package-lock.json 삭제하고 재생성
- frontend/package.json 업데이트
- .env.example에 새로운 환경변수 추가
@Zamoca42 Zamoca42 self-requested a review February 22, 2024 07:13
@Zamoca42 Zamoca42 dismissed their stale review February 22, 2024 07:14

abort Review

- redux toolkit 으로 비동기 get요청
- home 버튼을 누르면 type이 out인 모달창 작동
- 마지막 문제 버튼 누를시 type이 check인 모달창 작동
- 선택한 답이 정답일경우 isCorrect를 true로 저장
- largeMobile 300px을 기준으로 반응형 구현
- smallMobile 250px을 기준으로 반응형 구현
import data from './practicedata.json';
import { useNavigate } from 'react-router-dom';

const Wrapper = styled.div`
Copy link
Member

Choose a reason for hiding this comment

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

혹시 스타일은 따로 파일을 만들어서 스타일 폴더에 넣어주실 수 있나요?
style directory에 컴포넌트 구조랑 똑같이 스타일 파일들을 관리하고 있어서요!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

넵 알겠습니다

- css를 style 폴더에 따로 관리
Copy link
Member

@future9061 future9061 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!!

@sheepdog13 sheepdog13 merged commit f130a18 into main Feb 27, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants