✨ 새 코스 만들기 모달 구현

src/features/course/make-new-course-modal/MakeNewCourseModal.css.ts

@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { COLOR } from '@/styles/foundation';
+import { sprinkles } from '@/styles/sprinkle.css';
+
+export const modalHeader = style({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+
+export const couseNameInput = style({
+    border: `1px solid ${COLOR.Gray200}`,
+    width: '100%',
+    flex: 1,
+    padding: '16px',
+    borderRadius: '6px',
+});
+
+export const saveButton = recipe({
+    base: [
+        sprinkles({ typography: 'Bold17' }),
+        {
+            height: '56px',
+            flex: 1,
+            textAlign: 'center',
+            borderRadius: '10px',
+            backgroundColor: COLOR.Gray900,
+            color: COLOR.MonoWhite,
+        },
+    ],
+    variants: {
+        isButtonDisabled: {
+            true: {
+                backgroundColor: COLOR.Gray300,
+                cursor: 'default',
+            },
+            false: {
+                backgroundColor: COLOR.Gray900,
+            },
+        },
+    },
+});
+
+export const modalCloseButton = style({
+    padding: '6px',
+    color: COLOR.Gray400,
+});

src/features/course/make-new-course-modal/MakeNewCourseModal.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+import CloseIcon from '@/assets/icons/close.svg?react';
+import Modal from '@/components/modal/Modal';
+import { useModal } from '@/hooks/useModal';
+import { useToast } from '@/hooks/useToast';
+import { usePostSaveCourse } from '@/query-hooks/course/mutation';
+
+import * as S from './MakeNewCourseModal.css';
+
+interface PropsType {
+    userId: number;
+}
+
+const MakeNewCourseModal = ({ userId }: PropsType) => {
+    const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+    const [courseName, setCourseName] = useState('새로운 코스');
+
+    const { closeModal } = useModal();
+    const { setToast } = useToast();
+    const { mutateAsync: makeNewCourse } = usePostSaveCourse({ userId });
+
+    const navigate = useNavigate();
+
+    const handleSaveButtonClick = async () => {
+        const { data } = await makeNewCourse(courseName);
+
+        closeModal();
+        setToast('새 코스가 만들어졌어요');
+        navigate(`/course/${data.courseId}`);
+    };
+
+    const handleNewCourseNameChange = ({
+        target,
+    }: React.ChangeEvent<HTMLInputElement>) => {
+        if (!target.value) setIsButtonDisabled(true);
+        else setIsButtonDisabled(false);
+
+        setCourseName(target.value);
+    };
+
+    return (
+        <Modal>
+            <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={courseName}
+                    onChange={handleNewCourseNameChange}
+                />
+            </Modal.Content>
+
+            <Modal.Footer>
+                <button
+                    className={S.saveButton({ isButtonDisabled })}
+                    onClick={handleSaveButtonClick}
+                    disabled={isButtonDisabled}
+                >
+                    저장
+                </button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default MakeNewCourseModal;

src/features/course/make-new-course-modal/index.ts

@@ -0,0 +1,3 @@
+import MakeNewCourseModal from './MakeNewCourseModal';
+
+export default MakeNewCourseModal;