Skip to content

Latest commit

Β 

History

History
334 lines (176 loc) Β· 8.95 KB

README.md

File metadata and controls

334 lines (176 loc) Β· 8.95 KB

YourStar 🌟

1. μ„œλΉ„μŠ€ μ†Œκ°œ

주제

λΉ„λŒ€λ©΄ νŒ¬λ―ΈνŒ… μ„œλΉ„μŠ€ YourStar


κ°œμš”

λŒ€λ©΄ 및 λΉ„λŒ€λ©΄ νŒ¬λ―ΈνŒ…μ˜ μž₯점을 μ‚΄λ¦° μŠ€νƒ€μ™€ νŒ¬λ“€μ„ μœ„ν•œ νŽΈλ¦¬ν•œ λΉ„λŒ€λ©΄ νŒ¬λ―ΈνŒ… μ„œλΉ„μŠ€

κ°œμš”


YourStar의 특μž₯점

  1. μ†μ‰¬μš΄ λΉ„λŒ€λ©΄ νŒ¬λ―ΈνŒ… μ‹ μ²­ 및 μ°Έκ°€

  2. ν˜„μž¬κΉŒμ§€ μΆœμ‹œλ˜μ–΄μžˆλŠ” ν”Œλž«νΌ(V-Live, μΈμŠ€νƒ€λΌμ΄λΈŒ, 버블 λ“±) 및 λΉ„λŒ€λ©΄ νŒ¬λ―ΈνŒ… λ°©μ‹μ˜ 단점 보완

    • μ–‘λ°©ν–₯ μ†Œν†΅ 및 μ—”ν„°ν…ŒμΈμ  μš”μ†Œ(OX κ²Œμž„, μ΄ˆμ„±κ²Œμž„, QnA λ“±)와 1λŒ€1 νŒ¬λ―ΈνŒ…μ„ ν†΅ν•˜μ—¬ νŒ¬λ“€κ³Όμ˜ μœ λŒ€κ° 증진
  3. μŠ€νƒ€μ˜ needs 반영

    • κΈ°μ‘΄ λΉ„λŒ€λ©΄ νŒ¬μ‹ΈμΈνšŒμ—μ„œλŠ” κ΄€κ³„μžκ°€ μ „ν™”λ₯Ό ν•˜λ‚˜ν•˜λ‚˜ κ±Έκ³  타이머λ₯Ό μ„ΈνŒ…ν•˜λŠ” λ“±μ˜ λ²ˆκ±°λ‘œμ›€μ΄ μžˆμœΌλ‚˜, YourStarμ—μ„œλŠ” 1λŒ€1 νŒ¬λ―ΈνŒ…μ—μ„œμ˜ μžλ™ μž…μž₯ 및 퇴μž₯으둜 νŽΈλ¦¬ν•¨ 제곡

      • λΆ€μ μ ˆν•œ 단어 필터링, κ²½κ³  및 강퇴λ₯Ό ν†΅ν•œ μŠ€νƒ€ 인ꢌ 보호

      • 곡연λͺ¨λ“œ, κ²Œμž„, QnA λ“±μ˜ 원클릭 컨텐츠λ₯Ό 제곡으둜 νŽΈλ¦¬ν•œ 진행 κ°€λŠ₯

      • λ―ΈνŒ…μ— μ°Έμ—¬ν–ˆλ˜ νŒ¬λ“€μ˜ 정보 쑰회

      • λ―ΈνŒ… μ‹œ μ§„ν–‰ν–ˆλ˜ κ²Œμž„ λ“±μˆ˜ 쑰회

  4. νŒ¬λ“€μ˜ needs 반영

    • κΈ°μ‘΄ λΉ„λŒ€λ©΄ νŒ¬μ‹ΈμΈνšŒμ—μ„œλŠ” 미리 사인을 ν•΄μ„œ λ³΄λ‚΄μ£ΌλŠ” λ°©μ‹μœΌλ‘œ νŒ¬λ“€μ΄ κ°€μž₯ μ›ν•˜λŠ” μΆ”κ°€ μ½”λ©˜νŠΈ μž‘μ„± λΆˆκ°€λŠ₯. ν•˜μ§€λ§Œ YourStar의 μ‹€μ‹œκ°„ 사인 λ°›κΈ° κΈ°λŠ₯으둜 μžμ‹ λ§Œμ„ μœ„ν•œ μŠ€νŽ˜μ…œν•œ 사인 λ°›κΈ° κΈ°λŠ₯ νƒ‘μž¬

    • 1λŒ€1 νŒ¬λ―ΈνŒ… μžλ™ λ…Ήν™” 및 μ €μž₯


