refactor: 의미있는 네이밍으로 변경

woowacourse-teams · Nov 5, 2023 · dbc1c32 · dbc1c32
1 parent 1179f35
commit dbc1c32
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof ConfirmProvider>;
 
 export const Example: Story = {
   render: () => {
-    const RegistrationModal = () => {
+    const Modal = () => {
       const { confirm } = useConfirm();
 
       const clickHiByeBtn = async () => {
@@ -33,8 +33,8 @@ export const Example: Story = {
               <p>코난은 정말 코난입니까?</p>
             </>
           ),
-          cancelName: '바이',
-          confirmName: '하이',
+          denial: '바이',
+          confirmation: '하이',
         });
 
         if (isConfirmed) {
@@ -45,6 +45,7 @@ export const Example: Story = {
         alert('denied');
       };
 
+      // denial과 confirmation 기본값은 '닫기'와 '확인'입니다.
       const clickOpenCloseBtn = async () => {
         const isConfirmed = await confirm({
           title: '오쁜클로즈 모달',
@@ -72,7 +73,7 @@ export const Example: Story = {
       );
     };
 
-    return <RegistrationModal />;
+    return <Modal />;
   },
 };
 

diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx
@@ -7,18 +7,18 @@ import type { ReactNode } from 'react';
 interface ConfirmModalProps {
   title: string;
   content: ReactNode;
-  cancelName: string;
-  confirmName: string;
-  onCancel: () => void;
+  denial: string;
+  confirmation: string;
+  onDeny: () => void;
   onConfirm: () => void;
 }
 
 const ConfirmModal = ({
   title,
   content,
-  cancelName,
-  confirmName,
-  onCancel,
+  denial,
+  confirmation,
+  onDeny,
   onConfirm,
 }: ConfirmModalProps) => {
   return createPortal(
@@ -30,8 +30,8 @@ const ConfirmModal = ({
         <Content>{content}</Content>
         <Spacing direction="vertical" size={10} />
         <ButtonFlex $gap={16}>
-          <CancelButton onClick={onCancel}>{cancelName}</CancelButton>
-          <ConfirmButton onClick={onConfirm}>{confirmName}</ConfirmButton>
+          <CancelButton onClick={onDeny}>{denial}</CancelButton>
+          <ConfirmButton onClick={onConfirm}>{confirmation}</ConfirmButton>
         </ButtonFlex>
       </Container>
     </>,

diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx
@@ -5,32 +5,33 @@ import ConfirmModal from './ConfirmModal';
 import type { ReactNode } from 'react';
 
 export const ConfirmContext = createContext<null | {
-  confirm: (modalState: ModalState) => Promise<boolean>;
+  confirm: (modalState: ModalContents) => Promise<boolean>;
 }>(null);
 
-interface ModalState {
+interface ModalContents {
   title: string;
   content: ReactNode;
-  cancelName?: string;
-  confirmName?: string;
+  denial?: string;
+  confirmation?: string;
 }
 
 const ConfirmProvider = ({ children }: { children: ReactNode }) => {
   const [isOpen, setIsOpen] = useState(false);
   const resolverRef = useRef<{
     resolve: (value: boolean | PromiseLike<boolean>) => void;
   } | null>(null);
-  const [modalState, setModalState] = useState<ModalState>({
+  const [modalContents, setModalContents] = useState<ModalContents>({
     title: '',
     content: '',
-    cancelName: '닫기',
-    confirmName: '확인',
+    denial: '닫기',
+    confirmation: '확인',
   });
-  const { title, content, cancelName, confirmName } = modalState;
+  const { title, content, denial, confirmation } = modalContents;
 
-  const confirm = (modal: ModalState) => {
+  // ContextAPI를 통해 confirm 함수만 제공합니다.
+  const confirm = (contents: ModalContents) => {
     openModal();
-    setModalState(modal);
+    setModalContents(contents);
 
     const promise = new Promise<boolean>((resolve) => {
       resolverRef.current = { resolve };
@@ -53,7 +54,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
-  const onCancel = useCallback(() => {
+  const onDeny = useCallback(() => {
     resolveConfirmation(false);
     closeModal();
   }, []);
@@ -97,9 +98,9 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => {
           <ConfirmModal
             title={title}
             content={content}
-            cancelName={cancelName ?? '닫기'}
-            confirmName={confirmName ?? '확인'}
-            onCancel={onCancel}
+            denial={denial ?? '닫기'}
+            confirmation={confirmation ?? '확인'}
+            onDeny={onDeny}
             onConfirm={onConfirm}
           />,
           document.body