Merge branch 'Weekly' into Feat/issue-#33

src/app/routes/index.tsx

@@ -7,6 +7,9 @@ import ServiceHistoryPage from '@/pages/guard/service-history';
 import HelloCallListPage from '@/pages/siniddo/hello-call/hello-call-list';
 import HelloCallReportPage from '@/pages/siniddo/hello-call/hello-call-report';
 import HelloCallServicePage from '@/pages/siniddo/hello-call/hello-call-service';
+import CallBackDetailPage from '@/pages/siniddo/call-back/detail';
+import CallBackListPage from '@/pages/siniddo/call-back/list';
+import SiniddoGuideLinePage from '@/pages/siniddo/guide-line';
 import MyPage from '@/pages/siniddo/mypage';
 
 const router = createBrowserRouter([
@@ -43,6 +46,28 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {    
+    path: RouterPath.callBackList,
+    children: [
+      {
+        index: true,
+        element: <CallBackListPage />,
+      },
+      {
+        path: RouterPath.callBackDetail,
+        children: [
+          {
+            index: true,
+            element: <CallBackDetailPage />,
+          },
+          {
+            path: RouterPath.callBackGuidLine,
+            element: <SiniddoGuideLinePage />,
+          },
+        ],
+      },
+    ],
+  },
 ]);
 
 export const Routes = () => {

src/app/routes/path.ts

@@ -7,4 +7,7 @@ export const RouterPath = {
   helloCallList: '/hello-call',
   helloCallService: 'service',
   helloCallReport: 'report',
+  callBackList: '/call-back',
+  callBackDetail: ':callBackId',
+  callBackGuidLine: ':guideLineId',
 };

src/pages/siniddo/call-back/detail/components/guide-line-list/guide-line-button.tsx

@@ -0,0 +1,58 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import ArrowImg from '../../assets/arrow-outline.png';
+import { Button, Image } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+type Props = {
+  title: string;
+  id: string;
+  backgroundColor: string;
+};
+
+export const GuideLineButton = ({ title, backgroundColor, id }: Props) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleClick = () => {
+    navigate(`${location.pathname}/${id}`);
+  };
+
+  return (
+    <Wrapper backgroundColor={backgroundColor} onClick={handleClick}>
+      <Content>
+        <Title>{title}</Title>
+        <ArrowIcon src={ArrowImg} />
+      </Content>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Button)`
+  width: 100%;
+  height: 70px;
+  border-radius: 10px;
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : '#81b6ff'};
+  outline: 0;
+  padding: 0;
+  margin-bottom: 10px;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 30px;
+`;
+
+const Title = styled.h2`
+  font-size: var(--font-size-xl);
+  font-weight: 500;
+  color: var(--color-white);
+`;
+
+const ArrowIcon = styled(Image)`
+  margin-left: auto;
+`;

src/pages/siniddo/call-back/detail/components/guide-line-list/index.tsx

@@ -0,0 +1,24 @@
+import { GUIDE_LINE_CATEGORIES } from '../../data/guide-line';
+import { GuideLineButton } from './guide-line-button';
+import styled from '@emotion/styled';
+
+export const GuideLineList = () => {
+  return (
+    <Wrapper>
+      {GUIDE_LINE_CATEGORIES.map((data) => (
+        <GuideLineButton
+          key={data.id}
+          title={data.title}
+          id={data.id}
+          backgroundColor={data.backgroundColor}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-top: 50px;
+  margin-bottom: 30px;
+`;

src/pages/siniddo/call-back/detail/components/menu/post-accept/index.tsx

@@ -0,0 +1,63 @@
+import { BasicButton } from '@/shared/components/common/button';
+import styled from '@emotion/styled';
+
+type Props = {
+  handleComplete: () => void;
+  handleCancle: () => void;
+  phoneNumber: string;
+};
+
+export const PostAcceptMenu = ({
+  handleComplete,
+  handleCancle,
+  phoneNumber,
+}: Props) => {
+  return (
+    <Wrapper>
+      <BasicButton onClick={handleComplete}>도움 완료</BasicButton>
+      <Space />
+      <BasicButton onClick={handleCancle} themeType='outline'>
+        도움 포기
+      </BasicButton>
+      <ContectSection>
+        <Title>시니어 전화번호</Title>
+        <Content>{phoneNumber}</Content>
+      </ContectSection>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-top: 30px;
+`;
+
+const Space = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
+const ContectSection = styled.div`
+  margin-top: 30px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.div`
+  width: 200px;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #f6e4e4;
+  font-size: var(--font-size-md);
+  font-weight: 400;
+  color: #c69090;
+  text-align: center;
+`;
+
+const Content = styled.p`
+  font-size: var(--font-size-xxl);
+  font-weight: 700;
+  margin-top: 10px;
+`;

src/pages/siniddo/call-back/detail/components/menu/pre-accept/index.tsx

@@ -0,0 +1,19 @@
+import { BasicButton } from '@/shared/components/common/button';
+import styled from '@emotion/styled';
+
+type Props = {
+  handleClcik: () => void;
+};
+
+export const PreAcceptMenu = ({ handleClcik }: Props) => {
+  return (
+    <Wrapper>
+      <BasicButton onClick={handleClcik}>전화걸기 및 수락하기</BasicButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-top: 30px;
+`;

src/pages/siniddo/call-back/detail/data/guide-line/index.ts

@@ -0,0 +1,22 @@
+export const GUIDE_LINE_CATEGORIES = [
+  {
+    title: '택시 호출하기',
+    id: 'taxi',
+    backgroundColor: '#81b6ff',
+  },
+  {
+    title: '드라마 방영시간 알려주기',
+    id: 'drama',
+    backgroundColor: '#b28bff',
+  },
+  {
+    title: '서류 제출 도와주기',
+    id: 'document',
+    backgroundColor: '#ffa7b5',
+  },
+  {
+    title: '대중교통 이동 도와주기',
+    id: 'document',
+    backgroundColor: '#ff4d68',
+  },
+];

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

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+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 { Divider } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+export type CallBackDetailParams = {
+  callBackId: string;
+};
+
+const CallBackDetailPage = () => {
+  const { callBackId = '' } = useParams<CallBackDetailParams>();
+  const [accept, setAccept] = useState(false);
+
+  console.log(callBackId);
+
+  const handleRequestAccept = () => {
+    // 도움 수락
+    setAccept(true);
+  };
+
+  const handleComplete = () => {
+    // 도움 완료
+  };
+
+  const handleCancle = () => {
+    // 도움 포기
+  };
+
+  return (
+    <>
+      <Wrapper>
+        <Precaution
+          category='요청 거부'
+          title='가이드라인을 잘 확인하고 수락해주세요!'
+          description='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
+        />
+        <GuideLineList />
+        <Divider />
+        {accept ? (
+          <PostAcceptMenu
+            handleComplete={handleComplete}
+            handleCancle={handleCancle}
+            phoneNumber='010-1234-5678'
+          />
+        ) : (
+          <PreAcceptMenu handleClcik={handleRequestAccept} />
+        )}
+      </Wrapper>
+      <Outlet />
+    </>
+  );
+};
+
+export default CallBackDetailPage;
+
+const Wrapper = styled.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 45px;
+`;

src/pages/siniddo/call-back/list/components/request-row/index.tsx

@@ -0,0 +1,62 @@
+import { useNavigate } from 'react-router-dom';
+
+import ArrowImg from '../../assets/arrow.png';
+import styled from '@emotion/styled';
+
+type Props = {
+  name: string;
+  time: number;
+  id: string;
+};
+
+export const RequestRow = ({ name, time, id }: Props) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/call-back/${id}`);
+  };
+
+  return (
+    <Wrapper onClick={handleClick}>
+      <Content>
+        <Title>{name}님의 요청</Title>
+        <Time>{time}분 전</Time>
+        <ArrowIcon src={ArrowImg} />
+      </Content>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.button`
+  width: 100%;
+  height: 60px;
+  border-radius: 10px;
+  background-color: var(--color-white-gray);
+  outline: 0;
+  margin-bottom: 10px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 30px;
+`;
+
+const Title = styled.h3`
+  font-size: var(--font-size-lg);
+  font-weight: 400;
+  margin-top: 2px;
+`;
+
+const Time = styled.p`
+  font-size: var(--font-size-md);
+  font-weight: 350;
+  color: var(--color-gray);
+  margin-left: auto;
+`;
+
+const ArrowIcon = styled.img`
+  margin-left: 20px;
+  height: 20px;
+`;

src/pages/siniddo/call-back/list/data/mock/index.ts

@@ -0,0 +1,5 @@
+export const MOCK_DATA = Array.from({ length: 10 }, () => ({
+  name: '김숙자',
+  time: 50,
+  id: '1',
+}));