prgrms-fe-devcourse / fedc2_chequiz_gidong Goto Github PK

View Code? Open in Web Editor NEW

14.0 1.0 3.0 6.65 MB

퀴즈를 통한 개발 지식 체크 서비스를 제공합니다.

Home Page: https://main.d32yumw4llxi0t.amplifyapp.com/

TypeScript 99.83% HTML 0.13% Shell 0.04%

react typescript

fedc2_chequiz_gidong's Issues

[Feat] 메인페이지 랜덤퀴즈 및 퀴즈세트 API 연동

✏️ 작업 내용

상단의 일일퀘스트 형식의 랜덤퀴즈와 풀이페이지를 연동하고,
퀴즈세트를 API로 불러와 화면에 출력합니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 랭킹 인터페이스 정의

✏️ 작업 내용

랭킹페이지에 필요한 인터페이스 구축

⚠️ 주의사항

없음

⏰ 예상 시간

1.5h

🔎 추가 정보

없음

[Feat] 유저 정보 컴포넌트에 API 연결

✏️ 작업 내용

유저 정보 카드 컴포넌트에 API 3종을 연결합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

[Feat] Quiz 타입 정의 및 기본 인터페이스 정의

✏️ 작업 내용

퀴즈 풀기, 퀴즈 결과 페이지를 위한 퀴즈 타입 정의 및 기본 인터페이스를 정의합니다.

⚠️ 주의사항

퀴즈와 관련되지 않은 API는 퀴즈 연결을 위하여 API 명세서에 있는 내용을 단순히 연결할 예정이니, 해당 API를 직접 사용시 추가적인 조치가 필요합니다.

⏰ 예상 시간

🔎 추가 정보

중요한 부분인 것 같아서 먼저 작업한 뒤 나머지 부분 작업하겠습니다.

[Feat] 퀴즈 목록 탭에서 정렬, 검색 기능 추가

✏️ 작업 내용

유저 정보 페이지에서 정렬, 검색을 할 수 있도록 컴포넌트 & 기능을 추가합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

유저 정보 카드 컴포넌트 개발하기

[Feat] 유저 인증 기능 추가

✏️ 작업 내용

유저 인증 기능 추가

⏰ 예상 시간

[Epic] 랭킹API 연동

✏️ 작업 내용

랭킹 API를 이용해 실 데이터를 UI에 적용합니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 퀴즈 생성 basic 기능 구현

✏️ 작업 내용

퀴즈 생성 Basic 기능 구현

문제 정보 관련
- 문제 카테고리를 셀렉트 박스를 통해 선택할 수 있다.
  - html, css,javascript, react, vue, web, CS, interview
- 문제 유형을 셀렉트 박스를 통해 선택할 수 있다.
  - TrueOrFalse만 가능, MultipleChoice, shortAnswer는 disable
- 문제의 Title을 textArea를 통해 받을 수 있다.
정답 관련
- 문제 유형에 따라 정답을 선택하도록 한다.
  - O, X 체크박스로 선택
- 중요도와 난이도를 선택할 수 있다.
- 정답 관련 해설을 작성할 수 있다.
퀴즈 추가
- 추가 버튼을 통해 퀴즈 아이템을 추가한다.
퀴즈 세트화 여부
- 체크박스를 통해 퀴즈 세트 여부를 결정한다
  - 체크시 세트이름 Input의 상태가 editable 하도록 변경
기타
- 아래의 Validation을 만족 시 제출하도록 한다.
  - 1글자 이상의 문제 Title, 문제정답, 문제해설 존재
  - 문제 중요도와 난이도 선택
  - 카테고리 및 문제유형 선택
  - 세트화여부 체크시, 세트 이름 입력

⚠️ 주의사항

issue를 어느정도 단위로 끊어가야할지 어렵네요.

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 알림 확인 처리

✏️ 작업 내용

알림 확인 처리 기능 추가

⏰ 예상 시간

🔎 추가 정보

#35 참고

[Feat] 랭킹 목데이터 구현 및 기본 컴포넌트 및 페이지 구현

✏️ 작업 내용

랭킹 페이지 구현에 필요한 목데이터 설정
랭킹 페이지의 기본 컴포넌트 구현
위 컴포넌트 페이지에 레이아웃 구축

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

4h

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Epic] 퀴즈 생성

1. 퀴즈 생성 Basic 기능 구현

문제 정보

문제 카테고리를 셀렉트 박스를 통해 선택할 수 있다.
문제 유형을 셀렉트 박스를 통해 선택할 수 있다.
문제의 Title을 textArea를 통해 받을 수 있다.

정답 관련

문제 유형에 따라 정답을 선택하도록 한다.
중요도와 난이도를 선택할 수 있다.
정답 관련 해설을 작성할 수 있다.

