급하게 일손이 필요한 자리에 더 많은 시급을 제공해서 아르바이트생을 구할 수 있는 웹 구인구직 서비스 더 줄게
2024.05.30 ~ 2024.06.17
3주 조금 안 되는 기간동안 4인이 개발하였다.

🪄 구현한 기능

맞춤 공고는 알바 계정으로 로그인 시 알바가 등록한 지역의 공고만 추천해준다.

전체 공고는 마감임박순, 시급많은순, 시간적은순, 가나다순, 최신순으로 정렬 조회가 가능하며

공고 필터링이 가능하다.

최근에 본 공고는 클릭한 공고를 localStorage에 저장하여 6개만 출력한다.

상단 내비게이션의 알림 기능이다. 지원한 공고의 결과를 알림으로 띄워준다.

사장 계정에서는 내 가게 정보를 조회 및 편집할 수 있으며 공고 등록이 가능하다. 등록한 공고 조회는 무한스크롤이 구현되어 있다.

가게 정보 등록, 편집, 공고 등록 시 시급을 최저시급 이상으로 입력 가능하도록 하여 사용자 입장에서 필요한 기능을 추가하였다.

검색 결과에서도 정렬, 필터링, 페이지네이션이 가능하다.

Tablet과 Mobile 반응형도 구현이 되어있다.

🪐 내가 개발한 부분

• 페이지네이션
• Post item(공고) 컴포넌트
• 시급 인상 비율 버튼
• Filter 컴포넌트 및 구현
• 공고 목록 정렬
• 공고 리스트(메인) 페이지
• 지역 맞춤 공고 구현
• 가게 정보 상세 페이지
• 가게 정보 등록 / 수정 페이지
• 지난 공고 및 마감 완료 공고 처리
• 공고 검색 구현
• 알바 계정 알림 구현
• 최저시급 지정
• Loading Spinner
• 404 error 화면
• 배포

🤔 어려웠던 점

전역 상태관리를 처음 사용해보았다. Recoil을 사용했는데 한참 헤매이다가 겨우 atom에 저장하여서 너무너무 기뻤는데 진짜 기쁨도 잠시... 저장한 정보가 새로고침하면 초기화되어서 많이 당황했다... 이런 허무한 걸 현업에서도 쓴다니.. 충격이 컸다. 서치를 해보니 이런 단점을 보완하기 위해 로컬스토리지와 병행해서 사용한다는데 그럼 안정적인 로컬스토리지만 사용하면 해결되는 거 아닌가? 다들 왜 굳이 Recoil을 사용하는 거지? 고민이 많았다.... jwt로 토큰을 디코딩 후 id를 저장한 뒤 토큰이 get 되면 User의 모든 데이터를 atom에 set해줬다. 그리고 이 User 정보를 초기 세팅해주는 컴포넌트를 app.tsx의 상위 루트에서 initialized 해주면서 해결이 되었다. 하지만 해결도 잠시... 이젠 기억이 너무 잘 되는 문제가 발생하였다... 로그아웃을 해도 기존 User의 데이터가 기억되는 점이었다... 그래서 다시 모든 atom을 reset하는 컴포넌트를 만들어서 상위 루트에 넣고 로그아웃 시 초기화하도록 설정해주었더니 모든 문제가 해결되었다... 너무 어려웠다... 그래도 한 번 크게 데이고 나니까.. 다음엔 수월하게 사용할 수 있지 않을까?

😋 좋았던 점

멘토님께서 알려주신 Github Actions CI/CD 를 통해 배포 자동화를 세팅해두어서 배포할 때 정말 수월했다. 앞으로도 프로젝트 시작할 때 세팅해두면 너무 편리할 거 같다.

name: Build # workflow 의 이름

on: push # workflow 의 실행 시점

jobs:
  build: # job 의 이름
    runs-on: ubuntu-latest # 실행할 OS 환경
    steps: # job 의 세부 단계
      # step1 : 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v4

      # step2 : Node.js 설치
      - name: Install dependencies
        run: npm install

      # step3 : 빌드
      - name: Build Next.js app
        run: npm run build

✨ 배포 링크