PageCreationProcess

Info

• MVVM 패턴 사용
  • Model
  • View
  • ViewModel

Structure

Model

class

• 주로 constructor 가 필요한 경우에 사용됨.
• get 과 같이 custom function이 필요한 경우에도 사용됨.
• 예제인 DateOfCalendar.ts 에서는 생성 과정에서 object to class 형태 구조를 class를 통해 정의하고 강제하기 위해서 사용.
• 유연한 생성이 필요 없이 정해진 패턴으로 생성해야하는 model에서 사용

example

import { getWeekdayByCode, weekday, Weekday } from '@typings/constants/Weekday'  
import dayjs from 'dayjs'  
import { ScheduleOfDate } from '@typings/ScheduleOfDate'  
import dateFormatUtil from '@utils/date/dateFormatUtil'  
  
export class DateOfCalendar {  
  year: number  
  month: number  
  day: number  
  weekday: Weekday  
  schedules: Array<ScheduleOfDate | null>  
  holiday: null | string = null  
  
  constructor(  
    date: {  
      year?: number  
      month?: number  
      day?: number  
      schedules?: Array<ScheduleOfDate | null>  
      holiday?: null | string  
    } = {},  
  ) {  
    const now = dateFormatUtil.getDate()  
  
    const {  
      year = now.year(),  
      month = now.month() + 1,  
      day = now.date(),  
      schedules = [],  
      holiday = null,  
    } = date  
  
    const targetDate = date ? dayjs(`${year}-${month}-${day}`) : now  
  
    this.year = targetDate.year()  
    this.month = targetDate.month() + 1  
    this.day = targetDate.date()  
    this.weekday = getWeekdayByCode(targetDate.day())  
    this.schedules = schedules  
    this.holiday = holiday  
  }  
  
  get isSaturday() {  
    return this.weekday.code == weekday.SATURDAY.code  
  }  
  
  get isSunday() {  
    return this.weekday.code == weekday.SUNDAY.code || this.holiday  
  }  
  
  isSameWeekday = (weekday: Weekday) => this.weekday.code == weekday.code  
  isToday = (now: dayjs.Dayjs) =>  
    now.year() == this.year && now.month() + 1 == this.month && now.date() == this.day  
}

type

• 주로 형태만 필요한 경우 사용.
• 추가적인 로직 정의 없는 순수한 field의 집합.

example

Token.ts

export type Token = {  
  accessToken: string | null  
  refreshToken: string | null  
}

View

• 실제 페이지 구현부
• 서비스 로직은 최소화하고 화면을 그리기 위한 Element 구성 요소만 사용할 수 있도록 구성.
  • utils에 정의된 공통 util function들은 호출 가능
• 필요에 따라 component로 분리.
• 사용에 따라 name 분류
  • page인 경우, {name}Page.tsx
  • component인 경우, {name}.tsx

example

MonthlyCalendarPage.tsx

import React, { useEffect } from 'react'  
import useMonthlyCalendarViewModel from '@views/calendar/monthlyCalendar/useMonthlyCalendarViewModel'  
import './monthlyCalendarPage.scss'  
import MonthlyCalendarHeader from '@views/calendar/monthlyCalendar/components/monthlyCalendarHeader/MonthlyCalendarHeader'  
import MonthlyCalendarBody from '@views/calendar/monthlyCalendar/components/monthlyCalendarBody/MonthlyCalendarBody'  
import SchedulePopups from '@views/calendar/popup/SchedulePopups'  
  
const MonthlyCalendarPage: React.FC = () => {  
  const { calculatedMonthlyCalendar: calendar, currentDate, init } = useMonthlyCalendarViewModel()  
  
  useEffect(() => {  
    if (  
      calendar == null ||  
      calendar.type != 'MONTHLY' ||  
      !(currentDate.year == calendar.year && currentDate.month == calendar.month)  
    )  
      init()  
  }, [currentDate])  
  
  if (!calendar) return null  
  
  return (  
    <>  
      <div className="monthly-calendar">  
        <MonthlyCalendarHeader />  
        <MonthlyCalendarBody calendar={calendar} />  
        <SchedulePopups />      </div>  
    </>  
  )  
}  
  
export default MonthlyCalendarPage

ViewModel

• page 또는 component에서 필요한 service 로직 또는 상태 관리 정보(store와의 상호작용)를 관리하는 부분
• use{name}ViewModel.ts 로 정의
• 화면에서 필요한 store 정보를 전달해주거나 수정하는 작업도 viewModel에서만 가능

