[FE] feat: Alert Modal과 Error Alert Modal 컴포넌트 구현 및 Button 컴포넌트 확장

frontend/src/components/common/Button/index.tsx

@@ -1,19 +1,15 @@
-import { ButtonType } from '@/types';
+import { ButtonStyleType, EssentialPropsWithChildren } from '@/types';
 
 import * as S from './styles';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  buttonType: ButtonType;
-  text: string;
-  image?: string;
-  imageDescription?: string;
+  styleType: ButtonStyleType;
 }
 
-const Button = ({ buttonType, text, image, imageDescription, onClick }: ButtonProps) => {
+const Button = ({ styleType: buttonType, type, style, children, onClick }: EssentialPropsWithChildren<ButtonProps>) => {
   return (
-    <S.Button buttonType={buttonType} onClick={onClick}>
-      {image && <S.Image src={image} alt={imageDescription || ''} />}
-      {text}
+    <S.Button buttonType={buttonType} type={type} onClick={onClick} $style={style}>
+      {children}
     </S.Button>
   );
 };

frontend/src/components/common/Button/styles.ts

@@ -1,7 +1,7 @@
 import { css, Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ButtonType } from '@/types';
+import { ButtonStyleType } from '@/types';
 
 const primaryStyle = (theme: Theme) => css`
   color: ${theme.colors.white};
@@ -33,7 +33,7 @@ const disabledStyle = (theme: Theme) => css`
   }
 `;
 
-const getButtonStyle = (buttonType: ButtonType, theme: Theme) => {
+const getButtonStyle = (buttonType: ButtonStyleType, theme: Theme) => {
   switch (buttonType) {
     case 'primary':
       return primaryStyle(theme);
@@ -46,18 +46,22 @@ const getButtonStyle = (buttonType: ButtonType, theme: Theme) => {
   }
 };
 
-export const Button = styled.button<{ buttonType: ButtonType }>`
+interface ButtonProps {
+  buttonType: ButtonStyleType;
+  $style?: React.CSSProperties;
+}
+
+export const Button = styled.button<ButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  width: 10rem;
-  height: 4rem;
   padding: 1rem 2rem;
 
   border: 0.1rem solid ${({ theme }) => theme.colors.primary};
   border-radius: 0.8rem;
 
+  ${({ $style }) => $style && { ...$style }};
   ${({ buttonType, theme }) => getButtonStyle(buttonType, theme)};
 `;
 

frontend/src/components/common/modals/AlertModal/index.tsx

@@ -0,0 +1,45 @@
+import { ButtonStyleType, EssentialPropsWithChildren } from '@/types';
+
+import Button from '../../Button';
+import ModalBackground from '../ModalBackground';
+import ModalPortal from '../ModalPortal';
+
+import * as S from './styles';
+
+interface CloseButton {
+  type: ButtonStyleType;
+  handleClick: () => void;
+  content: React.ReactNode;
+}
+
+interface AlertModalProps {
+  closeButton: CloseButton;
+  isClosableOnBackground: boolean;
+  handleClose: (() => void) | null;
+}
+
+const AlertModal = ({
+  closeButton,
+  isClosableOnBackground,
+  handleClose,
+  children,
+}: EssentialPropsWithChildren<AlertModalProps>) => {
+  return (
+    <ModalPortal>
+      <ModalBackground closeModal={isClosableOnBackground ? handleClose : null}>
+        <S.AlertModalContainer>
+          <S.Contents>{children}</S.Contents>
+          <Button
+            styleType={closeButton.type}
+            onClick={closeButton.handleClick}
+            style={{ width: '100%', minWidth: '30rem', height: '4rem' }}
+          >
+            {closeButton.content}
+          </Button>
+        </S.AlertModalContainer>
+      </ModalBackground>
+    </ModalPortal>
+  );
+};
+
+export default AlertModal;

frontend/src/components/common/modals/AlertModal/styles.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const AlertModalContainer = 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-height: 80vh;
+  padding: 3.2rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+`;
+
+export const Contents = styled.div`
+  display: flex;
+`;

frontend/src/components/common/modals/ConfirmModal/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonType } from '@/types';
+import { ButtonStyleType } from '@/types';
 
 import Button from '../../Button';
 import ModalBackground from '../ModalBackground';
@@ -9,7 +9,7 @@ import ModalPortal from '../ModalPortal';
 import * as S from './styles';
 
 interface ConfirmModalButton {
-  type: ButtonType;
+  type: ButtonStyleType;
   text: string;
   handleClick: (e: React.MouseEvent) => void;
 }