κ°œλ°œκΈ°κ°„

2022-01-10 ~ 2022-02-18(6μ£Ό)

νŒ€μ›

박동쀀 : νŒ€μž₯ / Frontend / Design / WebRTC

손은성 : Frontend / Design / WebRTC

μ§€μˆ˜λ―Ό : Frontend / Design / λ™μž‘ 인식

μ•ˆμ˜μ› : BackEnd / μ„œλ²„ 관리 및 배포 / WebRTC

κ°•μ†Œν˜„ : BackEnd / λ™μž‘ 인식 

κΉ€μ§€μŠ¬ : BackEnd / WebRTC

2. μ„œλΉ„μŠ€ 기획

λ°°κ²½

μ½”λ‘œλ‚˜ 19둜 μΈν•œ νŒ¬λ―ΈνŒ… 및 μ½˜μ„œνŠΈκ°€ μ–΄λ €μ›Œμ§€κ³  λΉ„λŒ€λ©΄ ν”Œλž«νΌμ„ ν™œμš©ν•œ μ†Œν†΅μ΄ μ¦κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 단방ν–₯ μ†Œν†΅, λΉ„λ§€λ„ˆ μœ μ € κ΄€λ¦¬μ˜ λΆ€μž¬, λΉ„λŒ€λ©΄ μ˜μƒ νŒ¬μ‹ΈμΈνšŒ μ„€μ •μ˜ λ²ˆκ±°λ‘œμ›€ λ“±μ˜ λ‹€μ–‘ν•œ λ‹¨μ μœΌλ‘œ 인해 μŠ€νƒ€μ™€ 팬의 아쉬움이 컀지고 μžˆλŠ” μƒν™©μž…λ‹ˆλ‹€.

λ”°λΌμ„œ μ΄λŸ¬ν•œ 단점듀을 보완할 뿐만 μ•„λ‹ˆλΌ μŠ€νƒ€μ™€ 팬의 μœ λŒ€κ° 증진을 μœ„ν•œ λ‹€μ–‘ν•œ κΈ°λŠ₯을 μ œκ³΅ν•˜κ³ μž YourStar μ„œλΉ„μŠ€κ°€ λ§Œλ“€μ–΄μ§€κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.


FrontEnd

1) UI λ””μžμΈ

uiλ””μžμΈ


BackEnd

1) DB ERD 섀계

erd


3. 기술 μŠ€νƒ

μ•„ν‚€ν…μ²˜


4. μ£Όμš” κΈ°λŠ₯ μ†Œκ°œ

μ‚¬μš©μžλ³„ μ—­ν•  및 κΆŒν•œ

  • κ΄€λ¦¬μž : νŒ¬λ―ΈνŒ… κ°œμ„€ 승인/거절 κΆŒν•œ, νšŒμ› 정보 쑰회 κΆŒν•œ, κ΄€κ³„μž 계정 생성 κΆŒν•œ, νŒ¬λ―ΈνŒ… 쀑 λΉ„λ§€λ„ˆ μœ μ € κ²½κ³  및 강퇴 κΆŒν•œ

  • κ΄€κ³„μž(μ†Œμ†μ‚¬) : νŒ¬λ―ΈνŒ… κ°œμ„€ μ‹ μ²­ κΆŒν•œ, νŒ¬λ―ΈνŒ… 쀑 λΉ„λ§€λ„ˆ μœ μ € κ²½κ³  및 강퇴 κΆŒν•œ, νŒ¬λ―ΈνŒ…μ— μ°Έκ°€ν•œ μœ μ € 정보 쑰회 κΆŒν•œ

  • 일반 νšŒμ› : νŒ¬λ―ΈνŒ… μ°Έκ°€ μ‹ μ²­, μžμ‹ μ΄ μ°Έκ°€ν•œ νŒ¬λ―ΈνŒ…μ˜ 사인, λ…Ήν™” 쑰회

  • 곡톡 κΆŒν•œ : 둜그인, λ‘œκ·Έμ•„μ›ƒ, νšŒμ›κ°€μž…, λ§ˆμ΄νŽ˜μ΄μ§€ 쑰회/μˆ˜μ •, νŒ¬λ―ΈνŒ… 전체 및 상세 쑰회, FAQ 쑰회

  • λΉ„νšŒμ› 이용 κ°€λŠ₯ μ„œλΉ„μŠ€ : νšŒμ›κ°€μž…, νŒ¬λ―ΈνŒ… 전체 및 상세 쑰회, FAQ 쑰회


