[Feat] 캘린더 우측 일정, 루틴 관리탭 제작

[wongakim-99]

Description

캘린더 페이지 우측에 위치한 사이드바 UI 컴포넌트를 제작합니다. 사이드바는 사용자의 할 일, 루틴, 일정 등을 보여주는 요소로 구성되며, 인터랙티브한 체크박스와 상태 표시 기능을 포함합니다.

---

Tasks

1. UI컴포넌트 설계

• 사이드바 레이아웃 및 스타일 정의 (CSS/디자인 시스템 적용)
• "루틴" 섹션 생성 (체크박스 및 수정/추가 버튼 포함)
• "오늘의 할 일" 섹션 생성 (완료/미완료 상태 구분)
• 체크박스 상태에 따른 데이터 동기화 처리

2. 기능 구현

• 할 일 추가/삭제 기능 구현
• 루틴 데이터 및 상태 저장 기능 추가
• 미완료 상태 필터링 및 상태 변경 기능 구현

3. 백엔드 연동

• 사용자 루틴 및 할 일 데이터를 API로 가져오기
• 상태 변경 시 API로 데이터 업데이트 처리

[wongakim-99]

feat : 루틴 관리 기능 구현 및 더미 데이터 연동 ✨

• zustand 를 사용하여 루틴 상태관리 store 구현
• 더미 데이터를 통한 루틴 조회 기능 추가
• 루틴 완료 상태 토글 기능 구현
• Routine 컴포넌트와 상태관리 store 연결
• 추후 axios API 호출로 전환이 용이하도록 fetchRoutines 함수 설계

---

오늘 작업한 내용 24/01/10

1. zustand 를 활용한 전역 상태 관리 구현

   • zustand 라이브러리를 활용하여 루틴 상태 관리 (store) 를 생성했습니다.
   • 루틴 데이터를 가져오는 fetchRoutines 함수와 루틴 완료 상태를 토글하는 toggleRoutine 함수를 정의했습니다.

2. 루틴 데이터 타입 정의

   • Routine 타입을 정의하여 루틴 데이터를 관리(https://www.notion.so/API-138d94d3d19b80b8b59bf6e2a167b3a7?p=138d94d3d19b81eeace8c9ee216e54c1&pm=s) 아직 스웨거에 루틴 관련 API가 없어서 노션에서 해당 API 명세서를 참고해서 구현했습니다.
   • 위의 API명세서의 데이터 타입에 최대한 맞춰서 더미 데이터를 타입에 맞게 작성하여 초기 상태를 시뮬레이션 했습니다.

3. Routine 컴포넌트와 Zustand 상태 연결

   • Routine 컴포넌트에서 Zustand 의 useRoutineStore 를 활용하여 전역 상태를 가져오고 관리
   • useEffect 를 활용해 컴포넌트가 렌더링될 때 fetchRoutines 를 호출하여 상태를 초기화
   • 각 루틴의 체크박스 이벤트를 통해 toggleRoutine 이 호출되어 상태가 즉시 업데이트되도록 구현

4. 더미 데이터 사용 및 API 전환 설계

   • 현재 fetchRoutines 함수는 더미 데이터를 Promise 로 반환하도록 설계(https://velog.io/@combi_jihoon/React-Promise-asyncawait) Promise는 해당 블로그 참고했슴다!☺️
   • 이후 실제 API 가 제공되면 axios 로 호출하는 코드로 쉽게 변경할 수 있도록 구조화.

[wongakim-99]

feat : 루틴 데이터 생성 로직 작성 ✨

루틴 데이터 생성 (POST) 의 과정은 아래와 같습니다.

---

1. routinStore.ts 의 역할 : 상태 관리 및 API 통신

routinStore.ts 는 다음과 같은 역할을 담당합니다.

• API 통신:

  • swagger 를 통해 루틴 데이터가 준비되면 axios 통신을 사용해 서버와의 통신 GET, POST, DELETE, PUT 을 처리합니다.
  • 데이터를 가져오거나 전송, 수정, 삭제하는 로직은 이곳에서 수행됩니다.

• 상태 관리:

  • 서버에서 가져온 데이터를 routines 상태에 저장하고, 이를 클라이언트에서 사용할 수 있도록 제공합니다.
  • 상태를 업데이트하는 함수(fetchRoutines, addRoutines, deleteRoutine, toggleRoutine) 도 정의합니다.

---

2. RoutineCreation.tsx, Routine.tsx 의 역할 : 데이터 렌더링 및 사용자와의 상호작용

• RoutineCreation.tsx

  • 사용자가 루틴을 생성할 수 있도록 입력 폼을 제공
  • 사용자가 입력한 데이터를 addRoutine 을 호출하여 서버로 전송
  • 루틴 생성 후, onBack 콜백을 호출하여 생성한 루틴 목록 페이지로 롤백

• Routine.tsx

  • routinStore 에서 가져온 루틴 데이터를 렌더링
  • 루틴의 상태를 토글(toggleRoutine) 하거나 삭제 (deleteRoutine) 할 수 있는 UI 제공
  • 사용자가 "루틴 추가" 버튼을 누르면 RoutineCreation.tsx 로 전환

---

3. "왜?" 이러한 방식으로 시스템 로직을 설계했는가?

1. 책임 분리:

   • API 통신과 상태 관리는 routinStore.ts 에서 처리
   • 렌더링과 사용자 상호작용은 컴포넌트 (Routine.tsx, RoutineCreation.tsx) 에서 처리

2. 재사용성:

   • API 통신 및 상태 관리 로직을 routinStore.ts 에 캡슐화하여, 다른 컴포넌트에서도 동일한 데이터와 로직을 재사용 가능

3. 유지보수성:

   • API 가 변경되더라도, routineStore.ts 부분만 수정하도록 해서 유지보수성 고려

이런식으로 상태관리가 중점이 되는 영역인 routinStore.ts 에 API를 호출한 이유는 어쩌면 2번 이유가 핵심이였습니다. 물론 루틴 데이터는 현재 캘린더 페이지의 우측 사이드바에서만 사용되므로, 사실 로컬 상태 관리만으로 충분할 수 있습니다. 하지만 전역 상태 관리를 선택한 이유는, '오늘의 할 일'과 같은 데이터를 처리할 때 상태 관리와 API 호출의 통일성을 유지하기 위함입니다.

처음에는 루틴 데이터를 로컬 상태로 관리하는 방법도 고려했으나, '오늘의 할 일' 데이터와의 유사성을 고려했을 때 전역 상태 관리가 더 적합하다고 판단했습니다.

이는, 루틴 데이터와 다루는 방식이 비슷하기에 루틴 데이터를 먼저 API 호출과 전역상태 관리를 한 곳에서 먼저 테스트로 진행해보고, 문제없을 시 진짜배기인 "오늘의 할 일" 부분을 실제로 위와 같은 방식으로 비슷하게 사용하기 위해서 루틴 데이터를, 먼저 routinStore.ts 에 zustand 를 사용한 전역 상태관리와 API 호출(더미 데이터) 로 먼저 진행해 보았습니다.😀