따꼼 | 프로젝트 개발 과정

프로젝트 소개는 아래 포스팅에서 확인하실 수 있습니다.

https://seheej.tistory.com/91

따꼼 | 헬스케어 및 건강관리 서비스 프로젝트 소개

 

이 포스팅에서는 이번 프로젝트에서 제가 맡은 기능과 계획을 나누어 설명하겠습니다.

 

 

1. 사용자가 입력한 아이의 생년월일을 기반으로 이번달 접종 리스트 보여주기

• 접종 데이터 로드: 연령별 접종 스케줄 데이터를 불러와야 함. 사용자로 부터 생년월일을 입력받으면, 현재 날짜와 생년월일을 기준으로 아이가 맞아야 하는 백신 리스트를 필터링해서 보여줄 수 있음
  • 백엔드 로직: 생년월일로 아이의 나이를 계산하고, 나이에 맞는 접종 리스트를 DB에서 가져오기
  • 프론트엔드: 이번 달 접종 리스트를 컴포넌트로 만들어서 아이 카드 페이지에 표시

2. 이전달/다음달 보기 버튼 구현

• 이전달/다음달 기능: 이전달 보기와 다음달 보기 버튼을 클릭하면, 해당 달의 접종 리스트로 변경되야함
  • 버튼 클릭 시 달(month)을 기준으로 계산해서 요청을 보내면 해당 달의 접종 리스트를 다시 불러올 수 있음
  • 예를 들어, 현재 달이 10월이면 버튼 클릭 시 9월이나 11월 접종 리스트로 이동

3. 전체 접종 체크리스트 페이지로 이동 버튼

• 페이지 전환: 전체 접종 체크리스트로 이동하는 버튼을 아이 카드 페이지에 추가해야 함
  • 전체 접종 체크리스트 페이지로 이동하도록 라우팅 설정

4. 전체 접종 체크리스트 페이지 

• 접종 완료 표시: 사용자가 백신을 맞았다고 표시할 수 있는 체크박스를 제공. 해당 항목을 체크하면 접종 완료 상태가 저장됨
  • 프론트엔드: 체크박스 UI를 만들어서 클릭 시 접종 완료 상태를 업데이트
  • 백엔드 연동: 접종 완료 여부를 서버에 저장하는 API 요청을 만들어야 함
• 아이 카드 페이지와 체크리스트 페이지 상태 연동: 아이 카드 페이지에서 접종 리스트에 있는 항목들이 접종 완료 상태인지 확인할 수 있어야 함
  • 상태 공유: 전체 체크리스트에서 접종 완료된 항목은 Zustand 같은 상태 관리 라이브러리를 사용해서 아이 카드 페이지에서도 상태를 유지하도록 할 수 있음
  • 상태 업데이트: Zustand나 useState로 상태를 공유하여 두 페이지 간에 접종 완료 여부가 실시간으로 반영되게 할 수 있음

서비스기획 (디자인은 변경될 수 있음)

 

1. 아이 카드 페이지 기능

우리아이등록하기 버튼

• 페이지 상단에 "우리아이등록하기" 버튼을 생성합니다.
• 버튼 클릭 시 아이등록하기 페이지로 이동이 되며, 두 단계로 정보를 입력받습니다.
  • 1단계: 사용자의 아이 정보 (이름, 생년월일, 특이사항)를 입력합니다.
  • 2단계: 접종 완료 내역을 선택합니다. 왼쪽에는 예방접종명, 오른쪽에는 몇 회차 접종을 했는지 선택할 수 있는 리스트가 표시됩니다. 완료 버튼 클릭 시 정보가 등록됩니다.

등록된 아이의 정보 카드

• 버튼 아래에는 등록된 아이의 정보가 카드 형태로 표시됩니다.
  • 카드 왼쪽: 아이의 프로필 이미지, 이름, 생년월일, 특이사항, 수정하기 버튼
  • 카드 오른쪽: 생년월일에 기반하여 이번 달 (10월)에 맞아야 하는 접종 리스트 및 전체 접종 체크리스트 페이지로 이동할 수 있는 버튼.
  • 이전 달/다음 달 보기 버튼을 통해 다른 달의 접종 리스트도 볼 수 있습니다.

전체 접종 체크리스트

• 전체 접종 체크리스트 페이지에서 접종 완료 항목을 표시할 수 있으며, 이 정보를 아이 카드 페이지의 접종 리스트와 연동해 완료 여부를 구분할 수 있도록 해야 합니다.

 

작업순서

1) 프로젝트 초기 설정

• TypeScript 환경 설정: TypeScript를 사용하기 위해 필요한 설정을 진행합니다.
• 모듈 설치: 필요한 패키지 (React, Supabase 등)를 설치합니다.
• 파일 구조 설정를 다음과 같이 생성 예정입니다.

