Skip to content

Commit

Permalink
refactor: ErrorAlertModal을 AlertModal을 사용해 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
chysis committed Aug 1, 2024
1 parent 31c9f16 commit 2374c37
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 42 deletions.
32 changes: 10 additions & 22 deletions frontend/src/components/common/modals/ErrorAlertModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,29 @@
import AlertTrianglePrimaryIcon from '@/assets/alertTrianglePrimary.svg';
import { ButtonStyleType } from '@/types';

import Button from '../../Button';
import ModalBackground from '../ModalBackground';
import ModalPortal from '../ModalPortal';
import AlertModal from '../AlertModal';

import * as S from './styles';

interface CloseButton {
type: ButtonStyleType;
handleClick: () => void;
content: React.ReactNode;
}

interface ErrorAlertModalProps {
closeButton: CloseButton;
text: string;
errorText: string;
}

const ErrorAlertModal = ({ closeButton, text }: ErrorAlertModalProps) => {
const ErrorAlertModal = ({ closeButton, errorText }: ErrorAlertModalProps) => {
return (
<ModalPortal>
<ModalBackground closeModal={closeButton.handleClick}>
<S.ErrorAlertModalContainer>
<S.Contents>
<S.AlertTriangle src={AlertTrianglePrimaryIcon} alt="경고 마크" />
<S.AlertMessage>{text}</S.AlertMessage>
</S.Contents>
<Button
styleType={closeButton.type}
onClick={closeButton.handleClick}
style={{ width: '100%', minWidth: '30rem', height: '4rem' }}
>
닫기
</Button>
</S.ErrorAlertModalContainer>
</ModalBackground>
</ModalPortal>
<AlertModal closeButton={closeButton}>
<S.Contents>
<S.AlertTriangle src={AlertTrianglePrimaryIcon} alt="경고 마크" />
<S.AlertMessage>{errorText}</S.AlertMessage>
</S.Contents>
</AlertModal>
);
};

Expand Down
20 changes: 0 additions & 20 deletions frontend/src/components/common/modals/ErrorAlertModal/styles.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,5 @@
import styled from '@emotion/styled';

export const ErrorAlertModalContainer = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 3.2rem;
align-items: center;
justify-content: space-between;
max-width: 40vw;
max-height: 80vh;
padding: 3.2rem;
background-color: ${({ theme }) => theme.colors.white};
border-radius: ${({ theme }) => theme.borderRadius.basic};
`;

export const Contents = styled.div`
display: flex;
flex-direction: column;
Expand Down

0 comments on commit 2374c37

Please sign in to comment.