[#112][FEATURE] DailyNote API 연결

src/components/Day/TodayNote/TodayNote.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import usePostInformationData from 'src/hooks/query/usePostInformationData';
 import useDebouncing from 'src/hooks/useDebouncing';
 import { dayInfo } from 'src/states';
 import { theme } from 'src/styles/theme';
@@ -9,17 +8,14 @@ import styled from 'styled-components';
 interface TodayNoteProps {
   memo: string;
 }
-function emptyFunc(): void {}
+
 function TodayNote({ memo }: TodayNoteProps) {
   const today = useRecoilValue(dayInfo);
   const date = today.slice(0, 10);
   const [value, setValue] = useState(memo);
-  // const { mutate: postMemo } = usePostInformationData();
   const { onChange } = useDebouncing({
     date,
     type: 'memo',
-    //handlePost: postMemo,
-    handlePost: emptyFunc,
   });
 
   const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {

src/components/Day/TodayNote/TodayNoteSection.tsx

@@ -5,19 +5,18 @@ import styled from 'styled-components';
 
 import TodayPlan from '../TodayPlan';
 import TodayNote from './TodayNote';
-import { todayPlan } from 'src/mock-data/todayPlan';
+
 function TodayNoteSection() {
   const today = useRecoilValue(dayInfo);
   const date = today.slice(0, 10);
-  console.log(date);
-  console.log(todayPlan);
-  // const { data } = useGetTodayNoteData({ date });
-  // const todayNoteInfo = data?.data;
+
+  const { data } = useGetTodayNoteData({ date });
+  const todayNoteInfo = data?.data;
 
   return (
     <Styled.Root>
-      <TodayPlan emoji={todayPlan?.emoji || ''} dailyGoal={todayPlan?.dailyGoal || ''} />
-      <TodayNote memo={todayPlan?.memo || ''} />
+      <TodayPlan emoji={todayNoteInfo?.emoji || ''} feel={todayNoteInfo?.feel || ''} />
+      <TodayNote memo={todayNoteInfo?.memo || ''} />
     </Styled.Root>
   );
 }

src/components/Day/TodayPlan/EmojiPicker.tsx

@@ -2,7 +2,7 @@ import { IEmojiData, IEmojiPickerProps } from 'emoji-picker-react';
 import dynamic from 'next/dynamic';
 import SmileEmoticon from 'public/assets/SmileEmoticon.svg';
 import React, { useState } from 'react';
-import usePostInformationData from 'src/hooks/query/usePostInformationData';
+import usePostEmojiData from 'src/hooks/query/usePostEmojiData';
 import styled from 'styled-components';
 
 const Picker = dynamic(async () => import('emoji-picker-react'), {
@@ -22,13 +22,13 @@ function EmojiPicker(
   { click, setClick, emoji, date }: EmojiPickerProps,
   ref: React.ForwardedRef<EmojiPickerElement>,
 ) {
-  // const { mutate: postEmoji } = usePostInformationData();
+  const { mutate: postEmoji } = usePostEmojiData();
   const [chosenEmoji, setChosenEmoji] = useState<IEmojiData>();
   const handleEmojiClick = (
     event: React.MouseEvent<Element, MouseEvent>,
     emojiObject: IEmojiData,
   ) => {
-    // postEmoji({ date, type: 'emoji', value: emojiObject.emoji });
+    postEmoji({ planDate: date, content: emojiObject.emoji });
     setChosenEmoji(emojiObject);
     setClick(false);
   };

src/components/Day/TodayPlan/TodayPlanInput.tsx

@@ -1,27 +1,21 @@
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import usePostInformationData from 'src/hooks/query/usePostInformationData';
 import useDebouncing from 'src/hooks/useDebouncing';
 import { dayInfo } from 'src/states';
 import { theme } from 'src/styles/theme';
 import styled from 'styled-components';
 
 interface TodayPlanInputProps {
-  dailyGoal: string;
+  feel: string;
 }
 
-function emptyFunc(): void {}
-
-function TodayPlanInput({ dailyGoal }: TodayPlanInputProps) {
+function TodayPlanInput({ feel }: TodayPlanInputProps) {
   const today = useRecoilValue(dayInfo);
   const date = today.slice(0, 10);
-  // const { mutate: postDailyGoal } = usePostInformationData();
-  const [value, setValue] = useState(dailyGoal);
+  const [value, setValue] = useState(feel);
   const { onChange } = useDebouncing({
     date,
-    type: 'dailyGoal',
-    // handlePost: postDailyGoal,
-    handlePost: emptyFunc,
+    type: 'feel',
   });
 
   const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -32,8 +26,8 @@ function TodayPlanInput({ dailyGoal }: TodayPlanInputProps) {
   };
 
   useEffect(() => {
-    setValue(dailyGoal);
-  }, [dailyGoal]);
+    setValue(feel);
+  }, [feel]);
 
   return (
     <StyledTodayPlanInput.Root>

src/components/Day/TodayPlan/index.tsx

@@ -8,9 +8,9 @@ import TodayPlanInput from './TodayPlanInput';
 
 interface TodayPlanProps {
   emoji: string;
-  dailyGoal: string;
+  feel: string;
 }
-function TodayPlan({ emoji, dailyGoal }: TodayPlanProps) {
+function TodayPlan({ emoji, feel }: TodayPlanProps) {
   const [click, setClick] = useState<boolean>(false);
   const useOutsideAlert = (ref: React.RefObject<HTMLDivElement>) => {
     useEffect(() => {
@@ -44,7 +44,7 @@ function TodayPlan({ emoji, dailyGoal }: TodayPlanProps) {
         emoji={emoji}
         date={todayDate}
       />
-      <TodayPlanInput dailyGoal={dailyGoal} />
+      <TodayPlanInput feel={feel} />
     </StyledTodayPlan.Root>
   );
 }

src/hooks/query/usePostEmojiData.tsx

@@ -0,0 +1,11 @@
+import { useMutation } from 'react-query';
+import { postEmojiData } from 'src/lib/api/dayApi';
+import { EmojiRequestType } from 'src/types/day';
+
+const usePostEmojiData = () => {
+  const mutation = useMutation(async (data: EmojiRequestType) => postEmojiData(data));
+
+  return mutation;
+};
+
+export default usePostEmojiData;

src/hooks/query/usePostFeelData.tsx

@@ -0,0 +1,11 @@
+import { useMutation } from 'react-query';
+import { postFeelData } from 'src/lib/api/dayApi';
+import { FeelRequestType } from 'src/types/day';
+
+const usePostFeelData = () => {
+  const mutation = useMutation(async (data: FeelRequestType) => postFeelData(data));
+
+  return mutation;
+};
+
+export default usePostFeelData;

src/hooks/query/usePostMemoData.tsx

@@ -0,0 +1,11 @@
+import { useMutation } from 'react-query';
+import { postMemoData } from 'src/lib/api/dayApi';
+import { MemoRequestType } from 'src/types/day';
+
+const usePostMemoData = () => {
+  const mutation = useMutation(async (data: MemoRequestType) => postMemoData(data));
+
+  return mutation;
+};
+
+export default usePostMemoData;

src/hooks/useDebouncing.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { MutateType } from 'src/types/api';
-import { InformationRequestType } from 'src/types/day';
+import { FeelRequestType, MemoRequestType } from 'src/types/day';
+import usePostFeelData from './query/usePostFeelData';
+import usePostMemoData from './query/usePostMemoData';
 /* 
     사용방법: const { value, onChange } = useDebouncing();
     onChange에 onChange를 담아서 사용, value 사용
@@ -9,15 +11,14 @@ import { InformationRequestType } from 'src/types/day';
 interface useDebouncingProps {
   date: string;
   type: string;
-  // handlePost: MutateType<InformationRequestType>;
-  handlePost: () => void;
 }
 
 function useDebouncing(args: useDebouncingProps) {
-  const { date, type, handlePost } = args;
+  const { date, type } = args;
   const [value, setValue] = useState<string>('');
   const [timer, setTimer] = useState<NodeJS.Timeout | number>(0);
-
+  const { mutate: postMemo } = usePostMemoData();
+  const { mutate: postFeel } = usePostFeelData();
   const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setValue(e.target.value);
 
@@ -27,7 +28,11 @@ function useDebouncing(args: useDebouncingProps) {
     const newTimer = setTimeout(async () => {
       try {
         console.log(date, type, e.target.value);
-        // handlePost({ date, type, value: e.target.value });
+        if (type == 'memo') {
+          postMemo({ planDate: date, content: e.target.value });
+        } else if (type == 'feel') {
+          postFeel({ planDate: date, content: e.target.value });
+        }
       } catch (e) {
         console.error('error', e);
       }

src/lib/api/dayApi.ts

@@ -12,6 +12,9 @@ import {
   ScheduleTimeDeleteType,
   ScheduleTimePostType,
   TitleAndScheduleId,
+  EmojiRequestType,
+  FeelRequestType,
+  MemoRequestType,
 } from 'src/types/day';
 
 import { client } from './api';
@@ -23,8 +26,7 @@ export const getCalendarData = async ({ month }: CalendarQueryType) => {
 };
 
 export const getTodayNoteData = async ({ date }: DateQueryType) => {
-  const { data } = await client.get(`/information/days?date=${date}`);
-
+  const { data } = await client.get(`/dailynote?planDate=${date}`);
   return { data };
 };
 
@@ -52,8 +54,23 @@ export const getSubScheduleData = async ({ scheduleId }: ScheduleId) => {
 };
 
 export const postInformationData = async (data: InformationRequestType) => {
-  const post = await client.post('/information', { ...data });
+  const post = await client.post('/dailynote', { ...data });
+
+  return post;
+};
+
+export const postEmojiData = async (data: EmojiRequestType) => {
+  const post = await client.post('/dailynote?type=emoji', { ...data });
+  return post;
+};
+
+export const postFeelData = async (data: FeelRequestType) => {
+  const post = await client.post('/dailynote?type=feel', { ...data });
+  return post;
+};
 
+export const postMemoData = async (data: MemoRequestType) => {
+  const post = await client.post('/dailynote?type=memo', { ...data });
   return post;
 };
 

src/types/day.ts

@@ -15,8 +15,24 @@ export interface getEmojiQueryType {
 
 export interface InformationRequestType {
   date: string;
-  type: string;
-  value: string;
+  emoji: string;
+  feel: string;
+  memo: string;
+}
+
+export interface EmojiRequestType {
+  planDate: string;
+  content: string;
+}
+
+export interface FeelRequestType {
+  planDate: string;
+  content: string;
+}
+
+export interface MemoRequestType {
+  planDate: string;
+  content: string;
 }
 
 export interface DateQueryType {