Conti:ed

Conti:ed (1차 배포 완료) 📅

1차 개발 기간: 2024.01 ~ 2024.11

관련 링크 🔗

개발 버전 : client-20h.pages.dev/
기록 일지 : https://www.notion.so/Conti-ed-8e533187ef4d4d5e90b3916aac7101f5?pvs=4

프로젝트 소개 🫱🏻‍🫲🏻

• 콘티는 영화 등의 촬영을 위하여 각본을 바탕으로 필요한 모든 사항을 기록한 것을 의미합니다.
  Conti:ed 서비스에서의 콘티는 교회 및 밴드에서 진행되는 콘서트 형식의 곡들이 어떻게 진행되어 가는지를 상세히 기록하기 위해 사용됩니다.
  

• 팀 리더와 팀원들 간의 소통을 원활히 하기 위해 콘티가 업데이트되는 사항을 즉각적으로 확인할 수 있는 서비스입니다.
  이에 더해 콘티 작성에 어려움을 느끼는 팀 리더들에게 콘티를 생성해주고 추천해주는 시스템도 추가될 예정입니다.
  

Conti in Conti:ed

• Conti is a term utilized in film and various other types of production.
  It denotes a document that records all necessary details based on a script.
  
• At Conti:ed service, Conti is utilized to meticulously document the progression of concert-style songs performed by churches and bands.

A Conti Sharing and Creation Service for Leaders

• This service is aimed at facilitating seamless communication between team leaders and members.
  It ensures immediate access to updates made to the Conti.
• Moreover, the system is set to incorporate new features soon.
  These features will aid team leaders who struggle with creating Conti by generating and recommending it for them.

시작 가이드 🛫

Requirements

For building and running the application you need:

• [React 18.2.0]
• [Django 5.0]
• [ytmusicapi 1.4.2]

Installation

$ git clone https://github.com/
$ cd 

Backend

$ cd 
$ npm install
$ npm run develop

Frontend

$ cd
$ npm install
$ npm start

---

Stacks 🐈

Environment

Config

Development

Communication

---

화면 구성 📺

Main Page	My Conti Page	Conti Detail Page
Upload Page	Search Page	Settings Page

---

주요 기능 📦

⭐️ 로그인 및 자신의 콘티 작성

• 로그인 후, 자신의 콘티를 업로드하거나 나만의 콘티 작성 가능

⭐️ 콘티, 곡, 키워드들의 기본적인 CRUD

• 콘티, 곡, 콘티 내 키워드를 생성, 수정, 삭제 가능
• 다른 사용자들의 콘티에서 곡을 가져오기도 가능

⭐️ Youtube 재생목록을 이용한 콘티 공유 기능

• 업로드 시, Youtube 재생목록 링크를 첨부하면 해당 재생목록의 곡들을 콘티에 추가 가능

---

아키텍쳐

디렉토리 구조

client
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ fonts
│  │  ├─ ESAMANRU BOLD.TTF
│  │  ├─ ESAMANRU LIGHT.TTF
│  │  └─ ESAMANRU MEDIUM.TTF
│  └─ index.html
├─ README.md
├─ src
│  ├─ api.ts
│  ├─ atoms.ts
│  ├─ components
│  │  ├─ AddLoading.tsx
│  │  ├─ AlbumPlaceholder.tsx
│  │  ├─ BibleVerseSelector.tsx
│  │  ├─ Conti.tsx
│  │  ├─ ContiPlaceholder.tsx
│  │  ├─ DetailOptions.tsx
│  │  ├─ EmptyState.tsx
│  │  ├─ HomeButton.tsx
│  │  ├─ Icon.tsx
│  │  ├─ InputSafariSpace.tsx
│  │  ├─ Keyboard.tsx
│  │  ├─ Loading.tsx
│  │  ├─ LyricsOnlySongItem.tsx
│  │  ├─ Modals
│  │  │  ├─ AddSongToConti.tsx
│  │  │  ├─ ConfirmModal.tsx
│  │  │  └─ DescriptionModal.tsx
│  │  ├─ Notification.tsx
│  │  ├─ SafariSpace.tsx
│  │  ├─ SearchSuggestions.tsx
│  │  ├─ SectionTabs.tsx
│  │  ├─ SongItem.tsx
│  │  ├─ SongList.tsx
│  │  ├─ SongPlaceholder.tsx
│  │  ├─ StatusBar.tsx
│  │  ├─ TabBar.tsx
│  │  ├─ Tabs
│  │  │  ├─ AllTab.tsx
│  │  │  ├─ ContiTab.tsx
│  │  │  ├─ LyricsTab.tsx
│  │  │  └─ SongsTab.tsx
│  │  ├─ Uploads
│  │  │  ├─ AIUpload.tsx
│  │  │  ├─ CustomUpload.tsx
│  │  │  └─ YouTubeUpload.tsx
│  │  └─ waitingAnimation.json
│  ├─ constants
│  │  └─ homeConstants.tsx
│  ├─ data
│  │  └─ bibleData.json
│  ├─ GlobalSVGProvider.tsx
│  ├─ hooks
│  │  ├─ useAdaptiveTextColor.ts
│  │  ├─ useContiDetailState.ts
│  │  ├─ useHashtags.ts
│  │  └─ useHomeLogic.ts
│  ├─ index.tsx
│  ├─ Root.tsx
│  ├─ Router.tsx
│  ├─ Routes
│  │  ├─ AddSong.tsx
│  │  ├─ AuthCallback.tsx
│  │  ├─ ContiDetail.tsx
│  │  ├─ Home.tsx
│  │  ├─ MyFavoriteContis.tsx
│  │  ├─ MyPage.tsx
│  │  ├─ MyUploadedContis.tsx
│  │  ├─ Result.tsx
│  │  ├─ Search.tsx
│  │  ├─ Select.tsx
│  │  ├─ Start.tsx
│  │  ├─ Upload.tsx
│  │  └─ Wait.tsx
│  ├─ styled.d.ts
│  ├─ styles
│  │  ├─ Conti.styles.ts
│  │  ├─ ContiDetail.styles.ts
│  │  ├─ Header.styles.ts
│  │  ├─ Home.styles.ts
│  │  ├─ LoadingSpinner.ts
│  │  ├─ Modal.styles.ts
│  │  ├─ Search.styles.ts
│  │  ├─ TabBar.styles.ts
│  │  └─ Upload.styles.ts
│  ├─ Theme.ts
│  ├─ types.ts
│  └─ utils
│     ├─ auth.ts
│     ├─ axios.ts
│     ├─ formatDuration.ts
│     ├─ lyricsUtils.ts
│     └─ randomUtils.ts
└─ tsconfig.json

---

기타 사항 (Getting Started with Create React App)

• This project was bootstrapped with Create React App.

Available Scripts

• In the project directory, you can run:

npm start

• Runs the app in the development mode.
  Open http://localhost:3000 to view it in the browser.

• The page will reload if you make edits.
  You will also see any lint errors in the console.

npm test

• Launches the test runner in the interactive watch mode.
  See the section about running tests for more information.

npm run build

• Builds the app for production to the build folder.
  It correctly bundles React in production mode and optimizes the build for the best performance.

• The build is minified and the filenames include the hashes.
  Your app is ready to be deployed!

• See the section about deployment for more information.

npm run eject

• Note: this is a one-way operation. Once you eject, you can’t go back!

• If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

• Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

• You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

• You can learn more in the Create React App documentation.

• To learn React, check out the React documentation.