From 4fbcc771abe229ccf5da8d9866628a91bc46015f Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 01:14:41 +0900 Subject: [PATCH 01/12] =?UTF-8?q?=E2=9C=A8=20PopOverItem=EC=97=90=20StopPr?= =?UTF-8?q?opagation=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pop-over/PopOverItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/pop-over/PopOverItem.tsx b/src/components/pop-over/PopOverItem.tsx index eb2b57d..ecac122 100644 --- a/src/components/pop-over/PopOverItem.tsx +++ b/src/components/pop-over/PopOverItem.tsx @@ -14,6 +14,7 @@ const PopOverItem = ({ const { closePopOver } = usePopOverContext(); const handlePopOverItem = (event: MouseEvent) => { + event.stopPropagation(); onClick?.(event); closePopOver(); }; From feb94cc552f55900677e0183a2bbce71865d671e Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 01:15:24 +0900 Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=92=84=20CourseRemoveModal=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CourseRemoveModal.css.ts | 36 +++++++++++++ .../course-remove-modal/CourseRemoveModal.tsx | 50 +++++++++++++++++++ .../course/course-remove-modal/index.ts | 3 ++ 3 files changed, 89 insertions(+) create mode 100644 src/features/course/course-remove-modal/CourseRemoveModal.css.ts create mode 100644 src/features/course/course-remove-modal/CourseRemoveModal.tsx create mode 100644 src/features/course/course-remove-modal/index.ts diff --git a/src/features/course/course-remove-modal/CourseRemoveModal.css.ts b/src/features/course/course-remove-modal/CourseRemoveModal.css.ts new file mode 100644 index 0000000..1b0d136 --- /dev/null +++ b/src/features/course/course-remove-modal/CourseRemoveModal.css.ts @@ -0,0 +1,36 @@ +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 informationText = style([ + sprinkles({ typography: 'Medium18' }), + { + color: COLOR.Gray600, + }, +]); + +export const footerButton = recipe({ + base: [ + sprinkles({ typography: 'Bold17' }), + { + height: '56px', + flex: 1, + textAlign: 'center', + borderRadius: '10px', + }, + ], + variants: { + action: { + cancel: { + color: COLOR.Gray500, + backgroundColor: COLOR.Gray100, + }, + remove: { + color: COLOR.MonoWhite, + backgroundColor: COLOR.Red500, + }, + }, + }, +}); diff --git a/src/features/course/course-remove-modal/CourseRemoveModal.tsx b/src/features/course/course-remove-modal/CourseRemoveModal.tsx new file mode 100644 index 0000000..ddcabec --- /dev/null +++ b/src/features/course/course-remove-modal/CourseRemoveModal.tsx @@ -0,0 +1,50 @@ +import Modal from '@/components/modal/Modal'; +import { useModal } from '@/hooks/useModal'; +import { useDeleteCourse } from '@/query-hooks/course/mutation'; + +import * as S from './CourseRemoveModal.css'; + +interface PropsType { + courseId: number; + userId: number; +} + +const CourseRemoveModal = ({ courseId, userId }: PropsType) => { + const { closeModal } = useModal(); + const { mutate: deleteCourse } = useDeleteCourse({ + courseId, + userId: userId, + }); + + const handleRemoveButtonClick = () => { + deleteCourse(); + closeModal(); + }; + + return ( + + 이 코스를 삭제할까요? + +

+ 코스에 저장된 핀은 복구할 수 없어요 +

+ + + + + + + ); +}; + +export default CourseRemoveModal; diff --git a/src/features/course/course-remove-modal/index.ts b/src/features/course/course-remove-modal/index.ts new file mode 100644 index 0000000..019bcc0 --- /dev/null +++ b/src/features/course/course-remove-modal/index.ts @@ -0,0 +1,3 @@ +import CourseRemoveModal from './CourseRemoveModal'; + +export default CourseRemoveModal; From 4f9864141b100a41ab01b2411b253d5b492df4f4 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 01:16:17 +0900 Subject: [PATCH 03/12] =?UTF-8?q?=E2=9C=A8=20=EC=BD=94=EC=8A=A4=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../course/course-tab/ThreeDotButton.tsx | 22 ++++++++++++++----- src/query-hooks/course/mutation.ts | 3 +++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/features/course/course-tab/ThreeDotButton.tsx b/src/features/course/course-tab/ThreeDotButton.tsx index 5c980eb..1ab9db5 100644 --- a/src/features/course/course-tab/ThreeDotButton.tsx +++ b/src/features/course/course-tab/ThreeDotButton.tsx @@ -2,6 +2,10 @@ import EditIcon from '@/assets/icons/edit.svg?react'; import ThreeDotIcon from '@/assets/icons/threeDot.svg?react'; import TrashCanIcon from '@/assets/icons/trashCan.svg?react'; import PopOver from '@/components/pop-over'; +import { useModal } from '@/hooks/useModal'; +import { useGetUserInformation } from '@/query-hooks/user/query'; + +import CourseRemoveModal from '../course-remove-modal/CourseRemoveModal'; import * as S from './ThreeDotButton.css'; @@ -10,13 +14,19 @@ interface PropsType { } const ThreeDotButton = ({ courseId }: PropsType) => { + const { openModal } = useModal(); + const { data: userInformation } = useGetUserInformation({}); + // TODO : 모달 컴포넌트 개발 이후 수정 모달 추가 필요 - const handleCourseEditIconClick = () => { - console.log(courseId); - }; + const handleCourseEditIconClick = () => {}; const handleRemoveCourseIconClick = () => { - console.log(courseId); + openModal( + , + ); }; return ( @@ -27,12 +37,12 @@ const ThreeDotButton = ({ courseId }: PropsType) => { -

장소명 수정

+

코스명 수정

 -

장소 삭제

+

코스 삭제

 diff --git a/src/query-hooks/course/mutation.ts b/src/query-hooks/course/mutation.ts index 9e415f3..b533c4e 100644 --- a/src/query-hooks/course/mutation.ts +++ b/src/query-hooks/course/mutation.ts @@ -26,6 +26,9 @@ export const useDeleteCourse = ({ queryClient.removeQueries({ queryKey: COURSE_QUERY_KEY.detail(courseId), }); + queryClient.invalidateQueries({ + queryKey: COURSE_QUERY_KEY.list(), + }); }, throwOnError: true, }); From 46fcca9e1cb9159909a0c1a15e00b3240cfb9a59 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 01:28:11 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=E2=9C=A8=20=EC=BD=94=EC=8A=A4=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=9B=84=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=9D=84=EC=9B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/course/course-remove-modal/CourseRemoveModal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/features/course/course-remove-modal/CourseRemoveModal.tsx b/src/features/course/course-remove-modal/CourseRemoveModal.tsx index ddcabec..ee0b3ce 100644 --- a/src/features/course/course-remove-modal/CourseRemoveModal.tsx +++ b/src/features/course/course-remove-modal/CourseRemoveModal.tsx @@ -1,5 +1,6 @@ import Modal from '@/components/modal/Modal'; import { useModal } from '@/hooks/useModal'; +import { useToast } from '@/hooks/useToast'; import { useDeleteCourse } from '@/query-hooks/course/mutation'; import * as S from './CourseRemoveModal.css'; @@ -11,6 +12,7 @@ interface PropsType { const CourseRemoveModal = ({ courseId, userId }: PropsType) => { const { closeModal } = useModal(); + const { setToast } = useToast(); const { mutate: deleteCourse } = useDeleteCourse({ courseId, userId: userId, @@ -19,6 +21,7 @@ const CourseRemoveModal = ({ courseId, userId }: PropsType) => { const handleRemoveButtonClick = () => { deleteCourse(); closeModal(); + setToast('코스가 삭제되었어요'); }; return ( From c8baf9bdd10557f9e1c0c38976949ccfcd97092c Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Fri, 1 Mar 2024 03:19:43 +0900 Subject: [PATCH 05/12] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20=EC=BD=94?= =?UTF-8?q?=EC=8A=A4=20=EC=82=AD=EC=A0=9C=20api=EC=97=90=EC=84=9C=20userId?= =?UTF-8?q?=20=EC=A0=9C=EC=99=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/course/index.ts | 2 -- src/apis/course/type.ts | 1 - .../course/course-remove-modal/CourseRemoveModal.tsx | 8 ++------ src/features/course/course-tab/ThreeDotButton.tsx | 8 +------- src/query-hooks/course/mutation.ts | 4 +--- 5 files changed, 4 insertions(+), 19 deletions(-) diff --git a/src/apis/course/index.ts b/src/apis/course/index.ts index 07b343b..c6264ea 100644 --- a/src/apis/course/index.ts +++ b/src/apis/course/index.ts @@ -101,14 +101,12 @@ export const CourseRepository = { }, async deleteCourseAsync({ - userId, courseId, }: CourseRequestParamType['deleteCourse']) { await deleteAsync< ApiResponseType, CourseRequestParamType['deleteCourse'] >('/v1/courses', { - userId, courseId, }); }, diff --git a/src/apis/course/type.ts b/src/apis/course/type.ts index 1ec5d0b..cd7c69f 100644 --- a/src/apis/course/type.ts +++ b/src/apis/course/type.ts @@ -15,7 +15,6 @@ export interface CourseRequestParamType { courseName: string; }; deleteCourse: { - userId: number; courseId: number; }; } diff --git a/src/features/course/course-remove-modal/CourseRemoveModal.tsx b/src/features/course/course-remove-modal/CourseRemoveModal.tsx index ee0b3ce..93ba955 100644 --- a/src/features/course/course-remove-modal/CourseRemoveModal.tsx +++ b/src/features/course/course-remove-modal/CourseRemoveModal.tsx @@ -7,16 +7,12 @@ import * as S from './CourseRemoveModal.css'; interface PropsType { courseId: number; - userId: number; } -const CourseRemoveModal = ({ courseId, userId }: PropsType) => { +const CourseRemoveModal = ({ courseId }: PropsType) => { const { closeModal } = useModal(); const { setToast } = useToast(); - const { mutate: deleteCourse } = useDeleteCourse({ - courseId, - userId: userId, - }); + const { mutate: deleteCourse } = useDeleteCourse({ courseId }); const handleRemoveButtonClick = () => { deleteCourse(); diff --git a/src/features/course/course-tab/ThreeDotButton.tsx b/src/features/course/course-tab/ThreeDotButton.tsx index 1ab9db5..e6eb65c 100644 --- a/src/features/course/course-tab/ThreeDotButton.tsx +++ b/src/features/course/course-tab/ThreeDotButton.tsx @@ -15,18 +15,12 @@ interface PropsType { const ThreeDotButton = ({ courseId }: PropsType) => { const { openModal } = useModal(); - const { data: userInformation } = useGetUserInformation({}); // TODO : 모달 컴포넌트 개발 이후 수정 모달 추가 필요 const handleCourseEditIconClick = () => {}; const handleRemoveCourseIconClick = () => { - openModal( - , - ); + openModal(); }; return ( diff --git a/src/query-hooks/course/mutation.ts b/src/query-hooks/course/mutation.ts index b533c4e..14bf2ff 100644 --- a/src/query-hooks/course/mutation.ts +++ b/src/query-hooks/course/mutation.ts @@ -12,7 +12,6 @@ import { COURSE_QUERY_KEY } from './key'; // 특정 코스를 삭제하는 Hook useDeleteCourse export const useDeleteCourse = ({ - userId, courseId, ...options }: CourseRequestParamType['deleteCourse'] & @@ -20,8 +19,7 @@ export const useDeleteCourse = ({ const queryClient = useQueryClient(); return useMutation({ ...options, - mutationFn: () => - CourseRepository.deleteCourseAsync({ userId, courseId }), + mutationFn: () => CourseRepository.deleteCourseAsync({ courseId }), onSuccess: () => { queryClient.removeQueries({ queryKey: COURSE_QUERY_KEY.detail(courseId), From 7c5f9bf5a4a5845ef549108d6918776b88678769 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Fri, 1 Mar 2024 03:26:46 +0900 Subject: [PATCH 06/12] =?UTF-8?q?=E2=9C=A8=20useDeleteCourse=20onSuccess?= =?UTF-8?q?=20=EB=8F=99=EC=9E=91=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/query-hooks/course/mutation.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/query-hooks/course/mutation.ts b/src/query-hooks/course/mutation.ts index 14bf2ff..218eae6 100644 --- a/src/query-hooks/course/mutation.ts +++ b/src/query-hooks/course/mutation.ts @@ -27,6 +27,9 @@ export const useDeleteCourse = ({ queryClient.invalidateQueries({ queryKey: COURSE_QUERY_KEY.list(), }); + queryClient.invalidateQueries({ + queryKey: COURSE_QUERY_KEY.owned(), + }); }, throwOnError: true, }); From 85d96eca9e9512ff7cf9e251bf9eec3d2ab21c3b Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Fri, 1 Mar 2024 03:27:52 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=E2=9C=A8=20=EC=BD=94=EC=8A=A4=ED=83=AD?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=82=B4=20=EC=BD=94=EC=8A=A4=EC=9D=BC=20?= =?UTF-8?q?=EB=95=8C=EB=A7=8C=20=EC=93=B0=EB=A6=AC=EB=8B=B7=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/course/course-tab/CourseTab.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/features/course/course-tab/CourseTab.tsx b/src/features/course/course-tab/CourseTab.tsx index 50e4fd3..b5b432d 100644 --- a/src/features/course/course-tab/CourseTab.tsx +++ b/src/features/course/course-tab/CourseTab.tsx @@ -59,7 +59,8 @@ const CourseTab = ({ - + + {isMyCourse && } ); }; From 9a20ac6cec4841cf7abf2b60881659cc44268fb2 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 02:11:12 +0900 Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=A8=20CourseNameEditModal=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CourseNameEditModal.css.ts | 45 ++++++++++++++ .../CourseNameEditModal.tsx | 62 +++++++++++++++++++ .../course/course-name-edit-modal/index.ts | 3 + 3 files changed, 110 insertions(+) create mode 100644 src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts create mode 100644 src/features/course/course-name-edit-modal/CourseNameEditModal.tsx create mode 100644 src/features/course/course-name-edit-modal/index.ts diff --git a/src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts b/src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts new file mode 100644 index 0000000..0a52b17 --- /dev/null +++ b/src/features/course/course-name-edit-modal/CourseNameEditModal.css.ts @@ -0,0 +1,45 @@ +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 informationText = style([ + sprinkles({ typography: 'Medium18' }), + { + color: COLOR.Gray600, + }, +]); + +export const couseNameInput = style({ + border: `1px solid ${COLOR.Gray200}`, + width: '100%', + flex: 1, + padding: '16px', + borderRadius: '6px', +}); + +export const editButton = 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, + }, + }, + }, +}); diff --git a/src/features/course/course-name-edit-modal/CourseNameEditModal.tsx b/src/features/course/course-name-edit-modal/CourseNameEditModal.tsx new file mode 100644 index 0000000..ff7d222 --- /dev/null +++ b/src/features/course/course-name-edit-modal/CourseNameEditModal.tsx @@ -0,0 +1,62 @@ +import { useState } from 'react'; + +import Modal from '@/components/modal/Modal'; +import { useModal } from '@/hooks/useModal'; +import { useToast } from '@/hooks/useToast'; +import { usePatchCourseName } from '@/query-hooks/course/mutation'; + +import * as S from './CourseNameEditModal.css'; + +interface PropsType { + courseId: number; + courseName: string; +} + +const CourseNameEditModal = ({ courseId, courseName }: PropsType) => { + const { closeModal } = useModal(); + const { setToast } = useToast(); + + const [isButtonDisabled, setIsButtonDisabled] = useState(false); + const [newCourseName, setNewCourseName] = useState(courseName); + + const { mutate: updateCourseName } = usePatchCourseName({ courseId }); + + const handleEditButtonClick = () => { + updateCourseName(newCourseName); + closeModal(); + setToast('코스 이름이 변경되었어요'); + }; + + const handleNewCourseNameChange = ({ + target, + }: React.ChangeEvent) => { + if (!target.value) setIsButtonDisabled(true); + else setIsButtonDisabled(false); + + setNewCourseName(target.value); + }; + + return ( + + 코스명 수정 + + + + + + + + ); +}; + +export default CourseNameEditModal; diff --git a/src/features/course/course-name-edit-modal/index.ts b/src/features/course/course-name-edit-modal/index.ts new file mode 100644 index 0000000..c466ff4 --- /dev/null +++ b/src/features/course/course-name-edit-modal/index.ts @@ -0,0 +1,3 @@ +import CourseNameEditModal from './CourseNameEditModal'; + +export default CourseNameEditModal; From 34f14a93fc06749abd79f062aa8562e68aa035f9 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 02:12:05 +0900 Subject: [PATCH 09/12] =?UTF-8?q?=E2=9C=A8=20usePatchCourseName=20onSucces?= =?UTF-8?q?s=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/query-hooks/course/mutation.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/query-hooks/course/mutation.ts b/src/query-hooks/course/mutation.ts index 218eae6..ee1efb7 100644 --- a/src/query-hooks/course/mutation.ts +++ b/src/query-hooks/course/mutation.ts @@ -49,6 +49,9 @@ export const usePatchCourseName = ({ queryClient.invalidateQueries({ queryKey: COURSE_QUERY_KEY.detail(courseId), }); + queryClient.invalidateQueries({ + queryKey: COURSE_QUERY_KEY.list(), + }); }, throwOnError: true, }); From a65bcdc360b148650b4cb95a4b329a0fb5b974c7 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 02:12:18 +0900 Subject: [PATCH 10/12] =?UTF-8?q?=E2=9C=A8=20CourseTab=EC=97=90=20?= =?UTF-8?q?=EC=BD=94=EC=8A=A4=EB=AA=85=20=EC=88=98=EC=A0=95=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/course/course-tab/ThreeDotButton.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/features/course/course-tab/ThreeDotButton.tsx b/src/features/course/course-tab/ThreeDotButton.tsx index e6eb65c..964c6cc 100644 --- a/src/features/course/course-tab/ThreeDotButton.tsx +++ b/src/features/course/course-tab/ThreeDotButton.tsx @@ -3,21 +3,25 @@ import ThreeDotIcon from '@/assets/icons/threeDot.svg?react'; import TrashCanIcon from '@/assets/icons/trashCan.svg?react'; import PopOver from '@/components/pop-over'; import { useModal } from '@/hooks/useModal'; -import { useGetUserInformation } from '@/query-hooks/user/query'; +import CourseNameEditModal from '../course-name-edit-modal'; import CourseRemoveModal from '../course-remove-modal/CourseRemoveModal'; import * as S from './ThreeDotButton.css'; interface PropsType { courseId: number; + courseName: string; } -const ThreeDotButton = ({ courseId }: PropsType) => { +const ThreeDotButton = ({ courseId, courseName }: PropsType) => { const { openModal } = useModal(); - // TODO : 모달 컴포넌트 개발 이후 수정 모달 추가 필요 - const handleCourseEditIconClick = () => {}; + const handleCourseEditIconClick = () => { + openModal( + , + ); + }; const handleRemoveCourseIconClick = () => { openModal(); From a192600f04d8e009a0e476b6d6f584cdac1ee544 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 29 Feb 2024 02:22:15 +0900 Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=92=84=20=EC=BD=94=EC=8A=A4?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CourseNameEditModal.css.ts | 17 +++++++++++------ .../CourseNameEditModal.tsx | 10 +++++++++- 2 files changed, 20 insertions(+), 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 index 0a52b17..e264ca8 100644 --- 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 index ff7d222..6d54373 100644 --- 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,7 +39,13 @@ const CourseNameEditModal = ({ courseId, courseName }: PropsType) => { return ( - 코스명 수정 +
+ 코스명 수정 + +
+ { onChange={handleNewCourseNameChange} /> +