미리보기

[최종 우수프로젝트 선정] 전통주 공동구매 매칭 플랫폼,
사용자가 다양한 전통주의 상세 정보를 확인하고 구매할 수 있는 서비스

서비스 URL

💬 깃허브 링크 →

💬 노션 링크 →

담당업무

담당 인원 : [FE]-3명, [BE]-2명, [DE]-1명

📌 SEO개선

작업 이유 : 페이지별 메타태그가 일관되게 관리되지 않아 검색엔진의 페이지 인덱싱 효율이 떨어지는 이슈 해결을 위해 진행

작업 내용 및 트러블슈팅

• react-helmet의 thread-safe 문제 :
  react-helmet-async를 도입하여 각 페이지에 재사용 가능한 메타태그 컴포넌트를 생성하고 관리

• CSR으로 초기 로딩 시 메타 데이터 노출 문제 :
  prerenderer를 활용하여 지정된 라우터에 대해 미리 HTML 파일 생성

성과 : 검색엔진 인덱싱 개선 및 SEO 점수 80점 → 92점으로 향상

📌 Discord와 연동한 Sentry 에러 트래킹 시스템 구축

작업 이유 : 빈번한 불필요한 에러 알림으로 인해 팀원들이 중요한 에러를 놓치는 문제 해결 위함

작업 내용 및 트러블슈팅 : Sentry의 setTag, setLevel, fingerprint 기능을 활용해 에러를 필터링하고 그룹화하여,
특정 유형의 에러만 Discord로 알림이 전송되도록 설정

성과 : 시스템 구축을 통해 팀이 실시간으로 중요한 에러에 집중할 수 있는 기반을 마련

📌 @tanstack/query 활용

데이터 캐싱 및 정보 필터/검색 기능 및 무한스크롤 개발

작업 이유 : 캐싱 도입 및 대량 데이터 효율적 렌더링을 위한 무한스크롤 도입

작업 내용 및 트러블슈팅 : 무한스크롤 구현 시 스크롤이 최하단에 고정되는 이슈 발생. key 값을 상품명으로 설정해 중복된 상품명이 원인임을 파악하고, 고유 ID와 index를 조합하여 key 값을 설정함으로써 스크롤 위치와 데이터 페칭이 정상적으로 동작하도록 해결

성과 : 캐싱 및 무한 스크롤을 통한 데이터 제공으로 UX 개선

📌 사업자등록증 OCR 진위 확인 및 OPEN API를 활용한 회원가입 구현

작업 이유 : 수기 작성 시 수동으로 인증 처리를 해줘야하는 문제가 있어 자동 진위 여부 확인 필요

작업 내용 및 트러블슈팅 : 사업자등록증 이미지 업로드 후 서버에서 OCR 기술을 사용해 사업자 번호를 추출. OPEN API를 통해 사업자 번호의 유효성을 실시간으로 검증한 후 유효한 사업자 번호만 통과시키도록 구현

성과 : 회원가입 절차의 신뢰도와 데이터 정확성 향상

사용기술

React, TypeScript, React Query, Zustand, styled-components

여행 일정을 정리하고 관리할 수 있는 서비스

서비스 URL

💬 깃허브 링크 →

담당업무

담당 인원 : 담당 인원 : [FE]-2명

📌 카카오톡 대화 텍스트 파일 파싱 및 필터링

작업 이유 : 대화 데이터를 분석을 위해 대화 파일을 자동으로 처리하고, 필요한 정보만 추출할 수 있는 기능 필요

작업 내용 및 트러블슈팅 : 대화 파일을 파싱한 후, 특정 키워드 및 필터링 조건에 맞춰 데이터를 정제하는 기능 구현

성과 : 대용량 대화 데이터를 빠르고 정확하게 필터링할 수 있어, 데이터 분석의 효율성 향상

📌 Recharts를 활용한 데이터 처리 및 시각화

작업 이유 : 추출된 데이터를 그래프와 차트로 시각화해 사용자가 직관적으로 분석할 수 있도록 제공

작업 내용 및 트러블슈팅 : 텍스트 파일에서 정제된 데이터를 기반으로,
Recharts 라이브러리를 활용해 데이터 변동 및 추이를 시각적으로 표현하는 차트를 개발

성과 : 텍스트로만 제공되던 데이터를 시각적 분석을 통해 대화 패턴 인사이트 도출이 보다 용이해짐

📌 반응형 웹 제작

작업 이유 : 사용자들이 다양한 디바이스에서 최적의 UX 제공

작업 내용 및 트러블슈팅 : 초기에는 특정 디바이스에서 차트 스타일을 조절하기 어려워 레이아웃 깨짐 문제가 발생,
미디어 쿼리를 사용해 화면 크기에 맞춰 차트 사이즈를 동적으로 조정함으로써 해당 문제를 해결

성과 : 모든 디바이스에서 일관된 사용자 경험을 제공

사용기술

React, TypeScript, Redux

여행 일정을 정리하고 관리할 수 있는 서비스

서비스 URL

💬 깃허브 링크 →

💬 서비스 링크 →

담당업무

담당 인원 : 담당 인원 : [FE]-2명, [BE]-1명

📌 화면 디자인

간편하게 사용할 서비스의 취지에 맞게 사용자의 직관적 경험을 최우선으로 고려해,
페이지 전환 없이 일정을 추가할 수 있는 모달 방식으로 디자인

📌 Map API으로 지역 기반 검색 기능 구현

작업 이유 : 사용자가 원하는 지역을 빠르고 정확하게 검색할 수 있는 기능 필요

작업 내용 및 트러블슈팅 : 처음에는 카카오맵 API만 사용했으나, 지역 제한 기능이 없다는 문제를 발견하고
Google Place API를 추가 도입해, 특정 지역(국내 시 단위)으로 검색을 제한하여 지역 기반 검색 기능을 구현

성과 : 불필요한 지역에 대한 검색 결과가 줄어들어 검색 속도가 향상

📌 서버 요청 최소화

작업 이유 : 실시간 검색 기능에서 불필요한 서버 요청이 빈번하게 발생하여 성능 저하 및 서버 부하 문제 발생

작업 내용 및 트러블슈팅 : 검색 기능에 Debouncing 기법을 적용하여 사용자가 입력을 완료한 후
일정 시간 동안 입력이 없을 때만 서버 요청이 발생하도록 최적화

성과 : 불필요한 서버 요청이 감소하고, 성능 최적화로 사용자 경험이 향상

사용기술

React, TypeScript, React Query, Zustand, styled-components

• [기획] 기존 HR 서비스 개편

  • 기존 PHP와 jQuery로 작성된 HR 서비스의 구조와 기능 분석

  • 신규 기획안을 작성하고 전반적인 기획 개편을 총괄

  • 요구사항 정리 및 문서화

  • 프로젝트 목표에 따른 우선순위 설정 및 일정 관리

• [개발] 출퇴근 관리 및 OT 관리 페이지 구현

  • 출퇴근 관리 기능 구현

  • 파트타이머 관리 기능 구현

  • OT 관리 페이지에서 필터링, 검색 기능 구현