πŸͺ ν™ˆνŽ˜μ΄μ§€

1) νšŒμ›κ°€μž…

_02_νšŒμ›κ°€μž…

νšŒμ›κ°€μž…μ„ 톡해 YourStar의 νšŒμ›(일반 νšŒμ› λ“±κΈ‰)이 될 수 μžˆμŠ΅λ‹ˆλ‹€. νšŒμ›κ°€μž… ν›„ 이메일 μΈμ¦κΉŒμ§€ μ™„λ£Œ μ‹œ, 둜그인이 κ°€λŠ₯ν•©λ‹ˆλ‹€.


2) λΉ„λ°€λ²ˆν˜Έ μ΄ˆκΈ°ν™”

_01_λΉ„λ°€λ²ˆν˜Έ_μ΄ˆκΈ°ν™”

일반 νšŒμ› μ‚¬μš©μžκ°€ λΉ„λ°€λ²ˆν˜Έκ°€ κΈ°μ–΅λ‚˜μ§€ μ•Šμ„ μ‹œ, λΉ„λ°€λ²ˆν˜Έ μ°ΎκΈ°λ₯Ό 톡해 κ°€μž…ν–ˆλ˜ λ©”μΌλ‘œ μ΄ˆκΈ°ν™”λœ λΉ„λ°€λ²ˆν˜Έλ₯Ό 받을 수 μžˆμŠ΅λ‹ˆλ‹€.


3) κ΄€κ³„μž 계정 생성

_01_κ΄€λ¦¬μž_νšŒμ›λ“±λ‘

YourStarλ‘œλΆ€ν„° 인증받은 μ†Œμ†μ‚¬λŠ” κ΄€λ¦¬μžκ°€ κ΄€κ³„μž 계정 생성을 톡해 μ›ν•˜λŠ” 수만큼의 κ΄€κ³„μž 계정을 λ©”μΌλ‘œ 받을 수 μžˆμŠ΅λ‹ˆλ‹€.


4) νŒ¬λ―ΈνŒ… κ°œμ„€ μ‹ μ²­

_03_κ΄€κ³„μž_νŒ¬λ―ΈνŒ…_등둝

κ΄€κ³„μžκ°€ νŒ¬λ―ΈνŒ… κ°œμ„€ 신청을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ΄€λ¦¬μžκ°€ κ²€μˆ˜ ν›„, μŠΉμΈμ„ ν•˜κ²Œ 되면 νŒ¬λ―ΈνŒ… λͺ©λ‘μ— λ³΄μ—¬μ§€κ²Œ λ©λ‹ˆλ‹€.


5) νŒ¬λ―ΈνŒ… κ°œμ„€ μš”μ²­ 승인

_1_κ΄€λ¦¬μž_νŒ¬λ―ΈνŒ…_등둝

κ΄€λ¦¬μžλŠ” κ΄€κ³„μžκ°€ μš”μ²­ν•œ νŒ¬λ―ΈνŒ…μ„ κ²€μˆ˜ ν›„ 승인 λ˜λŠ” κ±°μ ˆν•  수 μžˆμŠ΅λ‹ˆλ‹€.


6) νŒ¬λ―ΈνŒ… μ‹ μ²­

_02_νŒ¬λ―ΈνŒ…_μ‹ μ²­.gif