@@ -34,7 +34,7 @@ const ConfirmModal: React.FC<React.PropsWithChildren<ConfirmModalProps>> = ({
             <S.Contents>{children}</S.Contents>
             <S.ButtonContainer>
               {buttonList.map(({ type, text, handleClick }) => (
-                <Button key={text} buttonType={type} text={text} onClick={handleClick} />
+                <Button key={text} styleType={type} text={text} onClick={handleClick} />
               ))}
             </S.ButtonContainer>
           </S.ConfirmModalInner>

frontend/src/components/common/modals/ErrorAlertModal/index.tsx

@@ -0,0 +1,31 @@
+import AlertTrianglePrimaryIcon from '@/assets/alertTrianglePrimary.svg';
+import { ButtonStyleType } from '@/types';
+
+import AlertModal from '../AlertModal';
+
+import * as S from './styles';
+
+interface CloseButton {
+  type: ButtonStyleType;
+  handleClick: () => void;
+  content: React.ReactNode;
+}
+
+interface ErrorAlertModalProps {
+  closeButton: CloseButton;
+  errorText: string;
+  handleClose: () => void;
+}
+
+const ErrorAlertModal = ({ closeButton, errorText, handleClose }: ErrorAlertModalProps) => {
+  return (
+    <AlertModal closeButton={closeButton} isClosableOnBackground={true} handleClose={handleClose}>
+      <S.Contents>
+        <S.AlertTriangle src={AlertTrianglePrimaryIcon} alt="경고 마크" />
+        <p>{errorText}</p>
+      </S.Contents>
+    </AlertModal>
+  );
+};
+
+export default ErrorAlertModal;

frontend/src/components/common/modals/ErrorAlertModal/styles.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const Contents = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const AlertTriangle = styled.img`
+  width: 6rem;
+  height: 6rem;
+`;

frontend/src/components/common/modals/ModalBackground/index.tsx

@@ -5,12 +5,12 @@ import { useModalClose } from '@/hooks';
 import * as S from './styles';
 
 interface ModalBackgroundProps {
-  closeModal: () => void;
+  closeModal: (() => void) | null;
 }
 
 const ModalBackground: React.FC<PropsWithChildren<ModalBackgroundProps>> = ({ children, closeModal }) => {
   const modalBackgroundRef = useRef<HTMLDivElement>(null);
-  useModalClose(closeModal, modalBackgroundRef);
+  useModalClose({ closeModal, modalBackgroundRef });
 
   return <S.ModalBackground ref={modalBackgroundRef}>{children}</S.ModalBackground>;
 };

frontend/src/components/common/modals/index.tsx

@@ -1,2 +1,4 @@
 export { default as SideModal } from './SideModal';
 export { default as ConfirmModal } from './ConfirmModal';
+export { default as AlertModal } from './AlertModal';
+export { default as ErrorAlertModal } from './ErrorAlertModal';

frontend/src/components/error/ErrorSection/index.tsx

@@ -2,7 +2,7 @@ import AlertTriangle from '@/assets/alertTriangle.svg';
 import HomeIcon from '@/assets/home.svg';
 import ReloadIcon from '@/assets/reload.svg';
 import { Button } from '@/components';
-import { ButtonType } from '@/types/styles';
+import { ButtonStyleType } from '@/types/styles';
 
 import * as S from './styles';
 
@@ -12,21 +12,31 @@ interface ErrorSectionProps {
   handleGoHome: () => void;
 }
 
+interface ErrorSectionButton {
+  buttonType: ButtonStyleType;
+  key: string;
+  text: string;
+  /* eslint-disable */
+  imageSrc: any;
+  imageDescription: string;
+  onClick: () => void;
+}
+
 const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSectionProps) => {
-  const buttonList = [
+  const buttonList: ErrorSectionButton[] = [
     {
-      buttonType: 'primary' as ButtonType,
+      buttonType: 'primary',
       key: 'refreshButton',
       text: '새로고침하기',
-      image: ReloadIcon,
+      imageSrc: ReloadIcon,
       imageDescription: '새로고침 이미지',
       onClick: handleReload,
     },
     {
       buttonType: 'secondary' as ButtonType,
       key: 'homeButton',
       text: '홈으로 이동하기',
-      image: HomeIcon,
+      imageSrc: HomeIcon,
       imageDescription: '홈 이미지',
       onClick: handleGoHome,
     },
@@ -41,10 +51,11 @@ const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSection
       <S.Container>
         {buttonList.map((button) => (
           <Button
+            type="button"
             key={button.key}
             buttonType={button.buttonType}
             text={button.text}
-            image={button.image}
+            image={button.imageSrc}
             imageDescription={button.imageDescription}
             onClick={button.onClick}
           />

frontend/src/hooks/useModalClose.ts

@@ -1,6 +1,11 @@
 import { useEffect, RefObject } from 'react';
 
-const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTMLElement>) => {
+interface UseModalCloseProps {
+  closeModal: (() => void) | null;
+  modalBackgroundRef: RefObject<HTMLElement>;
+}
+
+const useModalClose = ({ closeModal, modalBackgroundRef }: UseModalCloseProps) => {
   const isNodeElement = (element: EventTarget | null): element is Node => {
     return element instanceof Node;
   };
@@ -23,6 +28,7 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTM
 
   const handleBackgroundClick = (event: MouseEvent) => {
     if (isNodeElement(event.target) && isModalBackground(event.target)) {
+      if (!closeModal) return;
       closeModal();
     }
   };
@@ -32,6 +38,8 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTM
       event.preventDefault();
 
       blurFocusing();
+
+      if (!closeModal) return;
       closeModal();
     }
   };

frontend/src/pages/ReviewPreviewListPage/components/SearchSection/index.tsx

@@ -13,7 +13,7 @@ const SearchSection = ({ onChange, options, placeholder }: SearchSectionProps) =
     <S.Container>
       <S.SearchBox>
         <SearchInput $width="48rem" $height="100%" placeholder={placeholder} />
-        <Button buttonType="secondary" text="검색" />
+        <Button styleType="secondary" text="검색" />
       </S.SearchBox>
       <DropDown onChange={onChange} options={options} />
     </S.Container>

frontend/src/pages/ReviewWriting/index.tsx

@@ -129,7 +129,7 @@ const ReviewWritingPage = () => {
         </S.KeywordContainer>
         <S.ButtonContainer>
           {/* <Button buttonType="secondary" text="저장" /> */}
-          <Button buttonType={isValidForm ? 'primary' : 'disabled'} text="제출" />
+          <Button styleType={isValidForm ? 'primary' : 'disabled'}>제출</Button>
         </S.ButtonContainer>
       </S.ReviewFormMain>
     </S.ReviewWritingPage>

frontend/src/types/styles.ts

@@ -1 +1 @@
-export type ButtonType = 'primary' | 'secondary' | 'disabled';
+export type ButtonStyleType = 'primary' | 'secondary' | 'disabled';