feat: 커스텀훅으로 로직 변경 및 사용하지 않는 코드 제거

scheduler-SoHwaGi · Feb 18, 2025 · 6d0c567 · 6d0c567
1 parent dd433d7
commit 6d0c567
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 71 deletions.
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -6,8 +6,7 @@ import * as S from './BottomSheet.style';
 interface BottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
-  scheduleId: number | null;
-  onDelete: (deleteId: number) => void;
+  onDelete: () => void;
 }
 
 const BottomSheet: React.FC<BottomSheetProps> = ({
@@ -39,7 +38,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
         <Sheet.Header />
         <Sheet.Content>
           <Sheet.Scroller>
-            <S.DeleteContainer onClick={() => onDelete}>
+            <S.DeleteContainer onClick={onDelete}>
               <S.DeleteIcon src={Delete} alt="delete icon" />
               <S.DeleteText>삭제하기</S.DeleteText>
             </S.DeleteContainer>

diff --git a/src/components/ScheduleCard/ScheduleCard.tsx b/src/components/ScheduleCard/ScheduleCard.tsx
@@ -1,25 +1,16 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import ScheduleDetail from '../ScheduleDetail/ScheduleDetail'; // ScheduleDetail 컴포넌트 경로에 맞게 수정
 import BottomSheet from '../BottomSheet/BottomSheet'; // BottomSheet 컴포넌트 불러오기
 import * as S from './ScheduleCard.style';
-import { api } from '../../utils/axios';
 
-interface Schedule {
-  scheduleId: number;
-  title: string;
-  month: number;
-  day: number;
-  dayOfWeek: string;
-}
+import useSchedules from '../../hooks/useSchedule';
 
-interface Props {
-  scheduleList: Schedule[] | null;
-}
-
-const ScheduleCard = ({ scheduleList }: Props) => {
+const ScheduleCard = () => {
   const [isSheetOpen, setSheetOpen] = useState<boolean>(false);
   const [clickedSchedule, setClickedSchedule] = useState<number | null>(null);
 
+  const { deleteSchedule, scheduleList } = useSchedules();
+
   const handleSheet = () => {
     setSheetOpen(!isSheetOpen);
     setClickedSchedule(null);
@@ -31,35 +22,29 @@ const ScheduleCard = ({ scheduleList }: Props) => {
     console.log(scheduleId);
   };
 
-  const handleDelete = async (clickedSchedule: number) => {
-    try {
-      await api.delete(`/schedules/${clickedSchedule}`);
-      handleSheet();
-    } catch (e) {
-      console.log(e);
-    }
+  const handleDelete = async () => {
+    deleteSchedule(clickedSchedule);
   };
 
   return (
     <S.WrapperContainer>
       <S.Title>일정</S.Title>
       <S.GridContainer>
-        {scheduleList?.map((schedule) => (
-          <div key={schedule.scheduleId}>
+        {scheduleList.length > 0 &&
+          scheduleList.map((schedule) => (
             <ScheduleDetail
+              key={schedule.scheduleId}
               title={schedule.title}
               day={schedule.day}
               dayOfWeek={schedule.dayOfWeek}
               month={schedule.month}
               onClick={() => onClickHandler(schedule.scheduleId)}
             />
-          </div>
-        ))}
+          ))}
       </S.GridContainer>
       <BottomSheet
         isOpen={isSheetOpen}
         onClose={handleSheet}
-        scheduleId={clickedSchedule}
         onDelete={handleDelete}
       />
     </S.WrapperContainer>

diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 
-interface InputProps {
-  isFocused: boolean;
-}
-
 export const Form = styled.form`
   position: relative;
   display: flex; /* inline-block 대신 flex 사용 */
@@ -16,7 +12,7 @@ export const Input = styled.input`
   width: 100%; /* 부모(Form) 요소에 맞게 너비 조정 */
   padding: 0.8125rem 1.0625rem;
   padding-right: 3.6rem;
-  
+
   font-family: ${({ theme }) => theme.fonts.Body_03}; /* 텍스트 폰트 스타일 */
   color: ${({ theme }) => theme.colors.Grey_06}; /* 텍스트 색상 */
   border-radius: 10px;
@@ -27,12 +23,14 @@ export const Input = styled.input`
   background-color: ${({ theme }) => theme.colors.Grey_02};
 
   /* 포커싱 상태일 때 스타일 */
+
   &:focus {
     background-color: ${({ theme }) => theme.colors.Grey_03};
     border-color: ${({ theme }) => theme.colors.Grey_06};
   }
 
   /* Placeholder 스타일 */
+
   ::placeholder {
     color: ${({ theme }) => theme.colors.Grey_04}; /* Placeholder 색상 */
     font-family: ${({ theme }) => theme.fonts.Body_03}; /* Placeholder 폰트 */

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -1,27 +1,12 @@
-import React, { FormEvent, useState } from 'react';
-import { api } from '../../utils/axios';
+import React from 'react';
 
 import * as S from './TextField.style';
 
-interface Props {
-  getSchedules: () => Promise<void>;
-}
+import useSchedules from '../../hooks/useSchedule';
 
-const TextField: React.FC<Props> = ({ getSchedules }) => {
-  const [schedule, setSchedule] = useState<string>('');
+const TextField: React.FC = () => {
+  const { postSchedule, setSchedule, schedule } = useSchedules();
 
-  const postSchedule = async (
-    e: React.MouseEvent<HTMLButtonElement> | FormEvent<HTMLFormElement>,
-  ) => {
-    try {
-      e.preventDefault();
-      await api.post('/schedules', { text: schedule });
-      setSchedule('');
-      await getSchedules();
-    } catch (e) {
-      console.log(e.message);
-    }
-  };
   return (
     <S.Form onSubmit={postSchedule}>
       <S.Input

diff --git a/src/pages/SchedulePage/SchedulePage.tsx b/src/pages/SchedulePage/SchedulePage.tsx
@@ -4,7 +4,8 @@ import TextField from '../../components/TextField/TextField';
 import ScheduleCard from '../../components/ScheduleCard/ScheduleCard';
 
 import * as S from './SchedulePage.style';
-import { api } from '../../utils/axios';
+
+import useSchedules from '../../hooks/useSchedule';
 
 interface Schedule {
   scheduleId: number;
@@ -15,7 +16,7 @@ interface Schedule {
 }
 
 const SchedulePage = () => {
-  const [scheduleList, setScheduleList] = useState<Schedule[] | null>([]);
+  const { getSchedules } = useSchedules();
 
   useEffect(() => {
     if (
@@ -46,29 +47,29 @@ const SchedulePage = () => {
     };
   }, []);
 
+  // const getSchedules = async () => {
+  //   try {
+  //     const response = await api.get('/schedules');
+  //
+  //     if (response.data.length < 0) {
+  //       throw new Error(response.statusText);
+  //     }
+  //     console.log('getschedules의 response.data', response.data);
+  //     setScheduleList(response.data);
+  //   } catch (e) {
+  //     console.log(e);
+  //   }
+  // };
+
   useEffect(() => {
     getSchedules();
   }, []);
 
-  const getSchedules = async () => {
-    try {
-      const response = await api.get('/schedules');
-
-      if (response.data.length < 0) {
-        throw new Error(response.statusText);
-      }
-      console.log('getschedules의 response.data', response.data);
-      setScheduleList(response.data);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
   return (
     <S.Container>
       <S.SchedulePageContent>
-        <TextField getSchedules={getSchedules} />
-        <ScheduleCard scheduleList={scheduleList} />
+        <TextField />
+        <ScheduleCard />
       </S.SchedulePageContent>
     </S.Container>
   );