Merge pull request #122 from kakao-tech-campus-2nd-step3/Style/issue-…

…#113

가이드라인, 시니어 추가 페이지 UI 수정

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 (
     <Container>
-      <Flex
-        h='100%'
-        flexDir='column'
-        alignItems='center'
-        flexGrow={1}
-        overflowY='auto'
-        height='60vh'
-      >
+      <GuidelineRegisterBox
+        refetch={refetch}
+        seniorId={Number(seniorId)}
+        guidelineType={String(guidelineType)}
+      />
+      <Flex w='100%' h='100%' flexDir='column' alignItems='center'>
+        <Box
+          mt={2}
+          w='370px'
+          display='flex'
+          flexDir='row'
+          justifyContent='space-between'
+          alignItems='center'
+        >
+          <Text color='var(--color-black)' fontSize='24px' fontWeight='700'>
+            등록한 가이드라인
+          </Text>
+          <Text color='var(--color-black)' fontSize='20px' fontWeight='700'>
+            총 {guidelineData?.length}개
+          </Text>
+        </Box>
         {guidelineData?.map((guideline) => (
           <GuideLineInfo
             key={guideline.id}
@@ -46,16 +59,13 @@ export const GuideLinePage = () => {
           />
         ))}
       </Flex>
-      <GuidelineRegisterBox
-        refetch={refetch}
-        seniorId={Number(seniorId)}
-        guidelineType={String(guidelineType)}
-      />
     </Container>
   );
 };
 
 const Container = styled(Box)`
   position: relative;
-  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;

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 (
     <GuideLineInfoContainer>
       {isEditing ? (
-        <Box display='flex' flexDir='row' w='100%' maxW='300px'>
+        <Box display='flex' flexDir='row' w='100%' maxW='370px'>
           <Box w='80%'>
             <Input
               fontSize='0.9rem'
@@ -74,21 +78,44 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
           </Box>
           <Box
             w='20%'
-            h='100%'
             display='flex'
-            justifyContent='center'
-            alignItems='center'
-            ml={1}
-            border='1px solid var(--color-primary)'
-            borderRadius='5px'
-            bg='var(--color-primary)'
-            onClick={handleEdit}
-            fontSize='0.9rem'
-            fontWeight={700}
-            cursor='pointer'
-            color='var(--color-white)'
+            flexDir='column'
+            justifyContent='space-between'
           >
-            저장
+            <Box
+              h='45%'
+              display='flex'
+              justifyContent='center'
+              alignItems='center'
+              ml={1}
+              border='1px solid var(--color-primary)'
+              borderRadius='5px'
+              bg='var(--color-primary)'
+              onClick={editGuideline}
+              fontSize='0.9rem'
+              fontWeight={700}
+              cursor='pointer'
+              color='var(--color-white)'
+            >
+              저장
+            </Box>
+            <Box
+              h='45%'
+              display='flex'
+              justifyContent='center'
+              alignItems='center'
+              ml={1}
+              border='1px solid var(--color-white)'
+              borderRadius='5px'
+              bg='var(--color-white)'
+              onClick={() => setIsEditing(false)}
+              fontSize='0.9rem'
+              fontWeight={700}
+              cursor='pointer'
+              color='var(--color-primary)'
+            >
+              취소
+            </Box>
           </Box>
         </Box>
       ) : (
@@ -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}
             </Box>
             <Box display='flex' flexDir='row' gap={1}>
-              <Image src={deleteIcon} onClick={handleDelete} w={4} h={4} />
               <Image
                 src={editIcon}
                 onClick={() => setIsEditing(true)}
                 w={4}
                 h={4}
               />
+              <Image src={deleteIcon} onClick={deleteGuideline} w={4} h={4} />
               <ImageWrapper isMore={isMore}>
                 <Image src={arrowIcon} onClick={toggleContent} w={4} h={4} />
               </ImageWrapper>
@@ -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;

src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx

@@ -61,43 +61,35 @@ 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;
   align-items: center;
   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;

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 (
     <Container>
-      <SeniorInfoContainer>
+      <SeniorRegisterBox refetch={refetch} />
+      <SeniorInfoContainer mt={2}>
+        <Box
+          mt={2}
+          w='370px'
+          display='flex'
+          flexDir='row'
+          justifyContent='space-between'
+          alignItems='center'
+        >
+          <Text color='var(--color-black)' fontSize='24px' fontWeight='700'>
+            등록한 시니어
+          </Text>
+          <Text color='var(--color-black)' fontSize='20px' fontWeight='700'>
+            총 {seniors?.length}명
+          </Text>
+        </Box>
+
         {seniors?.map((senior) => (
           <SeniorInfo key={senior.seniorId} senior={senior} refetch={refetch} />
         ))}
       </SeniorInfoContainer>
-      <SeniorRegisterBox refetch={refetch} />
     </Container>
   );
 };
 
 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;