notes
프론트엔드 인수인계
프론트엔드 인수인계에 필요한 프로젝트 구조·실행·운영 정보 정리.
전문가 페이지
개발 환경
- README에 개발 스펙 및 설치 과정을 읽어주세요.
- 레포 클론 후 견적주세요 Notion > 코드 백업 > 프론트엔드 코드 백업에 .env, .env.development를 Root 디렉토리에 복사해주세요.
디자인
QA
디렉토리
- pages, assets, components 디렉토리 구조는 주요 서비스 또는 페이지 별로 구분됩니다.
- ex) assets > auth, chat, …
- config 디렉토리에서는 공통적으로 사용되는 axios, react-query, style을 정의하고 있습니다.
- hooks은 대부분 비즈니스 로직과 관련된 기능들이 있습니다. hook별 기능들을 코드 내부에 기록해 놓았습니다.
- recoil은 클라이언트 전역 상태를 다루고 있습니다.
- routes는 useRoutes hook을 사용해 routing된 페이지와 path 값들을 정의하고 있습니다.
- services는 서비스별 서버와 통신하는 api, 해당 api 데이터의 interface, util 함수 등이 정의되어 있습니다.
- types는 서버 데이터와 상관 없이 전역적으로 사용되는 type들을 정의해 놓았습니다.
- utils는 상수와 성공, 에러 메시지 등이 정의되어 있습니다.
히스토리
- 코드 히스토리는 커밋을 확인해주세요.
- development 브랜치에서 개발 또는 features/(기능) 별 브랜치를 나눠 개발하여 main에 병합했습니다.
배포
- 전문가 페이지는 production, development 환경으로 나뉘어 배포되고 있습니다.
- 도메인은 다음과 같습니다.
- https://gyunju.co.kr
- https://development.gyunju.co.kr
- 배포 환경은 AWS S3 → Cloudfront 이며 Github Action을 통해 CI/CD 연결되어 있습니다.
- main, development 브랜치로 푸쉬하시면 해당 환경이 자동 배포됩니다.
- 두 브랜치의 경우 push 이후 Github → Action 탭을 확인해주세요.
- 현재 전문가 페이지 auth service는 다음과 같이 구성되어 있습니다.
Auth
sequenceDiagram
유저 ->> 프론트엔드 : SignIn
프론트엔드 ->> 백엔드 : auth/signin
백엔드 ->> 프론트엔드 : Response partnerId + jwt
프론트엔드 ->> 백엔드 : sending/myinfo
백엔드 ->> 프론트엔드 : Response partner info
프론트엔드 ->> 프론트엔드 : atom에 partnerId + jwt set
프론트엔드 ->> 프론트엔드 : partnerId + jwt을 localstorage에 저장
프론트엔드 ->> 유저 : Success SignIn