재해나 지원이 필요한 현장에서 도움을 원하는 단체와 자원봉사자를 연결해주는 중계 플랫폼입니다.
손모아의 목표는 "사회지원 활동 참여를 쉽게 만들자" 입니다.
전화, 방문 등 기존의 복잡한 절차의 불편함을 해소해 접근성을 향상 시키기 위해 이 프로젝트를 기획하게 되었습니다.
도움이 필요하지만 모집 방법이 게시글 등록이 전부였던 기관들에게 봉사자에게 직접 도움을 요청할 수 있게 하여 봉사자와 기관 간의 커뮤니케이션을 활성화할 수 있고,
봉사 시간에 따라 티어를 부여하고 "이 주의 봉사왕" 랭킹과 같은 게이미피케이션(Gamification)을 통해 봉사자들은 성취감을 느낄 수 있습니다.
| Frontend | Frontend | Frontend |
|---|---|---|
| 홍유진(팀장) | 김민준 | 김주영 |
 @youjin-hong |
 @minjoon97 |
 @djm06294 |
- 기관은 봉사 활동에 대한 모집글을 등록할 수 있습니다.
- 봉사자는 기관들이 올린 봉사 활동 모집글들을 전부 볼 수 있고, 원하는 봉사 활동 모집글에 대해 지원할 수 있습니다.
- 기관은 자신이 올린 봉사 활동에 지원한 봉사자들의 명단을 리스트로 관리하며 지원 수락, 반려할 수 있습니다.
- 기관은 해당 봉사 활동이 종료된 후, 봉사 활동에 참여한 지원자들에 한하여 봉사 시간을 정산할 수 있습니다.
- 메인 페이지에는 봉사자들의 프로필에 등록돼있는 봉사 시간을 기준으로 "이 달의 봉사왕" 봉사시간이 많은 봉사자 4명의 랭킹이 매겨집니다.
- 각 봉사자들은 봉사 시간/횟수에 따라 10단계의 티어를 가질 수 있습니다.
- 기관과 봉사자는 모두 커뮤니티를 공유하며, 댓글과 대댓글 기능을 통해 활발한 소통을 할 수 있습니다.
- 기관은 봉사자에게, 봉사자는 기관에게 쪽지를 전달할 수 있습니다. 이를 통해 기관과 봉사자의 소통에 편의를 보장합니다.
- 기관과 봉사자 모두 쪽지, 리뷰, 봉사 신청 결과 등을 실시간 알림으로 받아볼 수 있습니다.
프론트엔드 디렉토리 구조 (FSD 패턴 일부 채택)
src
├── assets
│ └── images
├── components
│ ├── component1
│ │ ├── logic
│ │ ├── ui
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── component2
│ ├── logic
│ ├── ui
│ ├── index.tsx
│ └── indexCss.ts
├── features
│ ├── feature1
│ │ ├── logic
│ │ ├── ui
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── feature2
│ ├── logic
│ ├── ui
│ ├── index.tsx
│ └── indexCss.ts
├── api
│ ├── endPoints.ts
│ └── client.ts
├── store
│ ├── queries
│ │ └── login
│ │ └── loginData.ts
│ └── stores
├── styles
│ ├── myreset.css
│ └── global.css
├── shared
│ ├── hooks
│ └── types
├── mocks
├── pages
│ ├── main-page
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── login-page
│ ├── index.tsx
│ └── indexCss.ts
└── layout
├── header
└── footer
주요 사용자 흐름
- 비로그인 사용자(기관/봉사자 구분 x): 봉사 활동 모집글/커뮤니티/메인페이지 이용 가능
- 기관: 도움요청글 작성/수정/삭제, 지원자 수락/반려/정산, 커뮤니티 글 작성/삭제/댓글, 쪽지/리뷰, 알림, 마이페이지 이용
- 봉사자: 도움요청글 조회/지원/지원 철회, 커뮤니티 글 작성/삭제/댓글, 쪽지/리뷰, 알림, 마이페이지 이용
- 저장소 복제하기
git clone https://github.com/prgrms-web-devcourse-final-project/WEB1_1_Bongdari_FE.git
- 프론트엔드 종속성 설치
yarn install
- 환경 변수 설정
- frontend: 백엔드 도메인 주소, 카카오맵 api Javascript key 등록
- 개발 서버 시작
yarn dev
- 기획 & 디자인:
2024.11.12 ~ 2024.11.25 - 개발:
2024.11.25 ~ 2024.12.9 - 리팩토링 & 디버깅:
2024.12.21 ~ 2025.2.10
- 텍스트 에디터에 이미지 넣기
- 클린 코드에 대해 고민하고 작성해보기
김민준
- api요청에서의 프론트와 백의 조율사항에 대해 많은 점을 배울 수 있었던 프로젝트 였습니다. SSE, httpOnly토큰, 에러코드 기반 디버깅 등 여러가지 이슈에 따른 커뮤니케이션의 중요성을 다시 한번 느꼈고, 그만큼 경험치도 쌓을 수 있어서 좋았습니다.
- 프로젝트를 짧은 기간 안에 마무리 하면서, 사용자 경험 측면에서 어떤 부분이 우선순위에 있는지를 생각해 볼 수 있었던 장점도 있었지만, 그만큼 디버깅이나 최적화 측면에서는 시간이 더 있었으면 어땠을까 하는 아쉬움도 있었습니다.
- 기술적인 회고로는, 재사용성과 확장성을 고려한 컴포넌트를 결정하는 부분이 가장 어려웠던 것 같고, 쿠키의 토큰을 관리하는 법과 zustand를 이용한 로그인정보를 저장하되, 새로고침 시 초기화를 막기위한 persist사용하는 법 등이 가장 유용했던 경험이었습니다.
- 앞으로 반응형ui구현과 디버깅을 진행할 예정이고, 강사님의 피드백 대로 시맨틱태그와 meta태그를 이용한 SEO최적화 작업도 진행해보면 좋을 것 같습니다.
김주영
- 발표 준비를 하면서 내가 구현한 부분의 부족한 점들이 많이 보였던 것 같다. 기획할 때 생각해두지 못한 부분들도 있었고, 디버깅이 필요한 부분들도 많았다. 결과적으로 사용자가 사용할 페이지에 필요한 기능이 어떤게 있는지 좀 더 완성본을 생각해보며 구현을 했으면 좋았을 것 같고 또 세세한 것들에 차례로 집중을 하기보다는 사용자가 필수적으로 접하는 기능들부터 구현하는게 맞구나라는 생각도 많이 들었다. 그래도 계층적인? 파일 구조로 기획하고 구현하는 과정이 좋았고 프로젝트를 하나씩 해나갈 때마다 많이 배울 수 밖에 없는 것 같다. 코드 디버깅 및 리팩토링 진행하고 seo도 측정해보고 lighthouse도 사용해보며 테스트해보고 싶다.
홍유진
- 한 달이라는 기간동안 기획 + 디자인 + 개발까지 팀프로젝트로 하기 위해 일정 관리를 하는 것이 제일 어려웠던 것 같고, 다른 작업도 마찬가지지만 특히 api 연결을 할 때 발생하고 있는 에러에 대해 백엔드에도 상황을 전달하여 어느 부분에서 에러가 발생하고 있는지 공유하는 것이 중요하다고 느꼈다.
- 백엔드와 협업을 하며 여러 상황에 대해 같이 고민하는 시간이 많았는데, 그때마다 어떤 상황에 어떤 걸 고려해야 하는지 감이 잘 오지 않아 의견을 잘 내지 못한 게 아쉬웠다. 그래도 다른 팀원들이 이야기하는 것을 보고, 직접 개발을 진행해보며 어떤 걸 미리 고려해야 하는지, 특정 상황에서 어떤 흐름을 이해해야 하는지 많이 배우게 된 것 같아 좋았다.
- 팀에서 테스트를 할 땐 발견하지 못했던 사항들이 발표 피드백 통해 받을 수 있어서 피드백을 반영해서 예외 처리를 하면 더 완성도 있는 결과물을 낼 수 있을 것 같다.
- 우선 순위를 정한 뒤 개발을 시작했는데, 로그인을 해야만 개발을 할 수 있는 것들이 많아 개발이 지체가 되어서 앞으로는 로그인이 필요한 서비스에서는 로그인을 1순위로 두어야 할 것 같다고 느꼈고 이 부분은 개발자와 사용자 입장 모두 일맥상통한다고 생각이 들었다.
- 이번에 Typescript, react query를 처음 써서 개발을 해보았다. typescript는 단순히 type 지정만 하는 줄만 알았는데 api 요청/응답 형식, 그리고 유니온 타입, 타입 가드 등을 이용해 로직을 작성하여 좀 더 직관적이고 명확한 코드를 짤 수 있다는 것과, react query도 api fetching할 때, 캐싱이나 Optimistic update, 에러나 로딩 상태 등을 손쉽게 관리할 수 있다는 걸 알게 되었다. 이번에 사용 방법을 익혔으니 앞으로는 왜 쓰는지, 언제 적용하면 좋을 지에 대해 고민하는 시간을 가지면 좋을 것 같다.
- 컴포넌트부터 분리를 해서 재사용성을 최대한 고민해보았는데, 컴포넌트 단에서 너무 많은 props 지정과 로직을 작성해 쓸 수 있는 상황이 제한돼 예상보다는 재사용성을 높이지 못해서 아쉬웠다.
이번 프로젝트는 컴포넌트가 제일 작은 단위였는데, 제일 작은 단위에서는 기본적인 껍데기 ui만 만드는 것이 재사용성을 높일 수 있다는 것을 느끼게 되었다.
이번에 컴포넌트를 분리하는 법에 대해 알게 되었으니 다음에는 atomic design을 도입해 개발을 진행해보고 싶다. - 앞으로는 기획했던 기능들을 모두 개발하고, 어제 피드백을 받았던 모바일 적응형/반응형 ui를 적용하고, 강사님/FT님/멘토님께서 말씀하신 무한스크롤 시에 throttle이 뭔지 공부하고 폰트 lazing, seo 최적화에 대해 고민하고 적용해보면 좋을 것 같다.