최종 프로젝트를 마치고

코드잇 프론트엔드 부트캠프에서 진행한 마지막 프로젝트 회고

 

서비스 소개 : 직관적인 UI UX 를 제공하는 구인구직 플랫폼

프로젝트 기간 : 2024.11.21 - 2024.12.27

 

[깃허브](https://github.com/FE9-2/workroot)

[배포 링크](https://www.workroot.life/)
[노션](https://www.notion.so/FE9-part4-2-13f8fdfa8dc08065b95bfdabd4afa495?pvs=4)

워크루트 | 구인구직 플랫폼

코드잇에서 제공해주는 디자인 시안을 그대로 적용하지 않고 일부 차별화된 디자인을 적용하였으며

그 외에도 채널톡, 마우스 커서, 지도 API를 추가해서 진행하였다.

약 6주라는 가장 긴 시간 동안 진행했고 앞선 프로젝트들에 비해 구현해야하는 할당량이 많았어서인지 가장 애정이 간다.

 

주요 특징 및 기능

1. 사장님/지원자 유저로 구분이 되어있으며 각 유저 권한 별 기능이 다르다

2. 사장님 - 공고 생성/수정/삭제

3. 지원자 - 지원

4. 전체 유저 - 공고 조회/게시판 글 & 댓글 기능

5. 소셜 로그인 및 테스트 계정으로 둘러보기 기능 지원

 

기술 스택 

Next.js v14  => SSG 로 SEO 최적화 및 초기로딩 속도 개선

CSS: 테일윈드

 

패키지 및 라이브러리

- Zustand

- Tanstack Query

- React Hook Form

- Storybook

- Supa base

---

- 내가 기여한 점 & 새롭게 배운 점

1. 공고 생성/수정페이지 및 지원 페이지 개발

사용자 입력을 받아야 하는 부분이 많았기때문에 효율적인 폼 상태 관리와 유효성 검사를 지원하는 리액트훅폼을 사용했다.

리액트 훅폼을 제대로 사용해본건 이번이 처음이었다.

 

탭 전환이 되는 폼에서 이전에 입력한 내용을 유지해서 제출

텍스트 뿐 아니라 Date, 화폐 단위 등 여러 유형의 값을 처리

수정 페이지에서는 기존 데이터를 가져와서 인풋에 표시

이러한 기능들을 구현하면서 훅폼 사용하는 방법을 많이 익히게 되었던것같다.

 

2. 스토리 북을 도입

독립된 환경에서 UI 컴포넌트 개발 할 수 있어 편리하고 문서화 할수 있어 좋았다.

페이지단 작업 시 다른 팀원이 작업한 컴포넌트를 추가할때 스토리북 사용이 매우 도움이 되었다. 

팀원간에 내용 공유도 원활해짐을 경험했다. 특히 PR 올릴때 캡쳐로 올리지않고 크로매틱 배포 링크로 확인할 수 있는 점이 좋았다.

다른 팀원분이 크로매틱 배포도 깃헙 액션으로 자동화해주어서 매우 편리했다.

 

3. 깃헙 액션을 사용해서 CI 구현 (빌드 오류 검사 자동화) 

빌드 에러를 매 PR마다 잡을수 있어서 배포할때 큰 어려움 없이 바로 배포할 수 있었다.

 

4. 마우스 커서 커스텀

프로젝트의 테마에 어울리는 SVG 이미지를 적용하여, 디자인적 일관성을 유지하면서도 사용자의 몰입감을 높이는 요소를 추가

- 아쉬운 점

app router를 사용했는데 서버컴포넌트가 아닌 리액트 쿼리로 데이터 fetch 및 캐싱 처리를 한게 아쉽다 

트러블 슈팅을 그때그때 블로그 포스팅하지 못한것! - 따로 적어둔 내용이 있어 프로젝트 마치고 올리려고하는데 기억이 잘 안나는것들도 있고 정확히 상황을 가늠하기 어려운 부분이 있어 제대로 올릴 수 있을지 모르겠다 

---

기타 구현한 부분

- 주소 검색창 & 카카오맵 

- 채널톡 

- supabase로 소셜로그인 유저 관리 

- 구글 애널리틱스

- SEO 최적화 - 구글 검색 시 1페이지 노출