dnd-side-project / dnd-10th-3-frontend Goto Github PK

요구사항

[System-1] 디자인 시스템 작성

상세 요구사항

TODO

• Spinner 컴포넌트 및 스토리 작성
• BottomSheet 컴포넌트 및 스토리 작성
• Typography 컴포넌트 및 스토리 작성
• TextArea 컴포넌트 및 스토리 작성
• Input 컴포넌트 및 스토리 작성

예상 소요 시간

6시간

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-1-01] 공통 컴포넌트

상세 요구사항

프로젝트 전반에 필요한 icon 컴포넌트화 및 정리

TODO

• 피그마 svg 추출 후 컴포넌트화, 스토리북 작성

예상 소요 시간

3H

기타 참고사항

디자인팀과 협의 후에 진행 예정

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-2-01] 소셜 로그인

상세 요구사항

TODO

• 로그인 성공 여부 체크
• 로그인 실패 시 에러 처리
• 리다이렉트 체크

예상 소요 시간

2H

기타 참고사항

회원가입 피쳐 개발 후 진행하면 빠르게 가능할 듯

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-1-01] 공통 컴포넌트

상세 요구사항

TODO

• Divider 컴포넌트
• Divider 스토리북

예상 소요 시간

2H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-6-01] 로그아웃
[MEM-6-02] 회원 탈퇴
[MEM-6-03] 서비스 피드백 보내기
[MEM-6-04] 개인정보 처리방침

상세 요구사항

TODO

• 로그아웃 클릭 시 알럿 띄우기
• 회원가입 클릭 시 알럿 띄우기
• 서비스 피드백 페이지 링크
• 개인정보 처리방침 페이지 링크

예상 소요 시간

1H 30M

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

헤더 구현

상세 요구사항

• 돈워리 클릭 시 메인(/)으로 이동
• 유저 아이콘 클릭 시 마이 페이지(my-page)로 이동
• 테스트와 투표 페이지 간 이동이 가능한 Tab 컴포넌트 작성

TODO

• Header 컴포넌트
• Header 스토리북
• Tab 컴포넌트

예상 소요 시간

3H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-3-01] 닉네임 수정
[MEM-3-02] 프로필 사진 수정
[MEM-4-01] 진행한 테스트 목록 조회
[MEM-5-01] 등록한 투표 목록 조회

상세 요구사항

• 닉네임, 프로필 사진 영역
• 작성한 투표 목록 영역
  • 목록의 투표를 클릭하면 해당 투표로 이동해야 한다.
  • 목록의 각 투표에는 더보기(•••) 버튼이 있어야 한다.
    • 더보기 버튼을 클릭하면 메뉴가 나타나야 한다.
      • 메뉴에는 투표 삭제, 투표 수정하기, 투표 공유하기 항목이 있어야 한다.
• 진행한 테스트 목록 영역
  • 목록의 테스트를 클릭하면 테스트 결과를 확인할 수 있어야 한다.
  • 목록의 각 테스트에는 더보기 버튼이 있어야 한다.
    • 더보기 버튼을 클릭하면 메뉴가 나타나야 한다.
      • 메뉴에는 테스트 삭제 항목이 있어야 한다.

TODO

• 닉네임과 프로필 사진 영역 잡기
• 등록한 투표, 진행한 테스트 목록 영역 잡기
  • 스와이퍼로 구성?

예상 소요 시간

4H

기타 참고사항

핸들러가 없는 UI만 작업합니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-01] 디자인 시스템 컴포넌트 구현

상세 요구사항

1. 테스트 UI에 필요한 Toggle과 Badge가 필요합니다.

TODO

• Tag (디자인 시스템에서 사용한 어휘로 변경)

예상 소요 시간

1H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[System-1]

상세 요구사항

디자인 나오기 전, Toast 컴포넌트와 ProgressBar 컴포넌트 구현

TODO

• Toast 컴포넌트 및 스토리 구현
• ProgressBar 컴포넌트 및 스토리 구현

예상 소요 시간

2H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-6-04] 개인정보 처리방침

상세 요구사항

