[프로젝트 회고] 내일배움캠프 최종프로젝트 'soom' 마무리 회고

2024. 5. 3. 12:29·✍️ 프로젝트 과정 & 회고
SMALL

5.3 

수정 예정 🌳

- 5.1 최종발표회 

 

 

💻 프로젝트명 < SOOM >


 

친환경 및 지속가능성을 추구하는 환경보호 커뮤니티

🌏 SOOM Web Page

내일배움캠프 React 4기 🌏지.지.마(지구를 지킬 마스터피스)
개발 기간 : 2024.03.26 ~ 2024.04.30 (5주 간)


🔗 배포주소 및 시연영상

정식 배포 사이트 : https://www.soom-greenlife.com/
테스트 ID/PW : test@gmail.com / test11!

시연 영상 : https://youtu.be/KKf7HcJO1Gk


🚩 프로젝트 소개

"SOOM" - 친환경 및 지속가능성을 추구하는 플랫폼으로, 환경 보호를 위한 모임을 직접 만들고 인증샷을 공유할 수 있는 커뮤니티 사이트입니다.


  • 상세 소개
    • 사용자들이 친환경적이고 지속 가능한 활동을 공유하고 참여할 수 있는 모임을 만들 수 있습니다.
    • 환경 보호와 관련된 기관 및 단체의 캠페인과 이벤트 정보를 제공합니다.
    • 모임에 참여했던 인증샷을 커뮤니티를 통해 올리고, 경험을 공유할 수 있습니다.
    • 활동 참여와 인증샷 글쓰기 등의 방법을 통해 포인트를 획득하여 굿즈로 교환할 수 있습니다.

🏃팀 구성

 5명의 프론트엔드 개발자 + 디자이너 1명
 
 

🧩 Architecture


 

 

 
 

⭐️ 주요기능

회원가입 / 로그인

  • 이메일, 비밀번호, 닉네임을 입력하여 회원가입 할 수 있습니다.
  • 카카오, 구글을 통한 소셜 로그인/회원가입도 할 수 있습니다.
  • 로그인을 안 한 상태에서는 게시물의 찜 기능을 사용할 수 없습니다.

메인 페이지

  • 헤더의 프로필 이미지를 클릭해 마이페이지로 이동할 수 있습니다.
  • 헤더의 탭을 클릭하여 About, Green-Action, Community, Goods 각 페이지로 이동할 수 있습니다.
  • 메인페이지에서 Community Hot Posts를 볼 수 있습니다.
  • 메인페이지에서 Green-Action Hot Posts를 볼 수 있습니다.

챗봇

  • 모든 페이지의 우측 하단에 챗봇이 위치합니다.
  • 챗봇을 클릭하여 사이트 소개, green-action 소개, 자주하는 질문을 조회할 수 있습니다.

Green-Action 개인

  • 오프라인 또는 온라인에서 참여 가능한 Green-Action 모집글을 작성할 수 있습니다.
  • 게시글을 모집중인 캠페인 / 모집 마감된 캠페인으로 분류하여 조회할 수 있습니다.
  • 최신 등록 순, 찜한 순으로 게시글을 조회할 수 있습니다.
  • 게시글의 상세페이지에서 참여하기 버튼을 누르면 단체채팅방에 참여할 수 있습니다.
  • 게시글의 상세페이지를 카카오톡 채팅으로 공유할 수 있습니다.
  • 관심이 있는 게시글에 찜 기능을 사용하여 모아 볼 수 있습니다.

1:1 문의하기, 참여하기 실시간 채팅

  • 1:1문의
    • green-action 상세페이지에서 1:1문의하기를 클릭하여 개인채팅방으로 이동합니다.
    • 해당 채팅방의 green-action에 대한 간략한 정보를 조회할 수 있습니다.
  • 참여하기
    • green-action 상세페이지에서 '참여하기'를 클릭하여 단체채팅방으로 이동합니다.
    • 단체채팅방의 참여자 정보와 인원수를 볼 수 있습니다.
    • 해당 채팅방의 green-action에 대한 간략한 정보를 조회할 수 있습니다.

