Merge pull request #193 from kakao-tech-campus-2nd-step3/Refactor/iss…

…ue-#192

[리팩토링] 상태관리와 ui 분리 (custom hook)

src/pages/guard/guide-line/api/index.ts

@@ -3,4 +3,3 @@ export { getSeniorAllGuidelines } from './view-senior-all-guideline.api';
 export { modifyGuideline } from './modify-guideline.api';
 export { addGuideline } from './add-guideline.api';
 export { deleteGuideline } from './delete-guideline.api';
-export * from './hooks';

src/pages/guard/guide-line/api/view-senior-all-guideline.api.ts

@@ -1,11 +1,13 @@
 import { fetchInstance } from '@/shared/api/instance';
 
-export type SeniorAllGuideLineResponse = {
+export type SeniorAllGuideLineResponse = SeniorGuideLineData[];
+
+export type SeniorGuideLineData = {
   id: number;
   type: string;
   title: string;
   content: string;
-}[];
+};
 
 export type SeniorAllGuideLineRequest = {
   seniorId: number;

src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx

@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form';
 
+import { useAddGuideline } from '../../hooks';
 import GuidelineFormField, { GuidelineValues } from './GuideFormField';
-import { useAddGuideline } from '@/pages/guard';
 import { BasicButton } from '@/shared';
 import { Box, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';

src/pages/guard/guide-line/api/hooks/useAddGuideline.ts → src/pages/guard/guide-line/hooks/useAddGuideline.ts

@@ -1,4 +1,4 @@
-import { addGuideline, AddGuidelineRequest } from '../add-guideline.api';
+import { addGuideline, AddGuidelineRequest } from '../api/add-guideline.api';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 
 export const useAddGuideline = (

src/pages/guard/guide-line/api/hooks/useDeleteGuideline.ts → src/pages/guard/guide-line/hooks/useDeleteGuideline.ts

@@ -1,4 +1,4 @@
-import { deleteGuideline } from '../delete-guideline.api';
+import { deleteGuideline } from '../api';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 
 export const useDeleteGuideline = (

src/pages/guard/guide-line/api/hooks/useGetSeniorAllGuideines.ts → src/pages/guard/guide-line/hooks/useGetSeniorAllGuideines.ts

@@ -2,7 +2,7 @@ import {
   getSeniorAllGuidelines,
   getSeniorAllGuidelinesQueryKey,
   SeniorAllGuideLineResponse,
-} from '../view-senior-all-guideline.api';
+} from '../api/view-senior-all-guideline.api';
 import { useQuery } from '@tanstack/react-query';
 
 export const useGetSeniorAllGuidelines = (

src/pages/guard/guide-line/api/hooks/useGetViewSpecificGuideline.ts → src/pages/guard/guide-line/hooks/useGetViewSpecificGuideline.ts

@@ -2,7 +2,7 @@ import {
   getViewSpecificGuideline,
   getViewSpecificGuidelineQueryKey,
   ViewSpecificGuidelineResponse,
-} from '../view-specific-guideline.api';
+} from '../api/view-specific-guideline.api';
 import { useQuery } from '@tanstack/react-query';
 
 export const useGetViewSpecificGuideline = (guidelineId: number) => {

src/pages/guard/guide-line/api/hooks/useGuidelineInfo.ts → src/pages/guard/guide-line/hooks/useGuidelineInfo.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { ModifyGuidelineRequest } from '../modify-guideline.api';
+import { ModifyGuidelineRequest } from '../api/modify-guideline.api';
 import { UseMutationResult } from '@tanstack/react-query';
 
 type GuidelineInfo = {

src/pages/guard/guide-line/api/hooks/useModifyGuideline.ts → src/pages/guard/guide-line/hooks/useModifyGuideline.ts

@@ -1,7 +1,7 @@
 import {
   modifyGuideline,
   ModifyGuidelineRequest,
-} from '../modify-guideline.api';
+} from '../api/modify-guideline.api';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 
 export const useModifyGuideline = (

src/pages/guard/guide-line/index.ts

@@ -1,5 +1,6 @@
-export { GuideLinePage } from './GuideLinePage';
+export { GuideLinePage } from './ui';
 
 export * from './api';
 export * from './components';
 export * from './data';
+export * from './hooks';

src/pages/guard/guide-line/GuideLinePage.tsx → src/pages/guard/guide-line/ui/GuideLinePage.tsx

@@ -1,7 +1,8 @@
 import { useParams } from 'react-router-dom';
 
-import { useGetSeniorAllGuidelines } from './api';
-import { GuideLineInfo, GuidelineRegisterBox } from './components';
+import { SeniorGuideLineData } from '../api/view-senior-all-guideline.api';
+import { GuideLineInfo, GuidelineRegisterBox } from '../components';
+import { useGetSeniorAllGuidelines } from '../hooks';
 import { PageLayout } from '@/shared';
 import { Box, Flex, Text } from '@chakra-ui/react';
 
@@ -13,19 +14,10 @@ export type GuideLineDetailParams = {
 export const GuideLinePage = () => {
   const { seniorId, guidelineType } = useParams<GuideLineDetailParams>();
 
-  const {
-    data: guidelineData,
-    isLoading,
-    isError,
-    refetch,
-  } = useGetSeniorAllGuidelines(Number(seniorId), String(guidelineType));
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (isError) {
-    return <div>Error</div>;
-  }
+  const { data: guidelineData, refetch } = useGetSeniorAllGuidelines(
+    Number(seniorId),
+    String(guidelineType)
+  );
 
   return (
     <PageLayout>
@@ -64,7 +56,7 @@ export const GuideLinePage = () => {
           </Text>
         </Box>
         <Flex w='full' flexDir='column' gap='var(--space-sm)'>
-          {guidelineData?.map((guideline) => (
+          {guidelineData?.map((guideline: SeniorGuideLineData) => (
             <GuideLineInfo
               key={guideline.id}
               refetch={refetch}

src/pages/guard/guide-line/ui/index.ts

@@ -0,0 +1 @@
+export { GuideLinePage } from './GuideLinePage';

src/pages/guard/mypage/api/index.ts

@@ -5,4 +5,3 @@ export {
 export { getAllSeniorInfo } from './all-senior-info.api';
 
 export * from './types';
-export * from './hooks';

src/pages/guard/mypage/components/profile-box/GuardProfileBox.tsx

@@ -1,46 +1,30 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useGetGuardInformation, useModifyGuardInformation } from '../../api';
-import { RouterPath } from '@/app/routes';
+import { useGetGuardInformation, useModifyGuardInformation } from '../../hooks';
+import { useGuardProfile } from '../../hooks/useGuardProfile';
 import { IconArrow } from '@/pages/assets';
-import {
-  Logout,
-  formatPhoneNumber,
-  BasicButton,
-  parsePhoneNumber,
-} from '@/shared';
+import { Logout, formatPhoneNumber, BasicButton } from '@/shared';
 import { Box, Text, Flex, Input } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const GuardProfileBox = () => {
-  const [name, setName] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
-  const [isEditing, setIsEditing] = useState(false);
-
   const { data: guardInfo, refetch } = useGetGuardInformation();
   const modifyGuardInfoMutation = useModifyGuardInformation();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (isEditing) {
-      setName(guardInfo?.name || '');
-      setPhoneNumber(guardInfo?.phoneNumber || '');
-    }
-  }, [isEditing, guardInfo]);
 
-  const handleSaveClick = () => {
-    const modifiedSinittoInfo = {
-      name: name,
-      phoneNumber: parsePhoneNumber(phoneNumber),
-    };
-    modifyGuardInfoMutation.mutate(modifiedSinittoInfo, {
-      onSuccess: () => {
-        setIsEditing(false);
-        refetch();
-      },
-    });
-  };
+  const {
+    name,
+    phoneNumber,
+    isEditing,
+    setName,
+    setPhoneNumber,
+    setIsEditing,
+    handleSaveClick,
+    handleServiceManualClick,
+    handleSeniorManagementClick,
+    handleServiceHistoryClick,
+  } = useGuardProfile({
+    guardInfo,
+    modifyGuardInfoMutation,
+    refetch,
+  });
 
   return (
     <>
@@ -56,22 +40,28 @@ const GuardProfileBox = () => {
           </Flex>
           <Logout />
         </Flex>
-        <ServiceManualBox onClick={() => navigate(RouterPath.SERVICE_MANUAL)}>
+        <ServiceManualBox onClick={handleServiceManualClick}>
           <Text
             fontSize='var(--font-size-lg)'
             fontWeight={600}
             mr='var(--space-xs)'
           >
             ⓘ
-          </Text>{' '}
+          </Text>
           <Text fontWeight={600} mt='2px' mr='var(--space-sm)'>
             서비스 이용 방법 한번에 이해하기!
           </Text>
           <IconArrow fill='var(--color-gray)' type='solid' />
         </ServiceManualBox>
       </Flex>
 
-      <GuardProfileBoxLayout>
+      <Flex
+        flexDir='column'
+        w='100%'
+        h='auto'
+        border='2px solid var(--color-white-gray)'
+        borderRadius='5px'
+      >
         <Flex
           w='full'
           flexDir='column'
@@ -133,41 +123,28 @@ const GuardProfileBox = () => {
           )}
         </Flex>
 
-        <BottomContainer>
-          <ButtonBox onClick={() => navigate(RouterPath.SENIOR_REGISTER)}>
+        <Flex
+          alignItems='center'
+          justifyContent='space-between'
+          borderTop='2px solid var(--color-white-gray)'
+          padding='var(--space-sm) var(--space-xs)'
+          gap='var(--space-xs)'
+        >
+          <ButtonBox onClick={handleSeniorManagementClick}>
             내 시니어 관리
           </ButtonBox>
           <DivideLine />
-          <ButtonBox onClick={() => navigate(RouterPath.SERVICE_HISTORY)}>
+          <ButtonBox onClick={handleServiceHistoryClick}>
             서비스 이용 현황
           </ButtonBox>
-        </BottomContainer>
-      </GuardProfileBoxLayout>
+        </Flex>
+      </Flex>
     </>
   );
 };
 
 export default GuardProfileBox;
 
-const GuardProfileBoxLayout = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: auto;
-  border: 2px solid var(--color-white-gray);
-  border-radius: 5px;
-`;
-
-const BottomContainer = styled(Box)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 2px solid var(--color-white-gray);
-  padding: var(--space-sm) var(--space-xs);
-  gap: var(--space-xs);
-`;
-
 const DivideLine = styled.div`
   width: 2px;
   height: 50px;

src/pages/guard/mypage/api/hooks/index.ts → src/pages/guard/mypage/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useGetGuardInformation } from './useGetGuardInformation';
 export { useGetAllSeniorInfo } from './useGetAllSeniorInfo';
 export { useModifyGuardInformation } from './useModifyGuardInfo';
+export { useGuardProfile } from './useGuardProfile';

src/pages/guard/mypage/api/hooks/useGetAllSeniorInfo.ts → src/pages/guard/mypage/hooks/useGetAllSeniorInfo.ts

@@ -1,5 +1,8 @@
-import { allSeniorInfoPath, getAllSeniorInfo } from '../all-senior-info.api';
-import { AllSeniorInfoResponse } from '../types';
+import { AllSeniorInfoResponse } from '../api';
+import {
+  allSeniorInfoPath,
+  getAllSeniorInfo,
+} from '../api/all-senior-info.api';
 import { useQuery } from '@tanstack/react-query';
 
 export const allSeniorInfoQueryKey = [allSeniorInfoPath()];

src/pages/guard/mypage/api/hooks/useGetGuardInformation.ts → src/pages/guard/mypage/hooks/useGetGuardInformation.ts

@@ -1,8 +1,5 @@
-import {
-  getGuardInformation,
-  guardInformationPath,
-} from '../guard-information.api';
-import { GuardInformationResponse } from '../types';
+import { GuardInformationResponse, getGuardInformation } from '../api';
+import { guardInformationPath } from '../api/guard-information.api';
 import { useQuery } from '@tanstack/react-query';
 
 export const getGuardInformationQueryKey = [guardInformationPath()];