νŒ¬λ―ΈνŒ…μ— μ°Έμ—¬ν•˜κ³  싢은 일반 νšŒμ›μ€ 카카였페이λ₯Ό 톡해 결제 μ™„λ£Œ μ‹œ, νŒ¬λ―ΈνŒ… μ˜ˆμ•½μ΄ μ™„λ£Œλ©λ‹ˆλ‹€.


λ―ΈνŒ…λ£Έ

1) νŒ¬λ―ΈνŒ… μž…μž₯

_04_νŒ¬λ―ΈνŒ…_μž…μž₯μ „

νŒ¬λ―ΈνŒ… μž…μž₯ μ „, λΉ„λ””μ˜€μ™€ 마이크 체크 및 μ‚¬μš©μžκ°€ μ›ν•˜λŠ” λ―ΈνŒ…λ£Έμ˜ λ°°κ²½ 색을 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.


2) 곡연 λͺ¨λ“œ

팬

μŠ€νƒ€(κ΄€κ³„μž)κ°€ κ³΅μ—°ν•˜λŠ” λ™μ•ˆ νŒ¬λ“€μ€ μ±„νŒ… 및 이λͺ¨ν‹°μ½˜μœΌλ‘œ ν˜Έμ‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.


3) 랜덀 좔첨

_04_νŒ¬λ―ΈνŒ…_λžœλ€μΆ”μ²¨

μŠ€νƒ€(κ΄€κ³„μž)κ°€ 랜덀 좔첨 λ²„νŠΌμ„ λˆ„λ₯Ό μ‹œ, νŒ¬λ―ΈνŒ…μ— μ°Έκ°€ν•œ νŒ¬λ“€ 쀑 ν•œ λͺ…이 랜덀으둜 μ„ νƒλ©λ‹ˆλ‹€.


5) QnA

_04_νŒ¬λ―ΈνŒ…_qna

μŠ€νƒ€(κ΄€κ³„μž)κ°€ QnA μ‹œμž‘ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ λ―ΈνŒ…μ— μ°Έμ—¬ν•œ 팬(일반 νšŒμ›)의 화면에 μ§ˆλ¬Έμ„ 전솑할 수 μžˆλŠ” 창이 λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

μŠ€νƒ€(κ΄€κ³„μž)κ°€ QnA μ’…λ£Œ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 팬(일반 νšŒμ›)의 화면에 μ—΄λ €μžˆλŠ”λ˜ 질문 창이 λ‹«νž™λ‹ˆλ‹€.

μŠ€νƒ€(κ΄€κ³„μž)λŠ” QnA 리슀트λ₯Ό 눌렀 팬(일반 νšŒμ›)μœΌλ‘œλΆ€ν„° 받은 μ§ˆλ¬Έμ„ 쑰회 및 팬(일반 νšŒμ›)κ³Ό κ³΅μœ κ°€ κ°€λŠ₯ν•©λ‹ˆλ‹€.


6) O, X κ²Œμž„

_04_νŒ¬λ―ΈνŒ…_oxκ²Œμž„

μŠ€νƒ€(κ΄€κ³„μž)κ°€ κ²Œμž„μ‹œμž‘ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 팬(일반 νšŒμ›)의 λ™μž‘ 인식을 μ‹œμž‘ν•©λ‹ˆλ‹€. 팬(일반 νšŒμ›)은 O, X 쀑 ν•˜λ‚˜μ˜ λ™μž‘μ„ μ·¨ν•˜μ—¬ 정닡을 ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  팬의 인식이 λλ‚˜κ³  μŠ€νƒ€(κ΄€κ³„μž)κ°€ O, X 쀑 ν•˜λ‚˜μ˜ λ²„νŠΌμ„ 클릭 μ‹œ, 팬(일반 νšŒμ›)μ—κ²Œ 정닡이 ν‘œμ‹œλ˜κ³  μ μˆ˜κ°€ κΈ°λ‘λ©λ‹ˆλ‹€. 정닡을 λ§žμΆ”μ§€ λͺ»ν•œ 팬(일반 νšŒμ›)의 화면은 κΊΌμ§€κ²Œ λ©λ‹ˆλ‹€.


7) μ΄ˆμ„± κ²Œμž„

_04_νŒ¬λ―ΈνŒ…_μ΄ˆμ„±κ²Œμž„