TODO

• 정적 페이지로 구현

예상 소요 시간

기타 참고사항

기능 구체화 필요

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

UI 작성에 필요한 아이콘 추가

상세 요구사항

TODO

• x
• remove
• clock
• chevronRight
• check
• photo
• more
• link

예상 소요 시간

30M

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-4-01] 테스트 통계 UI 작성

상세 요구사항

논의 예정

TODO

• 어떤 라이브러리를 사용할 것인지 논의
• 백엔드와 상의 후, Mock 데이터를 활용하여 UI 구현

예상 소요 시간

4시간

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-01] 테스트 결과 조회 페이지 이전 로딩 UI

상세 요구사항

의도적으로 2초의 로딩시간이 필요합니다.

TODO

• setTimeout를 활용하여 2초의 딜레이를 주는 기능을 구현합니다.
• 와이어프레임을 기반으로 2초간 보여질 UI를 구현합니다.

예상 소요 시간

4시간

기타 참고사항

lottie를 사용할지 말지 논의해봐야합니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[System-1] Avatar 컴포넌트

상세 요구사항

TODO

• Avatar 컴포넌트 구현
• Avatar 인터페이스 및 기본 stories 구현

예상 소요 시간

30분

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-02] 테스트 결과 공유

상세 요구사항

공유시, 제목과 설명 그리고 사진이 보여졌으면 좋겠습니다.

TODO

• 메타 데이터 설정

예상 소요 시간

3시간

기타 참고사항

정적인 메타 데이터는 빠르게 추가할 수 있으나 동적인 부분은 아직 경험이 없어서 러프하게 3시간으로 예상했습니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-2-01] 테스트 진행

상세 요구사항

TODO

• 테스트를 통해 취합된 데이터를 서버로 보냅니다.

예상 소요 시간

API 명세를 기반으로 15분

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-02] 테스트 결과 공유

상세 요구사항

테스트의 결과를 카카오톡 공유와 url를 통해 공유할 수 있어야 한다.

TODO

• 백엔드와 url은 어떤 형태인지 논의해야한다.
• 서버로부터 url을 받아야한다.
• 카카오톡 공유를 활용하여 대상자도 우리의 서비스를 가입해야 공유를 할 수 있는지 (카카오톡 메세지 API를 개인 서비스에 사용할 경우는 보내는 이, 받는 이 모두 서비스에 가입해야한다.) 정확히 확인한다.
• 카카오톡 공유 기능 구현 (개발 서버에서 기능 구현 확인)
• url 클립 보드 기능 구현 (with useCopyClipboard라는 훅 활용)

예상 소요 시간

6시간

기타 참고사항

지현님, 카카오톡 공유를 해봤는지 궁금합니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[System-1] 스토리북 리팩토링

상세 요구사항

크몽 스토리북을 참고하여 구조를 변경하려고 합니다.

TODO

• 기본적인 스토리 분류하기
• Foundation과 UI 및 Icon으로 나누기

예상 소요 시간

30분

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[COMM-1] 투표 등록
[COMM-2] 투표 조회
에 필요한 UI 작성

상세 요구사항

위 디자인을 모두 아우를 수 있는 컴포넌트 구현 필요

TODO

• VoteItem 컴포넌트, 스토리북 작성

예상 소요 시간

1D

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-3-02] 프로필 사진 수정

상세 요구사항

• 사용자가 프로필 사진을 변경한 적 있는 경우 초기화 할 수 있는 프로필 사진 삭제 기능이 있어야 한다.

TODO

• 프로필 사진 삭제 기능
• 새로운 프로필 사진 등록 기능
• 앨범 접근 권한 동의 얻기

예상 소요 시간

4H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-1-01] 소셜 회원가입
[MEM-2-01] 소셜 로그인

상세 요구사항

TODO

• 카카오톡 소셜 로그인, 회원가입 버튼 작업
• 소셜 로그인, 회원가입 페이지 UI 구성

예상 소요 시간

2H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

bug 설명

