Skip to content

Commit

Permalink
Merge pull request #51 from kakao-tech-campus-2nd-step3/Feat/issue-#48
Browse files Browse the repository at this point in the history
λ§ˆμ΄νŽ˜μ΄μ§€(μ‹œλ‹ˆλ˜μš©) κ΅¬ν˜„ 및 UI λΆ€λΆ„ μˆ˜μ •
  • Loading branch information
Diwoni authored Oct 8, 2024
2 parents 6c172f9 + 4d5b547 commit 4f544db
Show file tree
Hide file tree
Showing 14 changed files with 435 additions and 64 deletions.
86 changes: 38 additions & 48 deletions src/app/routes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { RouterPath } from './path';
import MainPage from '@/pages/common/main';
import RegisterPage from '@/pages/common/register';
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';
Expand All @@ -12,72 +14,60 @@ 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 MyPage from '@/pages/sinitto/mypage';
import SinittoMypage from '@/pages/sinitto/mypage';
import Layout from '@/shared/components/common/layout';

const router = createBrowserRouter([
{
path: RouterPath.ROOT,
element: <MainPage />,
},
{
path: RouterPath.REGISTER,
element: <RegisterPage />,
},
{
path: RouterPath.MYPAGE,
element: <MyPage />,
},
{
path: RouterPath.SERVICE_HISTORY,
element: <ServiceHistoryPage />,
},
{
path: RouterPath.HELLO_CALL,
children: [
{
index: true,
element: <HelloCallListPage />,
},
{
path: RouterPath.HELLO_CALL_SERVICE,
element: <HelloCallServicePage />,
},
{
path: RouterPath.HELLO_CALL_REPORT,
element: <HelloCallReportPage />,
},
],
},
{
path: RouterPath.SENIOR_REGISTER,
element: <SeniorRegisterPage />,
},
{
path: RouterPath.CALL_BACK_LIST,
path: RouterPath.ROOT,
element: <Layout />,
children: [
{ path: RouterPath.REGISTER, element: <RegisterPage /> },
{ path: RouterPath.SINITTO_MYPAGE, element: <SinittoMypage /> },
{ path: RouterPath.GUARD_MYPAGE, element: <GuardMyPage /> },
{ path: RouterPath.GUARD_GUIDELINE, element: <GuideLinePage /> },
{ path: RouterPath.SERVICE_HISTORY, element: <ServiceHistoryPage /> },
{
index: true,
element: <CallBackListPage />,
},
{
path: RouterPath.CALL_BACK_DETAIL,
path: RouterPath.HELLO_CALL,
children: [
{ index: true, element: <HelloCallListPage /> },
{
index: true,
element: <CallBackDetailPage />,
path: RouterPath.HELLO_CALL_SERVICE,
element: <HelloCallServicePage />,
},
{
path: RouterPath.CALL_BACK_GUID_LINE,
element: <SinittoGuideLinePage />,
path: RouterPath.HELLO_CALL_REPORT,
element: <HelloCallReportPage />,
},
],
},
{ path: RouterPath.SENIOR_REGISTER, element: <SeniorRegisterPage /> },
{
path: RouterPath.CALL_BACK_LIST,
children: [
{ index: true, element: <CallBackListPage /> },
{
path: RouterPath.CALL_BACK_DETAIL,
children: [
{ index: true, element: <CallBackDetailPage /> },
{
path: RouterPath.CALL_BACK_GUID_LINE,
element: <SinittoGuideLinePage />,
},
],
},
],
},
{
path: RouterPath.SINITTO_REVIEW,
element: <SinittoReviewPage />,
},
],
},
{
path: RouterPath.SINITTO_REVIEW,
element: <SinittoReviewPage />,
},
]);

