배포 오류 해결

src/pages/siniddo/call-back/detail/index.tsx

@@ -4,7 +4,7 @@ import { useParams, Outlet } from 'react-router-dom';
 import { GuideLineList } from './components/guide-line-list';
 import { PostAcceptMenu } from './components/menu/post-accept';
 import { PreAcceptMenu } from './components/menu/pre-accept';
-import { Precaution } from '@/shared/components/features/precaution';
+import Notice from '@/shared/components/features/notice';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
@@ -34,10 +34,10 @@ const CallBackDetailPage = () => {
   return (
     <>
       <Wrapper>
-        <Precaution
-          category='요청 거부'
+        <Notice
+          noticeType='요청 거부'
           title='가이드라인을 잘 확인하고 수락해주세요!'
-          description='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
+          contents='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
         />
         <GuideLineList />
         <Divider />

src/pages/siniddo/guide-line/components/container/index.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  title: string;
+  content: string;
+};
+
+export const Container = ({ title, content }: Props) => {
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      <Content>
+        {content.split('\\n').map((line) => (
+          <>
+            {line}
+            <br />
+          </>
+        ))}
+      </Content>
+    </Wrapper>
+  );
+};
+
+export const Wrapper = styled.div`
+  width: 100%;
+  padding: 15px 20px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px 0px #00000040;
+  border: 1px solid #fafafa;
+  margin-bottom: 20px;
+`;
+
+const Title = styled.h2`
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+`;
+
+const Content = styled.p`
+  margin-top: 10px;
+  font-size: var(--font-size-md);
+  white-space: pre-wrap;
+  font-weight: 350;
+`;

src/pages/siniddo/guide-line/data/categories/index.ts

@@ -0,0 +1,18 @@
+export const CATEGORIES = [
+  {
+    name: '택시',
+    id: 'taxi',
+  },
+  {
+    name: '드라마 방영시간',
+    id: 'drama',
+  },
+  {
+    name: '서류 제출',
+    id: 'document',
+  },
+  {
+    name: '대중교통 이동',
+    id: 'document',
+  },
+];

src/pages/siniddo/guide-line/data/mock/index.ts

@@ -0,0 +1,11 @@
+export const MOCK_DATA = [
+  {
+    title: '용인수영장',
+    content:
+      '경기 용인시 수지구 수풍로71번길 17\n수지고등학교 회전 교차로 오른쪽 작은 길로 진입하여 우회전 후 마지막에 위치한 단독 건물입니다.',
+  },
+  {
+    title: '경로당',
+    content: '경기 성남시 분당구 동원북로 26\n버스정류장 옆에 위치했습니다.',
+  },
+];

src/pages/siniddo/guide-line/index.tsx

@@ -1,8 +1,9 @@
 import { useParams } from 'react-router-dom';
 
 import { Container } from './components/container';
-import { CATEGORIES } from './data/categories.ts';
+import { CATEGORIES } from './data/categories';
 import { MOCK_DATA } from './data/mock';
+import { Category, MockData } from './types';
 import styled from '@emotion/styled';
 
 type GuideLineParams = {
@@ -15,12 +16,12 @@ const SiniddoGuideLinePage = () => {
   console.log(callBackId, guideLineId);
 
   const guideLineInfo =
-    CATEGORIES.find((item) => item.id === guideLineId)?.name || null;
+    CATEGORIES.find((item: Category) => item.id === guideLineId)?.name || null;
 
   return (
     <Wrapper>
       <Title>{guideLineInfo}</Title>
-      {MOCK_DATA.map((data, index) => (
+      {MOCK_DATA.map((data: MockData, index: number) => (
         <Container key={index} title={data.title} content={data.content} />
       ))}
     </Wrapper>

src/pages/siniddo/guide-line/types/index.ts

@@ -0,0 +1,9 @@
+export type MockData = {
+  title: string;
+  content: string;
+};
+
+export type Category = {
+  id: string;
+  name: string;
+};

src/pages/siniddo/hello-call/hello-call-report/components/report-detail/index.tsx

@@ -4,6 +4,7 @@ import CalendarIcon from '../../assets/calendar-icon.svg';
 import ClockIcon from '../../assets/clock-icon.svg';
 import FileIcon from '../../assets/file-icon.svg';
 import { REPORT_DATA } from '../../test/mock';
+import { ServiceTime } from '../../types';
 import { Box, Button, Divider, Image, Text, Textarea } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
@@ -56,7 +57,7 @@ const ReportDetail = () => {
               서비스 수행 시간대
             </Text>
           </TitleBox>
-          {REPORT_DATA.serviceTimes.map((time, index) => (
+          {REPORT_DATA.serviceTimes.map((time: ServiceTime, index: number) => (
             <Box
               key={index}
               display='flex'

src/pages/siniddo/hello-call/hello-call-report/test/mock/index.ts

@@ -0,0 +1,8 @@
+export const REPORT_DATA = {
+  servicePeriod: '10월 10일 ~ 11월 11일',
+  serviceTimes: [
+    { day: '월', time: '18:00 ~ 20:00', extraTime: '10분' },
+    { day: '화', time: '18:00 ~ 20:00', extraTime: '10분' },
+    { day: '수', time: '18:00 ~ 20:00', extraTime: '10분' },
+  ],
+};

src/pages/siniddo/hello-call/hello-call-report/types/index.ts

@@ -0,0 +1,5 @@
+export type ServiceTime = {
+  day: string;
+  time: string;
+  extraTime: string;
+};

src/pages/siniddo/hello-call/hello-call-service/components/service-detail/index.tsx

@@ -1,6 +1,6 @@
-import CalendarIcon from '../../assets/calendar-icon.svg';
-import ClockIcon from '../../assets/clock-icon.svg';
-import SpeakerIcon from '../../assets/speaker-icon.svg';
+import CalendarIcon from '../../asserts/calendar-icon.svg';
+import ClockIcon from '../../asserts/clock-icon.svg';
+import SpeakerIcon from '../../asserts/speaker-icon.svg';
 import { SERVICE_DATA } from '../../test/mock';
 import { Box, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';

src/pages/siniddo/hello-call/hello-call-service/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import TitleImg from '../hello-call-service/assets/title-icon.png';
+import TitleImg from './asserts/title-icon.png';
 import ServiceDetail from './components/service-detail';
 import { SERVICE_NOTICE } from './data/notice';
 import { RouterPath } from '@/app/routes/path';