현재 main 브랜치에 머지할 경우 Codyman0의 계정에 있는 Dontworry 레포로 복사되어 vercel에 배포되는 방식으로 구현되어있습니다. 하지만 지현님께서 main 브랜치에 어떤 PR을 merge하여도 제 개인 레포에는 지현님의 PR이 반영되지 않는 문제가 있습니다.

bug 재현 방법

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Labels을 등록했습니다.

요구사항

[TEST-1-01] 테스트 시작 (메인 페이지)

상세 요구사항

1. 테스트 횟수 표시
2. 테스트 소요 시간

TODO

• 와이어프레임 기반 UI 작업

예상 소요 시간

다지인 시스템이 완성되면 5H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-6-02] 회원 탈퇴

상세 요구사항

• 회원 탈퇴가 가능해야 한다.
  • 회원 탈퇴 클릭 시 나타나는 알럿에서 확인을 누르면 탈퇴를 진행하고 취소를 누르면 탈퇴를 진행하지 않는다.

TODO

• 알럿의 확인에 회원 탈퇴 핸들러 달기
• 회원 탈퇴 후 홈 페이지로 라우팅

예상 소요 시간

1H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-6-01] 로그아웃

상세 요구사항

TODO

• 로그아웃 확인 알럿에 로그아웃 핸들러 달기
• 로그아웃 시 홈 화면으로 라우팅

예상 소요 시간

1H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[COMM-1-01] 투표 생성

상세 요구사항

(이부분 논의 요망)

• 투표 항목 버튼 활성화 비활성화 예정
• 2개 눌렀을 경우 toast Message 도출 최대 5개의 항목 추가까지 가능하도록 설정

TODO

• 투표 항목 활성화 비활성화 조건 추가
• 토스트 메세지 구현 (UI 및 기능)
• 등록시 유효성 검사를 실시합니다.
• 유효성 검사가 이루어진 후 서버로 POST를 진행합니다.

예상 소요 시간

4H

기타 참고사항

상세 요구 사항에 대해 논의하여 확정해야합니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-2-01] 테스트 진행

상세 요구사항

테스트 진행 중에 뒤로가기 버튼이 있어야 한다.

TODO

• 테스트에 맞는 Header 컴포넌트를 구현해야합니다. (뒤로가기, ProgressBar)
• 와이어 프레임 기반으로 UI를 빠르게 만듭니다.

예상 소요 시간

6시간

기타 참고사항

테스트 관련해서 과거에 진행해본 적 있기에 빠르게 구현하고 제대로 이해하며 구현하는데 목적을 두겠습니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-1-01] 테스트 시작

상세 요구사항

1. 테스트 인풋 유효성 검사 구현합니다.

TODO

1. 모바일 환경에서 인풋이 확대되는 현상을 해결할 예정입니다.
2. 토스트 메세지를 활용하여 인풋을 필수적으로 눌러야 다음 페이지로 넘어가는 로직을 구현합니다.
3. input 입력 후, enter 버튼을 누르면 Button 이벤트가 동작하도록 구현합니다.

예상 소요 시간

30분

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-1-01] 소셜 회원가입

상세 요구사항

회원가입 전, 사용자가 진행한 테스트가 있다면 그 결과를 함께 서버로 전송해야 한다.

TODO

• kakao developer에 앱 등록
• kakao에서 인가 토큰 받아 백엔드에 전달
• 백엔드로부터 토큰 받아 저장
• 리다이렉트 처리
• 진행한 테스트 존재 여부 확인 후 서버에 전송

예상 소요 시간

6H

기타 참고사항

백엔드와 논의 필요

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-1-01] 공통 컴포넌트

상세 요구사항

TODO

• Button 컴포넌트
• Button 스토리북

예상 소요 시간

1D

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-4-01] 테스트 통계 UI 구현

상세 요구사항

논의 예정

TODO

• 백엔드 API와 연결하여 UI에 그려지는지 테스트 진행

예상 소요 시간

3시간

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-1-01]

상세 요구사항

디자인 시안에 맞게 다른 디자인 시스템에 사용될 기본 값을 정의해야 합니다.

TODO

