💁‍♀ 자유로운 다운로드, Allrights

“검색은 더 쉽게, 공유 및 다운로드는 더 빠르게, 유저와 상호 작용이 가능한 음향 서비스”

👉🏻 프로젝트 핵심 기능

카테고리 검색 기능

음원 업로드 & 다운로드

쇼츠(영상클립) 업로드 및 뷰어 기능

포인트 적립 기능

유튜브 링크 스크랩을 통한 추출 기능

비회원일 경우 업로드 및 다운로드 시 익명 정보 표시

본인이 업로드한 배경음악 및 효과음 항목 확인 가능

🔥 프로젝트 목표

서비스 배포

음향 전문가와의 컨택 및 디벨롭 과정을 통해 정식 런칭

프로젝트로 얻는 값진 경험

📝 Wire Frame

🔗 moqups: 와이퍼프레임 구성 링크

🎨 figma: 디자인 링크

📘 notion: 노션 링크

👉🏻 페이지 구성

signUp & signIn: 회원가입 및 로그인 페이지

mainpage: 시작 페이지

soundeffect: 효과음 페이지

bgmusic: 배경음악 페이지

princing: 요금제 페이지

uploadpage: 배경음악 및 효과음 업로드 페이지

mypage: 마이페이지

edit: 회원정보 수정 페이지

notfound: 찾을 수 없는 페이지

✨ Platforms & Languages

💻 Teachnology

👉🏻 주요 라이브러리

react-router-dom: 전체적인 Path 설정

styled-components: CSS in JS 기법

axios: 백엔드 API 통신

👉🏻 실행 방법

1. 프로젝트 폴더 열어 터미널 키기
2. npm install 명령어
3. npm ren dev 명령어

👉🏻 폴더 구조