퀴즈 추가

추가 버튼을 통해 퀴즈 아이템을 추가한다.

퀴즈 세트화 여부

체크박스를 통해 퀴즈 세트 여부를 결정한다

기타

Validation check진행 후 만족 시 제출하도록 한다.

2. 퀴즈 생성 페이지 디자인 및 컴포넌트화

셀렉트 박스 재사용 고려 컴포넌트화
퀴즈 생성 페이지 디자인 시안에 맞게 CSS 적용

3. 메인페이지 퀴즈 세트 리스트 출력

4. 메인 페이지 퀴즈 세트 필터링 & 정렬

5. Advance 기능 구현

[Feat] 랭킹 검색 기능 추가

✏️ 작업 내용

랭킹페이지에서 유저 검색 기능을 추가합니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 스켈레톤 구현

✏️ 작업 내용

스케폴딩
라우터 연동
axios 연동
emotion 연동

⚠️ 주의사항

구현된 스켈레톤은 raw한 코드입니다, 팀 컬러에 맞게 리펙토링이 필요합니다.

⏰ 예상 시간

3h

🔎 추가 정보

추가된 코드들은 이전에 사용했던 프로젝트에서 추출해 온거라 여러분들이 사용했던 스켈레톤이 더 좋다면 해당부분으로 교체하셔도 무방합니다.

[Feat] 알림 생성

✏️ 작업 내용

알림 생성 기능 추가

⏰ 예상 시간

🔎 추가 정보

#35 참고

[Epic] 메인 페이지

메인페이지 UI 디자인

메인페이지 퀴즈세트 API 연동

메인페이지 일일 퀘스트 선택-> 퀴즈풀이페이지 이동

메인페이지 필터 및 정렬

[Feat] 퀴즈 생성 페이지 디자인

✏️ 작업 내용

퀴즈 생성 페이지 디자인 시안에 맞게 CSS 적용

⚠️ 주의사항

현재 올라온 퀴즈 생성 기본 기능 구현PR(#37)에서 따와서 작업한 후, rebase 처리해서 작업해보겠습니다.

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 메인 페이지 UI 디자인

✏️ 작업 내용

메인 페이지의 일일퀘스트 부분 UI와 퀴즈세트 UI를 작성하고, 퀴즈세트를 불러와 출력합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

[Feat] husky + lint staged 추가

✏️ 작업 내용

husky 와 lint staged 추가

⏰ 예상 시간

🔎 추가 정보

prettier : pre-commit hook

[Feat] 유저 정보 카드 컴포넌트 개발

✏️ 작업 내용

유저 정보를 보여주는 컴포넌트를 개발합니다.

유저 관련 목데이터 구축
유저 이름, 랭크, 포인트(경험치) 보여주기
유저의 이미지는 일단 메이플스토리 몬스터를 보여줄 예정입니다 (basic)

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

예상 완성 사진

[Feat] 로그인, 회원가입 기능 구현

✏️ 작업 내용

로그인, 회원가입 기능 구현 입니다

⏰ 예상 시간

[Feat] 퀴즈 생성 Form Validation 추가

✏️ 작업 내용

기본 기능에 추가하지 못했던 validation 관련 기능 추가합니다.

제출 시 Form의 모든 값들이 입력되었는지 여부를 판단하고, 작성안된 부분을 표시해주는 정도로 작업 예정입니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

[Feat] 메인페이지 필터 및 정렬 기능 추가

✏️ 작업 내용

메인 페이지에서 필터 및 정렬 기능을 추가 합니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 전역 폰트 추가

✏️ 작업 내용

웹에서 사용할 폰트를 추가합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

추가할 폰트는 Permanent Marker ( 로고 ) , Pretandard, Maplestory 입니다.

[Feat] 퀴즈 풀기 Mock 페이지 및 Mock 컴포넌트 구성

✏️ 작업 내용

기본적인 퀴즈 해결 로직 구현 및 Mock 퀴즈 컴포넌트 구현

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

추후 퀴즈 컴포넌트를 캐러셀 UI 형식으로 입힐 예정입니다.

[Feat] 유저 이미지 src 제공 함수 구현

✏️ 작업 내용

유저 이미지를 다른 곳에서 사용할 수 있게 함수를 구현하려고 합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

유저의 아이디를 넣으면, 이미지 src 링크가 올 수 있도록 구현할 예정입니다.

[Feat] QuizServices.ts 비동기로직 보완 및 점수 계산 로직 구현

✏️ 작업 내용

QuizServices.ts비동기로직 보완 및 점수 계산 로직 구현

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

[Feat] QuizResultPage api 연결

✏️ 작업 내용

QuizResultPage api 연결

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Fix] lint staged 이슈

✏️ 작업 내용