1. color
2. gradient
3. typegraphy
4. font
5. spacing
6. border radius
7. 기본 구조 리팩토링

예상 소요 시간

2H , 디자인팀과 협업에 따라 상이할 것 같습니다.

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-01] 테스트 결과

상세 요구사항

• 테스트가 종료되면 결과를 보여줘야 합니다.
• 결과와 함께 ‘공유하기 버튼’과 ‘결과 저장하기 버튼’이 노출돼야 합니다.
• 다시 테스트 첫 화면으로 돌아갈 수 있는 ‘다시 테스트하기 버튼’이 노출돼야 합니다.
• “축의금 논쟁 종결짓기”와 같은 투표 커뮤니티로 이동할 수 있는 버튼이 있어야합니다.

TODO

• 와이어 프레임 기반으로 기본적인 레아아웃 UI 구현
• 각 버튼 UI 구현
• 각 버튼 라우트 설정

예상 소요 시간

2시간

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-02] 테스트 결과 공유

상세 요구사항

테스트의 결과를 카카오톡 공유와 url를 통해 공유할 수 있어야 한다.

TODO

• 와이어프레임 기반으로 UI 구현

예상 소요 시간

2시간

기타 참고사항

기능과 UI를 분리하여 티켓 작성하겠습니다. 피드백 환영!!

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-2-01] 테스트 진행

상세 요구사항

• 퍼널 방식으로 테스트를 진행합니다.
• 단계를 보여줌으로써 사용자의 이탈을 막습니다.
• 테스트에 한해 Context API를 활용하여 상태를 공유하도록 합니다.

TODO

• useFunnel 훅을 참고하여 Approuter에서 동작하는 useFunnel 훅을 만들어 상태에 따른 컴포넌트 관리를 설계한다. -> 내부 상태를 활용하여 구현하였습니다.
• 상태에 따라 정적 데이터가 변경하도록 한다.

예상 소요 시간

6시간 -> 12시간

기타 참고사항

react-hook-form을 활용하여 구현하였으나 간단한 테스트에 맞지 않는 기술이라고 판단하여 제거하였습니다. 그 이후 useState의 내부 상태와 정적 데이터의 id를 비교하여 일치하는 컴포넌트만 보여주는 방식으로 퍼널 흐름을 구현하였습니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-1-01] 공통 컴포넌트

상세 요구사항

컬러, 폰트 크기 적용

TODO

• variant 수정

예상 소요 시간

1H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-6-03] 서비스 피드백 보내기

상세 요구사항

TODO

• 폼 유효성 검사

예상 소요 시간

기타 참고사항

기능 구체화 필요

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[COMM-1-01] 투표 생성

상세 요구사항

• 투표를 만들 수 있어야 합니다.
• 투표는 인증된 사용자(회원)만 생성할 수 있습니다.
  -> 만약 회원이 아니라면 로그인 페이지로 이동시킵니다.
• 투표를 생성하기 위해 카테고리, 제목, 본문, 선택지를 입력받아야 합니다.
  -> 제목 유효성 조건
  -> -> 본문은 공백 포함 150자로 진행한다.
  -> 선택지 유효성 조건 (다중 선택 옵션은 추후에)
• 이미지는 우선 순위가 낮습니다.

TODO

• Main 페이지에서 투표 생성 페이지로 이동시키는 우측 하단에 버튼 구현
• 헤더 UI 구현 (이미 만들어진 컴포넌트 사용)
• 기본적인 UI 구현 (제목, 설명, 선택지, 카테고리 ,버튼)

예상 소요 시간

3H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-01] 디자인 시스템 수정

상세 요구사항

테스트 페이지 디자인 시스템 수정하려고 합니다.

TODO

• input 색상 및 focus시 색상 변경

예상 소요 시간

10M

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

헤더 디자인 수정

상세 요구사항

top padding 값 수정

TODO

• top padding 값 수정
• bottom padding 제거

예상 소요 시간

10M

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[MEM-3-01] 닉네임 수정

상세 요구사항