FE-allrights
	├─ .eslintrc.cjs
	├─ .git
	│  ├─ config
	│  ├─ description
	│  ├─ HEAD
	│  ├─ hooks
	│  │  ├─ applypatch-msg.sample
	│  │  ├─ commit-msg.sample
	│  │  ├─ fsmonitor-watchman.sample
	│  │  ├─ post-update.sample
	│  │  ├─ pre-applypatch.sample
	│  │  ├─ pre-commit.sample
	│  │  ├─ pre-merge-commit.sample
	│  │  ├─ pre-push.sample
	│  │  ├─ pre-rebase.sample
	│  │  ├─ pre-receive.sample
	│  │  ├─ prepare-commit-msg.sample
	│  │  ├─ push-to-checkout.sample
	│  │  └─ update.sample
	│  ├─ index
	│  ├─ info
	│  │  └─ exclude
	│  ├─ objects
	│  │  ├─ info
	│  │  └─ pack
	│  │     ├─ pack-82b90e427b8b278a95925cc12d416105ea2d5509.idx
	│  │     └─ pack-82b90e427b8b278a95925cc12d416105ea2d5509.pack
	│  ├─ packed-refs
	│  └─ refs
	│     ├─ heads
	│     │  └─ main
	│     ├─ remotes
	│     │  └─ origin
	│     │     └─ HEAD
	│     └─ tags
	├─ .gitignore
	├─ dist
	│  ├─ assets
	│  │  ├─ AllRights-31daddfe.png
	│  │  ├─ BgMusicImg-285cce50.png
	│  │  ├─ clip_home-ccae73d4.png
	│  │  ├─ download-e4932f3c.png
	│  │  ├─ index-1d7e0511.js
	│  │  ├─ phone1-149cfce4.png
	│  │  ├─ phone2-46004c63.png
	│  │  ├─ phone3-a157e294.png
	│  │  ├─ profilePhoto-14d723e7.png
	│  │  ├─ ring_home1-a2ab7df5.png
	│  │  ├─ soundWave-95dcde9f.png
	│  │  ├─ soundWave1-28721a32.png
	│  │  ├─ soundWave2-3ab6ebf2.png
	│  │  ├─ soundWave3-06f23912.png
	│  │  └─ soundWave_home-27d049bd.png
	│  ├─ index.html
	│  ├─ vite.svg
	│  └─ _redirects
	├─ index.html
	├─ netlify.toml
	├─ package-lock.json
	├─ package.json
	├─ public
	│  ├─ AllRights_not.png
	│  ├─ headlogo.png
	│  ├─ icon.png
	│  └─ vite.svg
	├─ README.md
	├─ src
	│  ├─ api
	│  │  └─ axios.js
	│  ├─ App.jsx
	│  ├─ assets
	│  │  ├─ font
	│  │  │  ├─ Pretendard-Black.ttf
	│  │  │  ├─ Pretendard-Bold.ttf
	│  │  │  ├─ Pretendard-ExtraBold.ttf
	│  │  │  ├─ Pretendard-ExtraLight.ttf
	│  │  │  ├─ Pretendard-Light.ttf
	│  │  │  ├─ Pretendard-Medium.ttf
	│  │  │  ├─ Pretendard-Regular.ttf
	│  │  │  ├─ Pretendard-SemiBold.ttf
	│  │  │  └─ Pretendard-Thin.ttf
	│  │  ├─ images
	│  │  │  ├─ AllRights.png
	│  │  │  ├─ Allrights_home.png
	│  │  │  ├─ BgMusicImg.png
	│  │  │  ├─ Check.png
	│  │  │  ├─ clip_home.png
	│  │  │  ├─ download.png
	│  │  │  ├─ footer_github.png
	│  │  │  ├─ footer_insta.png
	│  │  │  ├─ phone1.png
	│  │  │  ├─ phone2.png
	│  │  │  ├─ phone3.png
	│  │  │  ├─ profilePhoto.png
	│  │  │  ├─ ring_home1.png
	│  │  │  ├─ ring_home2.png
	│  │  │  ├─ soundWave.png
	│  │  │  ├─ soundWave1.png
	│  │  │  ├─ soundWave2.png
	│  │  │  ├─ soundWave3.png
	│  │  │  ├─ soundWave_home.png
	│  │  │  ├─ VectorLeft.png
	│  │  │  └─ VectorRight.png
	│  │  ├─ music
	│  │  │  ├─ LetItGo.mp3
	│  │  │  ├─ y2mate.com - All I Want for Christmas Is You.mp3
	│  │  │  ├─ y2mate.com - Fifty Fifty  Cupid LyricsLetra.mp3
	│  │  │  ├─ y2mate.com - Sam Smith  To Die For Lyrics.mp3
	│  │  │  ├─ y2mate.com - Santa Claus Is Coming To Town.mp3
	│  │  │  ├─ y2mate.com - Silver Bells.mp3
	│  │  │  ├─ y2mate.com - Wham  Last Christmas Lyrics.mp3
	│  │  │  ├─ y2mate.com - 모동숲 KK아이돌 한글 가사 뮤직비디오노래방 버전.mp3
	│  │  │  ├─ y2mate.com - 모여봐요 동물의 숲  나비보벳따우 KK하우스.mp3
	│  │  │  ├─ y2mate.com - 첫 눈 The First Snow.mp3
	│  │  │  └─ 불 타오르는 효과음.mp3
	│  │  └─ react.svg
	│  ├─ components
	│  │  ├─ button
	│  │  │  └─ button-main.jsx
	│  │  ├─ footer
	│  │  │  ├─ Footer.jsx
	│  │  │  └─ style.jsx
	│  │  ├─ Header
	│  │  │  └─ Header.jsx
	│  │  ├─ input
	│  │  │  ├─ input-search.jsx
	│  │  │  └─ input-sign.jsx
	│  │  ├─ list
	│  │  │  ├─ list-effect.jsx
	│  │  │  ├─ list-mypage.jsx
	│  │  │  ├─ list-post.jsx
	│  │  │  └─ list-save.jsx
	│  │  ├─ listItem
	│  │  │  ├─ item-effect.jsx
	│  │  │  ├─ item-mypage.jsx
	│  │  │  ├─ item-phone.jsx
	│  │  │  ├─ item-post.jsx
	│  │  │  └─ item-save.jsx
	│  │  ├─ musiclist
	│  │  │  ├─ Musiceffect.jsx
	│  │  │  ├─ Musiclist.jsx
	│  │  │  └─ style.jsx
	│  │  ├─ pagination
	│  │  │  ├─ Pagination.jsx
	│  │  │  └─ style.jsx
	│  │  ├─ waveform
	│  │  │  ├─ style.jsx
	│  │  │  └─ Wavefrom.jsx
	│  │  └─ youtube
	│  │     └─ Youtube.jsx
	│  ├─ main.jsx
	│  ├─ pages
	│  │  ├─ bgmusic
	│  │  │  ├─ BgMusic.jsx
	│  │  │  └─ style.jsx
	│  │  ├─ edit
	│  │  │  └─ Edit.jsx
	│  │  ├─ mainpage
	│  │  │  └─ Mainpage.jsx
	│  │  ├─ mypage
	│  │  │  └─ Mypage.jsx
	│  │  ├─ notfound
	│  │  │  └─ Notfound.jsx
	│  │  ├─ pricing
	│  │  │  └─ Pricing.jsx
	│  │  ├─ signIn
	│  │  │  └─ Signin.jsx
	│  │  ├─ signUp
	│  │  │  └─ Signup.jsx
	│  │  ├─ soundeffect
	│  │  │  └─ Soundeffect.jsx
	│  │  └─ uploadpage
	│  │     ├─ style.jsx
	│  │     └─ Upload.jsx
	│  ├─ router.jsx
	│  ├─ styles
	│  │  ├─ colors.js
	│  │  └─ globalStyle.js
	│  └─ util
	│     ├─ mypage.js
	│     ├─ post.js
	│     ├─ posts.js
	│     └─ save.js
	├─ vite.config.js
	└─ yarn.lock	

🦁 FE Developers

🔥 FE 목표

반응형 웹디자인

음원 재생 파형 시각적 구현

양인서(한성대)

이나경(한성대)

차승민(동국대)