theme의 타입 검사가 lint staged에서 발생하지 않아 타입 검사와 lint staged를 분리하려고 합니다

⏰ 예상 시간

[Epic] 퀴즈 풀기 및 결과 보기

[Feat] 알림 목록

✏️ 작업 내용

알림 목록 구현

⏰ 예상 시간

🔎 추가 정보

#35 참고

[Feat] 유저정보 API 랭킹페이지에 연동

✏️ 작업 내용

랭킹페이지에 실제 API 데이터를 연동합니다.

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 레이아웃 및 에러페이지, 서브라우팅 예시 구축

✏️ 작업 내용

레이아웃 기본 구조 구현
에러페이지 기초 구현
서브라우팅 구현

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

2h

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Epic] 랭킹페이지 UI 구현하기

[Epic] 랭킹페이지 목데이터로 UI 구현

[Epic] 유저 정보 페이지 구현하기

공통 컴포넌트 구현하기

유저 정보 보여주기

유저 정보 카드 디자인 완료하기
#25
#62
유저 페이지에 컴포넌트 연결하기

유저 정보 수정하기

유저의 fullname을 수정할 수 있다.
- 이미 있는 유저 이름은 사용할 수 없게 막는다.
  - 유저 이름으로 검색하는 기능 때문에 필수
유저의 비밀번호를 수정할 수 있다.

뱃지 시스템 추가

custom API에 뱃지 데이터 추가하기 => totalPoints만 사용하기로 결정
뱃지 등록 기준 정하기
유저 정보 화면에서 뱃지 보여주기 구현

레벨 시스템 추가

레벨 시스템 설계
유저 정보 카드에 레벨에 따른 캐릭터 이미지를 변경한다.
유저 정보 카드에 레벨 정보를 추가한다.

사용자 활동 내역 보기

#61
탭에서 정렬, 검색 기능 구현
탭 클릭 시 상세 내용 보기 기능 구현

adv

뱃지 여러개 있으면 몇 개 선택하는 화면
로딩 사이에 스켈레톤 구현
로딩 사이에 애니메이션 구현
메이플스토리 API를 분석해 캐릭터 정보를 넣어서⇒ 완성된 캐릭터를 가져올 수 있도록 구현해본다.
만약 첫번째 방식이 드롭될 경우, 직접 sprite를 만들어서라도 사용한다.
퀴즈 수정, 삭제 관련 고민

[Feat] QuizSolvePage와 QuizResultPage 연결 및 점수 반영 로직 추가

✏️ 작업 내용

QuizSolvePage와 QuizResultPage 연결 및 점수 반영 로직 추가

⚠️ 주의사항

A clear and concise description of precautions

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] 퀴즈, 댓글 조회를 위한 탭 컴포넌트 구현

✏️ 작업 내용

유저 정보 페이지 하단에 들어갈, 탭 컴포넌트를 구현합니다.

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

Add any other context or screenshots about the feature request here.

[Feat] QuizSolvePage api 연결

✏️ 작업 내용

QuizSolvePage api 연결

⚠️ 주의사항

⏰ 예상 시간

🔎 추가 정보

[Feat] 알림 기능 구현

✏️ 작업 내용

⚠️ 주의사항

알림 생성의 경우 퀴즈 결과 페이지와 연동되기 때문에 주의 필요

⏰ 예상 시간

🔎 추가 정보

큰 틀의 디자인은 위 사진(프로그래머스)을 참고하되 세부사항은 팀 룰을 따른다

[Feat] 퀴즈 결과 페이지 로직 및 기본 결과 컴포넌트 구현

✏️ 작업 내용

퀴즈 결과 페이지 로직 및 기본 결과 컴포넌트를 구현할 예정입니다. 단, 유저의 정보를 보여주는 부분은 추후 작업 예정입니다.

ResultPage 기본 로직 구현
- sessionStorage에 저장된 유저의 답 선택 정보 불러오기
- sessionStorage에 저장된 solve page에서 풀었던 문제 id 불러오기
결과 컴포넌트 구현하기
- 댓글 정렬하기 -> 댓글 정렬 방법은
- useInput, useForm 구현하기
- 로그인 한 사람에 대해서 댓글 창이 활성화 되고, 댓글을 작성하고 제출할 수 있는 기능. 제출했다면, 가장 상위에 댓글이 노출되어야 함
- 댓글은 내용, 누가 썼는지, 언제 썼는지에 대한 정보가 들어가야 함
- 좋아요를 누를 수 있는 기능(좋아요는 토글 방식이며, 유저가 좋아요를 눌렀는지 확인하는 방법은 전역 객체에 유저 정보가 존재할 때, 좋아요 배열에 해당하는 postId가 있다면 좋아요를 키는 방식으로 진행할 예정)
비동기로직 구현