• 닉네임은 n글자 이상 n글자 미만이어야 한다.
• 닉네임에는 특수문자를 포함할 수 없다.
• 닉네임 수정 인풋 옆에 글자 수가 함께 보여져야 한다.
• 닉네임 유효성 검사에 실패 시 에러 메시지를 인풋 밑에 보여줘야 한다.

TODO

• 닉네임 유효성 검사
• 닉네임 변경 처리

예상 소요 시간

3H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

bug 설명

bug 재현 방법

1. yarn add @toss-usefunnel
2. 해당 페이지에서 import 후 구현

const [Funnel, setStep] = useFunnel(['홈', '사전1', '사전2']);

  <Funnel>
      <Funnel.Step name="홈">
...
      </Funnel.Step>
 </Funnel>

기타 참고사항

app 라우터에서 useFunnel 훅을 사용할 수 없는건지?? 무엇때문인지 확인하려고 합니다.

시도 과정

1. react-query 의존성을 설치하여 위의 에러는 해결했습니다.
2. nextRouter isn't mounted 에러를 만났습니다. 해당 라이브러리 issue에 등록된 글을 통해 현재 사용하기는 어렵다고 판단했습니다...

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Labels을 등록했습니다.

요구사항

상세 요구사항

위에 보이는 와이어프레임을 기반으로 그대로 구현합니다.

TODO

• 기본적인 UI 구현
• Tab UI 및 기능 구현

예상 소요 시간

3H (Tab때문에 시간 소요가 있을것으로 보임)

기타 참고사항

요구사항 정의서에 속하지 않은 이슈입니다. 내일 이야기 나눠야할 듯 싶습니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[COMM] 기본 UI

상세 요구사항

그대로 구현하는 것을 목표로 합니다.

TODO

• 투표 만들기 메인 페이지 구현
  -> catgories_tab, Select, EmptyVote UI
  -> 검색 UI, VoteCard UI

예상 소요 시간

6H -> 18H (아프기도 했지만 생각보다 구현할 것이 많았다. )

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[System-1] BottomSheet 컴포넌트

상세 요구사항

TODO

• BottomSheet 라이브러리 선택
• BottomSheet 구현
• BottomSheet 스토리 구현

예상 소요 시간

1시간

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[TEST-3-02] 테스트 결과 저장

상세 요구사항

• 테스트의 결과를 이미지 형태로 갤러리에 저장할 수 있어야 한다.
• 이미지 형식은 {png}여야 한다.

보다 명확히 물어볼 것

• 이미지 구성은 어떻게 할지?
• PC 접속인 경우 파일 탐색기의 download 폴더에 저장돼야 한다.

TODO

• 이미지로 변환하는 방법을 찾아서 적용한다.
• 변환한 이미지를 PC일 경우 download 디렉토리에 저장할 수 있는 방법을 찾아 적용한다.

예상 소요 시간

4시간 (변수 많음)

기타 참고사항

구현해보신 분들에게 자문을 구하고 최대한 집중해서 진행할 예정입니다.

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

요구사항

[SYS-01] 인풋 컴포넌트 디자인 시스템 수정

상세 요구사항

TODO

• input Container를 수정할 수 있도록 구현
• 어느 ㅈ어도까지 추상화할 것인지 정의

예상 소요 시간

1H

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Assignees(이슈 담당자)를 지정했습니다.
• Labels, Milestone을 등록했습니다.

bug 설명

prettier에 따라 수정된 다음, lint에 의해 Warning이 나타납니다.

bug 재현 방법

스크린샷 참고

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Labels을 등록했습니다.

bug 설명

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Button이나 Input 등 SVG를 컴포넌트로 가져와 렌더링해야 하는 컴포넌트가 페이지에 있을 때 에러가 발생합니다.

bug 재현 방법

import Submit from '@/assets/icons/submit.svg';

export default function Home() {
  return (
    <>
      <Submit />
    </>
  );
}

svg를 import하여 jsx 형식으로 사용

기타 참고사항

✅ Issue 등록 전 확인 후 체크해 주세요! (x 표시 해 주세요.)

• Labels을 등록했습니다.