Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Oct 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecb4c57
Style: 가이드라인, 시니어 추가 페이지 디자인 수정
Diwoni Oct 27, 2024
57695e6
Refactor : 수정 모드에서 수정취소 추가 및 삭제 confirm 추가
Diwoni Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 25 additions & 15 deletions src/pages/guard/guide-line/GuideLinePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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}
Expand All @@ -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;
Comment on lines 66 to +70
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

멘토님이 이렇게 chakra UI 를 styled로 정의하지 말라고 하시더라구요 ㅋㅋ.. 수정해야할듯합니다

`;
69 changes: 48 additions & 21 deletions src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
setIsMore(!isMore);
};

const handleEdit = () => {
const editGuideline = () => {
editMutation.mutate({
seniorId: seniorId,
type: guideline.type,
Expand All @@ -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'
Expand All @@ -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>
) : (
Expand All @@ -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'
Expand All @@ -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>
Expand All @@ -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);
Expand All @@ -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;
Expand Down
16 changes: 4 additions & 12 deletions src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
30 changes: 23 additions & 7 deletions src/pages/guard/register/SeniorRegisterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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;
Loading