♻️[Refactor] feature common popup #10

public/icons/IcClose.tsx

@@ -0,0 +1,34 @@
+import { SVGProps } from 'react';
+
+interface IcCloseProps extends SVGProps<SVGElement> {
+  width?: number;
+  height?: number;
+  isActive?: boolean;
+  color?: string;
+}
+
+function IcClose({
+  width = 24,
+  height = 24,
+  isActive = false,
+  color,
+}: IcCloseProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      className={`${isActive ? color : 'stroke-gray-dark-02'}`}
+    >
+      <path
+        stroke={isActive ? color : '#909192'}
+        strokeLinecap="round"
+        strokeWidth="1.8"
+        d="m5 5 14.5 14.5M19.5 5 5 19.5"
+      />
+    </svg>
+  );
+}
+
+export default IcClose;

public/icons/index.ts

@@ -10,3 +10,4 @@ export { default as VisibilityOn } from './visibility_on';
 export { default as VisibilityOff } from './visibility_off';
 export { default as LocationIcon } from './LocationIcon';
 export { default as HostIcon } from './HostIcon';
+export { default as IcClose } from './IcClose';

src/components/pop-up/PopUp.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUp from './PopUp';
+
+const POPUP_LABEL = {
+  large: `정말 나가시겠어요?\n작성된 내용이 모두 삭제됩니다.`,
+  small: `가입이 완료되었습니다!`,
+};
+
+const meta: Meta<typeof PopUp> = {
+  title: 'components/PopUp',
+  component: PopUp,
+  parameters: {
+    layout: 'centerd',
+  },
+};
+
+type Story = StoryObj<typeof PopUp>;
+export const LargeOneButton: Story = {
+  args: {
+    isOpen: true,
+    isLarge: true,
+    label: POPUP_LABEL.large,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const LargeTwoButton: Story = {
+  args: {
+    isOpen: true,
+    isLarge: true,
+    isTwoButton: true,
+    label: POPUP_LABEL.large,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const SmallOneButton: Story = {
+  args: {
+    isOpen: true,
+    label: POPUP_LABEL.small,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export const SmallTwoButton: Story = {
+  args: {
+    isOpen: true,
+    isTwoButton: true,
+    label: POPUP_LABEL.small,
+    handlePopUpClose: (e) => alert(e),
+    handlePopUpConfirm: (e) => alert(e),
+  },
+};
+
+export default meta;

src/components/pop-up/PopUp.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PopUp from './PopUp';
+
+const POPUP_LABEL = {
+  large: `정말 나가시겠어요?\n작성된 내용이 모두 삭제됩니다.`,
+  small: `가입이 완료되었습니다!`,
+};
+
+const mockHandlePopUpClose = jest.fn();
+const mockHandlePopUpConfirm = jest.fn();
+
+describe('PopUp 렌더링 테스트', () => {
+  it('small, single button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        label={POPUP_LABEL.small}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.queryByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).not.toBeInTheDocument();
+  });
+  it('small, two button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isTwoButton={true}
+        label={POPUP_LABEL.small}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.getByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).toBeInTheDocument();
+  });
+  it('large, single button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isLarge={true}
+        label={POPUP_LABEL.large}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.queryByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).not.toBeInTheDocument();
+  });
+  it('large, two button 렌더링 테스트', () => {
+    render(
+      <PopUp
+        isOpen={true}
+        isLarge={false}
+        isTwoButton={true}
+        label={POPUP_LABEL.large}
+        handlePopUpClose={mockHandlePopUpClose}
+        handlePopUpConfirm={mockHandlePopUpConfirm}
+      />,
+    );
+    const popUp = screen.getByRole('pop-up');
+    const confirm = screen.getByText('확인');
+    const cancel = screen.getByText('취소');
+    expect(popUp).toBeInTheDocument();
+    expect(confirm).toBeInTheDocument();
+    expect(cancel).toBeInTheDocument();
+  });
+});

src/components/pop-up/PopUp.tsx

@@ -0,0 +1,75 @@
+import { IcClose } from '../../../public/icons';
+import Button from '../button/Button';
+
+interface PopUpProps {
+  isOpen: boolean;
+  label: string;
+  handlePopUpClose: (result: boolean) => void;
+  handlePopUpConfirm: (result: boolean) => void;
+  isLarge?: boolean;
+  isTwoButton?: boolean;
+}
+
+function PopUp({
+  isOpen,
+  isLarge = false,
+  isTwoButton = false,
+  label,
+  handlePopUpClose,
+  handlePopUpConfirm,
+}: PopUpProps) {
+  const onClickClose = () => {
+    if (handlePopUpClose) {
+      handlePopUpClose(false);
+    }
+  };
+
+  const onClickConfirm = () => {
+    if (handlePopUpConfirm) {
+      handlePopUpConfirm(true);
+    }
+  };
+  return (
+    <>
+      <div className={`${isOpen ? 'block' : 'hidden'}`}>
+        <div
+          className={`fixed left-0 top-0 h-screen w-screen bg-black bg-opacity-50`}
+        >
+          <div
+            role="pop-up"
+            className={`absolute left-2/4 top-2/4 flex -translate-x-2/4 -translate-y-2/4 flex-col items-center justify-between rounded-lg border opacity-100 ${isLarge ? 'h-[212px] w-[450px]' : 'h-[199px] w-[300px]'} bg-white p-[24px]`}
+          >
+            <button className="ml-auto" onClick={onClickClose}>
+              <IcClose role="close-icon" className="ml-auto" />
+            </button>
+            <div className="flex flex-col items-center whitespace-pre-wrap text-center text-[#111827]">
+              {label}
+            </div>
+            <div
+              className={`${isLarge && !isTwoButton ? 'ml-auto' : 'flex items-center gap-2'} `}
+            >
+              {isTwoButton ? (
+                <Button
+                  text="취소"
+                  size="modal"
+                  fillType="outline"
+                  themeColor="green-normal-01"
+                  onClick={onClickClose}
+                />
+              ) : null}
+              <Button
+                text="확인"
+                size="modal"
+                fillType="solid"
+                themeColor="green-normal-01"
+                onClick={onClickConfirm}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default PopUp;