엘리스 AI트랙 7기 2차 프로젝트: 채식 장려 커뮤니티 <오채완> (1)

엘리스 AI트랙 7기 2차 프로젝트: 채식 장려 커뮤니티 <오채완>

기획 2023/05/29~2023/06/02

개발 2023/06/03~2023/06/17

 

프로젝트가 끝나고 꽤 긴 시간이 지났다... 프론트엔드 전반에 걸쳐 손을 안 거친 부분이 없어 어떻게 써야 할지 고민만 하다가 2주가 지나 버렸다. (엄청 지난 줄 알았는데 생각보다 양호함) 미루고 미루다가 서버 이슈로 이전에 발표용/소장용으로 남긴 캡처들로 대신해야 한다.... 일단 서비스 개요와 페이지 구성 정도만 업로드하고, 기술적 구현 부분은 차근차근 올려 보겠다.

분석한 데이터를 바탕으로 인사이트를 얻어 서비스를 구상하고, 이것을 직접 웹사이트에 구현해 보았다. 이전 프로젝트에서 구현했던 것들이 대부분이라 큰 어려움 없이 만들 수 있었지만, 댓글에 답글 달기, 좋아요 버튼, 무한 스크롤 등 새롭게 시도해 보는 것들은 먼저 구현 방식을 생각해 두고, 생각한 방향이 올바른지 확인받은 다음 실행에 옮겼다.

이 모든 것들을 하면서 느낀 건, 상태 관리를 적절하게 해야 서비스가 지연 없이, 그리고 오류 없이 돌아간다는 것이다. 비동기 동작에서 조금이라도 맞지 않으면 오류가 우다다다 찍힌다.

서비스 개요

---

서비스명 오채완 - 오늘 채식 완료

주제 환경

목표 데이터 분석 결과를 바탕으로 육류 소비로 인한 탄소 배출량의 심각성 파악 및 유저 간 커뮤니티 형성을 통해 채식 문화를 장려하는 서비스 제공

github https://github.com/yyoungl/VegCom-elice-2nd-project-front

GitHub - yyoungl/VegCom-elice-2nd-project-front

API 명세
https://docs.google.com/spreadsheets/d/1t-DNUbVY4GI5NZWTBwCLrzPFFoJMj4t_p9wfY_jemhA/edit#gid=0

오채완 API 명세서

테스트 페이지 오늘 채식 완료

오늘 채식 완료

관련 문서 무한 스크롤 구현

팀원 소개

---

민준영

• Back-End
• znddiqjwjs@gmail.com
• Github: @minluna

정재훈

• Back-End
• wjdwogns120523@gmail.com
• Github: @J-A-Y2

김지원

• Back-End
• 0o0w0d2@gmail.com
• Github: 0o0w0d2

이영현

• Front-End
• pisouz7@gmail.com
• Github:@yyoungl

최우현

• Front-End
• woohyun6549@gamil.com
• Github: @choiwoohyun123

기술 스택

---

Front-End

HTML, CSS, JavaScript, React-vite

 

Back-End

JavaScript, Node.js, Express.js, MySQL

Server-Infra

Nginx, pm2

프로젝트 구조

---

📦src
 ┣ 📂components
 ┃ ┣ 📂datagraph
 ┃ ┃ ┣ 📂data
 ┃ ┃ ┃ ┣ 📜co2bargarphdata.js
 ┃ ┃ ┃ ┣ 📜linegraphdata.js
 ┃ ┃ ┃ ┗ 📜piegraphdata.js
 ┃ ┃ ┗ 📂graph
 ┃ ┃ ┃ ┣ 📜bargraph.jsx
 ┃ ┃ ┃ ┣ 📜co2bargraph.jsx
 ┃ ┃ ┃ ┣ 📜linegraph.css
 ┃ ┃ ┃ ┣ 📜linegraph.jsx
 ┃ ┃ ┃ ┗ 📜piegraph.jsx
 ┃ ┣ 📂pointbar
 ┃ ┃ ┗ 📜pointbar.jsx
 ┃ ┣ 📂post
 ┃ ┃ ┣ 📜addpost.jsx
 ┃ ┃ ┣ 📜postcard.jsx
 ┃ ┃ ┣ 📜postdetail.jsx
 ┃ ┃ ┗ 📜postedit.jsx
 ┃ ┣ 📂rankcard
 ┃ ┃ ┗ 📜rankcard.jsx
 ┃ ┣ 📂rankpagesentence
 ┃ ┃ ┗ 📜rankpagesentence.jsx
 ┃ ┗ 📂user
 ┃ ┃ ┣ 📜usercard.jsx
 ┃ ┃ ┣ 📜userdetail.jsx
 ┃ ┃ ┗ 📜useredit.jsx
 ┣ 📂pages
 ┃ ┣ 📂login
 ┃ ┃ ┗ 📜loginform.jsx
 ┃ ┣ 📂mainpage
 ┃ ┃ ┗ 📜mainpage.jsx
 ┃ ┣ 📂rank
 ┃ ┃ ┗ 📜rank.jsx
 ┃ ┣ 📂register
 ┃ ┃ ┗ 📜registerform.jsx
 ┃ ┣ 📂story
 ┃ ┃ ┣ 📜searchpost.jsx
 ┃ ┃ ┗ 📜story.jsx
 ┃ ┣ 📜loading.jsx
 ┃ ┗ 📜notfound.jsx
 ┣ 📂sections
 ┃ ┣ 📜header.jsx
 ┃ ┗ 📜headerlogout.jsx
 ┗ 📂utils
 ┃ ┣ 📂conts
 ┃ ┃ ┗ 📜bucket.js
 ┃ ┣ 📜chunkArray.js
 ┃ ┣ 📜getdays.js
 ┃ ┣ 📜gethours.js
 ┃ ┣ 📜gettime.js
 ┃ ┗ 📜tierdecision.js

인사이트

---

주어진 주제는 환경이었고, 그리고 우리가 일상생활에서 실천할 수 있는 참여형 웹 서비스를 구현하고자 했다.

주요 기능

---

메인 페이지

식단 업로드

• 사진과 함께 코멘트 업로드 가능: 이후 이 내용을 기반으로 게시물 검색

스토리 페이지/게시물 상세 페이지

• 게시물 최신순 아카이브: 커서 기반 무한 스크롤로 페이지네이션
• 게시물 상세 페이지: 게시물에 달린 댓글은 커서 기반 무한 스크롤로 페이지네이션
• 마음에 드는 게시물에 좋아요 누르기
• 댓글, 답글 추가
• 댓글, 답글 수정/삭제
• 피드 작성 시 포인트 부여

랭킹 기능

• 피드 작성 포인트를 바탕으로 유저 랭킹 표시
• 유저 카드를 누르면 다른 유저 페이지로 이동

마이페이지

• 자기소개, 포인트 등 확인할 수 있는 기능 제공
• 올린 식단 사진 archive
• 좋아요 누른 사진 archive

개인 정보 수정 기능

• 닉네임, 자기소개 수정

게시물 검색 기능

• 검색한 내용과 일치하는 피드를 볼 수 있음

일단은 이 정도로 하고, 다음에는 이번에 새로 적용해 본 기능들 위주로 회고를 써보도록 하겠다. 참고로 서버 이슈로 인해 사이트는 지금 볼 수 없음. ,..