240813 일일 개발 일지

done 한 task 기록

[240813] 캘린더 가져오는 구조

    1. 사용자가 저장하면 -> DB 를 거쳤다가 -> 그려지게 할 것 인가 
    2. 구글 캘린더에 저장된 것을 가져와서 -> 그려지게 할 것 인가 

• 이 중 2가지를 다 한다.
• 사실, full calendar 자체에 '휴일' 을 가져오는 기능이 있으면, 굳이 google api 연동을 안 해도 된다.

[240813-1340] 더미date 에 event 생기게 하기

• 참고
• https://bit.ly/3YGzr81 views\fullcalendar.ejs
• 포인트
  ```bash

1. 일정 생성 버튼 클릭 -> addEvent(calendarRef) 이 실행됨
2. 만들어놓고 -> 모듈로 빼니까 좋음 ⭐⭐⭐⭐⭐⭐⭐⭐⭐
   • 이거를 이제 테스트 파일에서 빼서 -> 프로젝트에 적용할 수 있음.

<br>

- addEvent 내부 구현
```jsx
/* 1. const calendarApi = calendarRef?.current?.getApi();
    - calendarRef 이게 작동하려면, FullCalendar 의 ref 속성에 연결해서, addEvent 를 호출하는 '⭐부모 컴포넌트⭐' 에서 'FullCalenar' 의 인스턴스를 가져와야 한다. ⭐⭐⭐⭐⭐ 
        - 지금 예시 프로젝트의 경우에는 'calendar.js' 에서!!! 
    - 이 부분에서 이론적으로 부족했다. 
*/
    <FullCalendar
        ref={calendarRef} // 이 부분 추가 ✅✅
        plugins={[
        resourceTimelinePlugin,
        dayGridPlugin,
        interactionPlugin,
        timeGridPlugin,
    ]}

/* 2. 그래서, full calendar 내부에 존재하는 addEvent 메서드를 사용할 수 있어야 한다. ⭐⭐⭐  
    - 이 addEvent 를 가져오려면, useRef 가 필수적이다. 
*/

 

• 전체 예시 코드
• export function addEvent(calendarRef) { const calendarApi = calendarRef?.current?.getApi(); const dateString = '2024-08-11'; const testDate = new Date(dateString + 'T00:00:00'); calendarApi?.addEvent({ title: '테스트 입니다✅✅', start: testDate, allday: true, color: 'blue', }); }

<br>


### [240813-1340] 'calendar의 특정일자'를 '클릭'하면, event 가 생기게 하기 

``` jsx 
/* 1. 'calendar의 특정일자'를 '클릭'하면 을 어떻게 알아? 
    - Full Calendar 가 이미 만들어두었을 것. 
    - 찾아보니, dateClick 속성이 있음 
        -> 해당 속성에 바인딩되는 함수(handleDateClick) 를 넣을 예정. 
        (출처: https://fullcalendar.io/docs/dateClick)
*/
  const handleDateClick = (clickedDate) => {
    const {date} = clickedDate
    addEvent(calendarRef, date)
    debugger
  }

/* 2. clickedDate 객체 내부를 열어보니⭐⭐⭐, date 속성이 날짜값을 가지고 있었음
    - 그래서, const {date} = clickedDate 이렇게 까보게 됨
    - 이걸 위에서 만든 addEvent 함수에 전달하면 됨
*/

• 전체 코드

  // Context를 사용하기 위한 커스텀 훅 ⭐⭐⭐⭐⭐⭐⭐⭐
  export function useModal() {
  return useContext(ModalContext)
  }
  

export default function CalendarPage() {
const calendarRef = useRef(null) // 캘린더 참조

const [isModalOpen, setIsModalOpen] = useState(false)

const handleDateClick = (clickedDate) => {
const {date} = clickedDate
addEvent(calendarRef, date)
debugger
}

return (
<ModalContext.Provider value={{ isModalOpen, setIsModalOpen }}>

<FullCalendar
ref={calendarRef} // 이 부분 추가 ✅✅
plugins={[
resourceTimelinePlugin,
dayGridPlugin,
interactionPlugin,
timeGridPlugin,
]}
// 커스텀 버튼 추가
customButtons={{
createEventButton: {
text: '일정 생성',
click: function () {
addEvent(calendarRef)
// setIsModalOpen(true)
},
},
}}
headerToolbar={{
left: 'prev,next today createEventButton',
center: 'title',
right: 'resourceTimelineWeek,dayGridMonth,timeGridWeek',
}}
initialView='resourceTimelineWeek'
nowIndicator={true}
editable={true}
selectable={true}
selectMirror={true}
resources={[
{ id: 'a', title: 'Auditorium A' },
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
]}
initialEvents={[
{ title: 'nice event', start: new Date(), resourceId: 'a' },
]}
dateClick={handleDateClick} // 캘린더의 날짜 클릭시 'handleDateClick' 실행
/>

    {isModalOpen ? <Modal setIsModalOpen={setIsModalOpen} /> : <></>}
  </Layout>
</ModalContext.Provider>

)
}

<br>


### [240813-1400] '생성버튼' 을 클릭했을 때, event 가 생기게 하기 

- 변경된 생각 
``` bash
1. 날짜를 클릭하면, event 를 생성하는게 아니라, '생성 버튼' 을 클릭하면, event가 생성되게 하는게, 좀 더 우선이라고 생각함 
    - 왜냐면, 달력을 뒤로 넘기려면, 사실 귀찮다. 
    - 추후에, 달력클릭했을 때 -> 이벤트가 나오게 하는걸 리팩토링 하자
    -> 더 이상 신경쓰지 말고 넘어가자 ⭐⭐⭐ | 우선순위를 생각 ⭐⭐⭐ 

 

