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;