Youniverse-Web

🌟 Youniverse

✨ Youniverse 는 이런 서비스입니다!

나와 너의 감정 공유의 시간을 행성에 기록하다!

나만의 우주를 만들어보세요.
행성이 감정을 담아둘 거예요.
함께 느꼈던 감정을 행성에 기록할 친구들을 Youniverse로 초대할 수 있어요.

🪜 사용한 기술

      

"axios": "^0.21.1",
"eslint-config-airbnb": "^18.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"styled-reset": "^4.3.4",
"web-vitals": "^1.0.1"

🗂 프로젝트 구조

⎡ 📁 Public
⎜  ⎿ index.html
⎣ 📁 src
   ⎿ 📁 assets
   ⎹  ⎿ 📁 fonts
   ⎹  ⎿ 📁 icons
   ⎹  ⎿ 📁 images
   ⎹  ⎿ index.js
   ⎿ 📁 components
   ⎹  ⎿ 📁 common
   ⎹  ⎮  ⎿ Header.js 
   ⎹  ⎮  ⎿ Planet.js  
   ⎹  ⎿ index.js
   ⎿ 📁 libs
   ⎹  ⎿ api.js
   ⎿ 📁 pages
   ⎹  ⎿ Emotion.js
   ⎹  ⎿ Login.js
   ⎹  ⎿ Main.js
   ⎹  ⎿ Read.js
   ⎹  ⎿ Write.js
   ⎹  ⎿ index.js
   ⎿ 📁 styles
   ⎹  ⎿ GlobalStyle.js
   ⎹  ⎿ theme.js
   ⎿ APP.js
   ⎿ index.js

📒 컨벤션, 전략

<git 브랜치 전략>

• Main 브랜치에 릴리즈 버전 관리
• Develop 브랜치에 개발 중인 버전 관리
• Feat/[기능 이름] 브랜치에서 기능 구현

👨‍👧‍👧 클라이언트 개발자 소개

사진
이름	김의진	박나희	이다은
맡은 뷰	User_space_emotion	Landingpage      User_space	Write_emotion      Check_emotion
맡은 역할	초기 세팅	서버 연결 선생님	리드(미) 개발자

🎈 시연 영상

Screen.Recording.2021-05-23.at.8.43.01.AM.mov

☄️ 페이지 소개

Landingpage
- 사용자가 처음 접속하면 자신만의 우주를 만들기 위해 이름을 입력합니다.

User_space
- 사용자의 우주가 담긴 페이지입니다. 사용자는 자신의 우주 링크를 주변 사람들에게 공유해 자신과의 기억을 롤링페이퍼처럼 적어달라고 할 수 있습니다.

User_space_emotion
- 감정 행성이 담긴 페이지입니다. 주변 사람들이 남긴 감정이 별이 되었습니다. 별에 마우스를 올리면 제목을, 클릭하면 자세한 내용을 볼 수 있습니다.

Write_emotion
- 새로운 별을 만드는 페이지입니다. 선택한 감정에 맞는 기억을 기록할 수 있습니다.

Check_emotion
- 별의 상세한 내용을 확인할 수 있는 페이지입니다. 누군가가 적고 간 감정 기억을 읽을 수 있습니다.