README.md

🔉 프로젝트 소개

아나운서 쉐도잉으로 키우는 스피치 자신감, 딜리버블

딜리버블은 발성, 발음 등을 개선하여 “잘” 말하고 싶은 사람들이
아나운서 쉐도잉과 뉴스 리딩을 통해 스피치 자신감을 키우고, 더 세련된 이미지를 만들도록 도와주는 서비스입니다.

💡 서비스 페이지 및 기능 소개

1️⃣ 랜딩 페이지

• 일러스트와 로티 애니메이션을 통해 서비스 이용 방법을 안내합니다.

2️⃣ 홈

• 스피치 가이드와 딜리버블 추천 뉴스를 확인할 수 있습니다.

3️⃣ 학습하기

• 셀렉트 박스에서 방송사, 분야, 발화자를 선택해 원하는 영상을 검색할 수 있습니다.

4️⃣ 학습 상세

• 우측 상단 뉴스 화면을 통해 아나운서의 모습을 확인하고 영상을 재생할 수 있습니다.
• 아나운서가 읽고 있는 문장은 파란색 글씨로 좌측 스크립트에 바로 표시됩니다.
• 스크립트의 문장을 클릭해 영상 시점을 이동할 수 있습니다.
• 스크립트를 추가하고 새롭게 기록을 남기며 여러 번 학습할 수 있습니다.
• 스크립트의 단어를 드래그해 하이라이트를 남길 수 있습니다.
• 하이라이트한 단어에 메모를 남길 수 있습니다.
• 단어 사이의 공백을 클릭해 끊어 읽기 표시를 남기며 학습할 수 있습니다.
• 리딩 연습을 녹음하고 들어보며 점검할 수 있습니다.
• 스크립트 추가, 하이라이트, 끊어 읽기, 메모, 녹음은 로그인이 필요한 기능입니다.

5️⃣ 복습하기

• 즐겨찾기한 영상과 학습한 영상을 모아볼 수 있습니다.

6️⃣ 기타

• 404 페이지
• 카카오 로그인
• 영상 즐겨찾기

👩🏻‍💻 팀원 소개

백지연	이혜준	주송아	최유진
@100Gyeon	@solar3070	@songah119	@choichoijin

🛠 기술 스택

역할	종류
Framework
Styling
State Management
Programming Language
Data Fetching
Formatting
Package Manager
Version Control

📂 폴더 구조

┣ 📂.github
┣ 📂public
┃ ┣ 📂assets
┃ ┃ ┣ 📂favicon
┃ ┃ ┣ 📂icons
┃ ┃ ┣ 📂images
┃ ┃ ┗ 📂lottie
┣ 📂src
┃ ┣ 📂components
┃ ┣ 📂constants
┃ ┣ 📂hooks
┃ ┣ 📂pages
┃ ┣ 📂services
┃ ┣ 📂stores
┃ ┣ 📂styles
┃ ┣ 📂types
┃ ┗ 📂utils
┗ 📜etc (setting files)