- 팀 프로젝트 이름 : 쓰담 (SSEUDAM)
- 팀 프로젝트 기간 : 2023.12.30 ~ 2024.01.23
- 개발 인원 : 프론트엔드 4명, 백엔드 4명
- 팀 레포지토리 : [쓰담✨](https://github.com/codestates-seb/abc02_002)
🤔 기획 배경
- 운동은 하고싶은데 동기가 부족하거나, 작게나마 뿌듯함을 느끼고 싶은 분들, 지역 주민들과 함께 참여하고 건강 증진을 위한 운동 기회를 제공하기 위함
- 수업시간에 배운 기술들을 종합적으로 활용할 수 있다.
🧗 목표 및 기대 효과
- 수업시간에 배운 내용을 바탕으로 커뮤니티 사이트 개발에 필요한 전반적인 기술 습득한다.
- 프로젝트 수행 과정에서 협업 능력과 문제 해결 능력 향상한다.
- 플로깅에 관심있는 사람들이 쉽게 만나 활동하게 해준다.
- 환경보호와 건강을 동시에 고려하는 활동으로 사용자들에게 지속가능한 라이프 스타일의 중요성을 일깨운다.
- 사용자들은 쓰레기 수거와 운동의 조합으로 건강한 라이프스타일을 즐기며 만족감을 느낄 수 있다.
�[프론트엔드] 메인페이지 UI 및 기능 구현 aws s3 배포(서버 닫힘)
메인페이지 주요 기능
- 전체, 모집중 게시글 조회
- 게시글 생성시 최근 게시글, 마감일 표시
- 새로운 모임 게시글 조회
- 게시글 생성시 new, 마감일 표시
- todoList 조회
- 관리자, 새 글쓰기, 로그인, 회원가입 페이지
이동
- 로그인 했을 경우 게시글 상세조회, 새 글쓰기 가능, 비로그인시 회원가입 페이지 모달로 표시
- 스크롤위치 표시, 스크롤 위치 입력 후 이동, 페이지 최 상단 이동
- 부트스트랩 반응형 레이아웃 기준 디자인 적용
- 스마트폰 : max-witdh 575.98px
- 태블릿 : max-width: 991.98px
- 데스크탑 : max-width: 1199.98px
| 강혜주 | 김수안 | 최준하 | 조은희 |
|---|---|---|---|
 |
 |
 |
 |
| BE(팀장) | BE | BE | BE |
| hyezuu | sooani | choijh0309 | eunhee78 |
| 배정현 | 이혜원 | 안민주 | 김윤한 |
|---|---|---|---|
 |
 |
 |
 |
| FE(팀장) | FE | FE | FE |
| bjh0524 | hyehye225 | anminjoo | YunHanKIM |
- 사용자 요구사항 정의서, 화면 정의서 작성
- 파트 분배
- 폴더 구조 잡기
- 깃 칸반 이슈 등록
- 매일 1시에 디스코드에서 진행상황 공유하며 서로 피드백
-
메인페이지 헤더, 배너, 메인구역, 푸터 하드코딩을 통해 영역 설정
-
더미데이터 및 포스트맨 활용 필요 데이터 GET, POST 확인 인텔리제이로 로컬 서버 돌리며 작업
-
새로운 모임 구역 슬라이드 기능 구현 react-slick 사용
-
전체 / 모집중 카테고리 별 게시글 구현
-
전체 css 작업
-
피드백 받은 내용 수정
메인헤더
-
로그인 하지 않았을 경우 게시글 클릭 시 회원가입 페이지 모달로 출력
- 로그인 하지 않았을 경우 헤더에 위치한 새 글 쓰기, 로그인, 회원가입 클릭 시 로그인 은 로그인 페이지, 새 글쓰기와 회원가입은 회원가입 페이지 출력
- 관리자로 로그인 시 새 글 쓰기, 로그인, 회원가입탭이 관리자, 새 글 쓰기, 로그아웃, 마이페이지로 변경
- 관리자, 새 글쓰기, 로그아웃, 마이페이지 이동
- 일반유저 로그인 시 새 글 쓰기, 로그인, 회원가입탭이 새 글 쓰기, 로그아웃, 마이페이지로 변경
새로운 모임 카테고리
- 새로운 모임이 출력되는 화면, 자동 슬라이드 기능, 수동으로 옆으로 넘길 수 있다.
- 게시글을 작성하면 게시글 상단에 새로운 모임 글이란걸 알 수 있는 new 출력, 마감이 며칠남았는지 마감일 출력한다. 총 12개의 게시글이 표시된다.
전체 / 모집중 카테고리
- 전체 카테고리에 전체 게시글이 출력된다.
- 모집중 카테고리에는 모집중인 게시글만 출력된다.
- 게시글에는 모집 마감 시간이 며칠 남았는지 게시글 오른 쪽 상단에 표시(마감일이 지났다면 '모집 마감', 오늘 마감일이라면 '오늘 마감', 나머지는 '마감 ?일 전')되고, 최근 게시물은 현재날짜 기준으로 이틀동안 최근 게시글이라는 표시가 게시글 왼쪽 상단에 표시된다.
a06a12d4-b54b-458a-b214-dcd39bacd315.mp4
특정 스크롤 위치로 이동 / 페이지 최 상단으로 이동
- 스크롤 바 옆에 최 상단으로 가는 버튼과 현재 스크롤 위치를 표시하는 창이 있고 숫자를 입력해 특정 스크롤 위치로 이동 가능하다.
부트스트랩 반응형 레이아웃 기준 디자인 적용
- 스마트폰 : max-witdh 575.98px
- 태블릿 : max-width: 991.98px
- 데스크탑 : max-width: 1199.98px
ui-min.mp4
under.mp4
- 팀 프로젝트가 들어가기전에 원래 있던 팀이 분해가 되었다. 팀이 정해지고 일주일동안 어떤 프로젝트를 만들지 어떤 기능을 넣고 할지 거의 다 구성해둔 상태였다, 갑작스런 상황에 당황했지만 일단 다른 팀으로 합류하게 되었다. 이 팀도 하차하는 사람이 생기고 해서 영화리뷰사이트를 만드려고 했지만 원래 기획했던 프로젝트를 접어두고 새로 만들기로 한거였다. 주말에 디스코드에 모여 현재 상황에 대해 토론하고 1월 2일 부터 본격적으로 기획하고 화면설계서 만들고 사용자 요구사항 정의서 등 처음부터 다시 시작하였다. 이렇게 전체 팀프로젝트 기간중에 2주를 사용한거 같다.
- 생각지도 못한 상황이였기 때문에 마음이 더 급해지고 했다. 하지만 팀원들이 누구하나 빠짐없이 논의하면서 다 같이 서로 부족한 부분을 채우고 도우면서 빠르게 진행이 되었다. 이런 상황이 안생겼으면 넉넉하게 진행되어 결과물이 조금은 더 다듬어지지 않았을까 하는 생각이 들었지만 이런 상황에서도 결과물이 좋게나와 만족한다.
- 노력한 우리 팀원들 고생많이했다
- 처음에 게시글을 페이징 처리 하려고 했다. 모집중/모집완료 카테고리로 나누어서 하려고 했지만 모집중/모집완료 데이터를 하나의 api로 불러왔기 때문에 이렇게 하는 방식은 프론트단에서 어렵다는점을 파악했다. 이것을 프로젝트 끝나기 며칠전에 알았기 때문에 수정하지 못하였다. 그래서 한번에 전체 / 모집중 카테고리로 바꾸어서 출력하였다.
- 게시글안에 들어가서 북마크 표시를 해야 하기때문에 번거로운점이있다. 메인페이지 게시글 화면에서도 북마크를 달아서 게시글상세조회를 안하더라도 사용자입장에서 사용자경험이 좋게 만들었어야 했다.
- 전체 / 모집중 게시글 페이징 처리, 모집중과 모집완료 api를 따로 나누어서 각각 데이터를 받아오게 한다.
- 게시글을 상세조회 하지 않아도 되게 게시글에 북마크를 표시하여 사용자 경험을 높인다.
- 조회수를 출력하여 어떤 게시글 조회수가 높은지 확인하게 만든다.
main: 메인 브랜치dev: 개발 병합 브랜치be: 백엔드 브랜치be+xx: 백엔드 개인 브랜치fe: 프론트 브랜치fe+xx: 프론트엔드 개인 브랜치
| 이름 | 내용 |
|---|---|
| ✨ feat | 새로운 기능 추가 |
| 🐛 fix | 버그 수정 |
| 📝 docs | 문서 수정 |
| 💡 comment | 필요한 주석 추가 및 변경 |
| 🎨 style | 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
| ♻️ refactor | 코드 리팩토링 |
| 🔧 update | 코드 업데이트 및 수정 |
| ✅ test | 테스트 코드 |
| 📦 chore | 빌드 업무 수정, 패키지 매니저 수정 |
| 🔥 remove | 파일을 삭제하는 작업만 수행 |
| 🚚 rename | 파일 혹은 폴더명을 수정하거나 옮김 |
| 🚑 !HOTFIX | 급하게 치명적인 버그 고침 |
| 💥 !BREAKING CHANGE | 커다란 API 변경 |