example

import calendarRepository from '@repositories/CalendarRepository'  
import { useMemo } from 'react'  
import { Calendar } from '@typings/Calendar'  
import dateFormatUtil from '@utils/date/dateFormatUtil'  
import { ScheduleOfDate } from '@typings/ScheduleOfDate'  
import scheduleRepository from '@repositories/ScheduleRepository'  
import useCalendarStore from '@stores/useCalendarStore'  
import useScheduleStore from '@stores/useScheduleStore'  
import { useShallow } from 'zustand/react/shallow'  
import useCalendarSelectStore from '@stores/useCalendarSelectStore'  
import { scheduleType } from '@typings/constants/ScheduleType'  
  
const useMonthlyCalendarViewModel = () => {  
  const currentDate = useCalendarSelectStore(useShallow(state => state.currentDate))  
  
  const { calendar, setCalendar } = useCalendarStore(  
    useShallow(state => ({  
      calendar: state.calendar,  
      setCalendar: state.setCalendar,  
    })),  
  )  
  
  const { schedules, setSchedules } = useScheduleStore(  
    useShallow(state => ({  
      schedules: state.schedules,  
      setSchedules: state.setSchedules,  
    })),  
  )  
  
  const { stringToDate } = dateFormatUtil  
  
  const calculatedMonthlyCalendar: null | Calendar = useMemo(() => {  
    if (!calendar) return null  
  
    const copyCalendar: Calendar = Object.assign(calendar)  
  
    const schedulesOfDate = schedules  
      .sort(a => (a.type == scheduleType.TASK ? 1 : -1))  
      .sort((a, b) => (stringToDate(a.startedAt).isAfter(stringToDate(b.startedAt)) ? 1 : -1))  
      .map((schedule, index) => schedule.getScheduleOfDateList(index + 1))  
      .flatMap(schedules => schedules)  
  
    let prevSchedules: ScheduleOfDate[] = []  
  
    copyCalendar.dates.forEach(date => {  
      const resultSchedules: ScheduleOfDate[] = []  
      const targetSchedules: ScheduleOfDate[] = schedulesOfDate.filter(  
        schedule =>  
          schedule.year == date.year && schedule.month == date.month && schedule.day == date.day,  
      )  
  
      let prevIndex = 0  
      // 빈 요소 null 세팅 => 화면에서 사용 할 경우, null 값에 대한 대응 필요.  
      targetSchedules.forEach(schedule => {  
        const prevScheduleIndex = prevSchedules.findIndex(  
          targetSchedule => targetSchedule != null && targetSchedule.id == schedule.id,  
        )  
        for (let i = prevIndex; i < prevScheduleIndex; i++) resultSchedules.push(null)  
  
        prevIndex = prevScheduleIndex + 1  
      })  
  
      // 일정 세팅  
      targetSchedules.forEach(schedule => {  
        const prevScheduleIndex = prevSchedules.findIndex(  
          targetSchedule => targetSchedule != null && targetSchedule.id == schedule.id,  
        )  
        if (prevScheduleIndex != -1) {  
          resultSchedules[prevScheduleIndex] = schedule  
        } else {  
          const nullIndex = resultSchedules.findIndex(targetSchedule => targetSchedule == null)  
          if (nullIndex != -1) {  
            resultSchedules[nullIndex] = schedule  
          } else {  
            resultSchedules.push(schedule)  
          }        }  
      })  
  
      prevSchedules = resultSchedules  
      date.schedules = resultSchedules  
    })  
  
    return copyCalendar  
  }, [calendar, schedules])  
  
  const setMonthlyCalendar = async () => {  
    setCalendar(null)  
    setSchedules([])  
  
    const monthlyCalendar = await calendarRepository.getMonthlyCalendar({  
      year: currentDate.year,  
      month: currentDate.month,  
    })  
  
    const scheduleList = await scheduleRepository.findByDate({  
      year: currentDate.year,  
      month: currentDate.month,  
    })  
  
    setCalendar(monthlyCalendar)  
  
    setSchedules(scheduleList)  
  }  
  
  const init = async () => {  
    console.log('init!!')  
    await setMonthlyCalendar()  
  }  
  
  return {  
    calculatedMonthlyCalendar,  
    currentDate,  
    init,  
  }  
}  
  
export default useMonthlyCalendarViewModel