diff --git a/src/components/Day/TodayNote/TodayNote.tsx b/src/components/Day/TodayNote/TodayNote.tsx index e197055..ddf1415 100644 --- a/src/components/Day/TodayNote/TodayNote.tsx +++ b/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) => { diff --git a/src/components/Day/TodayNote/TodayNoteSection.tsx b/src/components/Day/TodayNote/TodayNoteSection.tsx index ec13c19..c8eae02 100644 --- a/src/components/Day/TodayNote/TodayNoteSection.tsx +++ b/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 ( - - + + ); } diff --git a/src/components/Day/TodayPlan/EmojiPicker.tsx b/src/components/Day/TodayPlan/EmojiPicker.tsx index 2f583f3..07dc153 100644 --- a/src/components/Day/TodayPlan/EmojiPicker.tsx +++ b/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, ) { - // const { mutate: postEmoji } = usePostInformationData(); + const { mutate: postEmoji } = usePostEmojiData(); const [chosenEmoji, setChosenEmoji] = useState(); const handleEmojiClick = ( event: React.MouseEvent, emojiObject: IEmojiData, ) => { - // postEmoji({ date, type: 'emoji', value: emojiObject.emoji }); + postEmoji({ planDate: date, content: emojiObject.emoji }); setChosenEmoji(emojiObject); setClick(false); }; diff --git a/src/components/Day/TodayPlan/TodayPlanInput.tsx b/src/components/Day/TodayPlan/TodayPlanInput.tsx index 79fca96..cc938e6 100644 --- a/src/components/Day/TodayPlan/TodayPlanInput.tsx +++ b/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) => { @@ -32,8 +26,8 @@ function TodayPlanInput({ dailyGoal }: TodayPlanInputProps) { }; useEffect(() => { - setValue(dailyGoal); - }, [dailyGoal]); + setValue(feel); + }, [feel]); return ( diff --git a/src/components/Day/TodayPlan/index.tsx b/src/components/Day/TodayPlan/index.tsx index c0766fc..8ef2d1e 100644 --- a/src/components/Day/TodayPlan/index.tsx +++ b/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(false); const useOutsideAlert = (ref: React.RefObject) => { useEffect(() => { @@ -44,7 +44,7 @@ function TodayPlan({ emoji, dailyGoal }: TodayPlanProps) { emoji={emoji} date={todayDate} /> - + ); } diff --git a/src/hooks/query/usePostEmojiData.tsx b/src/hooks/query/usePostEmojiData.tsx new file mode 100644 index 0000000..7a88970 --- /dev/null +++ b/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; diff --git a/src/hooks/query/usePostFeelData.tsx b/src/hooks/query/usePostFeelData.tsx new file mode 100644 index 0000000..8f70da1 --- /dev/null +++ b/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; diff --git a/src/hooks/query/usePostInformationData.tsx b/src/hooks/query/usePostInformationData.tsx deleted file mode 100644 index 57810d4..0000000 --- a/src/hooks/query/usePostInformationData.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { useMutation } from 'react-query'; -import { postInformationData } from 'src/lib/api/dayApi'; -import { InformationRequestType } from 'src/types/day'; - -const usePostInformationData = () => { - const mutation = useMutation(async (data: InformationRequestType) => postInformationData(data)); - - return mutation; -}; - -export default usePostInformationData; diff --git a/src/hooks/query/usePostMemoData.tsx b/src/hooks/query/usePostMemoData.tsx new file mode 100644 index 0000000..820b87e --- /dev/null +++ b/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; diff --git a/src/hooks/useDebouncing.tsx b/src/hooks/useDebouncing.tsx index ce6f2f8..a1c2e9b 100644 --- a/src/hooks/useDebouncing.tsx +++ b/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; - handlePost: () => void; } function useDebouncing(args: useDebouncingProps) { - const { date, type, handlePost } = args; + const { date, type } = args; const [value, setValue] = useState(''); const [timer, setTimer] = useState(0); - + const { mutate: postMemo } = usePostMemoData(); + const { mutate: postFeel } = usePostFeelData(); const onChange = (e: React.ChangeEvent) => { 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); } diff --git a/src/lib/api/dayApi.ts b/src/lib/api/dayApi.ts index 0b57794..620ba86 100644 --- a/src/lib/api/dayApi.ts +++ b/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; }; diff --git a/src/types/day.ts b/src/types/day.ts index 4b690dd..f31d54d 100644 --- a/src/types/day.ts +++ b/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 {