전체 파일 구조 리팩토링

src/app/routes/index.tsx

@@ -1,21 +1,23 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import { RouterPath } from './path';
-import MainPage from '@/pages/common/main/MainPage';
-import { RedirectPage } from '@/pages/common/redirect';
-import RegisterPage from '@/pages/common/register/RegisterPage';
-import GuideLinePage from '@/pages/guard/guide-line';
-import GuardMyPage from '@/pages/guard/mypage';
-import SeniorRegisterPage from '@/pages/guard/register';
-import SinittoReviewPage from '@/pages/guard/review';
-import ServiceHistoryPage from '@/pages/guard/service-history';
-import CallBackDetailPage from '@/pages/sinitto/call-back/detail';
-import CallBackListPage from '@/pages/sinitto/call-back/list';
-import SinittoGuideLinePage from '@/pages/sinitto/guide-line';
-import HelloCallListPage from '@/pages/sinitto/hello-call/hello-call-list';
-import HelloCallReportPage from '@/pages/sinitto/hello-call/hello-call-report';
-import HelloCallServicePage from '@/pages/sinitto/hello-call/hello-call-service';
-import SinittoMypage from '@/pages/sinitto/mypage';
+import {
+  MainPage,
+  RegisterPage,
+  RedirectPage,
+  SinittoMypage,
+  GuardMyPage,
+  GuideLinePage,
+  ServiceHistoryPage,
+  HelloCallListPage,
+  HelloCallServicePage,
+  HelloCallReportPage,
+  SeniorRegisterPage,
+  CallBackListPage,
+  CallBackDetailPage,
+  SinittoGuideLinePage,
+  SinittoReviewPage,
+} from '@/pages';
 import { Layout } from '@/shared/components';
 
 const router = createBrowserRouter([

src/pages/common/index.ts

@@ -0,0 +1,3 @@
+export * from './main';
+export * from './redirect';
+export * from './register';

src/pages/common/main/MainPage.tsx

@@ -1,5 +1,4 @@
-import LoginButton from './components/login-button';
-import ReviewBox from './components/review-box';
+import { ReviewBox, LoginButton } from './components';
 import { Box, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/common/main/components/index.ts

@@ -0,0 +1,2 @@
+export * from './login-button';
+export * from './review-box';

src/pages/common/main/components/login-button/index.ts

@@ -0,0 +1 @@
+export { default as LoginButton } from './LoginButton';

src/pages/common/main/components/review-box/index.ts

@@ -0,0 +1 @@
+export { default as ReviewBox } from './ReviewBox';

src/pages/common/main/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+
+export { default as MainPage } from './MainPage';

src/pages/common/register/data/guard/guard-data.ts

@@ -0,0 +1,38 @@
+export const GUARD_DATA = {
+  intro:
+    '본인은 [나만의 작은 시니또]의 시니어 마니또 매칭 서비스를 이용함에 있어, 다음과 같은 사항을 충분히 이해하고 동의합니다.',
+  sections: [
+    {
+      title: '1. 결제 책임의 한계',
+      contents: [
+        '본 서비스의 시니어를 위한 마니또(이하 ‘시니어 케어 제공자’)는 조부모님의 요청에 따라 택시 호출 및 기타 유사한 서비스를 대신 예약할 수 있습니다. 그러나 모든 예약에 따른 결제 책임은 전적으로 조부모님 또는 보호자에게 있으며, 시니어 케어 제공자는 결제에 관여하지 않습니다.',
+        '이에 따라, 조부모님이 결제를 하지 못하는 상황이 발생할 경우, 해당 금액에 대한 모든 책임은 보호자에게 있으며, [나만의 작은 시니또] 및 시니어 케어 제공자는 이에 대한 법적, 재정적 책임을 지지 않습니다.',
+      ],
+    },
+    {
+      title: '2. 개인정보 제공 및 관리',
+      contents: [
+        '보호자는 본 서비스를 이용하기 위해 조부모님의 개인정보를 제공해야 하며, 해당 정보는 조부모님의 서비스 이용을 위한 목적으로만 사용됩니다.',
+        '보호자는 제공한 개인정보가 정확하고 최신 상태임을 보장해야 하며, 이를 통해 발생하는 모든 문제에 대한 책임을 집니다. 또한 보호자는 필요 시 개인정보 변경을 즉시 [나만의 작은 시니또]에 통보해야 합니다.',
+      ],
+    },
+    {
+      title: '3. 서비스 이용의 책임',
+      contents: [
+        '특히, 보호자는 조부모님의 재정 상태를 충분히 확인한 후 서비스 이용을 권장해야 하며, 만약 이로 인해 발생하는 재정적 손실에 대해 [나만의 작은 시니또]에 어떠한 법적 책임도 묻지 않을 것임을 서약합니다.',
+      ],
+    },
+    {
+      title: '4. 서약 위반 시 책임',
+      contents: [
+        '본 서약서의 내용 중 하나라도 위반될 경우, [나만의 작은 시니또]는 서비스를 일시 중단하거나 제한할 수 있으며, 이에 대해 보호자는 이의를 제기하지 않을 것에 동의합니다.',
+      ],
+    },
+    {
+      title: '5. 법적 효력',
+      contents: [
+        '본 서약서는 법적 효력을 가지며, 보호자는 이를 충분히 이해하고 동의한 후 서비스를 이용합니다. 이 서약서에 동의하지 않을 경우, 서비스 이용이 불가능함을 인지하고 있습니다.',
+      ],
+    },
+  ],
+};

src/pages/common/register/data/guard/index.ts

@@ -1,38 +1 @@
-export const GUARD_DATA = {
-  intro:
-    '본인은 [나만의 작은 시니또]의 시니어 마니또 매칭 서비스를 이용함에 있어, 다음과 같은 사항을 충분히 이해하고 동의합니다.',
-  sections: [
-    {
-      title: '1. 결제 책임의 한계',
-      contents: [
-        '본 서비스의 시니어를 위한 마니또(이하 ‘시니어 케어 제공자’)는 조부모님의 요청에 따라 택시 호출 및 기타 유사한 서비스를 대신 예약할 수 있습니다. 그러나 모든 예약에 따른 결제 책임은 전적으로 조부모님 또는 보호자에게 있으며, 시니어 케어 제공자는 결제에 관여하지 않습니다.',
-        '이에 따라, 조부모님이 결제를 하지 못하는 상황이 발생할 경우, 해당 금액에 대한 모든 책임은 보호자에게 있으며, [나만의 작은 시니또] 및 시니어 케어 제공자는 이에 대한 법적, 재정적 책임을 지지 않습니다.',
-      ],
-    },
-    {
-      title: '2. 개인정보 제공 및 관리',
-      contents: [
-        '보호자는 본 서비스를 이용하기 위해 조부모님의 개인정보를 제공해야 하며, 해당 정보는 조부모님의 서비스 이용을 위한 목적으로만 사용됩니다.',
-        '보호자는 제공한 개인정보가 정확하고 최신 상태임을 보장해야 하며, 이를 통해 발생하는 모든 문제에 대한 책임을 집니다. 또한 보호자는 필요 시 개인정보 변경을 즉시 [나만의 작은 시니또]에 통보해야 합니다.',
-      ],
-    },
-    {
-      title: '3. 서비스 이용의 책임',
-      contents: [
-        '특히, 보호자는 조부모님의 재정 상태를 충분히 확인한 후 서비스 이용을 권장해야 하며, 만약 이로 인해 발생하는 재정적 손실에 대해 [나만의 작은 시니또]에 어떠한 법적 책임도 묻지 않을 것임을 서약합니다.',
-      ],
-    },
-    {
-      title: '4. 서약 위반 시 책임',
-      contents: [
-        '본 서약서의 내용 중 하나라도 위반될 경우, [나만의 작은 시니또]는 서비스를 일시 중단하거나 제한할 수 있으며, 이에 대해 보호자는 이의를 제기하지 않을 것에 동의합니다.',
-      ],
-    },
-    {
-      title: '5. 법적 효력',
-      contents: [
-        '본 서약서는 법적 효력을 가지며, 보호자는 이를 충분히 이해하고 동의한 후 서비스를 이용합니다. 이 서약서에 동의하지 않을 경우, 서비스 이용이 불가능함을 인지하고 있습니다.',
-      ],
-    },
-  ],
-};
+export { GUARD_DATA } from './guard-data';

src/pages/common/register/data/index.ts

@@ -0,0 +1,2 @@
+export * from './guard';
+export * from './sinitto';

src/pages/common/register/data/sinitto/index.ts

@@ -1,50 +1 @@
-export const SINITTO_DATA = {
-  intro:
-    '본인은 [나만의 작은 시니또]의 시니어 지원자 매칭 서비스를 이용함에 있어, 다음과 같은 사항을 충분히 이해하고 동의합니다.',
-  sections: [
-    {
-      title: '1. 서비스 제공의 책임',
-      contents: [
-        '본인은 조부모님을 위한 시니어 지원자로서, 서비스 요청을 성실하게 수행할 책임이 있습니다. 서비스 수행 중에는 조부모님의 안전과 편의를 최우선으로 고려하며, 정직하고 신뢰할 수 있는 시니어 지원자로 활동할 것을 서약합니다.',
-      ],
-    },
-    {
-      title: '2. 결제 관련 한계',
-      contents: [
-        '본인은 서비스 요청에 따라 택시 호출 등 결제가 필요한 서비스를 대신 예약할 수 있습니다. 그러나 결제는 전적으로 조부모님 또는 보호자가 직접 처리해야 하며, 본인은 어떠한 경우에도 결제에 관여하거나 대금을 대신 지불하지 않음을 이해하고 동의합니다.',
-        '또한, 결제가 이루어지지 않거나 기타 문제로 인해 발생하는 법적, 재정적 책임은 보호자에게 있으며, 본인은 이에 대해 어떠한 책임도 지지 않습니다.',
-      ],
-    },
-    {
-      title: '3. 개인정보 보호',
-      contents: [
-        '본인은 시니어 지원 활동 중 접하게 되는 조부모님 및 보호자의 개인정보를 철저히 보호할 의무가 있습니다. 해당 정보를 타인에게 공개하거나 부적절하게 사용하는 경우, 이에 따른 법적 책임을 질 수 있음을 인지하고 있습니다.',
-      ],
-    },
-    {
-      title: '4. 지원 활동의 윤리',
-      contents: [
-        '본인은 시니어 지원자로서의 직무를 수행함에 있어, 모든 활동이 법적 및 윤리적 기준에 부합하도록 할 것을 서약합니다. 조부모님과의 상호작용에서 존중과 예의를 갖추며, 부적절한 언행이나 행동을 하지 않을 것입니다.',
-      ],
-    },
-    {
-      title: '5. 서비스 이용 규정 준수',
-      contents: [
-        '[나만의 작은 시니또]가 제공하는 서비스 이용 규정을 준수하며, 서비스 제공 과정에서 발생할 수 있는 문제를 적극적으로 협력하여 해결할 것입니다.',
-        '만약 규정을 위반하거나, 시니어 지원자로서의 의무를 소홀히 하는 경우, [나만의 작은 시니또]는 본인의 시니어 지원자 자격을 박탈할 수 있으며, 이에 대해 이의를 제기하지 않을 것에 동의합니다.',
-      ],
-    },
-    {
-      title: '6. 서약 위반 시 책임',
-      contents: [
-        '본 서약서의 내용을 위반하는 경우, [나만의 작은 시니또]는 법적 조치를 취할 수 있으며, 이에 대한 모든 법적 책임을 본인이 부담함을 서약합니다.',
-      ],
-    },
-    {
-      title: '7. 법적 효력',
-      contents: [
-        '본 서약서는 법적 효력을 가지며, 본인은 이를 충분히 이해하고 동의한 후 시니어 지원자로서 활동할 것입니다. 이 서약서에 동의하지 않을 경우, 시니어 지원자 활동이 불가능함을 인지하고 있습니다.',
-      ],
-    },
-  ],
-};
+export { SINITTO_DATA } from './sinitto-data';

src/pages/common/register/data/sinitto/sinitto-data.ts

@@ -0,0 +1,50 @@
+export const SINITTO_DATA = {
+  intro:
+    '본인은 [나만의 작은 시니또]의 시니어 지원자 매칭 서비스를 이용함에 있어, 다음과 같은 사항을 충분히 이해하고 동의합니다.',
+  sections: [
+    {
+      title: '1. 서비스 제공의 책임',
+      contents: [
+        '본인은 조부모님을 위한 시니어 지원자로서, 서비스 요청을 성실하게 수행할 책임이 있습니다. 서비스 수행 중에는 조부모님의 안전과 편의를 최우선으로 고려하며, 정직하고 신뢰할 수 있는 시니어 지원자로 활동할 것을 서약합니다.',
+      ],
+    },
+    {
+      title: '2. 결제 관련 한계',
+      contents: [
+        '본인은 서비스 요청에 따라 택시 호출 등 결제가 필요한 서비스를 대신 예약할 수 있습니다. 그러나 결제는 전적으로 조부모님 또는 보호자가 직접 처리해야 하며, 본인은 어떠한 경우에도 결제에 관여하거나 대금을 대신 지불하지 않음을 이해하고 동의합니다.',
+        '또한, 결제가 이루어지지 않거나 기타 문제로 인해 발생하는 법적, 재정적 책임은 보호자에게 있으며, 본인은 이에 대해 어떠한 책임도 지지 않습니다.',
+      ],
+    },
+    {
+      title: '3. 개인정보 보호',
+      contents: [
+        '본인은 시니어 지원 활동 중 접하게 되는 조부모님 및 보호자의 개인정보를 철저히 보호할 의무가 있습니다. 해당 정보를 타인에게 공개하거나 부적절하게 사용하는 경우, 이에 따른 법적 책임을 질 수 있음을 인지하고 있습니다.',
+      ],
+    },
+    {
+      title: '4. 지원 활동의 윤리',
+      contents: [
+        '본인은 시니어 지원자로서의 직무를 수행함에 있어, 모든 활동이 법적 및 윤리적 기준에 부합하도록 할 것을 서약합니다. 조부모님과의 상호작용에서 존중과 예의를 갖추며, 부적절한 언행이나 행동을 하지 않을 것입니다.',
+      ],
+    },
+    {
+      title: '5. 서비스 이용 규정 준수',
+      contents: [
+        '[나만의 작은 시니또]가 제공하는 서비스 이용 규정을 준수하며, 서비스 제공 과정에서 발생할 수 있는 문제를 적극적으로 협력하여 해결할 것입니다.',
+        '만약 규정을 위반하거나, 시니어 지원자로서의 의무를 소홀히 하는 경우, [나만의 작은 시니또]는 본인의 시니어 지원자 자격을 박탈할 수 있으며, 이에 대해 이의를 제기하지 않을 것에 동의합니다.',
+      ],
+    },
+    {
+      title: '6. 서약 위반 시 책임',
+      contents: [
+        '본 서약서의 내용을 위반하는 경우, [나만의 작은 시니또]는 법적 조치를 취할 수 있으며, 이에 대한 모든 법적 책임을 본인이 부담함을 서약합니다.',
+      ],
+    },
+    {
+      title: '7. 법적 효력',
+      contents: [
+        '본 서약서는 법적 효력을 가지며, 본인은 이를 충분히 이해하고 동의한 후 시니어 지원자로서 활동할 것입니다. 이 서약서에 동의하지 않을 경우, 시니어 지원자 활동이 불가능함을 인지하고 있습니다.',
+      ],
+    },
+  ],
+};

src/pages/common/register/index.ts

@@ -0,0 +1,6 @@
+export { default as RegisterPage } from './RegisterPage';
+
+export * from './data';
+export * from './components';
+export * from './types';
+export * from './api';

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

@@ -1,11 +1,9 @@
-import GuideLineInfo from './components/guide-info-box';
-import GUIDELINE_DATA from './data';
+import { GuideLineInfo } from './components';
+import { GUIDELINE_DATA } from './data';
 import { Box, Flex, Input, Text, Textarea } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
-const GuideLinePage = () => {
-  const guidelines = GUIDELINE_DATA;
-
+export const GuideLinePage = () => {
   return (
     <Container>
       <Flex
@@ -15,7 +13,7 @@ const GuideLinePage = () => {
         flexGrow={1}
         overflowY='auto'
       >
-        {guidelines.map((guideline) => (
+        {GUIDELINE_DATA.map((guideline) => (
           <GuideLineInfo key={guideline.id} guideline={guideline} />
         ))}
       </Flex>
@@ -34,8 +32,6 @@ const GuideLinePage = () => {
   );
 };
 
-export default GuideLinePage;
-
 const Container = styled(Box)`
   position: relative;
   height: 100vh;

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { getViewSpecificGuideline } from './view-specific-guideline.api';
+
+export * from './hooks';

src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx

@@ -0,0 +1,49 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+type GuidelineType = {
+  title: string;
+  content: string;
+};
+
+const GuideLineInfo = ({ guideline }: { guideline: GuidelineType }) => {
+  return (
+    <GuideLineInfoContainer>
+      <Box display='flex' flexDir='column' w='100%' maxW='300px'>
+        <Text fontSize='1rem' fontWeight={700} mb={2}>
+          {guideline.title}
+        </Text>
+        <InfoBox mb={1}>
+          <InfoText>{guideline.content}</InfoText>
+        </InfoBox>
+      </Box>
+    </GuideLineInfoContainer>
+  );
+};
+
+export default GuideLineInfo;
+
+const GuideLineInfoContainer = styled(Flex)`
+  width: 100%;
+  max-width: 330px;
+  min-height: 8rem;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-white);
+  border-radius: 10px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  margin: 0.5rem 0;
+  padding: 1rem;
+`;
+
+const InfoText = styled(Text)`
+  font-size: 0.8rem;
+  color: var(--color-black);
+`;
+
+const InfoBox = styled(Box)`
+  width: 100%;
+  max-width: 300px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;