μŠ€νƒ€(κ΄€κ³„μž)κ°€ 정닡을 μž…λ ₯ν•˜λ©΄ μ΄ˆμ„±μœΌλ‘œ λ³€ν™˜λ˜μ–΄ 팬(일반 νšŒμ›)λ“€μ—κ²Œ μ „μ†‘λ˜λ©°, νŒ¬μ€ 문제λ₯Ό 맞좜 수 μžˆμŠ΅λ‹ˆλ‹€. 정닡을 맞좘 νŒ¬μ€ μ„ μ°©μˆœ 3λͺ…κΉŒμ§€ μ μˆ˜κ°€ μŒ“μ΄κ²Œ λ©λ‹ˆλ‹€.


8) νŒ¬λ―ΈνŒ… μ’…λ£Œ

_03_νŒ¬λ―ΈνŒ…_μ’…λ£Œ_좔얡보관함

μŠ€νƒ€(κ΄€κ³„μž)κ°€ νŒ¬λ―ΈνŒ… μ’…λ£Œλ₯Ό λˆ„λ₯Ό μ‹œ, νŒ¬λ―ΈνŒ…μ— μ°Έμ—¬ν–ˆλ˜ λͺ¨λ“  μ‚¬μš©μžκ°€ νŒ¬λ―ΈνŒ…μ—μ„œ λ‚˜κ°€κ²Œ 되며 μ°Έκ°€ν–ˆλ˜ νŒ¬λ―ΈνŒ…μ˜ 상세 보기둜 μ΄λ™ν•©λ‹ˆλ‹€.

1λŒ€1 νŒ¬λ―ΈνŒ…μ— μ°Έμ—¬ν•œ 팬(일반 νšŒμ›)이라면 Mypage의 μΆ”μ–΅λ³΄κ΄€ν•¨μ—μ„œ μŠ€νƒ€μ˜ 싸인과 1λŒ€1 λ…Ήν™” μ˜μƒμ„ 쑰회 및 λ‹€μš΄λ‘œλ“œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μŠ€νƒ€(κ΄€κ³„μž)λŠ” Mypageμ—μ„œ νŒ¬λ―ΈνŒ…μ— μ°Έμ—¬ν•œ 팬(일반 νšŒμ›)의 정보 및 κ²Œμž„ λ“±μˆ˜λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.


5. μ‹€ν–‰ 방법

μ†ŒμŠ€μ½”λ“œ λ‹€μš΄λ‘œλ“œ

$ git clone https://lab.ssafy.com/s06-webmobile1-sub2/S06P12E204.git

BackEnd

  1. 디렉토리 이동

    $ cd Backend
  2. gradle ν”„λ‘œμ νŠΈλ₯Ό λΉŒλ“œν•©λ‹ˆλ‹€.

    $ ./gradlew build
    • μ •μƒμ μœΌλ‘œ λΉŒλ“œκ°€ μ™„λ£Œλ˜λ©΄ build 폴더가 μƒμ„±λœ 것을 확인 κ°€λŠ₯

    • ./gradlew build κ°€ μ•ˆλ˜λ©΄ μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ ν›„ λΉŒλ“œ

      $ chmod 777 gradlew
  3. μ‹€ν–‰

    $ java -jar build/libs/yourstar-0.0.1-SNAPSHOT.jar

FrontEnd

  1. 디렉토리 이동

    $ cd Frontend
  2. ν•„μš”ν•œ pacakge μ„€μΉ˜

$ npm i
  1. μ‹€ν–‰
$ npm start

WebRTC

  1. μ•„λž˜ 링크 μ°Έκ³ ν•˜μ—¬ OpenVidu μ„œλ²„λ₯Ό μ„€μΉ˜ (단, Linux ν™˜κ²½μ—μ„œλ§Œ μ„€μΉ˜ κ°€λŠ₯)

    https://docs.openvidu.io/en/stable/deployment/ce/on-premises/

  2. OpenVidu μ‹€ν–‰

    ./openvidu start
    
  3. repository에 ν¬ν•¨λœ OpenVidu ν΄λΌμ΄μ–ΈνŠΈλ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.

    $ cd Backend/mvn package exec:java