모두의 오디오 : MODI

테킷 플러스 프론트엔드 1기

오픈마켓 프로젝트 : TEAM IP3

프로젝트 개요

🗓️ 기획 기간 : 2023.11.20 ~ 2023.11.27
🗓️ 개발 기간 : 2023.11.28 ~ 2023.12.22
소규모 음원 제작자들을 위한 오픈마켓 플랫폼 구축
(web for PC)

모두의 오디오 MODI

팀원 소개

안승지	강보경	김진주

🛠️Tech Stack

Environment

Language

Framework

State Management

Style

Library

Deploy

🧰Tools

📁디렉터리 트리

📦src
 ┣ 📂components
 ┃ ┣ 📂listMusicPlayer
 ┃ ┃ ┣ 📜ControlPanel.tsx
 ┃ ┃ ┣ 📜MusicPlayer.tsx
 ┃ ┃ ┗ 📜PlayerSlider.tsx
 ┃ ┣ 📜AuthInput.tsx
 ┃ ┣ 📜FilterComponent.tsx
 ┃ ┣ 📜FormInput.tsx
 ┃ ┣ 📜FunctionalButton.tsx
 ┃ ┣ 📜LoadingSpinner.tsx
 ┃ ┣ 📜MyPageList.tsx
 ┃ ┣ 📜ProductDetailBadgeComponent.tsx
 ┃ ┣ 📜ProductDetailComponent.tsx
 ┃ ┣ 📜ProductListComponent.tsx
 ┃ ┣ 📜ProductListItem.tsx
 ┃ ┣ 📜ReplyComponent.tsx
 ┃ ┣ 📜SearchBar.tsx
 ┃ ┣ 📜SelectGenre.tsx
 ┃ ┗ 📜Textarea.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useCategoryFilterProductList.ts
 ┃ ┗ 📜useRequireAuth.ts
 ┣ 📂interfaces
 ┃ ┣ 📜category.d.ts
 ┃ ┣ 📜custom.d.ts
 ┃ ┣ 📜order.d.ts
 ┃ ┣ 📜product.d.ts
 ┃ ┗ 📜user.d.ts
 ┣ 📂layout
 ┃ ┣ 📜AuthLayout.tsx
 ┃ ┣ 📜Footer.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┗ 📜RootLayout.tsx
 ┣ 📂pages
 ┃ ┣ 📂error
 ┃ ┃ ┣ 📜Error404.tsx
 ┃ ┃ ┗ 📜ErrorBoundary.tsx
 ┃ ┣ 📂product
 ┃ ┃ ┣ 📜ProductDetail.tsx
 ┃ ┃ ┣ 📜ProductEdit.tsx
 ┃ ┃ ┣ 📜ProductManage.tsx
 ┃ ┃ ┣ 📜ProductPurchase.tsx
 ┃ ┃ ┗ 📜ProductRegistration.tsx
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📜MyPage.tsx
 ┃ ┃ ┣ 📜SignIn.tsx
 ┃ ┃ ┣ 📜SignUp.tsx
 ┃ ┃ ┣ 📜UserEdit.tsx
 ┃ ┃ ┣ 📜UserOrders.tsx
 ┃ ┃ ┗ 📜UserProducts.tsx
 ┃ ┗ 📜Index.tsx
 ┣ 📂states
 ┃ ┣ 📜authState.ts
 ┃ ┣ 📜categoryState.ts
 ┃ ┗ 📜productListState.ts
 ┣ 📂styles
 ┃ ┗ 📜common.ts
 ┣ 📂utils
 ┃ ┣ 📜debounce.ts
 ┃ ┣ 📜filterProductList.ts
 ┃ ┣ 📜formData.ts
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜itemWithExpireTime.ts
 ┃ ┣ 📜numberWithComma.ts
 ┃ ┣ 📜refreshToken.ts
 ┃ ┗ 📜uploadFile.ts
 ┣ 📜App.tsx
 ┣ 📜main.tsx
 ┣ 📜routes.tsx
 ┗ 📜vite-env.d.ts

👀서버 구동

프로젝트 루트에서 실행

cd open-market
npm run dev

프로젝트 빌드

cd open-market
npm run build

프로젝트 프리뷰

cd open-market
npm run preview