chore: vue 코드에 주석 추가

Author: Denia-park

my-garden-fe/src/components/boards/common/SearchForm.vue

@@ -27,6 +27,9 @@ const pageSize = ref(props.queryParameter.pageSize);
 const sort = ref(props.queryParameter.sort);
 const order = ref(props.queryParameter.order);
 
+/**
+ * 검색
+ */
 function search() {
   emits("search", {
     startDate: startDate.value,
@@ -40,6 +43,9 @@ function search() {
   });
 }
 
+/**
+ * 검색 조건 변경 감지
+ */
 watch(() => props.queryParameter, () => {
   if (Object.keys(props.queryParameter).length === 0) {
     return;

my-garden-fe/src/components/dailyRoutine/draw/DrawDailyRoutine.vue

@@ -90,6 +90,9 @@ function createTimeBlock(block, startTime, endTime, partOfDay) {
   return scheduleDefaultData;
 }
 
+/**
+ * 조회 날짜가 변경되면, 해당 날짜의 루틴을 조회한다.
+ */
 watch(() => store.getters.getViewDate, (newDate) => {
       const {targetStartDateTime, targetEndDateTime} = getTargetDateTimeRange(newDate);
 

my-garden-fe/src/components/dailyRoutine/draw/DrawStatisticsChart.vue

@@ -166,6 +166,9 @@ onMounted(() => {
   );
 });
 
+/**
+ * 시간 블록 배열이 업데이트되면, 통계 데이터를 계산하고, Chart.js의 DataSet을 업데이트한다.
+ */
 watch(() => store.getters.getTimeBlockArray, (timeBlockArray) => {
   const statisticData = {};
 

my-garden-fe/src/components/dailyRoutine/input/ContentInput.vue

@@ -7,6 +7,9 @@ const props = defineProps({
   content: String
 });
 
+/**
+ * 일과 내용
+ */
 const content = ref(props.content);
 
 const emit = defineEmits(['changeContent', 'submit'])

my-garden-fe/src/components/dailyRoutine/input/DateInput.vue

@@ -8,8 +8,15 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['changeDate'])
+
+/**
+ * 일과 시간
+ */
 const dateTime = ref('');
 
+/**
+ * 일과 시간 변경 감지
+ */
 watch(() => [props.startDateTime, props.endDateTime], (newValue) => {
   if (props.inputName === '시작 시간') {
     dateTime.value = newValue[0];

my-garden-fe/src/components/dailyRoutine/input/InputDailyRoutine.vue

@@ -8,16 +8,18 @@ import {deleteDailyRoutineApi, postDailyRoutineApi, updateDailyRoutineApi} from
 import {store} from "@/scripts/store.js";
 import {getTodayDate} from "@/components/dailyRoutine/api/util.js";
 
+/**
+ * 하루 일과 입력에 필요한 내용
+ */
 const startDate = ref('');
 const endDate = ref('');
 const content = ref('');
 const routineType = ref('STUDY');
 const isUpdateMode = ref(false);
 
-onMounted(() => {
-  getLastStartDateTime();
-});
-
+/**
+ * 오늘 마지막 시작 시간을 가져온다.
+ */
 function getLastStartDateTime() {
   let todayLastStartDateTime = localStorage.getItem("todayLastStartDateTime");
   const todayDate = getTodayDate();
@@ -30,6 +32,10 @@ function getLastStartDateTime() {
   startDate.value = todayLastStartDateTime;
 }
 
+/**
+ * 버튼을 누르거나, Ctrl + Enter를 눌렀을 때 실행되는 함수<br>
+ * 일과 등록 유효성 검사 후, 일과 등록 또는 수정을 실행한다.
+ */
 function submit() {
   if (!validate()) {
     return;
@@ -41,6 +47,9 @@ function submit() {
     postRoutine();
 }
 
+/**
+ * 일과 등록 유효성 검사
+ */
 function validate() {
   //시작 날짜가 끝 날짜보다 늦을 수 없다.
   function validateStartDateIsBeforeEndDate() {
@@ -56,7 +65,10 @@ function validate() {
     return false;
   }
 
-  //두 날짜는 1일이상 차이가 날 수 없다.
+  /**
+   * 두 날짜의 차이가 1일 이상 나는지 검증한다.
+   * @returns {boolean}
+   */
   function validateDateDifferenceIsSmaller1() {
     // Calculate the time difference in milliseconds
     const timeDifference = new Date(endDate.value) - new Date(startDate.value);
@@ -77,7 +89,9 @@ function validate() {
     return false;
   }
 
-  //content는 255자를 넘을 수 없다.
+  /**
+   * content의 길이가 255자를 넘지 않는지 검증한다.
+   */
   function validateContentLength() {
     if (content.value.length > 255) {
       alert("content는 255자를 넘을 수 없습니다.")
@@ -90,6 +104,9 @@ function validate() {
   return validateContentLength();
 }
 
+/**
+ * 일과 등록
+ */
 function postRoutine() {
   if (!validate()) {
     return;
@@ -100,6 +117,9 @@ function postRoutine() {
   localStorage.setItem("todayLastStartDateTime", endDate.value);
 }
 
+/**
+ * 일과 수정
+ */
 function updateRoutine() {
   if (!updateValidate()) {
     return;
@@ -108,28 +128,37 @@ function updateRoutine() {
   updateDailyRoutineApi(store.getters.getEditBlock.id, startDate.value, endDate.value, routineType.value, content.value);
 }
 
+/**
+ * 일과 수정 유효성 검사
+ */
 function updateValidate() {
   if (!validate()) {
     return false;
   }
 
-  function isNotDateToday() {
-    //오늘내의 날짜로만 수정이 가능하다.
-    const todayDate = getTodayDate(); // Assuming getTodayDate() returns a String
+  /**
+   * 수정 하려는 날짜가 오늘 날짜인지 검증한다.
+   * @returns {boolean} 오늘 내의 날짜가 아니면 false, 아니면 true
+   */
+  function isNotTodayDate() {
+    const todayDate = getTodayDate();
     const tempStartDate = startDate.value.split("T")[0];
     const tempEndDate = endDate.value.split("T")[0];
 
     return tempStartDate !== todayDate || tempEndDate !== todayDate;
   }
 
-  if (isNotDateToday()) {
+  if (isNotTodayDate()) {
     alert("오늘 내의 날짜만 수정이 가능합니다.");
     return false;
   }
 
   return true;
 }
 
+/**
+ * 수정 취소
+ */
 function cancelUpdate() {
   isUpdateMode.value = false;
   getLastStartDateTime();
@@ -138,10 +167,20 @@ function cancelUpdate() {
   content.value = '';
 }
 
+/**
+ * 일과 삭제
+ */
 function deleteRoutine() {
   deleteDailyRoutineApi(store.getters.getEditBlock.id);
 }
 
+onMounted(() => {
+  getLastStartDateTime();
+});
+
+/**
+ * 수정 모드로 변경
+ */
 watch(() => store.getters.getEditBlock, (newVal) => {
       const updateStartDateTime = newVal.startDate + 'T' + newVal.displayStartTime;
 

my-garden-fe/src/components/dailyRoutine/input/TypeInput.vue

@@ -7,16 +7,18 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['changeType'])
-const selectValue = ref('');
 
-watch(() => props.routineType, (newValue) => {
-      const type = convertRoutineTypeToSelectValue(newValue);
-
-      selectValue.value = type;
-      emit('changeType', type)
-    }, {immediate: true}
-);
+/**
+ * 일과 타입
+ */
+const selectValue = ref('');
 
+/**
+ * 루틴 타입을 select value로 변경
+ *
+ * @param inputString 루틴 타입
+ * @returns {*|string} select value
+ */
 function convertRoutineTypeToSelectValue(inputString) {
   switch (inputString) {
     case '공부':
@@ -38,6 +40,17 @@ function convertRoutineTypeToSelectValue(inputString) {
   }
 }
 
+/**
+ * 일과 타입 변경 감지
+ */
+watch(() => props.routineType, (newValue) => {
+      const type = convertRoutineTypeToSelectValue(newValue);
+
+      selectValue.value = type;
+      emit('changeType', type)
+    }, {immediate: true}
+);
+
 </script>
 
 <template>

my-garden-fe/src/components/dailyRoutine/popup/SelectDatePopUp.vue

@@ -4,27 +4,53 @@ import {convertDateFormat} from "@/components/dailyRoutine/api/util.js";
 import {store} from "@/scripts/store.js";
 import {router} from "@/scripts/router.js";
 
+/**
+ * 모달을 보여줄지 여부
+ */
 const showModal = ref(false);
+
+/**
+ * 조회 날짜
+ */
 const inputDate = ref(new Date());
 
+/**
+ * 모달 열기
+ */
 function openModal() {
   showModal.value = true;
 }
 
+/**
+ * 모달 닫기
+ */
 function closeModal() {
   showModal.value = false;
 }
 
+/**
+ * 조회 날짜 변경
+ *
+ * @param date 변경할 날짜
+ */
 function updateDate(date) {
   inputDate.value = date;
   closeModal();
   store.commit("setViewDate", convertDateFormat(date));
 }
 
+/**
+ * 일과 통계 페이지로 이동
+ */
 function goToStatistics() {
   router.push('/daily-routine/statistics');
 }
 
+/**
+ * 모달 바깥쪽 클릭 시 모달 닫기
+ *
+ * @param event 클릭 이벤트
+ */
 function handleClickOutside(event) {
   const modalContent = document.querySelector('.modal-content');
   if (!modalContent.contains(event.target)) {

my-garden-fe/src/components/dailyRoutine/statistics/SelectDateWithCalendar.vue

@@ -4,15 +4,27 @@ import {convertDateFormat, getTodayDate} from "@/components/dailyRoutine/api/uti
 
 const emit = defineEmits(['updateSelectDate']);
 
+/**
+ * 조회 날짜
+ */
 const inputDate = ref({
   start: getTodayDate(),
   end: getTodayDate()
 });
+
+/**
+ * 캘린더 날짜
+ */
 const inputCalendarDate = ref({
   start: new Date(inputDate.value.start),
   end: new Date(inputDate.value.end)
 });
 
+/**
+ * 조회 날짜 변경
+ *
+ * @param date 변경할 날짜
+ */
 function updateDate(date) {
   inputDate.value.start = convertDateFormat(date.start);
   inputDate.value.end = convertDateFormat(date.end);