euijinkk/kyrics-frontend

🚀서버보단 웹이지

사이트링크

💫 Kyrics는 이런 서비스입니다!

🎶 Learn Korean through your favorite K-Pop artists and songs!

케이팝 가사로 배우는 우리말, 키릭스 ✨
키릭스를 통해 우리말을 쉽고 재미있게 배워보세요!

기능 소개

1. Home View

• 아티스트를 선택하는 화면입니다.

2. Artist View

• 아티스트의 노래를 선택하는 화면입니다.

3. Study View

• 학습이 가능하도록 player를 만들고, Key Expressions 제공합니다.
• 음악이 흘러감에 따라 가사가 하이라이팅 됩니다.
• 가사를 클릭하면, 해당 가사가 흘러나오는 시간으로 이동합니다.

4. Login View

• Google, Facebook Social Login을 제공합니다.

5. My Songs View

• 즐겨찾기 추가한 노래를 모아둡니다

6. My Vocab View

• 즐겨찾기 추가한 단어를 모아둡니다

구현

🛠 사용한 기술

    

"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"axios": "^0.21.1",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"recoil": "^0.3.1",
"reset-css": "^5.0.1",
"swr": "^0.5.6"

🗂 프로젝트 구조

.
├── components
│   ├── common
│   │   ├── Footer.tsx
│   │   └── Header.tsx
│   ├── home
│   │   └── Title.tsx
│   ├── mypage
│   │   ├── MySong.tsx
│   │   ├── MyVoca.tsx
│   │   └── Setting.tsx
│   └── study
│       ├── AddVocab.tsx
│       ├── KeyExpression.tsx
│       ├── Lyrics.tsx
│       ├── Player.tsx
│       └── PlayerBtns.tsx
├── hooks
│   └── useExample.ts
├── lib
│   ├── constants
│   │   └── example.ts
│   └── utils
│       └── example.ts
├── next-env.d.ts
├── next.config.js
├── pages
│   ├── _app.tsx
│   ├── category.tsx
│   ├── index.tsx
│   ├── login.tsx
│   ├── mypage
│   │   └── [id].tsx
│   └── study.tsx
├── public
│   └── assets
│       ├── icons
│       │   └── favicon.ico
│       └── images
│           └── example.ts
├── styles
│   └── globals.css
└── types
    └── index.ts

🖥 Contributor

• 김의진
• 박나희
• 이다은
• 이정연