- Published on
직짱건강 — 직장인을 위한 올인원 헬스케어 서비스 개발
- Authors
- Name
- Hyo814
사이트: https://www.zigzzang.site
** 깃허브: https://github.com/SWYP-3rd-period-1-team/JopJjangHealth-frontend**
https://blog.naver.com/ggamjige8888/223402425615
한 줄 소개:
직장인들을 대상으로 건강 설문을 진행하며, 근거리 병원이나 약국과 연계하고, 병원 관련 캘린더를 간단하게 연동해주는 헬스케어 서비스
기술 스택:
JavaScript, TypeScript, Next, React, Material-UI, Tanstack-query, recoil
주요업무:
건강설문, 회원관리 (회원가입, 로그인, 아이디 찾기, 비밀번호 찾기) 와 마이페이지 (질병 리스트 , 찜, 마이프로필 수정)
업무 기간:
- 2024.01 ~ 2024.04
개발 인원:
- 프론트엔드 2명
- 백엔드 2명
- 기획자 1명
- 디자이너 1명
프로젝트 개요
- 직짱 건강은 헬스케어 도메인을 공부하고 싶은 개발자와 비개발자가 모여 협업하는 동아리에서 진행한 프로젝트입니다.
- 여러 주제 중에서 직접 기획한 아이템을 만들고 싶었고, 간호사로 근무했던 기획자님 의견을 바탕으로 방향을 잡았습니다. 사용자 증상에 따라 건강 설문을 제공하고, 위치 기반 병원 추천과 별점·리뷰 기반 병원 선택, 건강 관리 캘린더까지 한데 모아 올인원으로 건강을 관리할 수 있게 만들었습니다.
주요 경력 및 성과
1. 건강 설문 인터페이스 구현 프로젝트
문제점
- 초기 개발 단계에서 백엔드 API가 미완성되어 클라이언트와 백엔드 간 연동 작업에 의존성이 발생.
- 설문 인터페이스 개발과 테스트가 시급한 상황에서 백엔드 지연으로 프로젝트 일정 차질 우려.
해결 방법
- JSON 목업 데이터를 기반으로 설문 데이터를 관리하여 실제 백엔드 없이 사용자 선택 및 데이터 필터링 로직을 구현.
- 빠른 개발과 독립적인 테스트 환경을 제공하기 위해 목업 데이터를 활용한 설문 인터페이스 설계.
성과 및 기여
- 개발 일정 단축: 백엔드 연동 없이 설문 인터페이스 완성 후 데이터 매핑으로 효율적인 개발 완료.
- 사용자 경험 최적화: 설문 단계별 데이터 필터링과 직관적인 질문 인터페이스로 높은 사용자 만족도 달성.
- 협업 효율성 증대: 백엔드 팀이 API 개발에 집중하도록 병렬 작업 가능 환경 조성.
- 유연한 데이터 관리: JSON 목업 데이터로 설문 항목 추가 및 변경이 간단해짐.
기술 스택 및 역할
- 사용 기술: React.js, TypeScript, Next.js, Recoil, JSON 목업 데이터
- 주요 역할: 설문 플로우 설계 및 구현, 데이터 필터링 로직 작성, 반응형 화면 및 상태 관리 최적화
- 구체적 구현:
- 동적으로 필터링되는 설문 데이터 로직 개발.
useEffect를 활용한 반응형 화면 업데이트.- 화면 크기에 따라 CSS 클래스 동적 적용.
2. 병원 북마크 관리 및 건강 설문 데이터 연동 프로젝트
문제점
- 사용자가 북마크한 병원 정보와 건강 설문 데이터를 효과적으로 관리할 수 있는 인터페이스 부족.
- 데이터 상태 관리와 네트워크 요청 비효율성으로 사용자 경험 저하.
해결 방법
- Recoil을 사용해 클라이언트 상태 관리 단순화 및 설문/북마크 데이터 통합 관리.
- TanStack Query를 통해 서버 동기화 최적화 및 불필요한 네트워크 요청 감소.
- 재사용 가능한 UI 컴포넌트(
LikeList,NoLike)로 일관된 사용자 경험 제공.
성과 및 기여
- 북마크 삭제 기능 구현: 병원 북마크 삭제 후 실시간 UI와 데이터 동기화로 100% 즉각적인 피드백 제공.
- 데이터 로드 시간 단축: TanStack Query의 캐싱 및 비동기 처리로 최적화.
- 유지보수 효율화: Recoil 상태 관리와 React 컴포넌트 모듈화로 재사용 가능한 구조 설계.
- 사용자 만족도 향상: 북마크와 설문 데이터의 빠른 접근성과 직관적인 인터페이스로 긍정적인 사용자 평가 획득.
기술 스택 및 역할
- 사용 기술: React.js, TypeScript, Next.js, Recoil, TanStack Query, Material-UI
- 주요 역할: 병원 북마크 인터페이스 구현, 데이터 상태 관리 설계, 사용자 알림(Snackbar) 및 로딩 뷰 개선
- 구체적 구현:
- 북마크 삭제 후 실시간 UI 동기화 및 사용자 알림 기능 추가.
- 인증 여부 확인을 위한
useAuthRedirect훅 설계 및 리다이렉션 처리. - 로딩 상태 및 데이터 없음에 따른 동적 화면 처리.
이미지