export const Routes = () => {
Expand Down
4 changes: 3 additions & 1 deletion src/app/routes/path.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ export const RouterPath = {
ROOT: '/',
LOGIN: '/login',
REGISTER: '/register',
MYPAGE: `/mypage`,
GUARD_MYPAGE: `/guard/mypage`,
GUARD_GUIDELINE: `/guard/guideline`,
SINITTO_MYPAGE: `/sinitto/mypage`,
SERVICE_HISTORY: `/service-history`,
HELLO_CALL_SERVICE: 'service',
HELLO_CALL_REPORT: 'report',
Expand Down
49 changes: 49 additions & 0 deletions src/pages/guard/guide-line/components/guide-info-box/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
`;
39 changes: 39 additions & 0 deletions src/pages/guard/guide-line/data/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const GUIDELINE_DATA = [
{
id: 1,
title: 'μ‚°κ²©μ΄ˆλ“±ν•™κ΅',
content: 'μ‚°κ²©μ΄ˆλ“±ν•™κ΅μ— 자주 λ‚΄λ¦¬μ‹œλŠ” 데 집은 μ–΄λ””μ–΄λ””μž…λ‹ˆλ‹€.',
},
{
id: 2,
title: 'κ²½λ‘œλ‹Ή',
content:
'μˆ˜μ§€κ³ λ“±ν•™κ΅ νšŒμ „ ꡐ차둜 였λ₯Έμͺ½ μž‘μ€ 길둜 μ§„μž…ν•˜μ—¬ μš°νšŒμ „ ν›„ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•œ 단독 κ±΄λ¬Όμž…λ‹ˆλ‹€!',
},
{
id: 3,
title: 'κ²½λ‘œλ‹Ή',
content:
'μˆ˜μ§€κ³ λ“±ν•™κ΅ νšŒμ „ ꡐ차둜 였λ₯Έμͺ½ μž‘μ€ 길둜 μ§„μž…ν•˜μ—¬ μš°νšŒμ „ ν›„ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•œ 단독 κ±΄λ¬Όμž…λ‹ˆλ‹€!',
},
{
id: 4,
title: 'κ²½λ‘œλ‹Ή',
content:
'μˆ˜μ§€κ³ λ“±ν•™κ΅ νšŒμ „ ꡐ차둜 였λ₯Έμͺ½ μž‘μ€ 길둜 μ§„μž…ν•˜μ—¬ μš°νšŒμ „ ν›„ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•œ 단독 κ±΄λ¬Όμž…λ‹ˆλ‹€!',
},
{
id: 5,
title: 'κ²½λ‘œλ‹Ή',
content:
'μˆ˜μ§€κ³ λ“±ν•™κ΅ νšŒμ „ ꡐ차둜 였λ₯Έμͺ½ μž‘μ€ 길둜 μ§„μž…ν•˜μ—¬ μš°νšŒμ „ ν›„ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•œ 단독 κ±΄λ¬Όμž…λ‹ˆλ‹€!',
},
{
id: 6,
title: 'κ²½λ‘œλ‹Ή',
content:
'μˆ˜μ§€κ³ λ“±ν•™κ΅ νšŒμ „ ꡐ차둜 였λ₯Έμͺ½ μž‘μ€ 길둜 μ§„μž…ν•˜μ—¬ μš°νšŒμ „ ν›„ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•œ 단독 κ±΄λ¬Όμž…λ‹ˆλ‹€!',
},
];

export default GUIDELINE_DATA;
105 changes: 105 additions & 0 deletions src/pages/guard/guide-line/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import GuideLineInfo from './components/guide-info-box';
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;

return (
<Container>
<Flex
h='100%'
flexDir='column'
alignItems='center'
flexGrow={1}
overflowY='auto'
>
{guidelines.map((guideline) => (
<GuideLineInfo key={guideline.id} guideline={guideline} />
))}
</Flex>
<RegisterBox>
<InputBox>
<InputText>κ°€μ΄λ“œλΌμΈ 제λͺ©</InputText>
<GuideLineInput />
</InputBox>
<InputBox>
<InputText>κ°€μ΄λ“œλΌμΈ λ‚΄μš©</InputText>
<GuideLineContentInput />
</InputBox>
<StyledButton>κ°€μ΄λ“œλΌμΈ μΆ”κ°€ν•˜κΈ°</StyledButton>
</RegisterBox>
</Container>
);
};

export default GuideLinePage;

const Container = styled(Box)`
position: relative;
height: 100vh;
`;
const RegisterBox = styled(Box)`
position: absolute;
bottom: 0;
width: 100%;
height: 350px;
left: 50%;
transform: translateX(-50%);
max-width: 370px;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-white-gray);
border: 1px solid var(--color-white-gray);
border-radius: 15px;
`;

const InputBox = styled(Box)`
width: 300px;
height: 80px;
display: flex;
flex-direction: column;
margin: 0.5rem;
`;

const GuideLineContentInput = styled(Textarea)`
background-color: var(--color-white);
border: none;
font-size: 1rem;
`;

const InputText = styled(Text)`
font-size: 18px;
font-weight: bold;
margin-bottom: 0.5rem;
`;

const GuideLineInput = styled(Input)`
background-color: var(--color-white);
border: none;
font-size: 1rem;
`;

const StyledButton = styled.button`
position: absolute;
bottom: 1rem;
width: 300px;
height: 40px;
background-color: #c69090;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
&:hover {
background-color: #a67070;
}
&:active {
transform: scale(0.98);
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const ProfileBox = () => {
<ProfileBoxLayout>
<TopContainer>
<Text mt={3} fontSize='18px' fontWeight={700}>
홍길동씨 ν™˜μ˜ν•©λ‹ˆλ‹€.
ν™κΈΈλ™λ‹˜ ν™˜μ˜ν•©λ‹ˆλ‹€.
</Text>
<ServiceManualBox mt={2} fontWeight={600}>
μ„œλΉ„μŠ€ 이용 방법 ν•œλ²ˆμ— μ΄ν•΄ν•˜κΈ°!
Expand Down
23 changes: 23 additions & 0 deletions src/pages/guard/mypage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import ProfileBox from './components/profile-box';
import PointBox from '@/shared/components/features/mypage/point-box';
import UseDetailBox from '@/shared/components/features/mypage/use-detail';
import { Box } from '@chakra-ui/react';
import styled from '@emotion/styled';

const GuardMyPage = () => {
return (
<MyPageLayout>
<ProfileBox />
<PointBox />
<UseDetailBox />
</MyPageLayout>
);
};

export default GuardMyPage;

const MyPageLayout = styled(Box)`
display: flex;
flex-direction: column;
align-items: center;
`;
Loading

0 comments on commit 4f544db

Please sign in to comment.