diff --git a/src/pages/guard/guide-line/GuideLinePage.tsx b/src/pages/guard/guide-line/GuideLinePage.tsx
index 6d84b10e..9bc64097 100644
--- a/src/pages/guard/guide-line/GuideLinePage.tsx
+++ b/src/pages/guard/guide-line/GuideLinePage.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
import { useGetSeniorAllGuidelines } from './api';
import { GuideLineInfo, GuidelineRegisterBox } from './components';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
import styled from '@emotion/styled';
export type GuideLineDetailParams = {
@@ -29,14 +29,27 @@ export const GuideLinePage = () => {
return (
-
+
+
+
+
+ 등록한 가이드라인
+
+
+ 총 {guidelineData?.length}개
+
+
{guidelineData?.map((guideline) => (
{
/>
))}
-
);
};
const Container = styled(Box)`
position: relative;
- height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
`;
diff --git a/src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx b/src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx
index e7e300f6..626716ad 100644
--- a/src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx
+++ b/src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx
@@ -31,7 +31,7 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
setIsMore(!isMore);
};
- const handleEdit = () => {
+ const editGuideline = () => {
editMutation.mutate({
seniorId: seniorId,
type: guideline.type,
@@ -41,14 +41,18 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
setIsEditing(false);
};
- const handleDelete = () => {
- deleteMutation.mutate(guideline.id);
+ const deleteGuideline = () => {
+ const isConfirmed = window.confirm('정말 가이드라인을 삭제하시겠습니까?');
+
+ if (isConfirmed) {
+ deleteMutation.mutate(guideline.id);
+ }
};
return (
{isEditing ? (
-
+
{
- 저장
+
+ 저장
+
+ setIsEditing(false)}
+ fontSize='0.9rem'
+ fontWeight={700}
+ cursor='pointer'
+ color='var(--color-primary)'
+ >
+ 취소
+
) : (
@@ -97,7 +124,7 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
display='flex'
flexDir='row'
w='100%'
- maxW='300px'
+ maxW='370px'
justifyContent='space-between'
alignItems='center'
cursor='pointer'
@@ -106,13 +133,13 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
{guideline.title}
-
setIsEditing(true)}
w={4}
h={4}
/>
+
@@ -136,7 +163,7 @@ const GuideLineInfoContainer = styled(Flex)`
flex-direction: column;
justify-content: center;
width: 100%;
- max-width: 330px;
+ max-width: 370px;
height: auto;
background-color: var(--color-secondary);
border: 1px solid var(--color-secondary);
@@ -153,7 +180,7 @@ const InfoText = styled(Text)`
const InfoBox = styled(Box)`
width: 100%;
- max-width: 300px;
+ max-width: 330px;
display: flex;
flex-direction: row;
justify-content: space-between;
diff --git a/src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx b/src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx
index 1770ec94..3f944da4 100644
--- a/src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx
+++ b/src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx
@@ -61,13 +61,8 @@ const GuidelineRegisterBox = ({ refetch, seniorId, guidelineType }: Props) => {
export default GuidelineRegisterBox;
const RegisterBox = styled(Box)`
- position: absolute;
- bottom: 0;
width: 100%;
height: auto;
- min-height: 350px;
- left: 50%;
- transform: translateX(-50%);
max-width: 370px;
display: flex;
flex-direction: column;
@@ -75,29 +70,26 @@ const RegisterBox = styled(Box)`
background-color: var(--color-white-gray);
border: 1px solid var(--color-white-gray);
border-radius: 15px;
+ margin-top: 0.25rem;
`;
const InputBox = styled(Box)`
width: 300px;
- height: 80px;
- display: flex;
- flex-direction: column;
- margin: 0.5rem;
- margin-bottom: 1rem;
+ margin: 0.2rem;
`;
const StyledButton = styled.button`
- position: absolute;
- bottom: 0.5rem;
width: 300px;
height: 40px;
background-color: #c69090;
+ font-weight: bold;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
+ margin-bottom: 10px;
&:hover {
background-color: #a67070;
diff --git a/src/pages/guard/register/SeniorRegisterPage.tsx b/src/pages/guard/register/SeniorRegisterPage.tsx
index 60847a8f..dcbc6643 100644
--- a/src/pages/guard/register/SeniorRegisterPage.tsx
+++ b/src/pages/guard/register/SeniorRegisterPage.tsx
@@ -1,7 +1,7 @@
import { useGetAllSeniorInfo } from '../mypage';
import { SeniorInfo } from './components';
import SeniorRegisterBox from './components/senior-register-box/SeniorRegisterBox';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
import styled from '@emotion/styled';
export const SeniorRegisterPage = () => {
@@ -17,29 +17,45 @@ export const SeniorRegisterPage = () => {
return (
-
+
+
+
+
+ 등록한 시니어
+
+
+ 총 {seniors?.length}명
+
+
+
{seniors?.map((senior) => (
))}
-
);
};
const Container = styled(Box)`
position: relative;
- height: 100vh;
display: flex;
flex-direction: column;
+ align-items: center;
`;
const SeniorInfoContainer = styled(Flex)`
- flex-grow: 1;
- overflow-y: auto;
- height: 70vh;
+ width: 100%;
+ max-width: 370px;
flex-direction: column;
align-items: center;
+ border-radius: 10px;
`;
export default SeniorRegisterPage;
diff --git a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx
index 8d6ce92a..b2145c65 100644
--- a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx
+++ b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx
@@ -28,11 +28,15 @@ const SeniorInfo = ({
const deleteMutation = useDeleteSeniorInfo(refetch);
const editMutation = useEditSeniorInfo(refetch);
- const handleDelete = () => {
- deleteMutation.mutate(senior.seniorId);
+ const deleteSenior = () => {
+ const isConfirmed = window.confirm('정말 시니어를 삭제하시겠습니까?');
+
+ if (isConfirmed) {
+ deleteMutation.mutate(senior.seniorId);
+ }
};
- const handleEdit = () => {
+ const editSenior = () => {
editMutation.mutate({
seniorId: senior.seniorId,
seniorInfo: { seniorName, seniorPhoneNumber },
@@ -73,21 +77,44 @@ const SeniorInfo = ({
- 저장
+
+ 저장
+
+ setIsEditing(false)}
+ fontSize='0.9rem'
+ fontWeight={700}
+ cursor='pointer'
+ color='var(--color-primary)'
+ >
+ 취소
+
) : (
@@ -110,7 +137,7 @@ const SeniorInfo = ({
h={4}
ml={1}
cursor='pointer'
- onClick={handleDelete}
+ onClick={deleteSenior}
/>
@@ -126,7 +153,7 @@ const SeniorInfo = ({
const SeniorInfoContainer = styled(Flex)`
width: 100%;
- max-width: 330px;
+ max-width: 370px;
height: 5rem;
min-height: 5rem;
background-color: var(--color-secondary);
@@ -143,7 +170,7 @@ const InfoText = styled(Text)`
const InfoBox = styled(Box)`
width: 100%;
- max-width: 300px;
+ max-width: 350px;
display: flex;
flex-direction: row;
justify-content: space-between;
diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx
index 18144347..528258f0 100644
--- a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx
+++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx
@@ -48,7 +48,7 @@ const SeniorRegisterBox = ({ refetch }: { refetch: () => void }) => {
})}
/>
- 시니어 등록
+ 시니어 등록하기
);
};
@@ -56,11 +56,8 @@ const SeniorRegisterBox = ({ refetch }: { refetch: () => void }) => {
export default SeniorRegisterBox;
const RegisterBox = styled(Box)`
- position: relative;
width: 100%;
height: auto;
- left: 50%;
- transform: translateX(-50%);
max-width: 370px;
display: flex;
flex-direction: column;
@@ -68,17 +65,19 @@ const RegisterBox = styled(Box)`
background-color: var(--color-white-gray);
border: 1px solid var(--color-white-gray);
border-radius: 15px;
+ margin-top: 0.25rem;
`;
const InputBox = styled(Box)`
width: 300px;
- margin: 0.5rem;
+ margin: 0.2rem;
`;
const StyledButton = styled.button`
width: 300px;
height: 40px;
background-color: #c69090;
+ font-weight: bold;
color: #ffffff;
border: none;
border-radius: 5px;