미리보기

IT 기술이 어려운 개인, SMB, 비 IT 기업들이 비대면 콘텐츠 비즈니스를 손쉽게 운영할 수 있도록 돕는 Publ이라는 노코드 빌더를 개발했습니다.

4명의 프론트엔드 팀과 함께, Publ 제품 사이트의 충전형 포인트 시스템 개발, Publ 디자인 시스템의 신규 컴포넌트 제작 등 다양한 프론트엔드 개발 업무를 담당했습니다.

KCC 글라스의 ERP 프로그램을 웹 애플리케이션으로 전환하는 프로젝트에 투입하여 신규 페이지 개발 및 유지 보수를 하였습니다. 실제 약 8000명 이상의 사용자가 사용하였고, 그중 영업 / 구매 파트 개발 및 유지 보수를 하였습니다.

자사 식당 이용을 수기로 작성하는 불편함을 느껴 이를 해소하기 위해 자사 식당 운영 및 예약 웹을 제안하였고 채택이 되어 자사 식당 운영 및 예약 웹 개발을 하였습니다. 자사 식당 운영 및 예약 관리 웹 애플리케이션의 사용자(식당 이용자) 권한을 가진 사람들이 사용하는 페이지를 개발 및 유지 보수를 하였습니다.

Description

IT 기술이 어려운 개인, SMB, 비 IT 기업에게 비대면 콘텐츠 비즈니스를 가능하게 하는 노코드(No-Code) 빌더

( Website )

Experience

• 로컬 스토리지를 이용하여 가장 최근에 사용된 소셜 로그인 수단을 확인할 수 있는 직전 소셜 로그인 확인 기능 개발

• Publ 디자인 시스템의 신규 컴포넌트를 개발하고, 기존 컴포넌트에 새로운 옵션을 추가하여 기능을 확장

• 충전형 포인트 관리 시스템 개발

  • 사업자가 포인트 시스템을 쉽게 이해하고 활용할 수 있도록 돕는 프로모션 화면 개발

  • 사업자가 등록한 충전형 포인트 목록 조회 화면 및 포인트 등록/수정 모달 기능 개발

  • 사업자가 채널에서 웹 충전 상품을 통해 충전된 충전 대금의 출금을 publ에 신청하기 위한 티켓 수정 모달 및 기능 개발

  • 사업자가 충전형 포인트의 정책과 약관 정보 설정할 수 있는 정책/약관 정보 설정 페이지 및 기능 개발

  • 사업자가 총 발행량, 총 소진량, 총 잔여량을 조회하는 포인트 발행 현황 조회 페이지 및 기능 개발

    • 총 발행량과 총 소진량의 기록을 CSV 파일로 확인할 수 있는 CSV 다운로드 기능 개발

• Publ 디자인 시스템의 기존 컴포넌트를 새로운 컴포넌트로 전환하여, 전체 프로젝트에서 일관된 UI/UX를 유지하고 성능을 최적화하는 작업을 수행.

• 중복된 코드를 줄이고, 리스트 기반 화면을 최적화하기 위해 Custom Pagination Hook을 개발

• 타임 라인의 레이아웃을 여러 형식으로 자유롭게 설정할 수 있는 레이아웃 변경 기능 추가

Tech Stack

React Typescript Redux Redux-Saga React-Hook-Form

Styled-Component Storybook

Git Bitbucket Jira

Description

ERP 프로그램을 웹 애플리케이션으로 전환하는 프로젝트에 참여하여, 8,000명 이상의 사용자가 사용하는 영업/구매 파트의 신규 페이지를 개발하고 유지 보수하였습니다.

Experience

• 유가 증권 페이지 UI 구현 및 CRUD 기능 구현

• 물품 구매 견적서 등록, 조회 페이지 UI 구현 및 기능 개발

• 파트너 포탈 견적 확인 페이지 UI 구현 및 기능 개발

• 물품 배송 전 공장 별 가용 배차 조회 페이지 UI 구현 및 기능 개발

• 오랫동안 유지 보수되지 않은 페이지 코드 및 기능 정리

Tech Stack

JavaScript JSP CSS WebSquare Svn Jira

팀인원 : PM 2명, UI/UX 디자이너 1명, 프론트엔드 2명, 백엔드 1명
Github : https://github.com/JurinApp
배포사이트 : https://jurin.site/
사용기술 : React, TypeScript, TailwindCSS, Recoil, React-Query, Vite, AWS(S3 + CloudFront)

Description

청소년들의 금융 관심도가 증가하는 데에 비해 금융 이해력이 부족한 점을 해결하고자 교육용 모의 주식 서비스, 주린이를 부탁해를 기획했습니다.

Experience

• 프로젝트 초기 설정

  • 코드 충돌을 방지하기 위해 ESLint 및 Pritter 설정

  • 절대 경로 설정을 하여 가독성 향상

• 코드 분할을 활용한 초기 로딩 속도 개선

  • 초기 로딩 속도 1.6s → 0.6s로 개선

