[기능구현] 보호자 시니어 추가 페이지 + 기타 코드 수정

src/pages/common/register/RegisterPage.tsx

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form';
 import { RegisterFields, RegisterType, Tos } from './components';
 import { useRegister } from './store/hooks';
 import { FormValues } from './types';
+import { parsePhoneNumber } from '@/shared';
 import { BasicButton } from '@/shared/components';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
@@ -29,12 +30,11 @@ const RegisterPage = () => {
 
     const requestData = {
       name: data.name,
-      phoneNumber: data.phoneNumber,
+      phoneNumber: parsePhoneNumber(data.phoneNumber),
       email: '[email protected]', // 임시 (카카오 로그인 후 넘겨받기)
       isSinitto,
     };
     console.log(requestData);
-    // 회원가입 API 호출
     mutation.mutate(requestData);
   };
 

src/pages/guard/register/SeniorRegisterPage.tsx

@@ -1,119 +1,45 @@
-import { useState } from 'react';
-
+import { useGetAllSeniorInfo } from '../mypage';
 import { SeniorInfo } from './components';
-import { SENIOR_DATA } from './data';
-import { Box, Flex, Input, Text } from '@chakra-ui/react';
+import SeniorRegisterBox from './components/senior-register-box/SeniorRegisterBox';
+import { Box, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 export const SeniorRegisterPage = () => {
-  const [name, setName] = useState('');
-  const [seniorName, setSeniorName] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
+  const { data: seniors, isLoading, isError, refetch } = useGetAllSeniorInfo();
 
-  const handleRegister = () => {
-    setName('');
-    setSeniorName('');
-    setPhoneNumber('');
-  };
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isError) {
+    return <div>Error</div>;
+  }
 
   return (
     <Container>
-      <Flex
-        h='100%'
-        flexDir='column'
-        alignItems='center'
-        flexGrow={1}
-        overflowY='auto'
-      >
-        {SENIOR_DATA.map((senior) => (
-          <SeniorInfo key={senior.id} senior={senior} />
+      <SeniorInfoContainer>
+        {seniors?.map((senior) => (
+          <SeniorInfo key={senior.seniorId} senior={senior} refetch={refetch} />
         ))}
-      </Flex>
-      <RegisterBox>
-        <InputBox>
-          <InputText>등록 이름</InputText>
-          <RegisterInput
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </InputBox>
-        <InputBox>
-          <InputText>시니어의 성함</InputText>
-          <RegisterInput
-            value={seniorName}
-            onChange={(e) => setSeniorName(e.target.value)}
-          />
-        </InputBox>
-        <InputBox>
-          <InputText>시니어의 전화번호</InputText>
-          <RegisterInput
-            value={phoneNumber}
-            onChange={(e) => setPhoneNumber(e.target.value)}
-          />
-        </InputBox>
-        <StyledButton onClick={handleRegister}>시니어 등록</StyledButton>
-      </RegisterBox>
+      </SeniorInfoContainer>
+      <SeniorRegisterBox refetch={refetch} />
     </Container>
   );
 };
 
 const Container = styled(Box)`
   position: relative;
   height: 100vh;
-`;
-
-const RegisterBox = styled(Box)`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 360px;
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: 370px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  background-color: var(--color-white-gray);
-  border: 1px solid var(--color-white-gray);
-  border-radius: 15px;
 `;
 
-const InputBox = styled(Box)`
-  width: 300px;
-  height: 80px;
-  display: flex;
+const SeniorInfoContainer = styled(Flex)`
+  flex-grow: 1;
+  overflow-y: auto;
+  height: 70vh;
   flex-direction: column;
-  margin: 0.5rem;
-`;
-
-const InputText = styled(Text)`
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-`;
-
-const RegisterInput = styled(Input)`
-  background-color: var(--color-white);
-  border: none;
-  font-size: 1rem;
+  align-items: center;
 `;
 
-const StyledButton = styled.button`
-  width: 300px;
-  height: 40px;
-  background-color: #c69090;
-  color: #ffffff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s;
-
-  &:hover {
-    background-color: #a67070;
-  }
-
-  &:active {
-    transform: scale(0.98);
-  }
-`;
+export default SeniorRegisterPage;

src/pages/guard/register/api/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAddSeniorInfo } from './useAddSeniorInfo';
+export { useDeleteSeniorInfo } from './useDeleteSeniorInfo';
+export { useEditSeniorInfo } from './useEditSeniorInfo';

src/pages/guard/register/api/hooks/useAddSeniorInfo.ts

@@ -0,0 +1,20 @@
+import { addSeniorInfo } from '../senior-info.api';
+import { SeniorRegisterValues as SeniorRegisterRequest } from '../types/senior-register.type';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+// 시니어 추가 훅
+export const useAddSeniorInfo = (
+  refetchCallback: () => void
+): UseMutationResult<string, Error, SeniorRegisterRequest> => {
+  return useMutation({
+    mutationFn: (seniorInfo: SeniorRegisterRequest) =>
+      addSeniorInfo(seniorInfo),
+    onSuccess: (data: string) => {
+      alert(data);
+      refetchCallback();
+    },
+    onError: (error: Error) => {
+      console.error(error);
+    },
+  });
+};

src/pages/guard/register/api/hooks/useDeleteSeniorInfo.ts

@@ -0,0 +1,18 @@
+import { deleteSeniorInfo } from '../senior-info.api';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+// 시니어 삭제 훅
+export const useDeleteSeniorInfo = (
+  refetchCallback: () => void
+): UseMutationResult<string, Error, number> => {
+  return useMutation({
+    mutationFn: (seniorId: number) => deleteSeniorInfo(seniorId),
+    onSuccess: (data: string) => {
+      alert(data);
+      refetchCallback();
+    },
+    onError: (error: Error) => {
+      console.error(error);
+    },
+  });
+};

src/pages/guard/register/api/hooks/useEditSeniorInfo.ts

@@ -0,0 +1,24 @@
+import { editSeniorInfo } from '../senior-info.api';
+import { SeniorRegisterValues as SeniorRegisterRequest } from '../types/senior-register.type';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+// 시니어 수정 훅
+export const useEditSeniorInfo = (
+  refetchCallback: () => void
+): UseMutationResult<
+  string,
+  Error,
+  { seniorId: number; seniorInfo: SeniorRegisterRequest }
+> => {
+  return useMutation({
+    mutationFn: ({ seniorId, seniorInfo }) =>
+      editSeniorInfo(seniorId, seniorInfo),
+    onSuccess: (data: string) => {
+      alert(data);
+      refetchCallback(); // 새로 데이터 가져오기 (콜백함수)
+    },
+    onError: (error: Error) => {
+      console.error(error);
+    },
+  });
+};

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

@@ -0,0 +1,4 @@
+export { addSeniorInfo } from './senior-info.api';
+
+export * from './hooks';
+export * from './types';

src/pages/guard/register/api/senior-info.api.ts

@@ -0,0 +1,30 @@
+import { SeniorRegisterValues as SeniorRegisterRequest } from './types/senior-register.type';
+import { fetchInstance } from '@/shared/api/instance';
+
+export const seniorInfoPath = () => '/api/guards/senior';
+
+// 시니어 추가
+export const addSeniorInfo = async (seniorInfo: SeniorRegisterRequest) => {
+  const response = await fetchInstance.post(seniorInfoPath(), seniorInfo);
+  return response.data;
+};
+
+// 시니어 삭제
+export const deleteSeniorInfo = async (seniorId: number) => {
+  const response = await fetchInstance.delete(
+    seniorInfoPath() + `/${seniorId}`
+  );
+  return response.data;
+};
+
+// 시니어 정보 수정
+export const editSeniorInfo = async (
+  seniorId: number,
+  seniorInfo: SeniorRegisterRequest
+) => {
+  const response = await fetchInstance.put(
+    seniorInfoPath() + `/${seniorId}`,
+    seniorInfo
+  );
+  return response.data;
+};

src/pages/guard/register/api/types/index.ts

@@ -0,0 +1 @@
+export type { SeniorRegisterValues } from './senior-register.type';

src/pages/guard/register/api/types/senior-register.type.ts

@@ -0,0 +1,4 @@
+export type SeniorRegisterValues = {
+  seniorName: string;
+  seniorPhoneNumber: string;
+};

src/pages/guard/register/components/index.ts

@@ -1 +1,2 @@
 export * from './senior-info';
+export * from './senior-register-box';