미리보기

명품 중고 거래 플랫폼을 개발하는 PAP Corp.에서 프론트엔드 개발로 참여했습니다.
판매자를 위한 'CHIC 파트너 어드민'의 초기 단계 개발에 참여했으며, 커머스 앱인 'CHIC' 내의 각종 기능 구현 및 개선 작업을 담당했습니다.
PR 라벨링이나 어드민 프로젝트 문서화 등 프로젝트의 생산성을 높이기 위한 여러 개발 문화의 도입을 시도했습니다.

'준비물 챙겼어?'는 여행 준비물 체크리스트를 생성하고, 공유할 수 있는 프로젝트입니다.

현재 제작중이며, 8월 내 런칭을 목표로 하고 있습니다.

기술 스택

TypeScript, Next.js 13 App Router, Tailwind CSS, Context API, Jotai, Firebase

작업 사항

• SEO 최적화 등을 위해 프로젝트 환경을 Vite & React에서 Next.js 13으로 마이그레이션

• 느려진 메인 페이지를 개선하기 위해 성능 최적화를 진행해 Lighthouse 성능 점수가 94점 → 98점으로 증가

• Input 컴포넌트의 복잡성을 해결하기 위해 분리 및 Form 등의 합성 컴포넌트로 리팩토링하여 재사용성 확대

• API 및 코드 컨벤션 등 문서화, Github Project와 Issue, PR 템플릿을 활용하여 이슈 관리

참고 링크

• 레포지토리

• 피그마 페이지

• 프로젝트 소개

중고 명품 거래 커머스 플랫폼 ‘CHIC’ 앱에서 프론트엔드 개발을 진행했습니다.

기술 스택

React-Native, TypeScript, styled-components, GraphQL, Redux Toolkit, Firebase

개발 경험

• 회원가입 절차, 차단 및 신고 기능, 판매글 화면 등 앱 내 각종 기능 개선 작업 진행

• 폴드 폰 사용자 증가에 맞춰 상품 리스트 UI 및 카테고리 웹뷰 화면을 반응형으로 적용

• 백엔드 언어 변경으로 GraphQL을 걷어내면서 상태 관리를 Redux Toolkit으로 마이그레이션

• PR 라벨링 및 템플릿 등 크고 작은 개발 문화 도입 시도

'CHIC'의 판매자 분들이 상품을 직접 등록하고 관리할 수 있도록 도와주는 어드민 페이지를 개발했습니다.

기술 스택

Next.js 13, TypeScript, Ant Design, styled-components, zustand

개발 경험

• 상품 및 주문, 배송, 정산 관리 등 전반적인 어드민 페이지 제작

• Ant Design 내 UI 컴포넌트를 styled-components에 상속하여 내부 요소 커스텀이 가능하도록 적용

• 전역에 띄울 알림 배너를 zustand를 활용해 전역으로 관리하도록 구현

• 프로젝트 관리 및 인수인계를 위해 문서 Notion화 및 이슈 관리를 위한 Jira 도입

QR 코드에 접근해 유저가 작성한 정보들을 기반으로 대기 리스트를 관리하는 솔루션입니다.

1주일 간 일부 음식점에 테스트 런칭을 진행했으며, 평일 약 1-20개, 주말 약 60여 개의 대기팀을 확보하고 이용자에게 직접 피드백을 받은 경험이 있습니다.

기술 스택

React, TypeScript, Firebase, Chakra UI, styled-component, Recoil, Tanstack-query

개발 경험

• Firebase를 이용한 BasS 환경에서 인증, 스토리지, 데이터베이스, 애널리틱스 연동

• 저시력자가 이용할 수 있도록 폰트 확대, 축소 기능을 Recoil의 상태 관리로 모드 적용

• QR 코드 API를 이용해 매장 QR 코드 발급 및 Blob 객체를 통해 이미지 다운로드 구현

• 이슈 및 마일스톤 일정을 Github Project를 이용해 관리

참고 링크

• 레포지토리

• 피그마 페이지

• 메인 화면 링크

• 예시 매장 링크

MIMIC은 유저들이 만든 Todo 형식의 과제를 일상에서 체험해보고, 이를 공유하는 미션 형식의 커뮤니티입니다.

(현재는 종료된 서비스입니다.)

기술 스택

React, Redux Toolkit, styled-components, Sentry

개발 경험

• AWS의 S3와 CloudFront, Route 53을 이용해 SSL 인증서를 받은 https 사이트 배포 경험

• 일부 브라우저 OS의 WEB Share API 호환성 문제를 Sentry를 활용해 발견하고 Clipboard API로 교체

• 전맹 사용자를 고려해 TTS 등 스크린 리더 기능이 작동될 수 있도록 ARIA 등을 활용한 웹 접근성 부여

• JIRA를 이용해 태스크 관리, Github Project를 이용해 이슈 트래킹

참고 링크

• 시연 영상

• 프론트엔드 레포지토리 (Fork)

개인 프로젝트 도중 사용했던 css function과 관련하여 오픈 소스 활동으로 MDN 문서 번역 기여에 참여했습니다.

참고 링크

PR 내역
반영 페이지

IT업계 분들이 다 같이 모여 한해를 회고하는 주제로 밋업을 기획하고 2023년 11월 25일에 개최했습니다.
연사자 분들을 모시고 총 6개의 세션을 준비했으며, 30명의 참가자 분들과 함께 다양한 주제를 가지고 이야기를 나눴습니다.

참고 링크

밋업 안내 페이지
발표 자료 모음