업무 및 생산성 향상을 위한 백오피스 유지/보수/신규 개발을 하고있습니다.
1) AI 퍼스널 컬러 게임
PC 웹, 모바일 웹, Webview(IOS,AOS) 퍼스널 게임 웹 서비스 화면 개발
- 본인이 테스트한 결과를 주변 지인들에게 공유하고 테스트 요청하여 퍼스널 컬러 타입을 간단히 알아 볼 수 있는 서비스
- SSR 및 og(open graph) 적용
- 네이티브앱에서 Webview로 동작 및 `브릿지`를 통해 IOS,AOS 네이티브 기능 사용 및 데이터 통신
- Prop Drlling이 깊어지는 부분은 `recoil` 을 사용하여 상태관리
- 카카오톡, 라인, 인스타그램 등을 이용해 결과 공유 및 게임 테스트 요청을 통해 링크를 전달 모바일 웹, PC 웹에서 간편히 테스트할 수 있도록 구현
- `react query` 를 사용하여 서버 AI 이미지 처리 시간을 고려, 최대한 끊김 없는 게임 진행을 위한 api 요청 로직 구현
- Webivew에서 최대한 네이티브 앱과 같은 사용성을 위해 여러 `animation`효과 적용 (기존 기획에 없던 기능을 직접 어필하여 추가)
- `다이나믹링크` 및 `딥링크` 를 통해 PC 또는 Mobile에서 인앱으로 유도할 수 있도록함
- AOS 스토어(뷰티) 마켓 최고 1위 달성 / IOS 스토어(라이프 스타일) 최고 5위 달성, 전체 37위 달성 / 신규 유저 가입자 수 최대 갱신
2) 샵, 아티스트 프로필 포트폴리오 웹
소속된 파트너들의 프로필을 링크를 통해 사용자(고객)가 쉽게 파트너들의 경력 및 포트폴리오, 여러 후기를 확인하여 사용자(고객)에게 조금 더 신뢰성을 주고 거래 유도를 할 수 있도록 한 프로젝트입니다.
- 모바일, PC버전, Webview 반응형으로 제작
- SSR 및 og(open graph) 적용
- `다이나믹링크` 연동을 통해 모바일에서 다운로드 스토어 및 앱으로 바로 이동할 수 있도록 구현
- `react-query` 를 사용하여 캐싱
- 네이티브 앱(IOS, AOS) Webview 를 고려하여 최대한 앱처럼 자연스러운 애니메이션 효과 적용
- 파트너들이 실제로 고객들을 대상으로 많이 이용하는 중이고 만족도 또한 매우 높음
3) 백오피스(발라 앱)
영업, 운영, 마케팅 팀에서 백오피스(발라 앱)를 사용하며 더 효율적인 업무 처리를 위해 사용자의 피드백 반영과 기능 개선 및 고도화, 신규 기능을 개발 하고있습니다.
- 기존 Vue로 만들어진 백오피스 → React(Next.js + typescript)로 마이그레이션
- 공통으로 사용되는 컴포넌트는 재사용성을 고려하여 재사용 컴포넌트용 디렉토리로 구별하여 기능 개발
- 재사용이 필요한 컴포넌트는 비즈니스 컴포넌트, 프레젠테이션 컴포넌트 구별하여 개발
- 각기 다른 API마다 모듈화
- `react-hook-form` 을 커스텀 Hook 작성 및 상위 컴포넌트에서 재사용 컴포넌트 사용 가능하도록 개발(개발 시간 단축)
- 멀티 밴드, 카테고리 기능 화면 개발 (실시간 앱 배너 변경) - 앱 배포 없이 화면 구성 변경 가능
- 푸시 알림 기능 화면 개발 (앱 푸시)
- 주문 내역 기능 화면 개발 (앱에서 들어온 주문 및 수동 주문 등록) / 비회원 유저 간편 등록, 결제 정보, 환불 등
- 파트너 샵 메뉴 추가, 수정 및 삭제 기능 화면 개발
- 정산 기능 화면 개발 (앱 파트너 정산) - 수동으로 하던 정산 작업 효율 극대화
- 퍼스널 컬러 테스트 기능 화면 개발 - 퍼스널 컬러 게임 색상 값 컨트롤
- 어드민 메뉴 고정 기능 기획에 건의 및 기능 추가
- 팀마다 사용하는 메뉴가 달라서 메뉴가 많아짐에 따라 스크롤 영역이 길어지는 단점 해결
- 자주 사용하고 변경되지 않는 API는 `react-query` 캐싱 기능 이용 api 중복호출 방지
- Slack-webhook 기능을 사용하여 클라이언트 및 api 에러 추적
- Slack-webhook의 에러 메시지 형식을 가독성 좋게 커스텀하여
사용
- 클라이언트 에러는 각기 다른 컴포넌트마다 `Error Boundary` 를
설정하여 에러 전송
- API 에러는 서버 API 종류마다 모듈화하고 `axios.create` 를
이용하여 모듈화한 최상위 `apiClient.interceptors.response`
에서 Api Exception 발생시 캐치하여 Slack-webhook api로 에러
전송
- ...ing
프로젝트별 Slack-webhook 기능을 사용해 클라이언트 및 api 에러 추적
사용하고 있는 기술 및 라이브러리
- Next.js, Typescript, react-query react-hook-form, Recoil, styled-component 등
और देखें
