프론트 환경 세팅

git clone <https://github.com/42organization/42gg.client.git>
(env 파일 생성)
npm install
npm run dev

  1. 프론트 main 브랜치 clone

  2. .env 파일 생성

    아래 내용을 복사 붙여넣기 해서 .env 이름의 파일 만들어 주시면 됩니다

    혹시 오류가 생긴다면 파일 이름을 .env.local 로 해주세요

NEXT_PUBLIC_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/>
NEXT_PUBLIC_ADMIN_MOCK_ENDPOINT = <http://localhost:3000/api/pingpong/admin>
CYPRESS_PUBLIC_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/>
NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/pingpong/admin>
NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/party/admin>
NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/agenda>
NEXT_PUBLIC_MOCK_ENDPOINT = <http://localhost:3000/api/pingpong>
NEXT_PUBLIC_CLIENT_ENDPOINT = <http://localhost:3000/party>
NEXT_PUBLIC_CALENDAR_SERVER_ENDPOINT = <https://dev-api.gg.42seoul.kr/calendar>

  1. npm install

    빌드에 필요한 라이브러리들 설치

  2. npm run dev

    dev 실행 후, http://localhost:3000 로 접속하면 42gg 메인 화면이 뜹니다.

    이때 토큰에 https://dev.gg.42seoul.kr/ 의 개발자 도구 > Application > 42gg-token에 있는 토큰을 넣으면 접속이 됩니다.

    스크린샷 2025-03-30 오후 10.31.11.png

    이후 http://localhost:3000/calendar 로 이동하면 캘린더 메인 페이지에 접속됩니다.

API 사용 목록

캘린더 메인 뷰

모두 캘린더 메인 페이지 접속하자마자 호출되는 api들입니다.

  1. /calendar GET -> 달별로 /calendar?start=2025-03-01&end=2025-03-31' get api 호출 -> 달 이동 시마다 해당 달 start~end로 api 재호출
  2. /calendar/custom GET -> 사이드바에서 그룹 표시 위해 메인 페이지 접속 시 그룹목록 get

사이드바

사이드바에서 그룹 편집/삭제 작업을 수행해서 해당 api를 사용합니다.

  1. /calendar/custom/{id} PUT 호출 -> 그룹 이름, 색 수정 시
  2. /calendar/custom/{id} DELETE 호출 -> 그룹 삭제 시

일정 상세 모달