implement: Implement to disable days that do not have a created diary…

… and implement that clicking on a day will take you to the diary details page for that day

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# sample
+/public/sample.*

package.json

@@ -17,7 +17,6 @@
     "dayjs": "^1.11.7",
     "eslint": "8.31.0",
     "eslint-config-next": "13.2.4",
-    "i": "^0.3.7",
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/apis/diaryApi.ts

@@ -1,7 +1,6 @@
 import { QueryFunctionContext } from 'react-query';
 import axiosInstance from '@/utils/axiosInstance';
 import IDiary from '@/types/IDiary';
-import IDiaryAnalysisRequest from '@/types/IDiaryAnalysisRequest';
 
 export const fetchDiaryListFn = async ({ queryKey }: QueryFunctionContext) => {
   const [, month, year] = queryKey;
@@ -11,17 +10,20 @@ export const fetchDiaryListFn = async ({ queryKey }: QueryFunctionContext) => {
   return response.data;
 };
 
-export const fetchDiaryDetailFn = async ({
-  queryKey,
-}: QueryFunctionContext) => {
+export const fetchDiaryFn = async ({ queryKey }: QueryFunctionContext) => {
   const [, id] = queryKey;
   const response = await axiosInstance.get(`diary/${id}`);
   return response.data;
 };
 
-export const fetchDiaryMetaFn = async (data: IDiaryAnalysisRequest) => {
-  const response = await axiosInstance.get('diary/meta', {
-    params: data,
+export const fetchDiaryDatesFn = async () => {
+  const response = await axiosInstance.get('diary/dates');
+  return response.data;
+};
+
+export const fetchDiaryWithDateFn = async (date: string) => {
+  const response = await axiosInstance.get('diary/date', {
+    params: { date: date },
   });
   return response.data;
 };

src/components/atoms/DatePicker/DatePicker.styled.ts

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 export const StDatePicker = styled.div`
   position: absolute;
   z-index: 10;
-  left: 0;
   right: 0;
   margin-top: 0.25rem;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};

src/components/atoms/DatePicker/DatePicker.tsx

@@ -1,13 +1,14 @@
 import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
-import { FormatDateString } from '@uvarov.frontend/vanilla-calendar/src/types';
 import { StDatePicker } from './DatePicker.styled';
 import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
 import React from 'react';
+import { FormatDateString } from '@uvarov.frontend/vanilla-calendar/src/types';
 
 interface IDatePickerProps {
   current: string;
+  enabled?: Array<string>;
   selected: string;
   setSelected: Dispatch<SetStateAction<string>>;
   setIsCalendarOpen: Dispatch<SetStateAction<boolean>>;
@@ -16,6 +17,7 @@ interface IDatePickerProps {
 export default function DatePicker({
   current,
   selected,
+  enabled = [],
   setSelected,
   setIsCalendarOpen,
 }: IDatePickerProps) {
@@ -36,7 +38,6 @@ export default function DatePicker({
           year: Number(selected.substring(0, 4)),
         },
       },
-
       actions: {
         clickDay(event, dates) {
           setSelected(dates[0]);
@@ -45,7 +46,13 @@ export default function DatePicker({
       },
     });
     datePicker.init();
-  }, [datePickerEl, selected, current]);
+
+    if (enabled.length > 0) {
+      datePicker.settings.range.disableAllDays = true;
+      datePicker.settings.range.enabled = enabled;
+      datePicker.update();
+    }
+  }, [datePickerEl, selected]);
 
   return <StDatePicker ref={datePickerEl} />;
 }

src/components/blocks/DiaryEntryForm/DiaryEntryForm.tsx

@@ -24,18 +24,18 @@ import DatePicker from '@/components/atoms/DatePicker/DatePicker';
 import Link from 'next/link';
 
 interface IDiaryEntryFormProps {
+  today: string;
   title: string;
   content: string;
-  today: string;
   date: string;
   setDate: Dispatch<SetStateAction<string>>;
   setEntry: Dispatch<SetStateAction<IDiary>>;
 }
 
 export default function DiaryEntryForm({
+  today,
   title,
   content,
-  today,
   date,
   setDate,
   setEntry,
@@ -55,13 +55,11 @@ export default function DiaryEntryForm({
               <X />
             </Link>
             <StDiaryDateContainer>
-              <StDiaryDateSelector
-                ref={dropdownRef}
-                onClick={handleCalendarOpen}
-              >
-                <StSelectedDate>
+              <StDiaryDateSelector ref={dropdownRef}>
+                <StSelectedDate onClick={handleCalendarOpen}>
+                  {/* 영운씨가 해결 */}
                   {dayjs(date).locale('en-us').format('dddd, MMMM D, YYYY')}
-                  {isCalendarOpen ? <ChevronUp /> : <ChevronDown />}
+                  {isCalendarOpen ? <ChevronDown /> : <ChevronUp />}
                 </StSelectedDate>
                 {isCalendarOpen && (
                   <DatePicker

src/components/blocks/DiaryHeader/DiaryHeader.styled.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const StDiaryHeader = styled.div`
+  padding: 2.25rem 2.25rem 0.75rem 2.25rem;
+  margin-bottom: 0.5rem;
+  position: sticky;
+  top: calc(80px + 1vh + 1vw);
+  z-index: 10;
+  background-color: ${({ theme }) => theme.bgclr.primary};
+  ${({ theme }) => theme.mixins.flexBox('row', 'center', 'space-between')};
+  svg {
+    width: 2rem;
+    height: 2rem;
+    cursor: pointer;
+  }
+`;
+
+export const StDiaryIconContainer = styled.div`
+  ${({ theme }) => theme.mixins.flexBox('row', 'baseline')};
+  svg {
+    margin-left: 1.25rem;
+  }
+`;
+
+export const StCalendarBox = styled.div`
+  position: relative;
+`;
+
+export const StCalendarLoadingBox = styled.div`
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  margin-top: 0.25rem;
+  box-shadow: ${({ theme }) => theme.boxShadow.normal};
+  background: ${({ theme }) => theme.bgclr.primary};
+  ${({ theme }) => theme.mixins.flexBox('column')};
+  min-width: 275px;
+  min-height: 266px;
+  border-radius: 0.75rem;
+`;

src/components/blocks/DiaryHeader/DiaryHeader.tsx

@@ -0,0 +1,102 @@
+import Link from 'next/link';
+import { ArrowLeft, Calendar, Edit, Trash2 } from 'react-feather';
+import DeleteModal from '../DeleteModal/DeleteModal';
+import useDropdown from '@/hooks/useDropdown';
+import useDeleteModal from '@/hooks/useDeleteModal';
+import { Dispatch, SetStateAction, useRef } from 'react';
+import { useRouter } from 'next/router';
+import { deleteDiaryFn, fetchDiaryDatesFn } from '@/apis/diaryApi';
+import { useMutation, useQuery } from 'react-query';
+import { AxiosError } from 'axios';
+import IDiary from '@/types/IDiary';
+import {
+  StCalendarBox,
+  StCalendarLoadingBox,
+  StDiaryHeader,
+  StDiaryIconContainer,
+} from './DiaryHeader.styled';
+import { ClipLoader } from 'react-spinners';
+import DatePicker from '@/components/atoms/DatePicker/DatePicker';
+import useTodayDate from '@/hooks/useTodayDate';
+
+interface IDiaryHeaderProps {
+  diary: IDiary;
+  date: string;
+  setDate: Dispatch<SetStateAction<string>>;
+}
+
+export default function DiaryHeader({
+  diary,
+  date,
+  setDate,
+}: IDiaryHeaderProps) {
+  const router = useRouter();
+  const { dateStr } = useTodayDate();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isCalendarOpen, setIsCalendarOpen, handleCalendarOpen] =
+    useDropdown(dropdownRef);
+  const { isLoading: datesLoading, data: diaryDates } = useQuery(
+    'diaryDates',
+    fetchDiaryDatesFn,
+    { retry: 0, enabled: isCalendarOpen }
+  );
+  const { mutate } = useMutation(deleteDiaryFn, {
+    onSuccess: data => {
+      alert(data.message);
+      router.push('/diary');
+    },
+    onError: (error: AxiosError) => {
+      alert(error.message);
+      // message 결과에 따라 input 필드 초기화 구현해야함
+    },
+  });
+  const { isModalOpen, handleOpen, handleClose, handleDelete } = useDeleteModal(
+    diary?.diary_id,
+    mutate
+  );
+
+  return (
+    <StDiaryHeader>
+      <Link href='/diary'>
+        <ArrowLeft />
+      </Link>
+      <StDiaryIconContainer>
+        <Link
+          href={{
+            pathname: `/diary/${router.query.id}/edit`,
+            query: { data: JSON.stringify(diary) },
+          }}
+          as={`/diary/${router.query.id}/edit`}
+        >
+          <Edit />
+        </Link>
+        <Trash2 onClick={handleOpen} />
+        {isModalOpen && (
+          <DeleteModal
+            titleMsg='Delete Diary'
+            subMsg='Are you sure you want to delete this diary?'
+            handleDelete={handleDelete}
+            handleClose={handleClose}
+          />
+        )}
+        <StCalendarBox ref={dropdownRef}>
+          <Calendar onClick={handleCalendarOpen} />
+          {datesLoading && (
+            <StCalendarLoadingBox>
+              <ClipLoader />
+            </StCalendarLoadingBox>
+          )}
+          {!datesLoading && isCalendarOpen && (
+            <DatePicker
+              enabled={diaryDates}
+              current={dateStr}
+              selected={date}
+              setSelected={setDate}
+              setIsCalendarOpen={setIsCalendarOpen}
+            />
+          )}
+        </StCalendarBox>
+      </StDiaryIconContainer>
+    </StDiaryHeader>
+  );
+}

src/pages/diary/[id]/edit.tsx

@@ -1,4 +1,4 @@
-import { fetchDiaryDetailFn } from '@/apis/diaryApi';
+import { fetchDiaryFn } from '@/apis/diaryApi';
 import Loading from '@/components/atoms/Loading/Loading';
 import DiaryEntryForm from '@/components/blocks/DiaryEntryForm/DiaryEntryForm';
 import DiaryMetaForm from '@/components/blocks/DiaryMetaForm/DiaryMetaForm';
@@ -13,7 +13,7 @@ export default function DiaryEditPage() {
   const {
     query: { id, data: queryData },
   } = useRouter();
-  const { isLoading, data } = useQuery(['diary', id], fetchDiaryDetailFn, {
+  const { isLoading, data } = useQuery(['diary', id], fetchDiaryFn, {
     enabled: !!id && !queryData,
     retry: 0,
   });
@@ -71,9 +71,9 @@ export default function DiaryEditPage() {
       {isLoading && <Loading message='Loading...' />}
       {!isLoading && !(emotion && weather) && (
         <DiaryEntryForm
+          today={dateStr}
           title={title}
           content={content}
-          today={dateStr}
           date={date}
           setDate={setDate}
           setEntry={setDiary}