sunjae-kim / lyrics-viewer

Simple music lyrics viewer

Lyrics Viewer

Music lyrics viewer

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

lyrics-viewer's Issues

Dark/Light 모드 토글버튼 메인화면에 배치

검색기록 기능 구현

Upgrade Vibe API version

• Vibe API 버전 4 출시
• 현재 사용중인 버전 3에서 4로 업그레이드 필요

Migration to Nuxt 3

버그 등 검색이 안될 때 timeout 처리

Favicon 변경

Server API 바뀐 Endpoint Client 반영

nuxt composition api ⇒ nuxt bridge 마이그레이션 작업

Input에 입력한 검색어 localstorage호 관리 X

새로운 노래를 검색하러 들어갔을 때, 이전 기록이 남아있어서 오히려 지우고 다시 검색해야 하는 불편함이 있음

Issue report 인터페이스 추가

검색어 없을 때도 clear 버튼이 노출 됨

빈 문자열일 때 value에 null을 할당하도록 수정 필요

query string `?` 캐릭터 예외처리

검색했을 때 검색기록 바로 뜨는 현상

검색을 위해 엔터쳤을 때 해당 검색기록이 펼쳐져서 보기 불편한 현상이 있음

Vuetify combobox에서 manually 여닫는 기능이 있는지 확인 필요

Typescript migration for Nuxt client

• Nuxt Typescript 마이그레이션 작업
• Shared 폴더에 현재 서버에 있는 Vibe API 타입 이동

Github Actions로 CD 설정

중복된 항목은 하나만 표시하도록 수정

아래 그림과 같이 노래 제목과 가수 이름이 같은 경우에는 하나만 표시하도록 수정하면 좋겠습니다.

Fix code scanning alert - Server-side request forgery

Tracking issue for:

• https://github.com/sunjae-kim/lyrics-viewer/security/code-scanning/1

세팅 버튼이 App의 MaxWidth 영역 안에 위치

Prettier ESLint 설정

Test Framework 추가

19금 노래의 정보 불러오지 못함

Input 컴포넌트 페이지에서 분리

README 작성

Typescript migration

Vibe API 사용문구 표시

Shared 폴더 구현

Interface, type, utils 등 서버와 클라이언트가 공유하는 폴더 생성

아이콘 깨지는 현상

가사 페이지에서 뒤로가기 버튼 추가

검색어 여부에 따라 리스트가 비었을 때 텍스트 분기

검색어가 없으면 검색어를 입력해주세요.
검색어가 있으면 검색 결과가 없습니다.

Dark/Light 모드 개선

• LocalStorageInterface로 관리
• Manually 설정 or 시스템 모드 따라가는 설정 선택할 수 있도록 구현

노드 환경별 환경변수 관리