- 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.03
개발 인원:
- 프론트엔드 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훅 설계 및 리다이렉션 처리. - 로딩 상태 및 데이터 없음에 따른 동적 화면 처리.