Merge pull request #152 from kakao-tech-campus-2nd-step3/Feat/issue-#151

콜백 요청 및 안부전화 요청 서비스 신청 목록

src/app/routes/path.ts

@@ -11,13 +11,14 @@ export const RouterPath = {
   SERVICE_HISTORY: `service-history`,
   HELLO_CALL: `hello-call`,
   HELLO_CALL_SERVICE: `:helloCallId`,
-  HELLO_CALL_REPORT: `:helloCallId/report`,
+  HELLO_CALL_REPORT: `report/:helloCallId`,
   HELLO_CALL_GUARD_APPLY: `apply`,
   CALL_BACK_LIST: `call-back`,
   CALL_BACK_DETAIL: `:callBackId`,
   CALL_BACK_GUID_LINE: `:guideLineId`,
   SENIOR_REGISTER: `/senior-register`,
   SINITTO_REVIEW: `review`,
+  SINITTO_SERVICE_HISTORY: `service-history`,
 
   DUMMY_LOGIN: `/dummy`,
 };

src/app/routes/router.tsx

@@ -21,6 +21,7 @@ import {
   GuardMainPage,
   SinittoMainPage,
   DummyRedirectPage,
+  SinittoServiceHistoryPage,
 } from '@/pages';
 import { Layout } from '@/shared/components';
 
