사용 기술

• react + vite + typescript
• stroybook
• styled-components
• eslint
• prettier
• hls.js (실시간 스트리밍 통신을 위한 라이브러리)

폴더 구조

📦src
 ┣ 📂assets  // 사진 or 로고 등
 ┣ 📂components // 재사용 가능한 컴포넌트들
 ┣ 📂pages // 페이지
 ┣ 📂types // 타입들
 ┣ 📂services // 외부 api 연결
 ┣ 📂stories // 스토리북
 ┣ 📂utils // 공통으로 사용하는 함수들 저장
 ┣ 📂styles // 폰트, 색상 등을 저장
 ┣ 📜App.tsx
 ┗ 📜main.tsx

📦src
 ┣ 📂assets  // 사진 or 로고 등
 ┃ ┗ 📜react.svg
 ┣ 📂components // 재사용 가능한 컴포넌트들
 ┃ ┗ 📂hls
 ┃ ┃ ┗ 📜index.tsx
 ┣ 📂pages // 페이지
 ┃ ┣ 📂ExPage
 ┃ ┃ ┣ 📜ExPage.styles.tsx
 ┃ ┃ ┗ 📜ExPage.tsx
 ┃ ┗ 📂HomePage
 ┃ ┃ ┣ 📜HomePage.styles.tsx
 ┃ ┃ ┗ 📜HomePage.tsx
 ┣ 📂services // 외부 api 연결
 ┣ 📂stories // 스토리북
 ┃ ┣ 📜Button.stories.ts
 ┃ ┣ 📜Button.tsx
 ┃ ┗ 📜button.css
 ┣ 📂utils // 공통으로 사용하는 함수들 저장
 ┣ 📜App.tsx
 ┗ 📜main.tsx