• useAxios, useObserver 등의 재사용이 가능한 Custom Hook 구현

  • 커스텀 훅을 구현하여 재사용이 가능하고 코드를 최소화

• Axios의 Interceptoe, Instance를 활용한 네트워크 모듈화

• react-router-dom을 활용하여 권한 별 라우팅

  • 접근 권한에 따라 페이지 접속이 가능

  • 사용자가 URL을 직접 입력하여 접속하는 것을 방지

• 선생님 및 학생 권한 페이지 구현

  • 선생님 권한에서 사용되는 학생 관리 ( 조회, 삭제, 포인트 지급), 아이템 / 게시글 / 게시글 관리 (조회, 등록, 수정, 삭제) UI 및 기능을 구현

  • 학생 권한 중 아이템 (조회, 구매, 사용) UI 및 기능을 구현하였습니다.

• React Query의 useInfinityScroll 함수를 사용한 무한 스크롤 기능 구현

• chart.js를 사용한 일별 최고 구매가 및 수량 그래프 구현

• AWS의 S3와 CloudFront를 사용하여 프로젝트 배포

• Recoil을 활용한 유저, 모달, 데이터 상태 관리

• TailwindCSS를 사용하여 UI 스타일링 및 반응형 CSS 적용

Tech Stack

React TypeScript Recoil React-Query TailwindCSS Vite

AWS (S3 + CloudFront)

팀인원 : 프론트엔드 2명, 백엔드 3명
Github : https://github.com/MentoMate
시연 영상 : 시연 영상 링크
사용기술 : React, TypeScript, TailwindCSS, React-Query, Recoil, Vite, AWS(S3 + CloudFront)

Description

혼자 학습하기 힘든 부분을 문제를 해소하기 위해 온라인 멘토 & 멘티 매칭 서비스 멘토메이트를 기획했습니다.

Experience

• 프로젝트 전체적인 기획

  • 프로젝트 주제 선정, 개발 기간, 와이어프레임, 로고 등 프로젝트의 전체적인 기획을 담당

• 실시간 알림 기능 구현

  • 멘토링 결제를 했을 때 해당 멘토링의 멘토에게 실시간으로 알림이 갈 수 있도록 기능을 구현

• 실시간 채팅 기능 구현

  • 실시간으로 대화하고 상호작용할 수 있도록 하기 위해 WebSocket을 사용하여 실시간 채팅 기능을 구현

• 네이버, 카카오 로그인 기능 구현

• 좋아요, 댓글 기능 구현

• 멘토링 / 멘토 / 커뮤니티 페이지 UI 및 기능 구현

• AWS의 S3와 CloudFront를 사용하여 프로젝트 배포

• TailwindCSS를 사용하여 UI 스타일링 및 반응형 CSS 적용

Tech Stack

React TypeScript Recoil React-Query TailwindCSS Vite

AWS (S3 + CloudFront)

팀인원 : 프론트엔드 2명, 백엔드 3명
Github : https://github.com/FootStepteam
시연 영상 : 시연 영상 링크
사용 기술 : React, TypeScript, TailwindCSS, Vite, Kakao Map API, Recoil, Vercel

Description

친구들 또는 지인들과 함께 실시간으로 여행 계획을 하고 기록할 수 있는 여행 일정 서비스 발자국을 기획했습니다.

Experience

• KakaoMap API로 장소 검색 기능 구현

  • 장소 검색 기능 구현

  • 검색 결과 장소들을 마커로 표시 기능 구현

  • 사용자가 마커를 클릭할 때 해당 장소의 정보가 오버레이로 표시되도록 구현

• WebSocket을 활용한 실시간 단체 채팅 및 목적지 공유 기능 구현

  • 실시간 단체 채팅 기능 구현

    • 사용자는 실시간으로 의견을 교환하고 일정에 대한 조율을 할 수 있도록 구현

  • 실시간 목적지 공유 기능 구현

    • 일정 변경 시 여행 일정을 공유하는 사용자들끼리 서로의 목적지 변경을 즉시 인지할 수 있도록 구현

• 여행 일정 요약 내용 카카오톡 나에게로 전송 기능 구현

  • 전체 일정 요약 내용을 html2canvas 라이브러리를 사용하여 캡쳐 후 카카오톡 나에게로 전송 기능을 구현하여 사용자가 손쉽게 여행 일정을 확인할 수 있음

• 랜딩 / 일정 공유방 검색(입장) 페이지 / 일정 공유방 페이지 UI 및 기능 구현

  • 랜딩 페이지와 일정 공유방 목록 조회, 검색, 등록 기능 구현

  • 날짜 별 일정 조회, 장소 검색, 장소 추가, 삭제 기능 구현

• TailwindCSS를 사용하여 UI 스타일링 및 반응형 CSS 적용

Tech Stack

React TypeScript Recoil Kakao Map API Vite Vercel TailwindCSS