src/
├── components/
│   └── child/
│       ├── ChildCard.tsx          # 등록된 아이 정보 표시 컴포넌트
│       ├── RegisterButton.tsx      # 등록하기 버튼 컴포넌트
│       ├── RegisterForm.tsx        # 아이 등록 폼 (1단계 및 2단계 포함)
│       └── VaccinationList.tsx     # 접종 리스트 컴포넌트
├── app/
│   └── child/
│       ├── [id]                
│       │   ├── childinfo  
│       │   │   ├── page.tsx
│       │   └── record
│       │        └── page.tsx
│       ├── page.tsx                # 아이 카드 페이지 메인 엔트리
│       └── register/
│           ├── page.tsx            # 아이 등록하기 페이지 메인 엔트리
│           └── steps/               # 단계별 컴포넌트를 포함하는 디렉토리
│               ├── RegisterChildInfo.tsx # 1단계: 아이 기본 정보 입력
│               └── RegisterChildRecord.tsx # 2단계: 접종 내역 선택

2)아이 카드 페이지 구현 ✅

• 파일 생성: src/app/child/page.tsx
• 기본 레이아웃 구성: 페이지 상단에 "우리아이 등록하기" 버튼과 카드 영역을 포함하는 레이아웃을 구현합니다.
• 컴포넌트 연결: 컴포넌트를 불러와 카드 레이아웃을 완성합니다.
  • RegisterButton: 아이 등록하기 버튼 컴포넌트
  • ChildCard: 등록된 아이 정보를 표시하는 카드 부분 (아이 기본정보와 접종리스트, 접종 내역을 포함함)

3) 아이 등록 페이지 구현 ✅

• 파일 생성: src/app/child/register/page.tsx
• 기본 레이아웃 구성: 페이지에서 RegisterForm 컴포넌트를 호출하여 아이 등록 절차를 관리

4) 우리아이 등록하기 버튼 컴포넌트 구현 ✅

• 파일 생성: src/_components/child/RegisterButton.tsx
• 버튼 구현: 클릭 시 등록 페이지로 이동하는 버튼을 구현

5) RegisterForm 컴포넌트 구현 ✅

• 파일 생성: src/_components/child/RegisterForm.tsx
• 단계별 렌더링: 1단계(기본 정보 입력)와 2단계(접종 내역 선택)를 관리하는 로직을 구현합니다.
• 상태 관리: 현재 단계 및 입력된 정보를 상태로 관리합니다.

6) 아이 카드 컴포넌트 구현 ✅

• 파일 생성: src/_components/child/ChildCard.tsx
• 등록된 아이 정보를 표시: 프로필 이미지, 이름, 생년월일, 특이사항을 표시하는 UI를 구현
• 수정 버튼: 수정하기 버튼을 클릭 시 수정 페이지로 이동할 수 있는 기능 추가
• 접종 리스트 표시: 생년월일을 기반으로 이번 달 접종 리스트와 이전/다음 달 보기 버튼 추가

7) 아이등록 1단계: 아이 기본 정보 입력 구현 ✅

• 파일 생성: src/_components/child/steps/RegisterChildInfo.tsx
• 폼 구성: 이름, 생년월일, 특이사항 입력 필드를 포함하는 폼을 구현합니다.
• 유효성 검사: 입력값에 대한 유효성 검사를 추가하여 오류 메시지를 표시합니다.

8) 아이등록 2단계: 접종 내역 선택 구현 ✅

• 파일 생성: src/_components/child/steps/RegisterChildRecord.tsx
• 접종 내역 표시: 사용자가 선택할 수 있는 접종 목록을 표시합니다.
• 상태 관리: 선택된 접종 내역을 부모 컴포넌트에 전달하여 상태를 업데이트합니다.

9) 접종 체크 리스트 컴포넌트 구현 ✅

• 파일 생성: src/_components/child/VaccinationList.tsx 파일을 생성합니다.
• 리스트 표시: 현재 아이가 맞아야 하는 접종 리스트와 전체 체크리스트 페이지로 이동하는 버튼을 구현합니다.
• 달 전환 기능: 이전달/다음달 보기 버튼을 추가하여 다른 달의 접종 리스트를 확인할 수 있도록 합니다.

10) 데이터 관리 및 API 연동 ✅

• Supabase 클라이언트 설정: client.ts 파일에서 Supabase 클라이언트를 설정하여 데이터베이스와 연결합니다.
• 데이터 가져오기 및 저장하기:
  • 아이 등록 시 Supabase에 데이터를 저장하는 API 연동
  • 카드 컴포넌트에서 등록된 아이 정보를 Supabase에서 가져오는 로직 추가

11) 상태 관리 및 라우팅 ✅

• 상태 관리: 각 컴포넌트에서 필요한 상태를 관리할 수 있도록 설정합니다 (예: Redux, Context API 등 사용).
• 라우팅 설정: 아이 카드 페이지와 등록 페이지 간의 라우팅을 설정하여 사용자가 쉽게 이동할 수 있도록 합니다.

12) 스타일링 및 마무리 ✅

• 스타일링: Shadcn의 Form 및 Tailwind CSS를 사용하여 모든 페이지와 컴포넌트를 스타일링합니다.
• 코드 주석 추가 및 문서화: 구현한 기능에 대한 주석과 문서를 작성합니다.
• 테스트: 각 기능이 정상적으로 작동하는지 확인하고, 사용자 경험을 개선할 수 있는 부분을 최종 점검합니다.