Skip to content

3. 개발 중

Jump to bottom
amaranth edited this page May 28, 2023 · 3 revisions

각 담당자들과 소통

image

저희 기획서를 보면 위와 같이 각 담당자들을 표시해두었습니다.

본인이 담당하는 페이지의 경우 슬랙에 해당 페이지 채널로 들어와서 소통하면 됩니다.

채널은 채널 탐색해서 페이지 찾아 들어가거나 기획서 안쪽 슬랙 채널 참여를 통해 해당 페이지 채널에 참여할 수 있습니다.

  • 슬랙 채널과 기획서 내부

페이지에 관여하는 모든 담당자들이 포함되어 있으니 특정 인원에게 하는 말의 경우 멘션을 달아주면 좋을 것 같습니다.

  • 백엔드 담당자 멘션 달아둔 예시 image

API 문서

아래 링크로 들어가면 생성된 API 조회 가능합니다!

http://dev.keeper.or.kr:81/docs/keeper.html

API 호출

const useGetTitleTypesQuery = () => {
  const fetcher = () => axios.get(`/about/titles/types`).then(({ data }) => data.list);

  return useQuery<string[]>('titleType', fetcher);
};
const useGetBlockListQuery = ({ type }: { type: string }) => {
  const fetcher = () => axios.get(`/about/titles/types/${type}`).then(({ data }) => data);

  return useQuery<PageBlockInfo>('blockList', fetcher);
};
const useGetBlockListQuery = ({ type }: { type: string }) => {
  const fetcher = () => axios.get(`/about/titles/types/${type}`, {params: type}).then(({ data }) => data);

  return useQuery<PageBlockInfo>('blockList', fetcher);
};
const useCreateSeminarMutation = ({ openTime }: { openTime: string }) => {
  const fetcher = () => axios.post(`/v1/admin/clerk/seminars`, { data: openTime });
};

const { data: seminarList } = useGetBlockListQuery({ type: 'intro' });

테스트 작성

  • Jest + RTL을 사용합니다.
  • TDD 방식으로 진행하는 걸로 하나, 적당히 알아서 할 수 있는 만큼 해봅시다. (테스트 어디까지 해볼 지도 본인의 역량에 따라!)
  • describe는 한글로 작성해주세요.

사용하는 라이브러리

[ Material Tailwind ] 저희는 컴포넌트 라이브러리로 Material Tailwind를 사용하고 있어요!

Material Tailwind

Material Tailwind에 없는 컴포넌트인데 사용하고 싶다!면 MUI도 가능해요!

MUI: The React component library you always wanted

두 라이브러리 컴포넌트를 한 번 쭉 먼저 살펴보는 걸 적극추천합니다! 어떤 컴포넌트가 있는 지 알면 가져다쓰면 되니까 몰라서 하나하나 직접 구현하는 수고를 덜 수 있을거에요!

[ react Icons ] 아이콘은 react Icons라이브러리를 사용합니다!

react Icons라이브러리 중에서도 이 3가지 순으로 우선 사용합니다

피그마에서 아이콘 클릭 시 어떤 아이콘을 사용하는 지 알 수 있습니다!

image

[ ]

날짜 시간 처리 관련 라이브러리 추가 예정

커밋 메시지 작성

[ Commit message 규칙 ]

Type :  Title

- commit 내용1
- commit 내용2
...

#issue번호
  • Git CUI 클라이언트에 커밋 적는 란이 제목과 본문 나뉘어 있지 않는 경우 제목과 본문사이 개행이 한 번 더 들어가야 서로 분리되어 올라갑니다.
  • 관련 이슈 여러 개일 경우 콤마(,)로 구분 (ex.#issue번호, #issue번호)
  • 본문 내용의 경우 무엇을, 왜에 초점을 맞춰 작성하면 좋을 것 같습니다.

예시

fix : CTF 새로고침 에러 해결

- 세부 내용
- ~~

#226
커밋 타입 설명
feat 기능 추가
design CSS 등 사용자 UI 디자인 변경
fix 버그 수정
style 스타일 관련 기능
ex) 코드 포맷팅, 세미콜론 누락, 코드 자체의 변경이 없는 경우
ex) 오타 수정, 탭 사이즈 변경, 변수명 변경 등
refactor 코드 리팩토링, 불필요한 주석 제거
test 테스트 코드 작성/테스트 코드 리팩토링
build 빌드 관련 파일 수정
ex) 패키지 설치로 인한 package.json, package-lock.json 변경 사항
chore eslint 설정, prettier 설정, 패키지 매니저 수정(ex. .gitignore), .env 파일 변경 등

커밋을 어떻게 작성하는 게 좋을 지 모르겠다면 아래 글 참고해주세요!

좋은 커밋을 작성하는 법

공통 컴포넌트 생성

개발하다가 공통적으로 사용될만한 컴포넌트 마주했을 때 dev 채널에 해당 부분 작업한다고 알려주고 따로 이슈 및 피처 파서 진행해주면 좋을 것 같아요!

[작업중인 공통 컴포넌트]

  • Table @김은지
  • Modal @김명서

… (추후 계속 업데이트 될 예정)

코드 작성 순서 (개발 회의 때 정하고 업데이트 예정)

폴더 구조 (개발 회의 때 정하고 업데이트 예정)

  • src
    • assets - 프론트에서 관리하는 이미지 등등
    • constants -
    • api
    • components
    • hooks
    • pages
    • router
Clone this wiki locally