// 1. Modal 이 열릴 때, calendarRef 전달 해야 하는데, 
   {isModalOpen ? (
          <Modal calendarRef={calendarRef} setIsModalOpen={setIsModalOpen} />
        ) : (
          <></>
    )}

// 2. 문제가 되었던 건, onSubmit 이벤트 핸들러가 실행되는 시점이 '클릭' 이 아니라, 'Modal 이 실행' 될 때 였음. 
    // 이건, onClick={onSubmit(calendarRef)} 이렇게 작성해서 였음
    <button type='submit'  onClick={()=>onSubmit(calendarRef)}> 제출 </button>

 

[240813-1820] google calendar 에서 '휴일' 가져오기

1. google api key 발급받기

    - 참고 : https://idealist.tistory.com/92 ⭐⭐⭐
    - 발급받은 api key : AIzaSyDOp-C30NyBcZVgTUER4WYZp4zBLwAPC1s

2. [발급과정에서 블로그와 다르게 했던 것] api key 발급 받는 것.
   • https://www.notion.so/google-calendar-12a5ca4f91e8410c9b69a21166bf0c5c
   • 여기 노션 기록 참고
3. [블로그에 없었고, 실제 개발할 때는 보완해야 하는 것] O Auth 설정하는 것
   • 여기 노션 기록 참고
   • https://www.notion.so/google-calendar-12a5ca4f91e8410c9b69a21166bf0c5c

 

[240813-1900] calendar 에서 보이는 화면을, month 로 조절

• 애초의 코드는 아래와 같음

    headerToolbar={{
    left: 'prev,next today createEventButton',
    center: 'title',
    right: 'resourceTimelineWeek,dayGridMonth,timeGridWeek',
    }}

 

• 이걸 아래와 같이 수정

  headerToolbar={{
    left: 'prev,next today createEventButton',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek',
  }}

[240813] DB 에서 받은 일정을 그려주기

1. 데이터를 fetchedData 변수에 저장

   const fetchedData = [ 
    { title: 'test event - 1', start: '2024-08-12', resourceId: 'a' , color: 'blue'},
    { title: 'test event - 2', start: '2024-08-11', resourceId: 'a' , color: 'yellow'},
    { title: 'test event - 3', start: '2024-08-11', end : '2024-08-16' , resourceId: 'a' , color: 'green'},
   ]

 

2. events={combinedEvents} 이렇게 events 속성에 바인딩 될 수 있게 배열로 준비

   const combinedEvents = [
    ...fetchedData,
    ...googleCalendarEvents,
   ]

 

3. 이렇게 events 속성에, 객체 요소로 된 배열 로 꽂아주면, 그려진다.

제대로 학습이 필요한 부분

1. 스프레드 연산자 학습 ⭐⭐⭐

  const fetchedData = [ 
    { title: 'nice event', start: '2024-08-12', resourceId: 'a' , color: 'blue'},
    { title: 'nice event', start: '2024-08-11', resourceId: 'a' , color: 'yellow'},
    { title: 'nice event', start: '2024-08-11', end : '2024-08-16' , resourceId: 'a' , color: 'green'},
  ]

  const googleCalendarEvents = [
    {
      googleCalendarId : 'ko.south_korea#holiday@group.v.calendar.google.com', 
      className: 'holiday',
    }
  ]

  // 📛📛📛 이게 현재 왜 작동?
  const combinedEvents = [
    ...fetchedData,
    ...googleCalendarEvents,
  ]

<FullCalendar
            ref={calendarRef} // 이 부분 추가 ✅✅
            plugins={[
              resourceTimelinePlugin,
              dayGridPlugin,
              interactionPlugin,
              timeGridPlugin,
              googleCalendarPlugin, 
            ]}
            // 커스텀 버튼 추가
            customButtons={{
              createEventButton: {
                text: '일정 생성',
                click: function () {
                  // addEvent(calendarRef)
                  setIsModalOpen(true)
                },
              },
            }}
            headerToolbar={{
              left: 'prev,next today createEventButton',
              center: 'title',
              right: 'resourceTimelineWeek,dayGridMonth,timeGridWeek',
            }}
            initialView='resourceTimelineWeek'
            nowIndicator={true}
            editable={true}
            selectable={true}
            selectMirror={true}
            resources={[
              { id: 'a', title: 'Auditorium A' },
              { id: 'b', title: 'Auditorium B', eventColor: 'green' },
              { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
            ]}

 

2. 부모에서 자식에게 useState 로써 'set 함수' 를 내려보내준다. 하지만, 이 방식은 flux 패턴에 반한다고 했다. 그 대안으로써 context api 가 사용될 수 있는 건가?

• 현재 gpt 의 의견을 듣고 작성한 건, context api 를 그렇게 쓴건데, 이 부분은 context api 에 대한 공부가 필요

 

리팩토링 할 것 들

1. event 생성 '버튼' 이 아니라, '달력' 을 눌렀을 때도, 생성될 수 있게 하기