프로젝트 개요

gem-swap을 통해 교환 gem으로 기프티콘같은 상품과 교환할 수 있는 일종의 결제 모듈과 같은 페이지입니다.
프로젝트 링크

사용된 기술

Next.js(Page routing), TS, Styled-component, Mui, React-query

작업 내역

GEM -> L.POINT 교환 기능 개발
GEM -> Aptos-coin 교환 기능 개발(전용 admin 백오피스 개발)
AWS Route53, Cloud-front, S3, Github-action을 통한 CI/CD 업무 수행

총평

GEM -> Aptos-coin 교환 시 시세를 30초 마다 재조회 해줘야 했기 때문에 React-query를 사용했습니다.

const {
  data: priceData,
  isError,
  isSuccess,
  refetch,
} = useQuery({
  enabled: !aptosSwapModalOpen,
  queryKey: [querykey],
  queryFn: getAptosPrice,
  refetchOnWindowFocus: true,
  refetchInterval: 30000,
  staleTime: 30000,
  gcTime: Infinity,
});

서버state를 따로 분리하여 관리하는 형식이 개발시 큰 이점이 된다고 생각하며, 앞으로도 더욱 더 공부하여 능숙하게 쓰고 싶습니다.

이번 프로젝트도 원개발회사에서 개발도중 인계받은 프로젝트라서 초기설정이 되있고, Next.js도 page routing 방식으로 사용중이었으며, 개발도 어느정도 진행이 되어있는 상태였는데, Aptos-coin 교환 기능을 개발 시 간단한 백오피스의 필요성이 제기되어 초기설정부터 제가 구현하게 되었습니다.
다음은 백오피스 디렉토리 구조입니다.

┃.github/workflows : Github-action을 통해 AWS 자동배포
┃
┣ apis: Axios instance
┃
┣ app
┃  ┣ ┃ ayth_redirect/google : 구글 로그인 사용 시 redirect시킬 페이지
┃  ┃ ┃
┃  ┗ ┗ main: home이 되는 페이지
┃
┃
┃ components: 재사용 컴포넌트 폴더
┃
┃ hooks: custom hooks 폴더
┃
┣ context: context 선언 폴더
┃
┣ libs: 재사용 가능한 library function 폴더
┃
┃ types: 타입스크립트 타입 선언 폴더
┃
┃ utils: const 변수 선언 폴더
┃
┃ react-query: queryKey 및 전역 queryClient 선언
┃
┣ public
┃   ┗ images : assets 폴더
┃
┣ middleware.ts
┃
┣ next.config.js
┃
┣ tsconfig.json
┃
┣ .eslintrc.json
┃
┗ .prettierrc

react-query도 연습해보고, next.js도 app-routing방식으로 구현했으며 초기구현도 해볼 수 있어 성장의 좋은 동력이 되어준 것 같습니다.