Merge pull request #122 from Kernel360/common-component-modal-ui-edit

공통 컴포넌트 수정: Modal
Kernel360 · Jan 24, 2024 · d00837f · d00837f
2 parents f8b1f40 + e46be59
commit d00837f
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 39 deletions.
diff --git a/src/app/withdraw/page.tsx b/src/app/withdraw/page.tsx
@@ -26,12 +26,12 @@ function WithdrawPage() {
     open({
       title: '회원 탈퇴',
       description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
-      topButtonLabel: '예',
-      bottomButtonLabel: '아니오',
-      onTopButtonClick: () => {
+      leftButtonLabel: '예',
+      rightButtonLabel: '아니오',
+      onLeftButtonClick: () => {
         // 회원탈퇴
       },
-      onBottomButtonClick: () => {
+      onRightButtonClick: () => {
         // 모달닫기
       },
     });

diff --git a/src/components/shared/modal/Modal.module.scss b/src/components/shared/modal/Modal.module.scss
@@ -7,11 +7,19 @@
   box-sizing: border-box;
   flex-direction: column;
   align-items: center;
-  width: 280px;
+  width: 327px;
   height: 220px;
-  padding: 24px;
+  padding: 24px 16px;
   overflow: hidden;
   transform: translate(-50%, -50%);
   border-radius: 10px;
   background-color: var(--white);
+
+  .description {
+    width: 244px;
+  }
+
+  .buttonContainer {
+    width: 100%;
+  }
 }
diff --git a/src/components/shared/modal/Modal.stories.tsx b/src/components/shared/modal/Modal.stories.tsx
@@ -13,13 +13,13 @@ const meta = {
     withReactContext({
       Context: ModalContext,
       initialState: {
-        open: true,
-        title: '탈퇴하시겠습니까?',
-        description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
-        topButtonLabel: '예',
-        bottomButtonLabel: '아니오',
-        onTopButtonClick: () => { },
-        onBottomButtonClick: () => { },
+        open: false,
+        title: null,
+        description: null,
+        leftButtonLabel: null,
+        rightButtonLabel: null,
+        onLeftButtonClick: () => { },
+        onRightButtonClick: () => { },
       },
     }),
   ],
@@ -37,11 +37,23 @@ type Story = StoryObj<typeof meta>;
 export const normal: Story = {
   args: {
     open: true,
-    title: '탈퇴하시겠습니까?',
-    description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
-    topButtonLabel: '예',
-    bottomButtonLabel: '아니오',
-    onTopButtonClick: () => { },
-    onBottomButtonClick: () => { },
+    title: '정말 탈퇴하시겠습니까?',
+    description: '탈퇴하시면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
+    leftButtonLabel: '예',
+    rightButtonLabel: '아니오',
+    onLeftButtonClick: () => { },
+    onRightButtonClick: () => { },
+  },
+};
+
+export const oneButtonModal = {
+  args: {
+    open: true,
+    title: '정말 탈퇴하시겠습니까?',
+    description: '탈퇴하시면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
+    leftButtonLabel: '예',
+    rightButtonLabel: null,
+    onLeftButtonClick: () => { },
+    onRightButtonClick: () => { },
   },
 };
diff --git a/src/components/shared/modal/Modal.tsx b/src/components/shared/modal/Modal.tsx
@@ -10,6 +10,8 @@ import Dimmed from '@shared/dimmed/Dimmed';
 import Spacing from '@shared/spacing/Spacing';
 import Text from '@shared/text/Text';
 
+import Flex from '../flex/Flex';
+
 import styles from './Modal.module.scss';
 
 const cx = classNames.bind(styles);
@@ -18,15 +20,15 @@ interface ModalProps {
   open: boolean
   title: React.ReactNode
   description: React.ReactNode
-  topButtonLabel: React.ReactNode
-  bottomButtonLabel: React.ReactNode
-  onTopButtonClick: () => void
-  onBottomButtonClick: () => void
+  leftButtonLabel: React.ReactNode
+  rightButtonLabel: React.ReactNode
+  onLeftButtonClick: () => void
+  onRightButtonClick: () => void
 }
 
 function Modal({
   // eslint-disable-next-line max-len
-  open, title, description, topButtonLabel, bottomButtonLabel, onTopButtonClick, onBottomButtonClick,
+  open, title, description, leftButtonLabel, rightButtonLabel, onLeftButtonClick, onRightButtonClick,
 }: ModalProps) {
   const { close } = useModal();
   const modalRef = useOutsideClick(close);
@@ -38,13 +40,14 @@ function Modal({
   return (
     <Dimmed>
       <div className={cx('container')} ref={modalRef}>
-        <Text bold>{title}</Text>
+        <Text typography="t4" bold>{title}</Text>
         <Spacing size={8} />
-        <Text typography="t7" color="gray200">{description}</Text>
-        <Spacing size={24} />
-        <Button onClick={onTopButtonClick} full color="secondary">{topButtonLabel}</Button>
-        <Spacing size={12} />
-        <Button onClick={onBottomButtonClick} full>{bottomButtonLabel}</Button>
+        <Text typography="t6" color="gray200" textAlign="center" wordBreak="keep-all" className={cx('description')}>{description}</Text>
+        <Spacing size={32} />
+        <Flex justify="space-between" align="center" gap={8} className={cx('buttonContainer')}>
+          <Button onClick={onLeftButtonClick} full color="primary" size="large">{leftButtonLabel}</Button>
+          {rightButtonLabel && <Button onClick={onRightButtonClick} full size="large" color="gray" weak>{rightButtonLabel}</Button>}
+        </Flex>
       </div>
     </Dimmed>
   );

diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
@@ -20,10 +20,10 @@ const defaultValues: ModalProps = {
   open: false,
   title: null,
   description: null,
-  topButtonLabel: null,
-  bottomButtonLabel: null,
-  onTopButtonClick: () => { },
-  onBottomButtonClick: () => { },
+  leftButtonLabel: null,
+  rightButtonLabel: null,
+  onLeftButtonClick: () => { },
+  onRightButtonClick: () => { },
 };
 
 export const ModalContext = createContext<ModalContextValue | undefined>(undefined);
@@ -38,16 +38,16 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
   }, []);
 
   // eslint-disable-next-line max-len
-  const open = useCallback(({ onTopButtonClick, onBottomButtonClick, ...options }: ModalOptions) => {
+  const open = useCallback(({ onLeftButtonClick, onRightButtonClick, ...options }: ModalOptions) => {
     setModalState({
       ...options,
-      onTopButtonClick: () => {
+      onLeftButtonClick: () => {
         close();
-        onTopButtonClick();
+        onLeftButtonClick();
       },
-      onBottomButtonClick: () => {
+      onRightButtonClick: () => {
         close();
-        onBottomButtonClick();
+        onRightButtonClick();
       },
       open: true,
     });