Green-Action 단체

  • 실천 가능한 환경 보호 행동들을 소개하고, 관련된 페이지로 이동할 수 있습니다.

커뮤니티 페이지

  • 자신이 실천한 Green-Action에 대해 작성할 수 있습니다.
  • 게시글은 모달창을 통해 보여줍니다.
  • 게시글에 좋아요 버튼을 누를 수 있습니다.
  • 게시글에 댓글을 작성할 수 있습니다.

굿즈 페이지

  • 친환경 굿즈 제품들을 볼 수 있습니다.
  • 자신이 적립한 포인트로 굿즈를 구매할 수 있습니다.
  • 개인 Green-Action 게시글 작성, Community 게시글 작성, 댓글 등록 시 포인트가 적립됩니다.

마이 페이지

  • 헤더의 프로필 이미지를 눌러 마이페이지로 이동할 수 있습니다.
  • 로그인 후 프로필 이미지와 사용자 이름, 자기소개를 변경할 수 있습니다.
  • 자신이 작성한 Green-Action, 커뮤니티 글, 찜한 Green-Action을 볼 수 있습니다.
  • 자신이 작성한 Green-Action 모집 상태를 변경할 수 있고, 글 수정 및 삭제가 가능합니다.
  • 자신이 모은 포인트를 확인할 수 있습니다.
 
 
 
SMALL

'✍️ 프로젝트 과정 & 회고' 카테고리의 다른 글

[프로젝트 과정] 배포 후 카카오맵 api - appkey=undefined 에러 문제 (: api key 하나로 통일하기)  (0) 2024.04.21
[최종프로젝트과정] 카카오맵 api  (0) 2024.04.19
[프로젝트 과정] 최종프로젝트 :  (0) 2024.04.17
[프로젝트 과정] 최종프로젝트 : 중간 발표날  (0) 2024.04.16
[프로젝트 과정] 최종프로젝트 17일차: laptop(1020px) 반응형 디자인, 헤더 하나로 합치기, 중간발표제출, 시연영상  (0) 2024.04.13
'✍️ 프로젝트 과정 & 회고' 카테고리의 다른 글
  • [프로젝트 과정] 배포 후 카카오맵 api - appkey=undefined 에러 문제 (: api key 하나로 통일하기)
  • [최종프로젝트과정] 카카오맵 api
  • [프로젝트 과정] 최종프로젝트 :
  • [프로젝트 과정] 최종프로젝트 : 중간 발표날
련디
련디
FE - 개발 공부의 기록
  • 련디
    Ryeon's Devstory
    련디
  • 전체
    오늘
    어제
    • 분류 전체보기 (69)
      • 🪴 JavaScript & TypeScript (11)
        • 🧩 Algorithm (6)
      • 🪴 React (12)
      • 🪴 Next.js (8)
      • 🪴 HTML & CSS (2)
      • 🪴 DB & BaaS (5)
      • 🪴 Git &Github (0)
      • ✍️ 프로젝트 과정 & 회고 (18)
      • ✍️ Today what I Learned _T.. (11)
      • 🕊️ IT 아티클 (0)
      • etc. (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • My Github 😺
    • 네이버 블로그 🎵🎧 (일상,음악 등)
  • 공지사항

  • 인기 글

  • 태그

    티스토리챌린지
    reactquery
    useEffect
    fetch
    리액트쿼리
    BAAS
    Array.filter
    Vite
    티스토리블로그스킨
    오블완
    Next.js
    비동기통신
    렌더링패턴
    NVM
    props
    tailwind
    Supabase
    route handler
    컴포넌트분리
    useMutation
    reacthook
    State
    배열 메서드
    타입스크립트
    react
    json-server
    axios
    웹개발 기초
    에러
    의존성배열
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
련디
[프로젝트 회고] 내일배움캠프 최종프로젝트 'soom' 마무리 회고
상단으로

티스토리툴바