@@ -144,6 +145,21 @@ export const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: RouterPath.SINITTO_SERVICE_HISTORY,
+        children: [
+          {
+            path: '',
+            element: <Layout title='서비스 이용내역' />,
+            children: [
+              {
+                index: true,
+                element: <SinittoServiceHistoryPage />,
+              },
+            ],
+          },
+        ],
+      },
       {
         path: RouterPath.CALL_BACK_LIST,
         children: [

src/pages/common/main/MainPage.tsx

@@ -64,8 +64,9 @@ const MainPageLayout = styled.div<PageProps>`
   transition: background 0.3s ease;
 
   .swiper-pagination-bullet-active {
-  background-color: ${(props) =>
-    props.page === 0 ? 'var(--color-secondary)' : 'var(--color-primary)'};;
+    background-color: ${(props) =>
+      props.page === 0 ? 'var(--color-secondary)' : 'var(--color-primary)'};
+  }
 `;
 
 const Wrapper = styled.div`

src/pages/guard/hello-call-report/api/index.ts

@@ -1,7 +1,6 @@
 export { getReport } from './report.api';
 export { getTimeLog } from './time-log.api';
 export { getAcceptCallList } from './accept-call-list.api';
-export { getApplyCallList } from './apply-call-list.api';
 
 export * from './hooks';
 export * from './types';

src/pages/guard/hello-call-report/api/types/index.ts

@@ -1,4 +1,3 @@
 export type { ReportResponse } from './report.response';
 export type { TimeLog, TimeLogResponse } from './time-log.response';
 export type { AcceptCallListResponse } from './accept-call-list.response';
-export type { ApplyCallListResponse } from './apply-call-list.response';

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

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

src/pages/sinitto/hello-call-report/api/hooks/usePostWriteReport.ts

@@ -0,0 +1,21 @@
+import { WriteReportRequest } from '../types';
+import { postWriteReport } from '../write-report.api';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+export const usePostWriteReport = (): UseMutationResult<
+  WriteReportRequest,
+  Error,
+  WriteReportRequest
+> => {
+  return useMutation<WriteReportRequest, Error, WriteReportRequest>({
+    mutationFn: (requestPayload: WriteReportRequest) =>
+      postWriteReport(requestPayload),
+    onSuccess: () => {
+      alert('보고서가 작성되었습니다.');
+    },
+    onError: (error) => {
+      console.error('보고서 작성에 실패했습니다.', error);
+      alert('보고서 작성에 실패했습니다.');
+    },
+  });
+};

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

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './types';

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

@@ -0,0 +1 @@
+export type { WriteReportRequest } from './write-report.request';

src/pages/sinitto/hello-call-report/api/types/write-report.request.ts

@@ -0,0 +1,4 @@
+export type WriteReportRequest = {
+  helloCallId: number;
+  report: string;
+};

src/pages/sinitto/hello-call-report/api/write-report.api.ts

@@ -0,0 +1,14 @@
+import { WriteReportRequest } from './types';
+import { fetchInstance } from '@/shared/api/instance';
+
+export const postWriteReportPath = () => `/api/hellocalls/reports`;
+
+export const postWriteReport = async (
+  data: WriteReportRequest
+): Promise<WriteReportRequest> => {
+  const response = await fetchInstance.post<WriteReportRequest>(
+    postWriteReportPath(),
+    data
+  );
+  return response.data;
+};

src/pages/sinitto/hello-call-report/components/report-detail/ReportDetail.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
+import { usePostWriteReport, WriteReportRequest } from '../../api';
 import IconCalendar from '../../assets/calendar.svg';
 import IconClock from '../../assets/clock.svg';
 import IconFile from '../../assets/file.svg';
@@ -9,10 +11,29 @@ import { Box, Button, Divider, Image, Text, Textarea } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const ReportDetail = () => {
-  const [submitted, setSubmitted] = useState(false);
+  const [reportContent, setReportContent] = useState('');
 
-  const handlerSubmit = () => {
-    setSubmitted(true);
+  const { mutate: postWriteReport } = usePostWriteReport();
+
+  const navigate = useNavigate();
+
+  const helloCallId = localStorage.getItem('helloCallId');
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReportContent(e.target.value);
+  };
+
+  const handlerSubmit = (helloCallId: number) => {
+    const requestPayload: WriteReportRequest = {
+      helloCallId,
+      report: reportContent,
+    };
+    postWriteReport(requestPayload, {
+      onSuccess: () => {
+        localStorage.removeItem('helloCallId');
+        navigate(-1);
+      },
+    });
   };
 
   return (
@@ -85,15 +106,17 @@ const ReportDetail = () => {
               어떤 이야기를 나누었나요?
             </Text>
           </TitleBox>
-          <ReportTextArea />
+          <Textarea
+            border='none'
+            height='full'
+            onChange={(e) => handleContentChange(e)}
+          />
         </InfoBox>
       </Box>
       <Divider />
-      {!submitted ? (
-        <SubmitButton onClick={handlerSubmit}>보고서 제출하기</SubmitButton>
-      ) : (
-        <SubmitButton>서비스 완료 확인하기</SubmitButton>
-      )}
+      <SubmitButton onClick={() => handlerSubmit(Number(helloCallId))}>
+        보고서 제출하기
+      </SubmitButton>
     </>
   );
 };
@@ -117,11 +140,6 @@ const TitleBox = styled(Box)`
   gap: 0.5rem;
 `;
 
-const ReportTextArea = styled(Textarea)`
-  border: none;
-  height: 100%;
-`;
-
 const SubmitButton = styled(Button)`
   background-color: var(--color-primary);
   color: var(--color-white);

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

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

src/pages/sinitto/index.ts

@@ -5,3 +5,4 @@ export * from './hello-call-report';
 export * from './hello-call-service';
 export * from './mypage';
 export * from './sinitto-main';
+export * from './service-history';

src/pages/sinitto/service-history/SinittoServiceHistory.tsx

@@ -0,0 +1,99 @@
+import { useGetAcceptedCallBackList, useGetApplyHelloCallList } from './api';
+import {
+  CallBackServiceList,
+  HelloCallServiceList,
+  TextArea,
+} from './components';
+import { CALLBACK_SCHEMA, HELLO_CALL_SCHEMA } from './data';
+import { Spinner } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+export const SinittoServiceHistoryPage = () => {
+  const { data: acceptedCallBackList, isLoading: isAcceptedLoading } =
+    useGetAcceptedCallBackList();
+  const { data: applyHelloCallList, isLoading: isApplyHelloLoading } =
+    useGetApplyHelloCallList();
+
+  console.log(applyHelloCallList);
+  return (
+    <ServiceHistoryLayout>
+      <TextArea
+        title={CALLBACK_SCHEMA.TITLE}
+        status={CALLBACK_SCHEMA.STATUS}
+        description={CALLBACK_SCHEMA.DESCRIPTION}
+        textDirection='start'
+      />
+      {isAcceptedLoading ? (
+        <StyledSpinnerWrapper>
+          <Spinner size='lg' thickness='3px' color='blue.500' />
+        </StyledSpinnerWrapper>
+      ) : acceptedCallBackList ? (
+        <CallBackServiceList
+          key={acceptedCallBackList.callbackId}
+          date={acceptedCallBackList.postTime}
+          name={acceptedCallBackList.seniorName}
+          serviceStatus={acceptedCallBackList.status}
+          callbackId={acceptedCallBackList.callbackId}
+        />
+      ) : (
+        <NoServiceMessage>진행중인 서비스가 없어요! 😥</NoServiceMessage>
+      )}
+
+      <TextArea
+        title={HELLO_CALL_SCHEMA.TITLE}
+        status={[
+          HELLO_CALL_SCHEMA.STATUS_PROCESS,
+          HELLO_CALL_SCHEMA.STATUS_FINISH,
+        ]}
+        description={[
+          HELLO_CALL_SCHEMA.DESCRIPTION_PROCESS,
+          HELLO_CALL_SCHEMA.DESCRIPTION_FINISH,
+        ]}
+        textDirection='end'
+      />
+      {isApplyHelloLoading ? (
+        <StyledSpinnerWrapper>
+          <Spinner size='lg' thickness='3px' color='blue.500' />
+        </StyledSpinnerWrapper>
+      ) : applyHelloCallList && applyHelloCallList.length > 0 ? (
+        applyHelloCallList.map((call) => (
+          <HelloCallServiceList
+            key={call.helloCallId}
+            name={call.seniorName}
+            serviceStatus={call.status}
+            helloCallId={call.helloCallId}
+            days={call.days}
+          />
+        ))
+      ) : (
+        <NoServiceMessage>진행중인 서비스가 없어요! 😥</NoServiceMessage>
+      )}
+    </ServiceHistoryLayout>
+  );
+};
+
+const ServiceHistoryLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 2rem;
+`;
+
+const StyledSpinnerWrapper = styled.div`
+  display: flex;
+  height: 60px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 10px 0;
+`;
+
+const NoServiceMessage = styled.p`
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-black);
+  text-align: center;
+  margin: 20px 0;
+`;

src/pages/sinitto/service-history/api/accepted-call-back-list.api.ts

@@ -0,0 +1,12 @@
+import { AcceptedCallBackListResponse } from './types';
+import { fetchInstance } from '@/shared';
+
+export const getAcceptedCallBackListPath = '/api/callbacks/sinitto/accepted';
+
+export const getAcceptedCallBackList =
+  async (): Promise<AcceptedCallBackListResponse> => {
+    const response = await fetchInstance.get<AcceptedCallBackListResponse>(
+      getAcceptedCallBackListPath
+    );
+    return response.data;
+  };

src/pages/sinitto/service-history/api/apply-hello-call-list.api.ts

@@ -0,0 +1,12 @@
+import { ApplyHelloCallListResponse } from './types';
+import { fetchInstance } from '@/shared/api/instance';
+
+export const applyHelloCallListPath = () => `/api/hellocalls/own`;
+
+export const getApplyHelloCallList =
+  async (): Promise<ApplyHelloCallListResponse> => {
+    const response = await fetchInstance.get<ApplyHelloCallListResponse>(
+      applyHelloCallListPath()
+    );
+    return response.data;
+  };

src/pages/sinitto/service-history/api/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useGetAcceptedCallBackList } from './useGetAcceptedCallBackList';
+export { useGetApplyHelloCallList } from './useGetApplyHelloCallList';
+export { usePutCancelHelloCall } from './usePutCancelHelloCall';