시니또 안부전화 서비스 기능구현

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
-      - name: Install NodeJs
+      - name: Install NodeJs & Pnpm package manager
         uses: actions/setup-node@v4
         with:
           node-version: 22

src/app/routes/path.ts

@@ -10,8 +10,8 @@ export const RouterPath = {
   SINITTO: '/sinitto',
   SERVICE_HISTORY: `service-history`,
   HELLO_CALL: `hello-call`,
-  HELLO_CALL_SERVICE: `service`,
-  HELLO_CALL_REPORT: `report`,
+  HELLO_CALL_SERVICE: `:helloCallId`,
+  HELLO_CALL_REPORT: `:helloCallId/report`,
   HELLO_CALL_GUARD_APPLY: `apply`,
   CALL_BACK_LIST: `call-back`,
   CALL_BACK_DETAIL: `:callBackId`,

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

@@ -16,7 +16,7 @@ export type SeniorAllGuideLineRequest = {
 const getSeniorAllGuidelinesPath = (
   seniorId?: number,
   guidelineType?: string
-) => `/api/guardguidelines/${seniorId}/${guidelineType}`;
+) => `/api/guardguidelines/guard/${seniorId}/${guidelineType}`;
 
 export const getSeniorAllGuidelinesQueryKey = (
   seniorId: number,

src/pages/sinitto/hello-call-list/HelloCallListPage.tsx

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 
 import { useGetServiceList } from './api';
 import { CallRequest } from './components';
-import { RouterPath } from '@/app/routes/path';
 import { LoadingView } from '@/shared/components';
 import { Flex, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
@@ -20,7 +19,7 @@ const HelloCallListPage = () => {
   const allContent = data?.pages.flatMap((page) => page.content) ?? [];
 
   const handlerNavigate = (helloCallId: number) => {
-    navigate(`${RouterPath.HELLO_CALL_SERVICE}/${helloCallId}`);
+    navigate(`${helloCallId}`);
   };
 
   const lastElementRef = useCallback(

src/pages/sinitto/hello-call-service/HelloCallServicePage.tsx

@@ -1,33 +1,44 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
+import { useGetServiceDetail, usePutAcceptHelloCall } from './api';
 import TitleImg from './assets/title-icon.png';
 import { ServiceDetail } from './components';
 import { SERVICE_NOTICE } from './data';
-import { RouterPath } from '@/app/routes/path';
+import { useFormatPhoneNumber, useServiceDate } from './hooks';
 import { Notice } from '@/shared/components';
 import { Box, Button, Divider, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const HelloCallServicePage = () => {
-  const [accepted, setAccepted] = useState(false);
+  const [detailed, setDetailed] = useState(false);
 
-  const handlerAccept = () => {
-    setAccepted(true);
-  };
+  const { helloCallId } = useParams();
+
+  const { data } = useGetServiceDetail(Number(helloCallId));
+
+  const { mutate: acceptHelloCall } = usePutAcceptHelloCall(
+    Number(helloCallId)
+  );
 
-  const navigate = useNavigate();
+  const startDate = useServiceDate(data?.startDate);
+  const endDate = useServiceDate(data?.endDate);
 
-  const handlerNavigate = () => {
-    navigate(RouterPath.HELLO_CALL_REPORT);
+  const phoneNumber = useFormatPhoneNumber(data?.seniorPhoneNumber);
+
+  const goToDetail = () => {
+    setDetailed(true);
+  };
+
+  const handleAcceptService = () => {
+    acceptHelloCall();
   };
 
   return (
     <HelloCallServicePageLayout>
-      {!accepted ? (
+      {!detailed ? (
         <Box
           display='flex'
-          w='full'
           py={3}
           justifyContent='center'
           backgroundColor='#E6DFD1'
@@ -47,18 +58,24 @@ const HelloCallServicePage = () => {
             <Text color='var(--color-primary)'>시니어 전화번호</Text>
           </Box>
           <Text fontSize='var(--font-size-xl)' fontWeight='700'>
-            010 - 1234 - 1234
+            {phoneNumber}
           </Text>
         </Box>
       )}
-      <ServiceDetail />
+      <ServiceDetail
+        startDate={startDate}
+        endDate={endDate}
+        timeSlots={data?.timeSlots}
+        serviceTime={data?.serviceTime}
+        requirement={data?.requirement}
+      />
       <Box display='flex' flexDir='column' gap={2}>
         <Notice
           title={SERVICE_NOTICE.service_title}
           contents={SERVICE_NOTICE.service_contents}
           noticeType='안부전화'
         />
-        {accepted && (
+        {detailed && (
           <>
             <Notice
               title={SERVICE_NOTICE.finish_title}
@@ -69,13 +86,11 @@ const HelloCallServicePage = () => {
           </>
         )}
       </Box>
-      {!accepted ? (
-        <AcceptButton onClick={handlerAccept}>
-          서비스 수락하기 (3,000P)
-        </AcceptButton>
+      {!detailed ? (
+        <AcceptButton onClick={goToDetail}>서비스 상세 확인하기</AcceptButton>
       ) : (
-        <AcceptButton onClick={handlerNavigate}>
-          서비스 완료 및 보고서 제출
+        <AcceptButton onClick={handleAcceptService}>
+          서비스 수락하기 ({data?.price.toLocaleString()}P)
         </AcceptButton>
       )}
     </HelloCallServicePageLayout>
@@ -93,6 +108,7 @@ const HelloCallServicePageLayout = styled.div`
 `;
 
 const AcceptButton = styled(Button)`
+  height: 3rem;
   background-color: var(--color-primary);
   color: var(--color-white);
   font-weight: 700;

src/pages/sinitto/hello-call-service/api/accept-hello-call.api.ts

@@ -0,0 +1,15 @@
+import { SinittoHelloCallResponse } from './types';
+import { fetchInstance } from '@/shared';
+
+const putAcceptHelloCallPath = (callId: number) =>
+  `/api/hellocalls/accept/${callId}`;
+
+export const putAcceptHelloCall = async (
+  callId: number
+): Promise<SinittoHelloCallResponse> => {
+  const response = await fetchInstance.put<SinittoHelloCallResponse>(
+    putAcceptHelloCallPath(callId)
+  );
+
+  return response.data;
+};

src/pages/guard/hello-call-report/api/cancel-hello-call.api.ts → src/pages/sinitto/hello-call-service/api/cancel-hello-call.api.ts

@@ -1,13 +1,13 @@
-import { HelloCallResponse } from './types/hello-call.response';
+import { SinittoHelloCallResponse } from './types';
 import { fetchInstance } from '@/shared/api/instance';
 
 const getCancelHelloCallPath = (callId: number) =>
   `/api/hellocalls/cancel/${callId}`;
 
 export const putCancelHelloCall = async (
   callId: number
-): Promise<HelloCallResponse> => {
-  const response = await fetchInstance.put<HelloCallResponse>(
+): Promise<SinittoHelloCallResponse> => {
+  const response = await fetchInstance.put<SinittoHelloCallResponse>(
     getCancelHelloCallPath(callId)
   );
 

src/pages/sinitto/hello-call-service/api/hooks/index.ts

@@ -1 +1,3 @@
 export { useGetServiceDetail } from './useGetServiceDetail';
+export { usePutAcceptHelloCall } from './usePutAcceptHelloCall';
+export { usePutCancelHelloCall } from './usePutCancelHelloCall';

src/pages/sinitto/hello-call-service/api/hooks/usePutAcceptHelloCall.ts

@@ -0,0 +1,23 @@
+import { putAcceptHelloCall } from '../accept-hello-call.api';
+import { SinittoHelloCallResponse } from '../types';
+import { RouterPath } from '@/app/routes';
+import { queryClient } from '@/shared';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+export const usePutAcceptHelloCall = (
+  callId: number
+): UseMutationResult<SinittoHelloCallResponse, Error, void> => {
+  return useMutation<SinittoHelloCallResponse, Error, void>({
+    mutationFn: () => putAcceptHelloCall(callId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['helloCallCancel', callId] });
+
+      alert(`안부전화 서비스가 수락되었습니다.`);
+      window.location.href = RouterPath.SINITTO;
+    },
+    onError: (error) => {
+      console.error('안부전화 서비스 수락에 실패했습니다.', error);
+      alert('안부전화 서비스 수락에 실패했습니다.');
+    },
+  });
+};

src/pages/guard/hello-call-report/api/hooks/usePutCancelHelloCall.ts → src/pages/sinitto/hello-call-service/api/hooks/usePutCancelHelloCall.ts

@@ -1,16 +1,15 @@
 import { putCancelHelloCall } from '../cancel-hello-call.api';
-import { HelloCallResponse } from '../types/hello-call.response';
+import { SinittoHelloCallResponse } from '../types';
 import { queryClient } from '@/shared/api/instance';
 import { UseMutationResult, useMutation } from '@tanstack/react-query';
 
 export const usePutCancelHelloCall = (
   callId: number
-): UseMutationResult<HelloCallResponse, Error, void> => {
-  return useMutation<HelloCallResponse, Error, void>({
+): UseMutationResult<SinittoHelloCallResponse, Error, void> => {
+  return useMutation<SinittoHelloCallResponse, Error, void>({
     mutationFn: () => putCancelHelloCall(callId),
-    onSuccess: (data) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['helloCall', callId] });
-      alert(`안부전화 서비스가 취소되었습니다: ${data.message}`);
     },
     onError: (error) => {
       console.error('안부전화 서비스 취소에 실패했습니다.', error);

src/pages/sinitto/hello-call-service/api/index.ts

@@ -1,4 +1,5 @@
 export { getServiceDetail } from './service-detail.api';
+export { putAcceptHelloCall } from './accept-hello-call.api';
 
 export * from './hooks';
 export * from './types';

src/pages/sinitto/hello-call-service/api/types/index.ts

@@ -1 +1,6 @@
-export type { ServiceDetailResponse } from './service-detail.response';
+export type {
+  TimeSlot,
+  ServiceDetailResponse,
+} from './service-detail.response';
+
+export type { SinittoHelloCallResponse } from './sinitto-hello-call.response';

src/pages/sinitto/hello-call-service/api/types/service-detail.response.ts

@@ -5,7 +5,7 @@ type Time = {
   nano: number;
 };
 
-type TimeSlot = {
+export type TimeSlot = {
   dayName: string;
   startTime: Time;
   endTime: Time;

src/pages/sinitto/hello-call-service/api/types/sinitto-hello-call.response.ts

@@ -0,0 +1,3 @@
+export type SinittoHelloCallResponse = {
+  message: string;
+};

src/pages/sinitto/hello-call-service/components/service-detail/ServiceDetail.tsx

@@ -1,15 +1,28 @@
+import { TimeSlot } from '../../api';
 import IconCalendar from '../../assets/calendar.svg';
 import IconClock from '../../assets/clock.svg';
 import IconSpeaker from '../../assets/speaker.svg';
-import { SERVICE_DATA } from '../../test';
-import { Box, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
-const ServiceDetail = () => {
+type Props = {
+  startDate: string;
+  endDate: string;
+  timeSlots: TimeSlot[] | undefined;
+  serviceTime: number | undefined;
+  requirement: string | undefined;
+};
+
+const ServiceDetail = ({
+  startDate,
+  endDate,
+  timeSlots,
+  serviceTime,
+  requirement,
+}: Props) => {
   return (
-    <Box
+    <Flex
       display='flex'
-      w='full'
       p={4}
       flexDir='column'
       borderRadius='0.5rem'
@@ -18,24 +31,26 @@ const ServiceDetail = () => {
       border='1px solid var(--color-gray)'
     >
       <InfoBox>
-        <TitleBox>
+        <Flex flexDir='row' alignItems='center' gap='0.5rem'>
           <Image src={IconCalendar} alt='calendar-icon' />
           <Text fontSize='var(--font-size-lg)' fontWeight='700'>
             서비스 수행 기간
           </Text>
-        </TitleBox>
+        </Flex>
         <Box ml={8}>
-          <Text>{SERVICE_DATA.servicePeriod}</Text>
+          <Text>
+            {startDate} ~ {endDate}
+          </Text>
         </Box>
       </InfoBox>
       <InfoBox>
-        <TitleBox>
+        <Flex flexDir='row' alignItems='center' gap='0.5rem'>
           <Image src={IconClock} alt='clock-icon' />
           <Text fontSize='var(--font-size-lg)' fontWeight='700'>
             서비스 수행 시간대
           </Text>
-        </TitleBox>
-        {SERVICE_DATA.serviceTimes.map((time, index) => (
+        </Flex>
+        {timeSlots?.map((time, index) => (
           <Box
             key={index}
             display='flex'
@@ -44,27 +59,29 @@ const ServiceDetail = () => {
             textAlign='center'
             alignItems='center'
           >
-            <Text>{time.day}</Text>
-            <Text>{time.time}</Text>
+            <Text>{time.dayName}요일</Text>
+            <Text>
+              {String(time.startTime)} ~ {String(time.endTime)}
+            </Text>
             <Box backgroundColor='var(--color-primary)' px={1} borderRadius={5}>
-              <Text color='var(--color-white)'>{time.extraTime}</Text>
+              <Text color='var(--color-white)'>{serviceTime} 분</Text>
             </Box>
           </Box>
         ))}
       </InfoBox>
 
       <InfoBox>
-        <TitleBox>
+        <Flex flexDir='row' alignItems='center' gap='0.5rem'>
           <Image src={IconSpeaker} alt='speaker-icon' />
           <Text fontSize='var(--font-size-lg)' fontWeight='700'>
             안부전화 시 요청사항
           </Text>
-        </TitleBox>
-        <Box ml={8}>
-          <Text>{SERVICE_DATA.request}</Text>
+        </Flex>
+        <Box mx={8}>
+          <Text>{requirement}</Text>
         </Box>
       </InfoBox>
-    </Box>
+    </Flex>
   );
 };
 
@@ -79,10 +96,3 @@ const InfoBox = styled(Box)`
   background-color: var(--color-white);
   border: 1px solid var(--color-gray);
 `;
-
-const TitleBox = styled(Box)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-`;

src/pages/sinitto/hello-call-service/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useServiceDate } from './useServiceDate';
+export { useFormatPhoneNumber } from './useFormatPhoneNumber';

src/pages/sinitto/hello-call-service/hooks/useFormatPhoneNumber.ts

@@ -0,0 +1,3 @@
+export const useFormatPhoneNumber = (phoneNumber: string | undefined) => {
+  return phoneNumber?.replace(/(\d{3})(\d{4})(\d{4})/, '$1 - $2 - $3');
+};