💄 코스명 수정 모달에 모달 닫기 버튼 추가

Nexters · Feb 28, 2024 · d8945bc · d8945bc
1 parent e5e8426
commit d8945bc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts b/src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts
@@ -4,12 +4,12 @@ import { recipe } from '@vanilla-extract/recipes';
 import { COLOR } from '@/styles/foundation';
 import { sprinkles } from '@/styles/sprinkle.css';
 
-export const informationText = style([
-    sprinkles({ typography: 'Medium18' }),
-    {
-        color: COLOR.Gray600,
-    },
-]);
+export const modalHeader = style({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
 
 export const couseNameInput = style({
     border: `1px solid ${COLOR.Gray200}`,
@@ -43,3 +43,8 @@ export const editButton = recipe({
         },
     },
 });
+
+export const modalCloseButton = style({
+    padding: '6px',
+    color: COLOR.Gray400,
+});
diff --git a/src/features/course/course-name-edit-modal/CourseNameEditModal.tsx b/src/features/course/course-name-edit-modal/CourseNameEditModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import CloseIcon from '@/assets/icons/close.svg?react';
 import Modal from '@/components/modal/Modal';
 import { useModal } from '@/hooks/useModal';
 import { useToast } from '@/hooks/useToast';
@@ -38,14 +39,21 @@ const CourseNameEditModal = ({ courseId, courseName }: PropsType) => {
 
     return (
         <Modal>
-            <Modal.Title>코스명 수정</Modal.Title>
+            <div className={S.modalHeader}>
+                <Modal.Title>코스명 수정</Modal.Title>
+                <button className={S.modalCloseButton} onClick={closeModal}>
+                    <CloseIcon width={28} height={28} />
+                </button>
+            </div>
+
             <Modal.Content>
                 <input
                     className={S.couseNameInput}
                     value={newCourseName}
                     onChange={handleNewCourseNameChange}
                 />
             </Modal.Content>
+
             <Modal.Footer>
                 <button
                     className={S.editButton({ isButtonDisabled })}