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.

Sign up for GitHub

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

Jump to bottom

[FEAT] 킬링파트 구간(시간) 입력 컴포넌트를 구현한다. #58

Closed
4 tasks
ukkodeveloper opened this issue Jul 17, 2023 · 0 comments
Closed
4 tasks

[FEAT] 킬링파트 구간(시간) 입력 컴포넌트를 구현한다. #58

ukkodeveloper opened this issue Jul 17, 2023 · 0 comments
Assignees
@ukkodeveloper
Labels
[ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠
Milestone
[1차] 킬링 파트 등록 및 공...

Comments

@ukkodeveloper
Copy link
Collaborator

🤷 구현할 기능

노래 상세 페이지에서 사용자가 킬링파트 구간을 입력할 수 있도록 컴포넌트를 구현한다.

🔨 상세 작업 내용

  • 사용
  • 사용자가 노래 구간의 시작점을 입력하면 구간 끝점을 자동으로 계산해준다.
  • 숫자가 아닌 경우 입력을 막고 안내 메세지를 보여준다.
  • 숫자가 노래 길이보다 큰 경우

⏰ 예상 작업 시간

3시간

⏰ 마감일

7월 17일
@ukkodeveloper ukkodeveloper added the [ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! label Jul 17, 2023
@Creative-Lee Creative-Lee added the ✨ Feat 꼼꼼한 기능 구현 중요하죠 label Jul 17, 2023
@Creative-Lee Creative-Lee moved this to In Progress in 2023-shook Jul 17, 2023
@Creative-Lee Creative-Lee modified the milestone: 킬링 파트 등록 및 공유 기능 구현 Jul 17, 2023
@ukkodeveloper ukkodeveloper mentioned this issue Jul 17, 2023
Merged
ukkodeveloper added a commit that referenced this issue Jul 19, 2023
@ukkodeveloper
Feat/#58 IntervalInput 컴포넌트 (킬링파트 등록 시간 input) 구현 (#69)
f5108f2 
* feat: 분/초 입력 받을 수 있도록 input 요소 2개 구현

* test: 분/초 유효성 검사 및 노래 길이 포함 유효성 검사 기능 테스트

* feat: 분/초 유효성 검사 및 노래 길이 포함 유효성 검사 유틸 기능 추가

* feat: 초/분 input 입력으로 인한 상태 변경 시 유효성 검사 적용

* feat: 초/분 입력에 autocomplete off 및 placeholder 설정 추가

* fix: isTimeInSongRange에서 parameter 이름 및 타입 변경

* test: 분/초를 초 단위 상호 변경 함수 테스트

* feat: 분/초와  초 단위 상호 변경 함수 구현

* feat: 입력창 포커스 아웃 시에 입력 시간이 노래 길이보다 작은 지 확인

* design: IntervalInput 컴포넌트 CSS 스타일링 적용

* feat: input active 상태 감지 후 활성화 색상 변경

* refactor: IntervalInput 컴포넌트 스타일 분리 후 진입점에서 export

* refactor: IntervalInput 관련 type 분리

* refactor: IntervalInput 이벤트 및 데이터 훅으로 분리

* fix: 전체를 감싸는 border 삭제 및 입력시 입력값에도 색상 적용

* fix: 입력창 active 상태를 위해 click 이벤트에서 focus이벤트로 변경

* refactor: errorMessage 상수로 분리

* refactor: minute second 변경하는 함수 추가

* fix: test 구동 목적으로 label 제거, 스타일드컴포넌트 프롭명 변경

* test: IntervalInput 컴포넌트 테스트 추가

* fix: blur시에 유효성 검사를 통과하면 에러 메세지 제거

* fix: storybook 제목 변경

* refactor: 스타일 관련 컴포넌트명, box-sizing 수정

* refactor: min/ sec 데이터를 튜플 배열로 인자 받도록 수정

* refactor: complyeToMinSec을 calculateMinSec로 함수명 변경

* test: 테스트 코드에서 배열 선언 방식 변경

* style: 불필요한 주석 제거

* refactor: isTimeInSongRange 함수 삭제 및 반영

* fix: 작은 화면 시에 input 창 과도하게 줄어드는 현상 수정

* test: 테스트 목록 그룹화

* test: 테스트 문구 서술형으로 변경

* fix: return 추가 하여 error message 제대로 보여지도록 수정

* test: test 오류 수정 및 유의미하게 변경

* design: 8px단위로 변경

* style: return 추가

* refactor: 사용하지 않는 id attribute 삭제

* style: color convention 적용

* style: props type을 component 파일 내부에 위치하도록 수정

* refactor: songEnd 에서 videoLength로 prop명 변경

* refactor: 함수 인자명 더 구체적으로 변경

* test: userEvent 사용을 위한 user setup 추가

* test: storybook 검정 배경 추가
@github-project-automation github-project-automation bot moved this from In Progress to Done in 2023-shook Jul 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ukkodeveloper ukkodeveloper

Labels
[ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠
Projects
2023-shook
Status: Done
Milestone
[1차] 킬링 파트 등록 및 공유 기능 구현
Development

No branches or pull requests
2 participants
@Creative-Lee @ukkodeveloper