From 76585e67532d60ef5d07a424d353c571b37055c6 Mon Sep 17 00:00:00 2001 From: Ubinquitous Date: Wed, 22 Nov 2023 07:40:31 +0900 Subject: [PATCH 01/28] =?UTF-8?q?chore(all):=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/error/throwAxiosError.ts | 18 -- src/app/domitory/page.tsx | 9 - src/assets/data/emptyClassInfo.ts | 16 -- src/assets/data/emptyClassLevel.ts | 6 - src/assets/data/emptyMealList.ts | 21 -- src/assets/data/index.ts | 3 - src/assets/icons/Arrow.tsx | 33 ---- src/assets/icons/CategoryArrow.tsx | 25 --- src/assets/icons/Emoji.tsx | 25 --- src/assets/icons/emojis/Grinning.tsx | 30 --- src/assets/icons/emojis/HoldingBackTears.tsx | 46 ----- src/assets/icons/emojis/Kissing.tsx | 37 ---- src/assets/icons/emojis/Laughing.tsx | 30 --- src/assets/icons/emojis/Relaxed.tsx | 41 ---- src/assets/icons/emojis/StyledEmoji.tsx | 16 -- src/components/atoms/AnonymousBox.tsx | 50 ----- src/components/atoms/CustomEditor.tsx | 64 ------ src/components/atoms/CustomViewer.tsx | 21 -- src/components/atoms/DragDrop.tsx | 186 ------------------ src/components/atoms/ImageWithFallback.tsx | 58 ------ src/components/atoms/Select.tsx | 116 ----------- src/components/common/Aside/InfomationBox.tsx | 142 ------------- src/components/common/Aside/JoinCheckBox.tsx | 80 -------- src/components/common/Aside/MeisterBox.tsx | 72 ------- .../Header/assets/data/navigationList.ts | 39 ---- .../common/Modal/ConfirmModal/index.tsx | 58 ------ .../common/Modal/EmojiModal/ModalHeader.tsx | 46 ----- .../common/Modal/EmojiModal/ModalList.tsx | 24 --- .../common/Modal/EmojiModal/ModalListItem.tsx | 69 ------- .../common/Modal/EmojiModal/index.tsx | 64 ------ .../common/Modal/LoginModal/index.tsx | 50 ----- .../common/Modal/SettingModal/SettingBody.tsx | 99 ---------- .../Modal/SettingModal/SettingHeader.tsx | 50 ----- .../common/Modal/SettingModal/index.tsx | 24 --- .../Modal/SettingModal/interfaces/index.ts | 3 - src/components/common/Modal/View.tsx | 52 ----- src/components/common/Modal/index.tsx | 23 --- src/constants/bamboo.constant.ts | 14 -- src/constants/domitory.constant.ts | 14 -- src/constants/error.constant.ts | 24 --- src/constants/role.constant.ts | 6 - src/constants/user.constant.ts | 6 - src/fixture/index.ts | 2 - src/fixture/post.ts | 20 -- src/fixture/postList.ts | 21 -- src/helpers/getCategory.helper.ts | 16 -- src/helpers/getClassName.helper.ts | 14 -- src/helpers/getDay.helper.ts | 5 - src/helpers/getImageUrl.helper.ts | 13 -- src/helpers/getMealName.helper.ts | 14 -- src/helpers/getMeisterChapter.helper.ts | 16 -- src/helpers/getPageSize.helper.ts | 7 - src/helpers/getPlanType.helper.ts | 14 -- src/helpers/getStatusColor.helper.ts | 9 - src/helpers/getTimetableType.helper.ts | 12 -- src/helpers/getToken.helper.ts | 8 - src/helpers/getUserRole.helper.ts | 11 -- src/helpers/getWriteContentLabel.helper.ts | 13 -- src/helpers/getXSSContent.helper.ts | 11 -- src/helpers/index.ts | 12 -- src/helpers/isAdmin.helper.ts | 8 - src/hooks/useAside.ts | 77 -------- src/hooks/useEmoji.ts | 17 -- src/hooks/useMeisterHTML.ts | 142 ------------- src/hooks/useModal.ts | 29 --- src/hooks/useTextarea.ts | 54 ----- src/hooks/useUser.tsx | 77 -------- src/interfaces/SVGAttribute.interface.ts | 8 - src/interfaces/aside.interface.ts | 15 -- src/interfaces/bambooPendingPost.interface.ts | 5 - src/interfaces/classInfo.interface.ts | 12 -- src/interfaces/classLevel.interface.ts | 4 - src/interfaces/commentList.interface.ts | 0 src/interfaces/emoji.interface.ts | 3 - src/interfaces/index.ts | 12 -- src/interfaces/infiniteResult.interface.ts | 13 -- src/interfaces/meal.interface.ts | 4 - src/interfaces/mealList.interface.ts | 8 - src/interfaces/modal.interface.ts | 8 - src/interfaces/timetable.interface.ts | 5 - src/interfaces/user.interface.ts | 15 -- src/provider/layoutProvider.helper.tsx | 42 ---- src/provider/provider.helper.tsx | 21 -- src/provider/reactQueryProvider.helper.tsx | 25 --- .../styledComponentsProvider.helper.tsx | 32 --- src/store/aside.store.ts | 21 -- src/store/bamboo.store.ts | 7 - src/store/categories.store.ts | 8 - src/store/domitory.store.ts | 7 - src/store/forumFilter.store.ts | 7 - src/store/modal.store.ts | 12 -- src/store/room.store.ts | 6 - src/store/user.store.ts | 23 --- src/styles/color.ts | 36 ---- src/styles/style.ts | 78 -------- .../assets/data/applicationList.ts | 43 ---- .../applications/assets/icons/ArrowIcon.tsx | 20 -- .../applications/assets/icons/index.ts | 1 - .../bamboo/assets/icons/ModalCloseIcon.tsx | 21 -- src/templates/bamboo/assets/icons/index.ts | 1 - .../@props/bambooListItem.interface.ts | 8 - .../bamboo/interfaces/bambooPost.interface.ts | 5 - src/templates/bamboo/interfaces/index.ts | 2 - .../ber/assets/data/berReserveData.ts | 22 --- .../ber/assets/data/noticeRuleList.ts | 8 - .../ber/assets/icons/BerReserveCloseIcon.tsx | 19 -- src/templates/ber/assets/icons/index.ts | 1 - .../berReserveCheckBoxProps.interface.ts | 4 - .../berReserveJoinBoxProps.interface.ts | 5 - .../berReserveJoinHookprops.interface.ts | 5 - .../@props/berReserveListProps.interface.ts | 5 - .../@props/berReserveMapProps.interface.ts | 5 - .../berReserveStudentListProps.interface.ts | 4 - .../berCreateReserveQuery.interface.ts | 5 - .../ber/interfaces/berReserve.interface.ts | 15 -- .../interfaces/berReserveQuery.interface.ts | 6 - src/templates/ber/interfaces/index.ts | 9 - .../calendar/assets/data/defaultBannerData.ts | 10 - src/templates/calendar/assets/data/index.ts | 1 - .../assets/icons/CalendarArrowIcon.tsx | 30 --- .../assets/icons/PlanModalCloseIcon.tsx | 22 --- src/templates/calendar/assets/icons/index.ts | 2 - .../calendarArrowIconProps.interface.ts | 6 - .../@props/calendarListItemProps.interface.ts | 6 - .../calendarPlanAddModalProps.interface.ts | 3 - .../@props/calendarPlanAddQuery.interface.ts | 5 - .../calendar/interfaces/calendar.interface.ts | 9 - .../interfaces/calendarItem.interface.ts | 6 - .../interfaces/calendarPlan.interface.ts | 11 -- src/templates/calendar/interfaces/index.ts | 7 - .../calendar/types/changeDate.type.ts | 3 - .../home/assets/data/defaultBannerData.ts | 10 - .../meal/assets/data/MealArrowIcon.tsx | 26 --- .../@props/mealArrowIconProps.interface.ts | 6 - .../@props/mealListItemProps.interface.ts | 7 - src/templates/meal/interfaces/index.ts | 2 - src/templates/meal/types/changeDate.type.ts | 3 - src/templates/meal/types/index.ts | 2 - .../meal/types/mealArrowDirection.type.ts | 3 - .../meister/assets/data/graphColorData.ts | 10 - .../meister/assets/data/meisterChartData.ts | 26 --- .../meister/assets/data/meisterDefaultData.ts | 38 ---- .../assets/data/meisterDetailDefaultData.ts | 40 ---- .../meister/assets/data/meisterListData.ts | 15 -- .../meister/assets/data/meisterVariables.ts | 9 - .../assets/data/radarChartVariables.ts | 11 -- .../assets/data/timetableDefaultData.ts | 11 -- .../circularProgressBoxProps.interface.ts | 7 - src/templates/meister/interfaces/index.ts | 4 - .../meister/interfaces/meister.interface.ts | 34 ---- .../interfaces/meisterChartData.interface.ts | 6 - .../interfaces/meisterDetail.interface.ts | 36 ---- .../post/assets/data/categoryList.ts | 12 -- src/templates/post/assets/data/dateTime.ts | 20 -- .../post/assets/data/defaultPostData.ts | 28 --- .../commentContentBoxProps.interface.ts | 6 - ...ommentLikeInformationBoxProps.interface.ts | 6 - .../@props/commentListItemProps.interface.ts | 5 - .../@props/commentQueryProps.interface.ts | 4 - .../createRecommentBoxProps.interface.ts | 4 - .../@props/getCommentListProps.interface.ts | 4 - .../@props/getPostListProps.interface.ts | 4 - .../@props/likeIconProps.interface.ts | 3 - .../@props/postCategoryBoxProps.interface.ts | 6 - .../postCategoryInputBoxProps.interface.ts | 10 - .../@props/postCommentProps.interface.ts | 4 - .../@props/postCountBoxProps.interface.ts | 6 - .../@props/postDetailParamsProps.interface.ts | 3 - ...stListItemInformationBarProps.interface.ts | 5 - .../interfaces/@props/postProps.interface.ts | 5 - .../@props/postSectionBoxProps.interface.ts | 11 -- .../recommentViewButtonProps.interface.ts | 5 - .../@props/useLikeProps.interface.ts | 4 - .../post/interfaces/comment.interface.ts | 14 -- src/templates/post/interfaces/index.ts | 28 --- .../post/interfaces/post.interface.ts | 37 ---- .../interfaces/postCreateQuery.interface.ts | 5 - .../post/interfaces/postData.interface.ts | 16 -- .../post/interfaces/postListProperty.type.ts | 6 - .../interfaces/postListQuery.interface.ts | 5 - .../postListQueryProperty.interface.ts | 7 - .../post/interfaces/postQuery.interface.ts | 5 - .../interfaces/postUpdateQuery.interface.ts | 5 - .../post/interfaces/recomment.interface.ts | 5 - src/templates/timetable/index.tsx | 105 ---------- 185 files changed, 3903 deletions(-) delete mode 100644 src/apis/error/throwAxiosError.ts delete mode 100644 src/app/domitory/page.tsx delete mode 100644 src/assets/data/emptyClassInfo.ts delete mode 100644 src/assets/data/emptyClassLevel.ts delete mode 100644 src/assets/data/emptyMealList.ts delete mode 100644 src/assets/data/index.ts delete mode 100644 src/assets/icons/Arrow.tsx delete mode 100644 src/assets/icons/CategoryArrow.tsx delete mode 100644 src/assets/icons/Emoji.tsx delete mode 100644 src/assets/icons/emojis/Grinning.tsx delete mode 100644 src/assets/icons/emojis/HoldingBackTears.tsx delete mode 100644 src/assets/icons/emojis/Kissing.tsx delete mode 100644 src/assets/icons/emojis/Laughing.tsx delete mode 100644 src/assets/icons/emojis/Relaxed.tsx delete mode 100644 src/assets/icons/emojis/StyledEmoji.tsx delete mode 100644 src/components/atoms/AnonymousBox.tsx delete mode 100644 src/components/atoms/CustomEditor.tsx delete mode 100644 src/components/atoms/CustomViewer.tsx delete mode 100644 src/components/atoms/DragDrop.tsx delete mode 100644 src/components/atoms/ImageWithFallback.tsx delete mode 100644 src/components/atoms/Select.tsx delete mode 100644 src/components/common/Aside/InfomationBox.tsx delete mode 100644 src/components/common/Aside/JoinCheckBox.tsx delete mode 100644 src/components/common/Aside/MeisterBox.tsx delete mode 100644 src/components/common/Header/assets/data/navigationList.ts delete mode 100644 src/components/common/Modal/ConfirmModal/index.tsx delete mode 100644 src/components/common/Modal/EmojiModal/ModalHeader.tsx delete mode 100644 src/components/common/Modal/EmojiModal/ModalList.tsx delete mode 100644 src/components/common/Modal/EmojiModal/ModalListItem.tsx delete mode 100644 src/components/common/Modal/EmojiModal/index.tsx delete mode 100644 src/components/common/Modal/LoginModal/index.tsx delete mode 100644 src/components/common/Modal/SettingModal/SettingBody.tsx delete mode 100644 src/components/common/Modal/SettingModal/SettingHeader.tsx delete mode 100644 src/components/common/Modal/SettingModal/index.tsx delete mode 100644 src/components/common/Modal/SettingModal/interfaces/index.ts delete mode 100644 src/components/common/Modal/View.tsx delete mode 100644 src/components/common/Modal/index.tsx delete mode 100644 src/constants/bamboo.constant.ts delete mode 100644 src/constants/domitory.constant.ts delete mode 100644 src/constants/error.constant.ts delete mode 100644 src/constants/role.constant.ts delete mode 100644 src/constants/user.constant.ts delete mode 100644 src/fixture/index.ts delete mode 100644 src/fixture/post.ts delete mode 100644 src/fixture/postList.ts delete mode 100644 src/helpers/getCategory.helper.ts delete mode 100644 src/helpers/getClassName.helper.ts delete mode 100644 src/helpers/getDay.helper.ts delete mode 100644 src/helpers/getImageUrl.helper.ts delete mode 100644 src/helpers/getMealName.helper.ts delete mode 100644 src/helpers/getMeisterChapter.helper.ts delete mode 100644 src/helpers/getPageSize.helper.ts delete mode 100644 src/helpers/getPlanType.helper.ts delete mode 100644 src/helpers/getStatusColor.helper.ts delete mode 100644 src/helpers/getTimetableType.helper.ts delete mode 100644 src/helpers/getToken.helper.ts delete mode 100644 src/helpers/getUserRole.helper.ts delete mode 100644 src/helpers/getWriteContentLabel.helper.ts delete mode 100644 src/helpers/getXSSContent.helper.ts delete mode 100644 src/helpers/index.ts delete mode 100644 src/helpers/isAdmin.helper.ts delete mode 100644 src/hooks/useAside.ts delete mode 100644 src/hooks/useEmoji.ts delete mode 100644 src/hooks/useMeisterHTML.ts delete mode 100644 src/hooks/useModal.ts delete mode 100644 src/hooks/useTextarea.ts delete mode 100644 src/hooks/useUser.tsx delete mode 100644 src/interfaces/SVGAttribute.interface.ts delete mode 100644 src/interfaces/aside.interface.ts delete mode 100644 src/interfaces/bambooPendingPost.interface.ts delete mode 100644 src/interfaces/classInfo.interface.ts delete mode 100644 src/interfaces/classLevel.interface.ts delete mode 100644 src/interfaces/commentList.interface.ts delete mode 100644 src/interfaces/emoji.interface.ts delete mode 100644 src/interfaces/index.ts delete mode 100644 src/interfaces/infiniteResult.interface.ts delete mode 100644 src/interfaces/meal.interface.ts delete mode 100644 src/interfaces/mealList.interface.ts delete mode 100644 src/interfaces/modal.interface.ts delete mode 100644 src/interfaces/timetable.interface.ts delete mode 100644 src/interfaces/user.interface.ts delete mode 100644 src/provider/layoutProvider.helper.tsx delete mode 100644 src/provider/provider.helper.tsx delete mode 100644 src/provider/reactQueryProvider.helper.tsx delete mode 100644 src/provider/styledComponentsProvider.helper.tsx delete mode 100644 src/store/aside.store.ts delete mode 100644 src/store/bamboo.store.ts delete mode 100644 src/store/categories.store.ts delete mode 100644 src/store/domitory.store.ts delete mode 100644 src/store/forumFilter.store.ts delete mode 100644 src/store/modal.store.ts delete mode 100644 src/store/room.store.ts delete mode 100644 src/store/user.store.ts delete mode 100644 src/styles/color.ts delete mode 100644 src/styles/style.ts delete mode 100644 src/templates/applications/assets/data/applicationList.ts delete mode 100644 src/templates/applications/assets/icons/ArrowIcon.tsx delete mode 100644 src/templates/applications/assets/icons/index.ts delete mode 100644 src/templates/bamboo/assets/icons/ModalCloseIcon.tsx delete mode 100644 src/templates/bamboo/assets/icons/index.ts delete mode 100644 src/templates/bamboo/interfaces/@props/bambooListItem.interface.ts delete mode 100644 src/templates/bamboo/interfaces/bambooPost.interface.ts delete mode 100644 src/templates/bamboo/interfaces/index.ts delete mode 100644 src/templates/ber/assets/data/berReserveData.ts delete mode 100644 src/templates/ber/assets/data/noticeRuleList.ts delete mode 100644 src/templates/ber/assets/icons/BerReserveCloseIcon.tsx delete mode 100644 src/templates/ber/assets/icons/index.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveCheckBoxProps.interface.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveJoinBoxProps.interface.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveJoinHookprops.interface.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveListProps.interface.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveMapProps.interface.ts delete mode 100644 src/templates/ber/interfaces/@props/berReserveStudentListProps.interface.ts delete mode 100644 src/templates/ber/interfaces/berCreateReserveQuery.interface.ts delete mode 100644 src/templates/ber/interfaces/berReserve.interface.ts delete mode 100644 src/templates/ber/interfaces/berReserveQuery.interface.ts delete mode 100644 src/templates/ber/interfaces/index.ts delete mode 100644 src/templates/calendar/assets/data/defaultBannerData.ts delete mode 100644 src/templates/calendar/assets/data/index.ts delete mode 100644 src/templates/calendar/assets/icons/CalendarArrowIcon.tsx delete mode 100644 src/templates/calendar/assets/icons/PlanModalCloseIcon.tsx delete mode 100644 src/templates/calendar/assets/icons/index.ts delete mode 100644 src/templates/calendar/interfaces/@props/calendarArrowIconProps.interface.ts delete mode 100644 src/templates/calendar/interfaces/@props/calendarListItemProps.interface.ts delete mode 100644 src/templates/calendar/interfaces/@props/calendarPlanAddModalProps.interface.ts delete mode 100644 src/templates/calendar/interfaces/@props/calendarPlanAddQuery.interface.ts delete mode 100644 src/templates/calendar/interfaces/calendar.interface.ts delete mode 100644 src/templates/calendar/interfaces/calendarItem.interface.ts delete mode 100644 src/templates/calendar/interfaces/calendarPlan.interface.ts delete mode 100644 src/templates/calendar/interfaces/index.ts delete mode 100644 src/templates/calendar/types/changeDate.type.ts delete mode 100644 src/templates/home/assets/data/defaultBannerData.ts delete mode 100644 src/templates/meal/assets/data/MealArrowIcon.tsx delete mode 100644 src/templates/meal/interfaces/@props/mealArrowIconProps.interface.ts delete mode 100644 src/templates/meal/interfaces/@props/mealListItemProps.interface.ts delete mode 100644 src/templates/meal/interfaces/index.ts delete mode 100644 src/templates/meal/types/changeDate.type.ts delete mode 100644 src/templates/meal/types/index.ts delete mode 100644 src/templates/meal/types/mealArrowDirection.type.ts delete mode 100644 src/templates/meister/assets/data/graphColorData.ts delete mode 100644 src/templates/meister/assets/data/meisterChartData.ts delete mode 100644 src/templates/meister/assets/data/meisterDefaultData.ts delete mode 100644 src/templates/meister/assets/data/meisterDetailDefaultData.ts delete mode 100644 src/templates/meister/assets/data/meisterListData.ts delete mode 100644 src/templates/meister/assets/data/meisterVariables.ts delete mode 100644 src/templates/meister/assets/data/radarChartVariables.ts delete mode 100644 src/templates/meister/assets/data/timetableDefaultData.ts delete mode 100644 src/templates/meister/interfaces/@props/circularProgressBoxProps.interface.ts delete mode 100644 src/templates/meister/interfaces/index.ts delete mode 100644 src/templates/meister/interfaces/meister.interface.ts delete mode 100644 src/templates/meister/interfaces/meisterChartData.interface.ts delete mode 100644 src/templates/meister/interfaces/meisterDetail.interface.ts delete mode 100644 src/templates/post/assets/data/categoryList.ts delete mode 100644 src/templates/post/assets/data/dateTime.ts delete mode 100644 src/templates/post/assets/data/defaultPostData.ts delete mode 100644 src/templates/post/interfaces/@props/commentContentBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/commentLikeInformationBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/commentListItemProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/commentQueryProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/createRecommentBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/getCommentListProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/getPostListProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/likeIconProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postCategoryBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postCategoryInputBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postCommentProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postCountBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postDetailParamsProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postListItemInformationBarProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/postSectionBoxProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/recommentViewButtonProps.interface.ts delete mode 100644 src/templates/post/interfaces/@props/useLikeProps.interface.ts delete mode 100644 src/templates/post/interfaces/comment.interface.ts delete mode 100644 src/templates/post/interfaces/index.ts delete mode 100644 src/templates/post/interfaces/post.interface.ts delete mode 100644 src/templates/post/interfaces/postCreateQuery.interface.ts delete mode 100644 src/templates/post/interfaces/postData.interface.ts delete mode 100644 src/templates/post/interfaces/postListProperty.type.ts delete mode 100644 src/templates/post/interfaces/postListQuery.interface.ts delete mode 100644 src/templates/post/interfaces/postListQueryProperty.interface.ts delete mode 100644 src/templates/post/interfaces/postQuery.interface.ts delete mode 100644 src/templates/post/interfaces/postUpdateQuery.interface.ts delete mode 100644 src/templates/post/interfaces/recomment.interface.ts delete mode 100644 src/templates/timetable/index.tsx diff --git a/src/apis/error/throwAxiosError.ts b/src/apis/error/throwAxiosError.ts deleted file mode 100644 index efd8dbbe..00000000 --- a/src/apis/error/throwAxiosError.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { isAxiosError } from "axios"; - -const throwAxiosError = (err: unknown) => { - if (!isAxiosError(err)) - return { - data: "", - status: "", - message: "", - }; - - const data = err?.response?.data; - const { code, status, message } = data; - console.log(err); - - return { code, status, message }; -}; - -export default throwAxiosError; diff --git a/src/app/domitory/page.tsx b/src/app/domitory/page.tsx deleted file mode 100644 index 15057acc..00000000 --- a/src/app/domitory/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -"use client"; - -import DomitoryPage from "@/templates/domitory"; - -const Domitory = () => { - return ; -}; - -export default Domitory; diff --git a/src/assets/data/emptyClassInfo.ts b/src/assets/data/emptyClassInfo.ts deleted file mode 100644 index 56b5812b..00000000 --- a/src/assets/data/emptyClassInfo.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { IClassInfo } from "@/interfaces"; - -const emptyClassInfo: IClassInfo = { - period: "", - subject: "", - endTime: { - hour: 0, - minute: 0, - }, - startTime: { - hour: 0, - minute: 0, - }, -}; - -export default emptyClassInfo; diff --git a/src/assets/data/emptyClassLevel.ts b/src/assets/data/emptyClassLevel.ts deleted file mode 100644 index f8a98187..00000000 --- a/src/assets/data/emptyClassLevel.ts +++ /dev/null @@ -1,6 +0,0 @@ -const emptyClassLevel = { - grade: "1", - class: "1", -}; - -export default emptyClassLevel; diff --git a/src/assets/data/emptyMealList.ts b/src/assets/data/emptyMealList.ts deleted file mode 100644 index 8bd26429..00000000 --- a/src/assets/data/emptyMealList.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { IMealList } from "@/interfaces"; - -const emptyMealList: IMealList = { - data: { - MORNING: { - content: "", - cal: 0, - }, - LUNCH: { - content: "", - cal: 0, - }, - DINNER: { - content: "", - cal: 0, - }, - }, - keys: [], -}; - -export default emptyMealList; diff --git a/src/assets/data/index.ts b/src/assets/data/index.ts deleted file mode 100644 index da19dc45..00000000 --- a/src/assets/data/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as emptyClassInfo } from "./emptyClassInfo"; -export { default as emptyClassLevel } from "./emptyClassLevel"; -export { default as emptyMealList } from "./emptyMealList"; diff --git a/src/assets/icons/Arrow.tsx b/src/assets/icons/Arrow.tsx deleted file mode 100644 index b1bc1717..00000000 --- a/src/assets/icons/Arrow.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { SVGAttribute } from "@/interfaces"; - -const path = { - top: "M1.66419 23.4679C2.24222 24.0457 3.02609 24.3703 3.84342 24.3703C4.66075 24.3703 5.44462 24.0457 6.02265 23.4679L21.2803 8.21018L36.538 23.4679C37.1193 24.0293 37.898 24.34 38.7061 24.333C39.5143 24.326 40.2874 24.0018 40.8589 23.4303C41.4304 22.8588 41.7546 22.0857 41.7616 21.2775C41.7686 20.4694 41.4579 19.6907 40.8965 19.1094L23.4596 1.67249C22.8815 1.09464 22.0977 0.77002 21.2803 0.77002C20.463 0.77002 19.6791 1.09464 19.1011 1.67249L1.66419 19.1094C1.08634 19.6874 0.761719 20.4713 0.761719 21.2886C0.761719 22.106 1.08634 22.8898 1.66419 23.4679Z", - right: - "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z", - bottom: - "M40.8592 1.67228C40.2812 1.09443 39.4973 0.769805 38.68 0.769805C37.8627 0.769805 37.0788 1.09443 36.5008 1.67228L21.2431 16.93L5.98543 1.67228C5.40409 1.1108 4.62548 0.800118 3.81729 0.80714C3.00911 0.814163 2.23601 1.13833 1.66452 1.70983C1.09302 2.28132 0.768859 3.05442 0.761836 3.8626C0.754813 4.67079 1.0655 5.44939 1.62697 6.03073L19.0639 23.4676C19.6419 24.0455 20.4258 24.3701 21.2431 24.3701C22.0604 24.3701 22.8443 24.0455 23.4223 23.4676L40.8592 6.03073C41.4371 5.45271 41.7617 4.66884 41.7617 3.85151C41.7617 3.03417 41.4371 2.25031 40.8592 1.67228Z", - left: "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z", -}; - -const Arrow = ({ - width = 41, - height = 25, - color = "#727272", - direction = "bottom", - ...props -}: SVGAttribute) => { - return ( - - - - ); -}; - -export default Arrow; diff --git a/src/assets/icons/CategoryArrow.tsx b/src/assets/icons/CategoryArrow.tsx deleted file mode 100644 index e6052696..00000000 --- a/src/assets/icons/CategoryArrow.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { SVGAttribute } from "@/interfaces"; - -const CategoryArrow = ({ - width = 12, - height = 20, - isPointable, -}: SVGAttribute) => { - return ( - - - - ); -}; - -export default CategoryArrow; diff --git a/src/assets/icons/Emoji.tsx b/src/assets/icons/Emoji.tsx deleted file mode 100644 index 2be64c23..00000000 --- a/src/assets/icons/Emoji.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { Kissing } from "./index"; - -const Emoji = ({ ...props }: React.ButtonHTMLAttributes) => { - const [isHover, setIsHover] = React.useState(false); - - const handleMouseOverEmoji = () => { - setIsHover(true); - }; - - const handleMouseLeaveEmoji = () => { - setIsHover(false); - }; - - return ( - - ); -}; - -export default Emoji; diff --git a/src/assets/icons/emojis/Grinning.tsx b/src/assets/icons/emojis/Grinning.tsx deleted file mode 100644 index 4d357552..00000000 --- a/src/assets/icons/emojis/Grinning.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { color } from "@/styles"; -import StyledEmoji, { IStyledEmoji } from "./StyledEmoji"; - -const Grinning = ({ isHover, ...props }: IStyledEmoji) => { - return ( - - - - - - - - ); -}; - -export default Grinning; diff --git a/src/assets/icons/emojis/HoldingBackTears.tsx b/src/assets/icons/emojis/HoldingBackTears.tsx deleted file mode 100644 index b8e450ca..00000000 --- a/src/assets/icons/emojis/HoldingBackTears.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { color } from "@/styles"; -import StyledEmoji, { IStyledEmoji } from "./StyledEmoji"; - -const HoldingBackTears = ({ isHover, ...props }: IStyledEmoji) => { - return ( - - - - - - - - - - - - ); -}; - -export default HoldingBackTears; diff --git a/src/assets/icons/emojis/Kissing.tsx b/src/assets/icons/emojis/Kissing.tsx deleted file mode 100644 index 392b4a8e..00000000 --- a/src/assets/icons/emojis/Kissing.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { color } from "@/styles"; -import StyledEmoji, { IStyledEmoji } from "./StyledEmoji"; - -const Kissing = ({ isHover, ...props }: IStyledEmoji) => { - return ( - - - - - - - ); -}; - -export default Kissing; diff --git a/src/assets/icons/emojis/Laughing.tsx b/src/assets/icons/emojis/Laughing.tsx deleted file mode 100644 index c55e369d..00000000 --- a/src/assets/icons/emojis/Laughing.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { color } from "@/styles"; -import StyledEmoji, { IStyledEmoji } from "./StyledEmoji"; - -const Laughing = ({ isHover, ...props }: IStyledEmoji) => { - return ( - - - - - - - ); -}; - -export default Laughing; diff --git a/src/assets/icons/emojis/Relaxed.tsx b/src/assets/icons/emojis/Relaxed.tsx deleted file mode 100644 index c1c30bd8..00000000 --- a/src/assets/icons/emojis/Relaxed.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { color } from "@/styles"; -import StyledEmoji, { IStyledEmoji } from "./StyledEmoji"; - -const Relaxed = ({ isHover, ...props }: IStyledEmoji) => { - return ( - - - - - - - - - - - ); -}; - -export default Relaxed; diff --git a/src/assets/icons/emojis/StyledEmoji.tsx b/src/assets/icons/emojis/StyledEmoji.tsx deleted file mode 100644 index 36ddd794..00000000 --- a/src/assets/icons/emojis/StyledEmoji.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import styled from "styled-components"; - -export interface IStyledEmoji extends React.SVGAttributes { - isHover?: boolean; -} - -const StyledEmoji = styled.svg` - transition: transform 0.2s ease-in-out; - cursor: pointer; - - &:hover { - transform: scale(1.2); - } -`; - -export default StyledEmoji; diff --git a/src/components/atoms/AnonymousBox.tsx b/src/components/atoms/AnonymousBox.tsx deleted file mode 100644 index 4819252b..00000000 --- a/src/components/atoms/AnonymousBox.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled, { css } from "styled-components"; -import { color, font } from "@/styles"; -import { Check } from "@/assets/icons"; - -interface IAnonymousBoxProps { - clicked: boolean; - setClicked: (value: React.SetStateAction) => void; -} - -const AnonymousBox = ({ clicked, setClicked }: IAnonymousBoxProps) => { - return ( - setClicked(!clicked)}> - 익명 - - - - - ); -}; - -const Container = styled.div` - display: flex; - align-items: center; - gap: 6px; - cursor: pointer; -`; - -const AnonymousLabel = styled.span` - ${font.p2}; - color: ${color.gray}; -`; - -const AnonymousButton = styled.button<{ clicked: boolean }>` - width: 18px; - height: 18px; - border: 1.5px solid ${color.on_tertiary}; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - background-color: "transparent"; - ${({ clicked }) => - clicked && - css` - background-color: ${color.primary_blue}; - border: none; - `} -`; - -export default AnonymousBox; diff --git a/src/components/atoms/CustomEditor.tsx b/src/components/atoms/CustomEditor.tsx deleted file mode 100644 index 3532a85d..00000000 --- a/src/components/atoms/CustomEditor.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import "@uiw/react-md-editor/markdown-editor.css"; -import "@uiw/react-markdown-preview/markdown.css"; -import React from "react"; -import { toast } from "react-toastify"; -import MDEditor, { - ContextStore, - ICommand, - MDEditorProps, - getCommands, -} from "@uiw/react-md-editor"; -import rehypeSanitize from "rehype-sanitize"; -import { UploadIcon } from "@/assets/icons"; -import { getImageUrl } from "@/helpers"; -import useModal from "@/hooks/useModal"; -import DragDrop from "./DragDrop"; - -type CustomEditorPropsType = MDEditorProps & React.RefAttributes; - -interface ICustomEditorProps extends CustomEditorPropsType { - value: string; -} - -const CustomEditor = ({ ...props }: ICustomEditorProps) => { - const { openModal, closeModal } = useModal(); - - const handleImageSelected = async (file?: File) => { - closeModal(); - const imageUrl = await getImageUrl(file); - - try { - await navigator.clipboard.writeText(imageUrl); - toast.success("이미지 주소를 클립보드에 저장했어요."); - } catch (err) { - toast.error("이미지를 업로드를 실패했습니다."); - } - }; - - const handleImageUploaderClick = () => { - openModal({ - component: ( - - ), - }); - }; - - const imageUploader: ICommand = { - name: "imageUploader", - keyCommand: "imageUploader", - icon: , - }; - - return ( - - ); -}; - -export default CustomEditor; diff --git a/src/components/atoms/CustomViewer.tsx b/src/components/atoms/CustomViewer.tsx deleted file mode 100644 index 30111802..00000000 --- a/src/components/atoms/CustomViewer.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import MDViewer from "@uiw/react-markdown-preview"; -import rehypeSanitize from "rehype-sanitize"; - -interface MDViewerPropsType { - content?: string; -} - -const CustomViewer = ({ content }: MDViewerPropsType) => { - return ( - - ); -}; - -export default CustomViewer; diff --git a/src/components/atoms/DragDrop.tsx b/src/components/atoms/DragDrop.tsx deleted file mode 100644 index c4859c5a..00000000 --- a/src/components/atoms/DragDrop.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import Image from "next/image"; -import { color } from "@/styles"; -import React from "react"; -import styled, { css } from "styled-components"; -import { Column, Row } from "../Flex"; - -interface DragDropFunctionPropsType { - handler: (file?: File) => void; - previewImage?: string; - width?: string; - height?: string; - isDontNeedPreview?: boolean; - isDontNeedChangeText?: boolean; -} - -const DragDrop = ({ - width, - height, - handler, - previewImage, - isDontNeedPreview, - isDontNeedChangeText, -}: DragDropFunctionPropsType) => { - const [isDragging, setIsDragging] = React.useState(false); - const [file, setFile] = React.useState(); - - const dragRef = React.useRef(null); - - const onChangeFiles = React.useCallback( - ( - e: - | React.ChangeEvent - | React.DragEvent, - ) => { - let selectFiles: File[] = []; - - if (e.type === "drop") { - const dragEvent = e as React.DragEvent; - const fileList = dragEvent.dataTransfer.files; - selectFiles = fileList ? Array.from(fileList) : []; // FileList가 null이면 빈 배열 할당 - } else { - const changeEvent = e as React.ChangeEvent; - const fileList = changeEvent.target.files; - selectFiles = fileList ? Array.from(fileList) : []; // FileList가 null이면 빈 배열 할당 - } - - const [currentFile] = selectFiles; - handler(currentFile); - setFile(currentFile); - }, - // eslint-disable-next-line - [], - ); - - const handleDragIn = React.useCallback((e: DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - }, []); - - const handleDragOut = React.useCallback((e: DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - - setIsDragging(false); - }, []); - - const handleDragOver = React.useCallback((e: DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - - if (e.dataTransfer) setIsDragging(true); - }, []); - - const handleDrop = React.useCallback( - (e: DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - - onChangeFiles(e as unknown as React.DragEvent); - setIsDragging(false); - }, - [onChangeFiles], - ); - - const initDragEvents = React.useCallback(() => { - if (dragRef.current) { - dragRef.current.addEventListener("dragenter", handleDragIn); - dragRef.current.addEventListener("dragleave", handleDragOut); - dragRef.current.addEventListener("dragover", handleDragOver); - dragRef.current.addEventListener("drop", handleDrop); - } - }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]); - - const resetDragEvents = React.useCallback(() => { - if (dragRef.current) { - dragRef.current.removeEventListener("dragenter", handleDragIn); - dragRef.current.removeEventListener("dragleave", handleDragOut); - dragRef.current.removeEventListener("dragover", handleDragOver); - dragRef.current.removeEventListener("drop", handleDrop); - } - }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]); - - React.useEffect(() => { - initDragEvents(); - return () => resetDragEvents(); - }, [initDragEvents, resetDragEvents]); - - return ( - - - - - - {file && !isDontNeedChangeText - ? file.name - : "드래그하여 파일 업로드"} - - - - {file && !isDontNeedPreview && previewImage && ( - - )} - - ); -}; - -const NoneDisplayInput = styled.input` - display: none; -`; - -const DragDropTitle = styled.div` - font-weight: 600; - font-size: 14px; -`; - -const StyledImage = styled(Image)` - border-radius: 6px; - width: 28vw; - height: 30vh; - padding: 6px; -`; - -const DragDropButton = styled.label<{ - width?: string; - height?: string; - isDragging: boolean; -}>` - width: ${({ width }) => width || "24vw"}; - height: ${({ height }) => height || "30vh"}; - border: 2px solid ${color.container}; - ${({ isDragging }) => - isDragging - ? css` - background-color: ${color.primary_blue}; - color: ${color.white}; - ` - : css` - background-color: ${color.white}; - color: ${color.black}; - `}; - box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.05); - border-radius: 10px; - cursor: pointer; - transition: 0.12s ease-in; - display: flex; - justify-content: center; - align-items: center; -`; - -export default DragDrop; diff --git a/src/components/atoms/ImageWithFallback.tsx b/src/components/atoms/ImageWithFallback.tsx deleted file mode 100644 index 5ee43a54..00000000 --- a/src/components/atoms/ImageWithFallback.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import Image, { ImageProps, StaticImageData } from "next/image"; -import styled, { css } from "styled-components"; - -interface ImageWithFallbackProps extends ImageProps { - src?: string; - fallbackSrc: StaticImageData | string; - alt: string; - sizes?: string; - rounded?: boolean; - isShouldHide?: boolean; -} - -const ImageWithFallback = ({ - src, - fallbackSrc, - alt, - sizes, - isShouldHide, - rounded, - ...props -}: ImageWithFallbackProps) => { - const [imgSrc, setImgSrc] = React.useState(src); - - React.useEffect(() => { - setImgSrc(src); - }, [src]); - - return ( - setImgSrc(fallbackSrc)} - isrounded={rounded?.toString()} - /> - ); -}; - -const StyledImage = styled(Image)<{ - isshouldhide?: boolean; - isrounded?: string; -}>` - height: auto; - ${({ isshouldhide }) => - isshouldhide && - css` - display: none; - `} - ${({ isrounded }) => - isrounded === "true" && - css` - border-radius: 50%; - `} -`; - -export default ImageWithFallback; diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx deleted file mode 100644 index 149c44a1..00000000 --- a/src/components/atoms/Select.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { color, font } from "@/styles"; -import Arrow from "@/assets/icons/Arrow"; - -interface ISelectProps { - options: string[]; - defaultOption: string; - label: string; - width?: string; - handler: - | React.Dispatch> - | ((props: string | number) => void); -} - -const Select = ({ - options, - defaultOption, - label, - width = "80px", - handler, -}: ISelectProps) => { - const [isHover, setIsHover] = React.useState(true); - - const toggleHandler = (option: string) => { - handler(option); - setIsHover(true); - }; - return ( - setIsHover(false)} - onMouseLeave={() => setIsHover(true)} - > - - - {defaultOption} - - - - - {options.map((option) => ( - toggleHandler(option)} - > - {option} - - ))} - - - ); -}; - -const StyledSelect = styled.div` - width: fit-content; - cursor: pointer; - z-index: 2; -`; - -const StyledDefaultList = styled.div<{ width: string }>` - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: ${({ width }) => width}; - padding: 6px 0; - border-radius: 4px; - background-color: ${color.white}; - box-shadow: 4px 4px 10px 0 rgba(144, 144, 144, 0.15); - - &:hover { - background-color: ${color.on_tertiary}; - } -`; - -const StyledDefaultListText = styled.div<{ label: string }>` - ${font.context}; - color: ${color.black}; - - &:after { - content: "${({ label }) => label}"; - } -`; - -const StyledList = styled.ul<{ isHover: boolean }>` - position: absolute; - border-radius: 4px; - background-color: ${color.white}; - padding: 6px 4px; - - ${({ isHover }) => - isHover && - css` - display: none; - `} -`; - -const StyledListItem = styled.li<{ width: string; label: string }>` - width: calc(${({ width }) => width} - 8px); - padding: 6px 0 6px 8px; - border-radius: 4px; - ${font.context}; - background-color: ${color.white}; - - &:hover { - background-color: ${color.on_tertiary}; - } - - &:after { - content: "${({ label }) => label}"; - } -`; - -export default Select; diff --git a/src/components/common/Aside/InfomationBox.tsx b/src/components/common/Aside/InfomationBox.tsx deleted file mode 100644 index 2ac2a877..00000000 --- a/src/components/common/Aside/InfomationBox.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import styled from "styled-components"; -import { color, font } from "@/styles"; -import { IUser } from "@/interfaces"; -import { Row, Column } from "@/components/Flex"; -import { getUserRole } from "@/helpers"; -import flex from "@/styles/flex"; -import { ImageWithFallback } from "@/components/atoms"; -import { defaultProfile } from "@/assets/images"; -import useModal from "@/hooks/useModal"; -import { useRouter } from "next/navigation"; -import LoginModal from "../Modal/LoginModal"; - -interface IInfomationBoxProps { - user: IUser; - isLogined: boolean; -} - -const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => { - const router = useRouter(); - const { openModal } = useModal(); - - const handleLoginButtonClick = () => { - if (isLogined) router.push("/"); - openModal({ - component: , - }); - }; - - return ( - - {isLogined && ( - - )} - {isLogined && ( - <> - - - {user.grade} - {user.classNum} - {user.studentNumber} - - - {user.name} - {getUserRole(user.role)} - - - - 내 정보 - - - )} - - ); -}; - -const Container = styled.main` - ${flex.CENTER}; - width: 100%; - height: 100%; - background-color: ${color.white}; - gap: 8px; - padding: 4px 22px; - border-radius: 5px; - - @media screen and (max-width: 1074px) { - padding: 0px 14px; - } -`; - -const UserInfoBox = styled.div` - display: flex; - gap: 4px; - - @media screen and (max-width: 1074px) { - display: none; - } -`; - -const UserInfoText = styled.span` - ${font.p3}; - color: ${color.gray}; -`; - -const UserGrade = styled(UserInfoText)` - &:after { - content: "학년"; - } -`; - -const UserClass = styled(UserInfoText)` - &:after { - content: "반"; - } -`; - -const UserStudentNumber = styled(UserInfoText)` - @media screen and (max-width: 1360px) { - display: none; - } - - &:after { - content: "번"; - } -`; - -const UserName = styled.span` - ${font.H4}; -`; - -const UserType = styled.span` - ${font.p3}; - color: ${color.gray}; - margin-top: auto; - - @media screen and (max-width: 1360px) { - display: none; - } -`; - -const InfomationButton = styled.button` - ${flex.CENTER}; - ${font.btn3}; - padding: 4px 10px; - border: none; - background-color: ${color.primary_blue}; - border-radius: 5px; - margin-left: auto; - color: ${color.white}; - - @media screen and (max-width: 900px) { - display: none; - } -`; - -export default InfomationBox; diff --git a/src/components/common/Aside/JoinCheckBox.tsx b/src/components/common/Aside/JoinCheckBox.tsx deleted file mode 100644 index 14ac7d73..00000000 --- a/src/components/common/Aside/JoinCheckBox.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import styled from "styled-components"; -import { color, font } from "@/styles"; -import useAside from "@/hooks/useAside"; - -const JoinCheckBox = () => { - const { asideInfo, handlePopupOpenClick } = useAside(); - - return ( - - {asideInfo.room && ( -
- - {`${asideInfo.room.yearSemester.year}`.substring(2, 4)}년{" "} - {asideInfo.room.yearSemester.semester}학기 - - - {asideInfo.room.dormitoryType}동 {asideInfo.room.roomNumber}호 - -
- )} - - {asideInfo.room && asideInfo.isCheckin ? "입사 완료" : "입사 체크"} - - - ); -}; - -const Container = styled.section` - width: 40%; - height: 100%; - border-radius: 5px; - background-color: ${color.white}; - display: flex; - padding: 22px 0; - justify-content: space-between; - flex-direction: column; - align-items: center; - - @media screen and (max-width: 900px) { - width: 100%; - } -`; - -const HGroup = styled.hgroup` - display: flex; - flex-direction: column; - margin-right: auto; - padding-left: 18px; - - @media screen and (max-width: 900px) { - display: none; - } -`; - -const Date = styled.span` - ${font.H6}; - color: ${color.gray}; -`; - -const RoomNumber = styled.span` - ${font.H5}; -`; - -const CheckButton = styled.button` - width: 78%; - height: 32px; - background-color: ${color.primary_blue}; - border-radius: 3px; - color: ${color.white}; - ${font.btn3}; - - &:disabled { - background-color: ${color.content}; - } -`; - -export default JoinCheckBox; diff --git a/src/components/common/Aside/MeisterBox.tsx b/src/components/common/Aside/MeisterBox.tsx deleted file mode 100644 index 6b82cc09..00000000 --- a/src/components/common/Aside/MeisterBox.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import styled from "styled-components"; -import { color, font } from "@/styles"; -import { Row } from "@/components/Flex"; -import useAside from "@/hooks/useAside"; - -const MeisterBox = () => { - const { asideInfo } = useAside(); - return ( - - - 인증제 점수 - - {asideInfo.score} - {asideInfo.ranking} - - - - 상벌점 - - {asideInfo.positivePoint - asideInfo.negativePoint} - - - - ); -}; - -const Container = styled.section` - width: 60%; - height: 100%; - border-radius: 5px; - background-color: ${color.white}; - display: flex; - padding: 10px 0 10px 18px; - flex-direction: column; - justify-content: center; - gap: 6px; - - @media screen and (max-width: 900px) { - display: none; - } -`; - -const ScoreHGroup = styled.hgroup` - display: flex; - flex-direction: column; -`; - -const ScoreName = styled.h1` - ${font.p3}; - font-weight: 500; - color: ${color.gray}; -`; - -const Score = styled.h2` - ${font.H4}; - - &:after { - content: "점"; - } -`; - -const Rank = styled.small` - margin-top: auto; - color: ${color.gray}; - ${font.p3}; - - &:after { - content: "위"; - } -`; - -export default MeisterBox; diff --git a/src/components/common/Header/assets/data/navigationList.ts b/src/components/common/Header/assets/data/navigationList.ts deleted file mode 100644 index 66f0f5a8..00000000 --- a/src/components/common/Header/assets/data/navigationList.ts +++ /dev/null @@ -1,39 +0,0 @@ -const navigationList = [ - { - id: 1, - name: "👩🏻‍🎓 마이스터", - href: "/meister", - }, - { - id: 2, - name: "📬 커뮤니티", - href: "/post", - }, - { - id: 3, - name: "🎋 대나무숲", - href: "/bamboo", - }, - { - id: 4, - name: "🕐 시간표", - href: "/timetable", - }, - { - id: 5, - name: "🍚 급식", - href: "/meal", - }, - { - id: 6, - name: "🗓️ 캘린더", - href: "/calendar", - }, - { - id: 7, - name: "☕️ 베르실 예약", - href: "/ber", - }, -]; - -export default navigationList; diff --git a/src/components/common/Modal/ConfirmModal/index.tsx b/src/components/common/Modal/ConfirmModal/index.tsx deleted file mode 100644 index 2114da32..00000000 --- a/src/components/common/Modal/ConfirmModal/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { Row } from "@/components/Flex"; -import { Button } from "@/components/atoms"; -import { color, flex, font } from "@/styles"; -import React from "react"; -import styled from "styled-components"; - -interface IConfirmModalProps { - title?: string; - content?: string; - onAgree: () => void; - onDisAgree: () => void; -} - -const ConfirmModal = ({ - title, - content, - onAgree, - onDisAgree, -}: IConfirmModalProps) => { - return ( - -
- {title} - {content} -
- - - - - - ); -}; - -const Container = styled.div` - padding: 20px; - ${flex.COLUMN}; - gap: 24px; -`; - -const HGroup = styled.div` - width: 100%; - ${flex.COLUMN_CENTER}; - gap: 8px; -`; - -const Title = styled.h1` - ${font.H4}; -`; - -const Content = styled.p` - ${font.p3}; -`; - -export default ConfirmModal; diff --git a/src/components/common/Modal/EmojiModal/ModalHeader.tsx b/src/components/common/Modal/EmojiModal/ModalHeader.tsx deleted file mode 100644 index 20f056ea..00000000 --- a/src/components/common/Modal/EmojiModal/ModalHeader.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import styled from "styled-components"; -import { color, font } from "@/styles"; -import { XIcon, HoldingBackTears } from "@/assets/icons"; - -interface IModalHeaderProps { - handleClickCloseButton: () => void; -} - -const ModalHeader = ({ handleClickCloseButton }: IModalHeaderProps) => { - return ( - - - - <CloseButton onClick={handleClickCloseButton}> - <XIcon width={10} height={10} /> - </CloseButton> - </Container> - ); -}; - -const Container = styled.header` - width: 100%; - padding: 10px 0 10px 14px; - display: flex; - gap: 6px; - align-items: center; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); - border-top-right-radius: 12px; - border-top-left-radius: 12px; -`; - -const Title = styled.span` - ${font.p3}; - font-weight: 600; - color: ${color.black}; - - &:after { - content: "이모티콘"; - } -`; - -const CloseButton = styled.button` - margin: 0 20px 0 auto; -`; - -export default ModalHeader; diff --git a/src/components/common/Modal/EmojiModal/ModalList.tsx b/src/components/common/Modal/EmojiModal/ModalList.tsx deleted file mode 100644 index 89179e35..00000000 --- a/src/components/common/Modal/EmojiModal/ModalList.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "styled-components"; -import ModalListItem from "./ModalListItem"; - -const ModalList = () => { - return ( - <List> - {Array.from({ length: 4 }).map((_, i) => ( - <ModalListItem key={i} /> - ))} - </List> - ); -}; - -const List = styled.div` - width: 100%; - height: 300px; - padding: 12px; - overflow-y: scroll; - display: flex; - flex-direction: column; - gap: 16px; -`; - -export default ModalList; diff --git a/src/components/common/Modal/EmojiModal/ModalListItem.tsx b/src/components/common/Modal/EmojiModal/ModalListItem.tsx deleted file mode 100644 index 109c3291..00000000 --- a/src/components/common/Modal/EmojiModal/ModalListItem.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Image from "next/image"; -import styled from "styled-components"; -import { color, font } from "@/styles"; - -const ModalListItem = () => { - return ( - <ListItem> - <ListItemHead> - <ListItemImage - src="https://bssm.kro.kr/resource/board/emoticon/11/3.webp" - width={16} - height={16} - alt="emoji" - /> - <ListItemTitle>동물티콘</ListItemTitle> - </ListItemHead> - <EmojiList> - {Array.from({ length: 13 }).map((_, i) => ( - <EmojiListItem - key={i} - src={`https://bssm.kro.kr/resource/board/emoticon/3/${i}.png`} - alt="emoji" - width={50} - height={50} - /> - ))} - </EmojiList> - </ListItem> - ); -}; - -const ListItem = styled.div` - display: flex; - flex-direction: column; - gap: 4px; -`; - -const ListItemHead = styled.hgroup` - display: flex; - align-items: center; - gap: 4px; - padding-left: 3px; -`; - -const ListItemTitle = styled.h1` - ${font.p3}; -`; - -const ListItemImage = styled(Image)` - border-radius: 4px; -`; - -const EmojiList = styled.div` - width: 100%; - flex-wrap: wrap; -`; - -const EmojiListItem = styled(Image)` - cursor: pointer; - padding: 1.5px 3px; - - &:hover { - background-color: ${color.on_tertiary}; - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); - border-radius: 2px; - } -`; - -export default ModalListItem; diff --git a/src/components/common/Modal/EmojiModal/index.tsx b/src/components/common/Modal/EmojiModal/index.tsx deleted file mode 100644 index 524e17ac..00000000 --- a/src/components/common/Modal/EmojiModal/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import styled, { css } from "styled-components"; -import { color, flex } from "@/styles"; -import ModalList from "./ModalList"; -import ModalHeader from "./ModalHeader"; - -interface IEmojiModalProps { - top?: string; - right?: string; - bottom?: string; - left?: string; - onClose: () => void; -} - -const EmojiModal = (direction: IEmojiModalProps) => { - const { onClose } = direction; - - return ( - <> - <Container {...direction}> - 아직 지원하지 않는 기능이에요. - {false && ( - <> - <ModalHeader handleClickCloseButton={onClose} /> - <ModalList /> - </> - )} - </Container> - <ModalBackground onClick={onClose} /> - </> - ); -}; - -const Container = styled.div<{ - top?: string; - right?: string; - bottom?: string; - left?: string; -}>` - position: absolute; - z-index: 10; - width: 30vw; - border-radius: 12px; - min-height: 20vh; - height: fit-content; - ${flex.COLUMN_CENTER}; - background-color: ${color.white}; - box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); - ${({ top, right, bottom, left }) => css` - top: ${top}; - right: ${right}; - bottom: ${bottom}; - left: ${left}; - `} -`; - -const ModalBackground = styled.div` - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; -`; - -export default EmojiModal; diff --git a/src/components/common/Modal/LoginModal/index.tsx b/src/components/common/Modal/LoginModal/index.tsx deleted file mode 100644 index 3b6f6f93..00000000 --- a/src/components/common/Modal/LoginModal/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Logo } from "@/assets/icons"; -import { ROUTER } from "@/constants"; -import useWindow from "@/hooks/useWindow"; -import { color, flex, font } from "@/styles"; -import { useRouter } from "next/navigation"; -import React from "react"; -import styled from "styled-components"; - -const LoginModal = () => { - const router = useRouter(); - const { isWindow } = useWindow(); - - const handleLoginButtonClick = () => { - if (isWindow) { - router.push(process.env.NEXT_PUBLIC_OAUTH_URL || ROUTER.HOME); - } - }; - - return ( - <Container> - <Logo width={60} height={60} /> - <LoginButton onClick={handleLoginButtonClick} /> - </Container> - ); -}; - -const Container = styled.div` - width: fit-content; - height: fit-content; - padding: 40px 30px; - background-color: ${color.white}; - border-radius: 6px; - ${flex.COLUMN_CENTER}; - gap: 5vh; -`; - -const LoginButton = styled.button` - width: fit-content; - border-radius: 4px; - padding: 8px 14px; - background-color: ${color.primary_blue}; - color: ${color.white}; - ${font.btn3}; - - &:after { - content: "BSM 계정으로 로그인"; - } -`; - -export default LoginModal; diff --git a/src/components/common/Modal/SettingModal/SettingBody.tsx b/src/components/common/Modal/SettingModal/SettingBody.tsx deleted file mode 100644 index 82f3fff7..00000000 --- a/src/components/common/Modal/SettingModal/SettingBody.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { color, font } from "@/styles"; - -const SettingBody = () => { - return ( - <Container> - <SettingSection> - <SettingName>헤더</SettingName> - </SettingSection> - <SaveButton /> - </Container> - ); -}; - -const Container = styled.section` - width: 100%; - display: flex; - flex-direction: column; - padding: 16px 26px; - gap: 30px; -`; - -const SettingSection = styled.article` - display: flex; - flex-direction: column; - align-items: center; -`; - -const SettingName = styled.span` - ${font.H5}; - margin-right: auto; -`; - -const SettingBox = styled.div` - width: 100%; - padding: 26px 16px 26px 0; - border-bottom: 1.5px solid ${color.on_tertiary}; - display: flex; - align-items: center; -`; - -const SettingHandleHGroup = styled.hgroup` - display: flex; - flex-direction: column; - justify-content: center; - gap: 4px; -`; - -const SettingHandleTitle = styled.h1` - ${font.p2}; -`; - -const SettingHandleDescription = styled.p` - ${font.p3}; - color: ${color.gray}; -`; - -const SwitchBox = styled.div` - margin-left: auto; -`; - -const StyledInputBox = styled.div` - margin-left: auto; - display: flex; - align-items: center; - gap: 6px; -`; - -const StyledInput = styled.input` - max-width: 70px; - text-align: right; - padding: 4px 8px; - background-color: ${color.white}; - ${font.p4}; - box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.1); -`; - -const StyledSummary = styled.span` - ${font.p3}; - &:after { - content: "개"; - } -`; - -const SaveButton = styled.button` - margin-left: auto; - padding: 6px 18px; - background-color: ${color.primary_blue}; - color: ${color.white}; - ${font.p4}; - border-radius: 4px; - - &:after { - content: "저장하기"; - } -`; - -export default SettingBody; diff --git a/src/components/common/Modal/SettingModal/SettingHeader.tsx b/src/components/common/Modal/SettingModal/SettingHeader.tsx deleted file mode 100644 index 21c65bd2..00000000 --- a/src/components/common/Modal/SettingModal/SettingHeader.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from "styled-components"; -import { font } from "@/styles"; -import { Setting } from "@/assets/icons"; -import useModal from "@/hooks/useModal"; -import { ModalCloseIcon } from "@/templates/bamboo/assets/icons"; - -const SettingHeader = () => { - const { closeModal } = useModal(); - - return ( - <Header> - <HGroup> - <Setting width={16} height={16} /> - <SettingTitle /> - </HGroup> - <CloseButton> - <ModalCloseIcon onClick={closeModal} /> - </CloseButton> - </Header> - ); -}; - -const Header = styled.header` - width: 100%; - padding: 10px 0 10px 18px; - display: flex; - align-items: center; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); -`; - -const HGroup = styled.hgroup` - display: flex; - align-items: center; - gap: 6px; -`; - -const SettingTitle = styled.div` - ${font.p2}; - font-weight: 500; - - &:after { - content: "설정"; - } -`; - -const CloseButton = styled.button` - margin: 0 20px 0 auto; -`; - -export default SettingHeader; diff --git a/src/components/common/Modal/SettingModal/index.tsx b/src/components/common/Modal/SettingModal/index.tsx deleted file mode 100644 index d0f2abd1..00000000 --- a/src/components/common/Modal/SettingModal/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "styled-components"; -import { color } from "@/styles"; -import SettingHeader from "./SettingHeader"; -import SettingBody from "./SettingBody"; - -const SettingModal = () => { - return ( - <Container> - <SettingHeader /> - <SettingBody /> - </Container> - ); -}; - -const Container = styled.div` - width: 40vw; - height: fit-content; - overflow-y: scroll; - background-color: ${color.white}; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); - border-radius: 8px; -`; - -export default SettingModal; diff --git a/src/components/common/Modal/SettingModal/interfaces/index.ts b/src/components/common/Modal/SettingModal/interfaces/index.ts deleted file mode 100644 index 07121b5c..00000000 --- a/src/components/common/Modal/SettingModal/interfaces/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface SettingOptionListProps { - [key: string]: unknown; -} diff --git a/src/components/common/Modal/View.tsx b/src/components/common/Modal/View.tsx deleted file mode 100644 index f6068797..00000000 --- a/src/components/common/Modal/View.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import styled, { css } from "styled-components"; -import { IModalState } from "@/interfaces"; - -interface ModalViewProps extends IModalState { - onClose?: () => void; -} - -const ModalView = ({ component, visible, onClose }: ModalViewProps) => { - return ( - <Container> - <Background hidden={!visible} onClick={onClose} /> - <ModalContainer>{component}</ModalContainer> - </Container> - ); -}; - -const Container = styled.div``; - -const Background = styled.div<{ hidden: boolean }>` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.3); - z-index: 10; - ${({ hidden }) => - hidden && - css` - display: none; - `} -`; - -const ModalContainer = styled.div` - display: flex; - flex-direction: column; - position: fixed; - top: 50%; - left: 50%; - width: fit-content; - height: fit-content; - z-index: 20; - transform: translate(-50%, -50%); - - ${({ hidden }) => - hidden && - css` - display: none; - `} -`; - -export default ModalView; diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx deleted file mode 100644 index 7e7e2dc4..00000000 --- a/src/components/common/Modal/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useRecoilState } from "recoil"; -import useModal from "@/hooks/useModal"; -import modalStore from "@/store/modal.store"; -import ModalView from "./View"; - -const Modal = () => { - const [modal] = useRecoilState(modalStore); - const { closeModal } = useModal(); - - return ( - <ModalView - {...modal} - onClose={() => { - modal.onClose?.(); - if (!modal.menualClose) { - closeModal(); - } - }} - /> - ); -}; - -export default Modal; diff --git a/src/constants/bamboo.constant.ts b/src/constants/bamboo.constant.ts deleted file mode 100644 index 6f70a8c8..00000000 --- a/src/constants/bamboo.constant.ts +++ /dev/null @@ -1,14 +0,0 @@ -const BAMBOO = { - ALLOWED: { - TYPE: "ALLOWED", - NAME: "수락된", - }, - PENDING: { - TYPE: "PENDING", - NAME: "대기중인", - }, - TYPE: "radio", - NAME: "BAMBOO", -}; - -export default BAMBOO; diff --git a/src/constants/domitory.constant.ts b/src/constants/domitory.constant.ts deleted file mode 100644 index b0f395c4..00000000 --- a/src/constants/domitory.constant.ts +++ /dev/null @@ -1,14 +0,0 @@ -const DOMITORY = { - JOINED: { - TYPE: "JOINED", - NAME: "입소자", - }, - NOT_JOINED: { - TYPE: "NOT_JOINED", - NAME: "미입소자", - }, - TYPE: "radio", - NAME: "DOMITORY", -}; - -export default DOMITORY; diff --git a/src/constants/error.constant.ts b/src/constants/error.constant.ts deleted file mode 100644 index 1a121966..00000000 --- a/src/constants/error.constant.ts +++ /dev/null @@ -1,24 +0,0 @@ -const ERROR = { - CODE: { - IMG_400_1: "IMG-400-1", - DOCS_404_1: "DOCS-404-1", - DOCS_404_2: "DOCS-404-2", - DOCS_403_1: "DOCS-403-1", - COMMON_403_1: "COMMON-403-1", - USER_403_1: "USER-403-1", - DOCS_403_2: "DOCS-403-2", - TOKEN_403_1: "TOKEN-403-1", - TOKEN_403_2: "TOKEN-403-2", - TOKEN_403_3: "TOKEN-403-3", - USER_404_1: "USER-404-1", - }, - STATUS: { - SUCCESS: 200, - NOT_FOUND: 404, - FORBIDDEN: 403, - BAD_REQUEST: 400, - SERVER_ERROR: 500, - }, -} as const; - -export default ERROR; diff --git a/src/constants/role.constant.ts b/src/constants/role.constant.ts deleted file mode 100644 index 63b13cfa..00000000 --- a/src/constants/role.constant.ts +++ /dev/null @@ -1,6 +0,0 @@ -const ROLE = { - ADMIN: "ADMIN", - USER: "USER", -} as const; - -export default ROLE; diff --git a/src/constants/user.constant.ts b/src/constants/user.constant.ts deleted file mode 100644 index df3613ac..00000000 --- a/src/constants/user.constant.ts +++ /dev/null @@ -1,6 +0,0 @@ -const USER = { - STUDENT: "STUDENT", - TEACHER: "TEACHER", -} as const; - -export default USER; diff --git a/src/fixture/index.ts b/src/fixture/index.ts deleted file mode 100644 index ad33de2f..00000000 --- a/src/fixture/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as post } from "./post"; -export { default as postList } from "./postList"; diff --git a/src/fixture/post.ts b/src/fixture/post.ts deleted file mode 100644 index d49a0cf4..00000000 --- a/src/fixture/post.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { POST } from "@/constants"; -import { IPost } from "@/interfaces"; - -const post: IPost = { - id: "-1", - title: "", - content: "", - user: { - id: 0, - nickName: "", - profileImage: "", - }, - category: POST.COMMON, - createdAt: "", - commentCount: 0, - likeCount: 0, - doesLike: false, -}; - -export default post; diff --git a/src/fixture/postList.ts b/src/fixture/postList.ts deleted file mode 100644 index 451317cb..00000000 --- a/src/fixture/postList.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { POST } from "@/constants"; -import { PostListType } from "@/types"; - -const postList: PostListType = [ - { - id: "0", - user: { - id: 0, - nickName: "", - profileImage: "", - }, - category: POST.COMMON, - title: "", - createdAt: "", - commentCount: 0, - likeCount: 0, - doesLike: false, - }, -]; - -export default postList; diff --git a/src/helpers/getCategory.helper.ts b/src/helpers/getCategory.helper.ts deleted file mode 100644 index b705360c..00000000 --- a/src/helpers/getCategory.helper.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { PostCategoryType } from "@/types"; - -const POSTNAME = { - COMMON: "일반", - CODE_REVIEW: "코드 리뷰", - LOST: "분실했어요", - FOUND: "습득했어요", - NOTICE: "공지사항", - PROJECT: "팀원 모집", -}; - -const getCategory = (category: PostCategoryType) => { - return POSTNAME[category]; -}; - -export default getCategory; diff --git a/src/helpers/getClassName.helper.ts b/src/helpers/getClassName.helper.ts deleted file mode 100644 index 39d726a0..00000000 --- a/src/helpers/getClassName.helper.ts +++ /dev/null @@ -1,14 +0,0 @@ -const getClassName = (classname: string) => { - switch (classname) { - case "GRADE": - return "학년"; - case "CLASS": - return "학급"; - case "SCHOOL": - return "학교"; - default: - return classname; - } -}; - -export default getClassName; diff --git a/src/helpers/getDay.helper.ts b/src/helpers/getDay.helper.ts deleted file mode 100644 index 0c02c642..00000000 --- a/src/helpers/getDay.helper.ts +++ /dev/null @@ -1,5 +0,0 @@ -const getDay = (date: string) => { - return date.split("-")[2]; -}; - -export default getDay; diff --git a/src/helpers/getImageUrl.helper.ts b/src/helpers/getImageUrl.helper.ts deleted file mode 100644 index aee0d71f..00000000 --- a/src/helpers/getImageUrl.helper.ts +++ /dev/null @@ -1,13 +0,0 @@ -import httpClient from "@/apis/httpClient"; - -const getImageUrl = async (file?: File) => { - if (file) { - const formData = new FormData(); - formData.append("image", file, file.name); - - const { data: imageUrl } = await httpClient.image.post(formData); - return imageUrl; - } -}; - -export default getImageUrl; diff --git a/src/helpers/getMealName.helper.ts b/src/helpers/getMealName.helper.ts deleted file mode 100644 index c15deaa0..00000000 --- a/src/helpers/getMealName.helper.ts +++ /dev/null @@ -1,14 +0,0 @@ -const getMealName = (mealName: string) => { - switch (mealName) { - case "MORNING": - return "조식"; - case "LUNCH": - return "중식"; - case "DINNER": - return "석식"; - default: - return mealName; - } -}; - -export default getMealName; diff --git a/src/helpers/getMeisterChapter.helper.ts b/src/helpers/getMeisterChapter.helper.ts deleted file mode 100644 index 1b39bd91..00000000 --- a/src/helpers/getMeisterChapter.helper.ts +++ /dev/null @@ -1,16 +0,0 @@ -const getMeisterChapter = (chapter: string) => { - switch (chapter) { - case "professionalTech": - return "전문 기술 역량"; - case "workEthic": - return "인성 직업 의식"; - case "humanities": - return "인문학적 소양"; - case "foreignScore": - return "외국어 능력"; - default: - return chapter; - } -}; - -export default getMeisterChapter; diff --git a/src/helpers/getPageSize.helper.ts b/src/helpers/getPageSize.helper.ts deleted file mode 100644 index d550de79..00000000 --- a/src/helpers/getPageSize.helper.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Storage from "@/storage"; - -const getPageSize = () => { - return 20; -}; - -export default getPageSize; diff --git a/src/helpers/getPlanType.helper.ts b/src/helpers/getPlanType.helper.ts deleted file mode 100644 index 79b9e72e..00000000 --- a/src/helpers/getPlanType.helper.ts +++ /dev/null @@ -1,14 +0,0 @@ -const getPlanType = (plan: string) => { - switch (plan) { - case "CLASS": - return "학급 일정"; - case "GRADE": - return "학년 일정"; - case "SCHOOL": - return "학교 일정"; - default: - return plan; - } -}; - -export default getPlanType; diff --git a/src/helpers/getStatusColor.helper.ts b/src/helpers/getStatusColor.helper.ts deleted file mode 100644 index 8f22fcc6..00000000 --- a/src/helpers/getStatusColor.helper.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { color } from "@/styles"; - -const getStatusColor = (index: number) => { - if (!index) return color.primary_yellow; - if (index === 1) return color.primary_blue; - return color.primary_red; -}; - -export default getStatusColor; diff --git a/src/helpers/getTimetableType.helper.ts b/src/helpers/getTimetableType.helper.ts deleted file mode 100644 index 4f29ca68..00000000 --- a/src/helpers/getTimetableType.helper.ts +++ /dev/null @@ -1,12 +0,0 @@ -const getTimetableType = (type: string) => { - switch (type) { - case "bar": - return "막대 형식"; - case "table": - return "표 형식"; - default: - return type; - } -}; - -export default getTimetableType; diff --git a/src/helpers/getToken.helper.ts b/src/helpers/getToken.helper.ts deleted file mode 100644 index 40629503..00000000 --- a/src/helpers/getToken.helper.ts +++ /dev/null @@ -1,8 +0,0 @@ -import Storage from "@/storage"; -import { TOKEN } from "@/storage/constants"; - -const getToken = () => { - return Storage.getItem(TOKEN.ACCESS) || ""; -}; - -export default getToken; diff --git a/src/helpers/getUserRole.helper.ts b/src/helpers/getUserRole.helper.ts deleted file mode 100644 index 5891118b..00000000 --- a/src/helpers/getUserRole.helper.ts +++ /dev/null @@ -1,11 +0,0 @@ -const ROLE = { - STUDENT: "학생", - TEACHER: "선생님", -}; - -const getUserRole = (role: string) => { - if (role === "STUDENT") return ROLE.STUDENT; - return ROLE.TEACHER; -}; - -export default getUserRole; diff --git a/src/helpers/getWriteContentLabel.helper.ts b/src/helpers/getWriteContentLabel.helper.ts deleted file mode 100644 index 371b2b6c..00000000 --- a/src/helpers/getWriteContentLabel.helper.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { POST } from "@/constants"; -import { PostCategoryType } from "@/types"; - -const getWriteContentLabel = (category: PostCategoryType) => { - if (category === POST.PROJECT) return "프로젝트에 대해 설명해주세요."; - if (category === POST.LOST) return "잃어버린 물건에 대해 설명해주세요."; - if (category === POST.FOUND) return "습득한 물건에 대해 설명해주세요."; - if (category === POST.CODE_REVIEW) - return "PR에 대한 요구사항 등을 설명해주세요."; - return "글의 내용을 입력해주세요."; -}; - -export default getWriteContentLabel; diff --git a/src/helpers/getXSSContent.helper.ts b/src/helpers/getXSSContent.helper.ts deleted file mode 100644 index 4d2a2362..00000000 --- a/src/helpers/getXSSContent.helper.ts +++ /dev/null @@ -1,11 +0,0 @@ -const getXSSContent = (content?: string) => { - if (content) - return content - .replaceAll("<style>", "") - .replaceAll("</style>", "") - .replaceAll("<script>", "") - .replaceAll("</script>", ""); - return content; -}; - -export default getXSSContent; diff --git a/src/helpers/index.ts b/src/helpers/index.ts deleted file mode 100644 index 6a7c9913..00000000 --- a/src/helpers/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { default as getStatusColor } from "./getStatusColor.helper"; -export { default as getToken } from "./getToken.helper"; -export { default as getImageUrl } from "./getImageUrl.helper"; -export { default as isAdmin } from "./isAdmin.helper"; -export { default as getWriteContentLabel } from "./getWriteContentLabel.helper"; -export { default as getMealName } from "./getMealName.helper"; -export { default as getTimetableType } from "./getTimetableType.helper"; -export { default as getDay } from "./getDay.helper"; -export { default as getClassName } from "./getClassName.helper"; -export { default as getMeisterChapter } from "./getMeisterChapter.helper"; -export { default as getXSSContent } from "./getXSSContent.helper"; -export { default as getUserRole } from "./getUserRole.helper"; diff --git a/src/helpers/isAdmin.helper.ts b/src/helpers/isAdmin.helper.ts deleted file mode 100644 index a6c0ca9d..00000000 --- a/src/helpers/isAdmin.helper.ts +++ /dev/null @@ -1,8 +0,0 @@ -import ROLE from "@/constants/role.constant"; - -const isAdmin = (authority: string) => { - if (authority === ROLE.ADMIN) return true; - return false; -}; - -export default isAdmin; diff --git a/src/hooks/useAside.ts b/src/hooks/useAside.ts deleted file mode 100644 index 5aeeee2d..00000000 --- a/src/hooks/useAside.ts +++ /dev/null @@ -1,77 +0,0 @@ -import httpClient from "@/apis/httpClient"; -import Storage from "@/storage"; -import { KEY } from "@/constants"; -import { asideStore } from "@/store/aside.store"; -import { useQuery, useQueryClient } from "@tanstack/react-query"; -import React from "react"; -import { useRecoilState } from "recoil"; -import { TOKEN } from "@/storage/constants"; -import useWindow from "./useWindow"; - -const useAside = () => { - const queryClient = useQueryClient(); - const [asideInfo, setAsideInfo] = useRecoilState(asideStore); - const { isWindow } = useWindow(); - - const { data: asideRes, isSuccess } = useQuery( - [KEY.ASIDE], - async () => { - const { data } = await httpClient.main.getByTitle({ - params: { title: "aside" }, - }); - return data; - }, - { enabled: !!Storage.getItem(TOKEN.ACCESS) }, - ); - - function openCenteredWindow( - url: string, - title: string, - w: number, - h: number, - ) { - const left = (window.innerWidth - w) / 2; - const top = (window.innerHeight - h) / 2; - - const features = `width=${w},height=${h},left=${left},top=${top},resizable=yes,scrollbars=yes,status=yes`; - const newWindow = window.open(url, title, features); - - if (newWindow) { - newWindow.focus(); - window.addEventListener("focus", () => { - queryClient.invalidateQueries([KEY.ASIDE]); - }); - } - } - const handlePopupOpenClick = () => { - if (isWindow) - openCenteredWindow( - `https://team-insert.github.io/bssm-checkin/join.html?authorization=${Storage.getItem( - TOKEN.ACCESS, - )}`, - "Centered Window", - 600, - 400, - ); - }; - - React.useEffect(() => { - if (isSuccess) { - const { ranking, room, meisterResAndAvgAndMax1, checkInRes } = asideRes; - const { score, positivePoint, negativePoint } = - meisterResAndAvgAndMax1.meister; - setAsideInfo({ - score, - positivePoint, - negativePoint, - ranking, - room, - isCheckin: checkInRes, - }); - } - }, [setAsideInfo, asideRes]); - - return { asideInfo, setAsideInfo, handlePopupOpenClick }; -}; - -export default useAside; diff --git a/src/hooks/useEmoji.ts b/src/hooks/useEmoji.ts deleted file mode 100644 index 32abdeef..00000000 --- a/src/hooks/useEmoji.ts +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -const useEmoji = () => { - const [emoji, setEmoji] = React.useState({ visible: false }); - - const openEmoji = React.useCallback(() => { - setEmoji({ visible: true }); - }, [setEmoji]); - - const closeEmoji = React.useCallback(() => { - setEmoji({ visible: false }); - }, [setEmoji]); - - return { openEmoji, closeEmoji, visible: emoji.visible }; -}; - -export default useEmoji; diff --git a/src/hooks/useMeisterHTML.ts b/src/hooks/useMeisterHTML.ts deleted file mode 100644 index 356feb8d..00000000 --- a/src/hooks/useMeisterHTML.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { color } from "@/styles"; - -// 심신미약자나 노약자, 임산부, 유아는 코드를 읽는 것을 삼가하기바람 - -export const useMeisterHTML = () => { - const getBasicJobSkills = (html: string) => { - return [ - { - title: "의사소통 국어", - value: +html.substring( - html.lastIndexOf("의사소통(국어) : ") + 11, - html.lastIndexOf("의사소통(국어) : ") + 12, - ), - status: color.primary_blue, - }, - { - title: "의사소통 영어", - value: +html.substring( - html.lastIndexOf("의사소통(영어) : ") + 11, - html.lastIndexOf("의사소통(영어) : ") + 12, - ), - status: color.primary_mint, - }, - { - title: "수리 활용", - value: +html.substring( - html.lastIndexOf("수리활용 : ") + 7, - html.lastIndexOf("수리활용 : ") + 8, - ), - status: color.primary_red, - }, - { - title: "문제 해결", - value: +html.substring( - html.lastIndexOf("문제해결 : ") + 7, - html.lastIndexOf("문제해결 : ") + 8, - ), - status: color.primary_yellow, - }, - ]; - }; - - const scoreParser = (html: string) => { - const parsedHTML = html; - return ( - parsedHTML - .replaceAll( - '<div>[ <span style="font-weight:bold; color:blue;">', - (match) => { - return `<section class="list-item">${match}`; - }, - ) - .replace(/\[ (\d{4}-\d{2}-\d{2}) \]/g, (match) => { - return `<br> - <hgroup class="section-date"> - ${match - .replaceAll("[ ", "") - .replaceAll(" ]", "") - .replace("-", "년 ") - .replace("-", "월 ")}일</hgroup></section>`; - }) - .replaceAll("- 시도와 전국은 중복부여 안함", "") - .replace(/[①-⑮].*?: -<br>/gi, "") - .replace(/[①-⑮].*?: -/gi, "") - .replace(/\([^)]*\)/gi, "") - .replace(/총점\s+([\d.]+)\s*점/gi, (match) => { - return `<span class="total-score-item">${match}</span>`; - }) - .replace(/ \d+ 점/gi, (match) => { - return `<span class="item-score" >${match.replaceAll( - " ", - "", - )}</span>`; - }) - .replaceAll( - '[ <span style="font-weight:bold; color:red;">종합</span> ]', - "", - ) - .replaceAll(",", "") - .replaceAll("font-weight:bold; color:blue;", "") - .replaceAll( - '⑥ 헌혈 : <span style="font-weight:bold;">0 점</span> ( 총 : 시간 )<br>', - "", - ) - .replaceAll( - '⑧ 스포츠관련 행사 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>', - "", - ) - .replaceAll( - '⑬ 직업관련 교육 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>', - "", - ) - .replaceAll( - '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;">0 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>', - "", - ) - .replaceAll("font-weight:bold;", "") - .replaceAll( - '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;"> 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>', - "", - ) - .replace(/[①-⑮]/gi, "") - // .replaceAll(":", "·") - .replaceAll( - '[ <span style="font-weight:bold; color:red;">종합</span> ]', - "", - ) - .replaceAll(": 점", ": 0점") - .replaceAll(": 점", ": 0점") - .replaceAll("\n", "") - .replaceAll("\t", "") - .replaceAll(" ", "") - ); - }; - - const pointParser = (html: string) => { - return html - - .replaceAll("\n", "") - .replaceAll("\t", "") - .replaceAll("상점내용 : ", ``) - .replaceAll("벌점내용 : ", ``) - .replaceAll("`", "") - .replaceAll( - "(상점 : ", - `\n<span style="font-size: 20px !important; font-weight: 600 !important;">상점 `, - ) - .replaceAll( - "(벌점 : ", - `\n<span style="font-size: 20px !important; font-weight: 600 !important;">벌점 `, - ) - .replaceAll("점)", "점</span>") - .replaceAll("부여일 : ", "20") - .replace(/상\d{2}-/gi, "") - .replace(/기숙사\d{2}-/gi, "") - .replace(/학교\d{2}-/gi, "") - .replace(/\(([^)]*선생님[^)]*)\)/gi, "$1") - .replace(/\([^)]*\)/gi, ""); - }; - - return { getBasicJobSkills, scoreParser, pointParser }; -}; diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts deleted file mode 100644 index 37f6eff1..00000000 --- a/src/hooks/useModal.ts +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { useRecoilState } from "recoil"; -import { IModalState } from "@/interfaces"; -import modalStore from "@/store/modal.store"; - -const useModal = () => { - const [modal, setModal] = useRecoilState(modalStore); - - const openModal = React.useCallback( - (modalData: IModalState) => { - setModal({ - ...modalData, - visible: true, - }); - }, - [setModal], - ); - - const closeModal = React.useCallback(() => { - setModal({ - component: null, - visible: false, - }); - }, [setModal]); - - return { openModal, closeModal, visible: !!modal.visible }; -}; - -export default useModal; diff --git a/src/hooks/useTextarea.ts b/src/hooks/useTextarea.ts deleted file mode 100644 index 1c07b976..00000000 --- a/src/hooks/useTextarea.ts +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; - -const useTextarea = (defaultContent?: string) => { - const [content, setContent] = React.useState(defaultContent || ""); - const textareaRef = React.useRef<HTMLTextAreaElement>(null); - const [textareaHeight, setTextareaHeight] = React.useState({ - row: 2, - lineBreak: [] as Array<boolean>, - }); - - const onInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => { - const { scrollHeight, clientHeight, value } = e.target; - - if (scrollHeight > clientHeight) { - setTextareaHeight((prev) => ({ - row: prev.row + 1, - lineBreak: { ...prev.lineBreak, [value.length - 1]: true }, - })); - } - if (textareaHeight.lineBreak[value.length]) { - setTextareaHeight((prev) => ({ - row: prev.row - 1, - lineBreak: { ...prev.lineBreak, [value.length]: false }, - })); - } - }; - - const onKeyEnter = ( - e: KeyboardEvent & React.ChangeEvent<HTMLTextAreaElement>, - ) => { - if (e.code === "Enter") { - setTextareaHeight((prev) => ({ - row: prev.row + 1, - lineBreak: { ...prev.lineBreak, [e.target.value.length]: true }, - })); - } - }; - - React.useEffect(() => { - if (textareaRef.current) textareaRef.current.focus(); - }, [textareaRef]); - - return { - textareaRef, - content, - setContent, - row: textareaHeight.row, - handleResizeTextAreaOnInput: onInput, - handleResizeTextareaKeyEnter: - onKeyEnter as unknown as React.KeyboardEventHandler<HTMLTextAreaElement>, - }; -}; - -export default useTextarea; diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx deleted file mode 100644 index bb1ce382..00000000 --- a/src/hooks/useUser.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import { useQuery } from "@tanstack/react-query"; -import { useRecoilState } from "recoil"; -import httpClient, { HttpClient } from "@/apis/httpClient/httpClient"; -import KEY from "@/constants/key.constant"; -import { IUser } from "@/interfaces"; -import { emptyUser, userStore } from "@/store/user.store"; -import useModal from "@/hooks/useModal"; -import Storage from "@/storage"; -import { ERROR } from "@/constants"; -import { authorization, refresh } from "@/apis/token"; -import { isAxiosError } from "axios"; -import LoginModal from "@/components/common/Modal/LoginModal"; -import { TOKEN } from "@/storage/constants"; -import ROLE from "@/constants/role.constant"; -import { useDidMountEffect } from "./useDidMountEffect"; - -const useUser = () => { - const [user, setUser] = useRecoilState(userStore); - const { openModal } = useModal(); - - const { - data: userInfo, - remove, - error, - isSuccess, - refetch, - } = useQuery<IUser>( - [KEY.USER], - async () => { - const { data } = await httpClient.user.get(authorization()); - return data; - }, - { enabled: !!Storage.getItem(TOKEN.ACCESS) }, - ); - - const logout = () => { - HttpClient.removeAccessToken(); - setUser(emptyUser); - remove(); - }; - - React.useEffect(() => { - if (!Storage.getItem(TOKEN.ACCESS)) { - openModal({ component: <LoginModal /> }); - } - }, [openModal]); - - React.useEffect(() => { - if (isAxiosError(error) && error.response) { - const { code } = error.response.data; - - if (code === ERROR.CODE.TOKEN_403_2) refresh().then(() => refetch()); - } - }, [error, refetch]); - - React.useEffect(() => { - if (userInfo) setUser(userInfo); - }, [setUser, userInfo]); - - useDidMountEffect(() => { - if (isSuccess && !userInfo) { - return openModal({ - component: <LoginModal />, - }); - } - }, [isSuccess]); - - return { - user, - isLogined: !!userInfo, - isAdmin: userInfo?.authority === ROLE.ADMIN, - logout, - }; -}; - -export default useUser; diff --git a/src/interfaces/SVGAttribute.interface.ts b/src/interfaces/SVGAttribute.interface.ts deleted file mode 100644 index ff2af9f3..00000000 --- a/src/interfaces/SVGAttribute.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default interface SVGAttribute - extends React.SVGAttributes<HTMLOrSVGElement> { - width?: number; - height?: number; - isPointable?: boolean; - color?: string; - direction?: "top" | "right" | "bottom" | "left"; -} diff --git a/src/interfaces/aside.interface.ts b/src/interfaces/aside.interface.ts deleted file mode 100644 index 15691ba6..00000000 --- a/src/interfaces/aside.interface.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default interface IAside { - score: number; - positivePoint: number; - negativePoint: number; - ranking: number; - room: { - roomNumber: number; - yearSemester: { - year: number; - semester: number; - }; - dormitoryType: string; - }; - isCheckin: false; -} diff --git a/src/interfaces/bambooPendingPost.interface.ts b/src/interfaces/bambooPendingPost.interface.ts deleted file mode 100644 index e8eae2d9..00000000 --- a/src/interfaces/bambooPendingPost.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface IBambooPendingPost { - id: number; - content: string; - createdAt: string; -} diff --git a/src/interfaces/classInfo.interface.ts b/src/interfaces/classInfo.interface.ts deleted file mode 100644 index 25195fd7..00000000 --- a/src/interfaces/classInfo.interface.ts +++ /dev/null @@ -1,12 +0,0 @@ -export default interface IClassInfo { - period: string; - subject: string; - endTime: { - hour: number; - minute: number; - }; - startTime: { - hour: number; - minute: number; - }; -} diff --git a/src/interfaces/classLevel.interface.ts b/src/interfaces/classLevel.interface.ts deleted file mode 100644 index 0119909e..00000000 --- a/src/interfaces/classLevel.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface IClassLevel { - grade: string; - class: string; -} diff --git a/src/interfaces/commentList.interface.ts b/src/interfaces/commentList.interface.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/interfaces/emoji.interface.ts b/src/interfaces/emoji.interface.ts deleted file mode 100644 index 1d3a2cc9..00000000 --- a/src/interfaces/emoji.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface IEmojiState { - visible: boolean; -} diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts deleted file mode 100644 index afdddf1d..00000000 --- a/src/interfaces/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export type { default as SVGAttribute } from "./SVGAttribute.interface"; -export type { default as IClassInfo } from "./classInfo.interface"; -export type { default as IClassLevel } from "./classLevel.interface"; -export type { default as IEmojiState } from "./emoji.interface"; -export type { default as IMealList } from "./mealList.interface"; -export type { default as IMealListItem } from "./meal.interface"; -export type { default as IModalState } from "./modal.interface"; -export type { default as ITimetable } from "./timetable.interface"; -export type { default as IUser } from "./user.interface"; -export type { default as IInfiniteResult } from "./infiniteResult.interface"; -export type { default as IMeister } from "./meister.interface"; -export type { default as IAside } from "./aside.interface"; diff --git a/src/interfaces/infiniteResult.interface.ts b/src/interfaces/infiniteResult.interface.ts deleted file mode 100644 index 2501e776..00000000 --- a/src/interfaces/infiniteResult.interface.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { QueryStatus } from "@tanstack/react-query"; -import { AxiosError } from "axios"; -import IPostInfiniteList from "./postInfiniteList.interface"; - -export default interface IInfiniteResult { - data?: IPostInfiniteList[]; - fetchNextPage: () => void; - hasNextPage: boolean; - isFetching: boolean; - isFetchingNextPage: boolean; - status: QueryStatus; - error: AxiosError; -} diff --git a/src/interfaces/meal.interface.ts b/src/interfaces/meal.interface.ts deleted file mode 100644 index 1248eae3..00000000 --- a/src/interfaces/meal.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface IMeal { - content: string; - cal: number; -} diff --git a/src/interfaces/mealList.interface.ts b/src/interfaces/mealList.interface.ts deleted file mode 100644 index 6e1e2966..00000000 --- a/src/interfaces/mealList.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import IMeal from "./meal.interface"; - -export default interface MealListType { - data: { - [meal: string]: IMeal; - }; - keys: Array<string>; -} diff --git a/src/interfaces/modal.interface.ts b/src/interfaces/modal.interface.ts deleted file mode 100644 index 89d26a67..00000000 --- a/src/interfaces/modal.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; - -export default interface IModalState { - component: React.ReactNode; - visible?: boolean; - menualClose?: boolean; - onClose?: () => void; -} diff --git a/src/interfaces/timetable.interface.ts b/src/interfaces/timetable.interface.ts deleted file mode 100644 index 96192cf5..00000000 --- a/src/interfaces/timetable.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { IClassInfo } from "@/interfaces"; - -export default interface ITimetable { - [day: string]: IClassInfo[]; -} diff --git a/src/interfaces/user.interface.ts b/src/interfaces/user.interface.ts deleted file mode 100644 index db851aaf..00000000 --- a/src/interfaces/user.interface.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default interface IUser { - isLogin: boolean; - id: number; - nickname: string; - email: string; - name: string; - profile_url: string; - profile_image: string; - authority: string; - role: string; - enroll: number; - grade: number; - classNum: number; - studentNumber: number; -} diff --git a/src/provider/layoutProvider.helper.tsx b/src/provider/layoutProvider.helper.tsx deleted file mode 100644 index 1b6e3472..00000000 --- a/src/provider/layoutProvider.helper.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Footer, Header, Modal } from "@/components/common"; -import { GlobalStyle, flex } from "@/styles"; -import React from "react"; -import { ToastContainer, toast } from "react-toastify"; -import styled from "styled-components"; -import "react-toastify/dist/ReactToastify.css"; - -const LayoutProvider = ({ children }: React.PropsWithChildren) => { - return ( - <> - <StyledToastify autoClose={1000} position={toast.POSITION.TOP_RIGHT} /> - <GlobalStyle /> - <Modal /> - <Layout> - <Header /> - <Main>{children}</Main> - <Footer /> - </Layout> - </> - ); -}; - -const StyledToastify = styled(ToastContainer)` - .Toastify__toast { - color: black; - font-size: 14px; - } -`; - -const Layout = styled.div` - ${flex.COLUMN}; - gap: 6vh; -`; - -const Main = styled.main` - display: flex; - gap: 14px; - width: 100%; - padding: 0 8vw; -`; - -export default LayoutProvider; diff --git a/src/provider/provider.helper.tsx b/src/provider/provider.helper.tsx deleted file mode 100644 index e50aad94..00000000 --- a/src/provider/provider.helper.tsx +++ /dev/null @@ -1,21 +0,0 @@ -"use client"; - -import React from "react"; -import { RecoilRoot } from "recoil"; -import ReactQueryProvider from "./reactQueryProvider.helper"; -import LayoutProvider from "./layoutProvider.helper"; -import StyledComponentsProvider from "./styledComponentsProvider.helper"; - -const Provider = ({ children }: React.PropsWithChildren) => { - return ( - <StyledComponentsProvider> - <ReactQueryProvider> - <RecoilRoot> - <LayoutProvider>{children}</LayoutProvider> - </RecoilRoot> - </ReactQueryProvider> - </StyledComponentsProvider> - ); -}; - -export default Provider; diff --git a/src/provider/reactQueryProvider.helper.tsx b/src/provider/reactQueryProvider.helper.tsx deleted file mode 100644 index 7d3e8257..00000000 --- a/src/provider/reactQueryProvider.helper.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; - -import throwAxiosError from "@/apis/error/throwAxiosError"; -import React from "react"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - suspense: false, - enabled: true, - retry: 0, - onError: (err) => throwAxiosError(err), - }, - }, -}); - -const ReactQueryProvider = ({ children }: React.PropsWithChildren) => { - return ( - <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> - ); -}; - -export default ReactQueryProvider; diff --git a/src/provider/styledComponentsProvider.helper.tsx b/src/provider/styledComponentsProvider.helper.tsx deleted file mode 100644 index fd28069b..00000000 --- a/src/provider/styledComponentsProvider.helper.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client"; - -import { useServerInsertedHTML } from "next/navigation"; -import type { ReactNode } from "react"; -import { useState } from "react"; -import { ServerStyleSheet, StyleSheetManager } from "styled-components"; - -interface Props { - children: ReactNode; -} - -const StyledComponentsRegistry = ({ children }: Props) => { - const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); - - useServerInsertedHTML(() => { - const styles = styledComponentsStyleSheet.getStyleElement(); - styledComponentsStyleSheet.instance.clearTag(); - // eslint-disable-next-line - return <>{styles}</>; - }); - - // eslint-disable-next-line - if (typeof window !== "undefined") return <>{children}</>; - - return ( - <StyleSheetManager sheet={styledComponentsStyleSheet.instance}> - {children} - </StyleSheetManager> - ); -}; - -export default StyledComponentsRegistry; diff --git a/src/store/aside.store.ts b/src/store/aside.store.ts deleted file mode 100644 index 4e1ff157..00000000 --- a/src/store/aside.store.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { IAside } from "@/interfaces"; -import { atom } from "recoil"; - -export const asideStore = atom<IAside>({ - key: "asideStore", - default: { - score: 0, - positivePoint: 0, - negativePoint: 0, - ranking: 0, - room: { - roomNumber: 0, - yearSemester: { - year: 0, - semester: 0, - }, - dormitoryType: "", - }, - isCheckin: false, - }, -}); diff --git a/src/store/bamboo.store.ts b/src/store/bamboo.store.ts deleted file mode 100644 index 81d02eec..00000000 --- a/src/store/bamboo.store.ts +++ /dev/null @@ -1,7 +0,0 @@ -import BAMBOO from "@/constants/bamboo.constant"; -import { atom } from "recoil"; - -export const bambooFilterStore = atom<string>({ - key: "bambooStore", - default: BAMBOO.PENDING.TYPE, -}); diff --git a/src/store/categories.store.ts b/src/store/categories.store.ts deleted file mode 100644 index 78ad2caa..00000000 --- a/src/store/categories.store.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { POST } from "@/constants"; -import { PostCategoryType } from "@/types"; -import { atom } from "recoil"; - -export const categoriesStore = atom<PostCategoryType>({ - key: "categoriesStore", - default: POST.COMMON, -}); diff --git a/src/store/domitory.store.ts b/src/store/domitory.store.ts deleted file mode 100644 index bfb33592..00000000 --- a/src/store/domitory.store.ts +++ /dev/null @@ -1,7 +0,0 @@ -import DOMITORY from "@/constants/domitory.constant"; -import { atom } from "recoil"; - -export const domitoryFilterStore = atom<string>({ - key: "domitoryFilterStore", - default: DOMITORY.NOT_JOINED.TYPE, -}); diff --git a/src/store/forumFilter.store.ts b/src/store/forumFilter.store.ts deleted file mode 100644 index ceee7ac2..00000000 --- a/src/store/forumFilter.store.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { FORUM } from "@/constants"; -import { atom } from "recoil"; - -export const forumFilterStore = atom<string>({ - key: "forumFilterStore", - default: FORUM.COMMON.TYPE, -}); diff --git a/src/store/modal.store.ts b/src/store/modal.store.ts deleted file mode 100644 index b2488ef0..00000000 --- a/src/store/modal.store.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { IModalState } from "@/interfaces"; -import { atom } from "recoil"; - -const modalStore = atom<IModalState>({ - key: "modalStore", - default: { - component: null, - visible: false, - }, -}); - -export default modalStore; diff --git a/src/store/room.store.ts b/src/store/room.store.ts deleted file mode 100644 index c942349e..00000000 --- a/src/store/room.store.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from "recoil"; - -export const roomStore = atom<number>({ - key: "roomStore", - default: 0, -}); diff --git a/src/store/user.store.ts b/src/store/user.store.ts deleted file mode 100644 index cb6cff38..00000000 --- a/src/store/user.store.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { IUser } from "@/interfaces"; -import { atom } from "recoil"; - -export const emptyUser: IUser = { - isLogin: false, - id: 0, - nickname: "", - email: "", - name: "", - profile_url: "", - profile_image: "", - authority: "", - role: "", - enroll: 0, - grade: 0, - classNum: 0, - studentNumber: 0, -}; - -export const userStore = atom<IUser>({ - key: "userStore", - default: emptyUser, -}); diff --git a/src/styles/color.ts b/src/styles/color.ts deleted file mode 100644 index 9ff064f6..00000000 --- a/src/styles/color.ts +++ /dev/null @@ -1,36 +0,0 @@ -const color = { - black: "#000000", - white: "#FFFFFF", - orange: "#FF763B", - red: "#F44336", - gray: "#727272", - blue: "#228CEA", - green: "#3CAD4E", - - background: "#F9FAFF", - - primary_red: "#E54F5A", - primary_blue: "#73AEE3", - primary_yellow: "#FEBC56", - primary_mint: "#27C3BC", - - tertiary: "#303441", - on_tertiary: "#E6E6E6", - container: "#F9FAFF", - content: "#D9D9D9", - shadow: "#505050", - light_gray: "#fafafa", - - meal_shadow: "#EDEDED", - meal_header: "#FCFCFC", - - emoji_hover: "#FFCC4D", - emoji_unhover: "#CFCFCF", - emoji_unhover_tertiary: "#AEAEAE", - emoji_cheek: "#FF7892", - - spider_first: "#FEA263", - spider_second: "#5E97C5", -}; - -export default color; diff --git a/src/styles/style.ts b/src/styles/style.ts deleted file mode 100644 index 6e97d5bf..00000000 --- a/src/styles/style.ts +++ /dev/null @@ -1,78 +0,0 @@ -"use client"; - -import { createGlobalStyle } from "styled-components"; -import color from "./color"; - -const GlobalStyle = createGlobalStyle` - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - :root { - @media screen and (min-width: 769px) and (max-width: 1025px) { - font-size: 80%; - } - - @media screen and (min-width: 541px) and (max-width: 768px) { - font-size: 70%; - } - - @media screen and (min-width: 301px) and (max-width: 540px) { - font-size: 60%; - } - - @media screen and (max-width: 300px) { - font-size: 50%; - } - } - - body { - background-color: ${color.background}; - } - - ul, - li { - list-style: none; - } - - p { - display: inline-block; - } - - a { - display: inline-block; - text-decoration: none; - color: inherit; - } - - label { - cursor: pointer; - } - - input, - textarea { - -moz-user-select: auto; - -webkit-user-select: auto; - -ms-user-select: auto; - user-select: auto; - border: none; - outline: none; - resize: none; - } - - input:focus { - outline: none; - } - - button { - outline: none; - border: none; - background: none; - padding: 0; - cursor: pointer; - } -`; - -export default GlobalStyle; diff --git a/src/templates/applications/assets/data/applicationList.ts b/src/templates/applications/assets/data/applicationList.ts deleted file mode 100644 index 56ed5908..00000000 --- a/src/templates/applications/assets/data/applicationList.ts +++ /dev/null @@ -1,43 +0,0 @@ -const applicationList = [ - { - name: "BSM Deploy", - href: "https://deploy.bssm.kro.kr", - content: - "부산소마고 재학생을 위한 웹사이트 배포 서비스입니다.\n그동안 배포하지 못했던 프로젝트를 무료로 배포해보세요!", - }, - { - name: "BSM Auth", - href: "https://auth.bssm.kro.kr/", - content: - "부산소마고 재학생들의 모든 정보를 관리하는 서비스입니다.\n학생들이 프로젝트를 만들 때 구현하기 버거운 로그인 기능 또한 OAuth를 지원하여 쉽게 도와줍니다.", - }, - { - name: "BSM Tetris", - href: "https://tetris.bssm.kro.kr/", - content: "부산소마고 재학생들이 이용할 수 있는 간단한 테트리스 게임입니다.", - }, - { - name: "BSSM Portfolio", - href: "https://portfolio.bssm.io/", - content: - "부산소마고 재학생들이 서비스하는 프로젝트들을 한 눈에 모아볼 수 있는 서비스입니다.", - }, - { - name: "부마위키", - href: "https://buma.wiki", - content: - "부산소마고 재학생들이 자유롭게 편집하고 기여할 수 있는 교내 위키 서비스입니다.", - }, - { - name: "BGIT", - href: "https://bgit.bssm.kro.kr/", - content: "부산소마고 재학생들의 깃허브와 백준 랭킹 서비스입니다.", - }, - { - name: "심청이", - href: "https://www.simblue.kro.kr/", - content: "학교에서 받는 모든 신청들을 한 번에 모아둔 서비스입니다.", - }, -]; - -export default applicationList; diff --git a/src/templates/applications/assets/icons/ArrowIcon.tsx b/src/templates/applications/assets/icons/ArrowIcon.tsx deleted file mode 100644 index cbde90a2..00000000 --- a/src/templates/applications/assets/icons/ArrowIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ArrowIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => { - return ( - <svg - {...props} - width={12} - height={22} - viewBox="0 0 41 41" - fill="none" - xmlns="http://www.w3.org/2000/svg" - cursor="pointer" - > - <path - d="M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z" - fill="#727272" - /> - </svg> - ); -}; - -export default ArrowIcon; diff --git a/src/templates/applications/assets/icons/index.ts b/src/templates/applications/assets/icons/index.ts deleted file mode 100644 index 5b300eb6..00000000 --- a/src/templates/applications/assets/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ArrowIcon } from "./ArrowIcon"; diff --git a/src/templates/bamboo/assets/icons/ModalCloseIcon.tsx b/src/templates/bamboo/assets/icons/ModalCloseIcon.tsx deleted file mode 100644 index 23c2263a..00000000 --- a/src/templates/bamboo/assets/icons/ModalCloseIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const ModalCloseIcon = ({ - ...props -}: React.SVGAttributes<HTMLOrSVGElement>) => { - return ( - <svg - width="14" - height="14" - {...props} - viewBox="0 0 9 9" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M1.04983 0.228055C1.1194 0.158391 1.20201 0.103125 1.29296 0.0654173C1.3839 0.0277098 1.48138 0.00830078 1.57983 0.00830078C1.67828 0.00830078 1.77577 0.0277098 1.86671 0.0654173C1.95765 0.103125 2.04027 0.158391 2.10983 0.228055L4.82983 2.94706L7.54983 0.228055C7.61943 0.158455 7.70206 0.103244 7.793 0.0655768C7.88394 0.0279092 7.9814 0.00852204 8.07983 0.00852203C8.17826 0.00852203 8.27573 0.0279092 8.36667 0.0655768C8.4576 0.103244 8.54023 0.158455 8.60983 0.228055C8.67943 0.297656 8.73464 0.380284 8.77231 0.471221C8.80998 0.562159 8.82937 0.659625 8.82937 0.758055C8.82937 0.856485 8.80998 0.953952 8.77231 1.04489C8.73464 1.13583 8.67943 1.21845 8.60983 1.28806L5.89083 4.00806L8.60983 6.72806C8.7504 6.86862 8.82937 7.05927 8.82937 7.25806C8.82937 7.45684 8.7504 7.64749 8.60983 7.78805C8.46927 7.92862 8.27862 8.00759 8.07983 8.00759C7.88104 8.00759 7.6904 7.92862 7.54983 7.78805L4.82983 5.06906L2.10983 7.78805C1.96927 7.92862 1.77862 8.00759 1.57983 8.00759C1.38104 8.00759 1.1904 7.92862 1.04983 7.78805C0.909268 7.64749 0.830299 7.45684 0.830299 7.25806C0.830299 7.05927 0.909268 6.86862 1.04983 6.72806L3.76883 4.00806L1.04983 1.28806C0.980168 1.21849 0.924902 1.13587 0.887195 1.04493C0.849487 0.953989 0.830078 0.856505 0.830078 0.758055C0.830078 0.659605 0.849487 0.562121 0.887195 0.471179C0.924902 0.380237 0.980168 0.29762 1.04983 0.228055Z" - fill="black" - /> - </svg> - ); -}; - -export default ModalCloseIcon; diff --git a/src/templates/bamboo/assets/icons/index.ts b/src/templates/bamboo/assets/icons/index.ts deleted file mode 100644 index a24573a1..00000000 --- a/src/templates/bamboo/assets/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ModalCloseIcon } from "./ModalCloseIcon"; diff --git a/src/templates/bamboo/interfaces/@props/bambooListItem.interface.ts b/src/templates/bamboo/interfaces/@props/bambooListItem.interface.ts deleted file mode 100644 index 2461b320..00000000 --- a/src/templates/bamboo/interfaces/@props/bambooListItem.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import BambooPostType from "../bambooPost.interface"; - -interface BambooPostListItemProps extends BambooPostType { - isAdmin: boolean; - isManageMode?: boolean; -} - -export default BambooPostListItemProps; diff --git a/src/templates/bamboo/interfaces/bambooPost.interface.ts b/src/templates/bamboo/interfaces/bambooPost.interface.ts deleted file mode 100644 index 9a96effe..00000000 --- a/src/templates/bamboo/interfaces/bambooPost.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface BambooPostType { - allowedId: number; - content: string; - createdAt: string; -} diff --git a/src/templates/bamboo/interfaces/index.ts b/src/templates/bamboo/interfaces/index.ts deleted file mode 100644 index bf11b8ec..00000000 --- a/src/templates/bamboo/interfaces/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type { default as BambooPostType } from "./bambooPost.interface"; -export type { default as BambooPostListItemProps } from "./@props/bambooListItem.interface"; diff --git a/src/templates/ber/assets/data/berReserveData.ts b/src/templates/ber/assets/data/berReserveData.ts deleted file mode 100644 index 5ae4706e..00000000 --- a/src/templates/ber/assets/data/berReserveData.ts +++ /dev/null @@ -1,22 +0,0 @@ -const berReserveData = { - reservedBerNumber: [], - berResList: [ - { - id: 0, - berNumber: 0, - reservation: "2000-03-01", - reservationUsersName: "", - user: { - id: 0, - name: "", - nickname: "", - profileImage: "", - grade: 0, - class_number: 0, - student_number: 0, - }, - }, - ], -}; - -export default berReserveData; diff --git a/src/templates/ber/assets/data/noticeRuleList.ts b/src/templates/ber/assets/data/noticeRuleList.ts deleted file mode 100644 index 794cdc6b..00000000 --- a/src/templates/ber/assets/data/noticeRuleList.ts +++ /dev/null @@ -1,8 +0,0 @@ -const noticeRuleList = [ - "1. 사용 가능 시간은 9시 10분부터 10시 20분까지입니다.", - "2. 너무 시끄럽게 떠들 경우 퇴실처리될 수 있습니다.", - "3. 퇴실시, 소지품을 잘 챙기고 정리정돈 및 청소를 하고 나와야 합니다.", - "4. 예약 후 노쇼나, 위의 사항들을 어길 경우 페널티가 발생할 수 있습니다.", -]; - -export default noticeRuleList; diff --git a/src/templates/ber/assets/icons/BerReserveCloseIcon.tsx b/src/templates/ber/assets/icons/BerReserveCloseIcon.tsx deleted file mode 100644 index 5f71e58d..00000000 --- a/src/templates/ber/assets/icons/BerReserveCloseIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -const BerReserveCloseIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => { - return ( - <svg - width="8" - height="8" - {...props} - viewBox="0 0 9 9" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M1.04983 0.228055C1.1194 0.158391 1.20201 0.103125 1.29296 0.0654173C1.3839 0.0277098 1.48138 0.00830078 1.57983 0.00830078C1.67828 0.00830078 1.77577 0.0277098 1.86671 0.0654173C1.95765 0.103125 2.04027 0.158391 2.10983 0.228055L4.82983 2.94706L7.54983 0.228055C7.61943 0.158455 7.70206 0.103244 7.793 0.0655768C7.88394 0.0279092 7.9814 0.00852204 8.07983 0.00852203C8.17826 0.00852203 8.27573 0.0279092 8.36667 0.0655768C8.4576 0.103244 8.54023 0.158455 8.60983 0.228055C8.67943 0.297656 8.73464 0.380284 8.77231 0.471221C8.80998 0.562159 8.82937 0.659625 8.82937 0.758055C8.82937 0.856485 8.80998 0.953952 8.77231 1.04489C8.73464 1.13583 8.67943 1.21845 8.60983 1.28806L5.89083 4.00806L8.60983 6.72806C8.7504 6.86862 8.82937 7.05927 8.82937 7.25806C8.82937 7.45684 8.7504 7.64749 8.60983 7.78805C8.46927 7.92862 8.27862 8.00759 8.07983 8.00759C7.88104 8.00759 7.6904 7.92862 7.54983 7.78805L4.82983 5.06906L2.10983 7.78805C1.96927 7.92862 1.77862 8.00759 1.57983 8.00759C1.38104 8.00759 1.1904 7.92862 1.04983 7.78805C0.909268 7.64749 0.830299 7.45684 0.830299 7.25806C0.830299 7.05927 0.909268 6.86862 1.04983 6.72806L3.76883 4.00806L1.04983 1.28806C0.980168 1.21849 0.924902 1.13587 0.887195 1.04493C0.849487 0.953989 0.830078 0.856505 0.830078 0.758055C0.830078 0.659605 0.849487 0.562121 0.887195 0.471179C0.924902 0.380237 0.980168 0.29762 1.04983 0.228055Z" - fill="black" - /> - </svg> - ); -}; - -export default BerReserveCloseIcon; diff --git a/src/templates/ber/assets/icons/index.ts b/src/templates/ber/assets/icons/index.ts deleted file mode 100644 index ef6259b0..00000000 --- a/src/templates/ber/assets/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as BerReserveCloseIcon } from "./BerReserveCloseIcon"; diff --git a/src/templates/ber/interfaces/@props/berReserveCheckBoxProps.interface.ts b/src/templates/ber/interfaces/@props/berReserveCheckBoxProps.interface.ts deleted file mode 100644 index 1ee43d76..00000000 --- a/src/templates/ber/interfaces/@props/berReserveCheckBoxProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface BerReserveCheckBoxProps { - isAgreeRule: boolean; - handleClick: () => void; -} diff --git a/src/templates/ber/interfaces/@props/berReserveJoinBoxProps.interface.ts b/src/templates/ber/interfaces/@props/berReserveJoinBoxProps.interface.ts deleted file mode 100644 index 3982604d..00000000 --- a/src/templates/ber/interfaces/@props/berReserveJoinBoxProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface BerReserveJoinBoxProps { - currentRoom: number; - setCurrentRoom: React.Dispatch<React.SetStateAction<number>>; - date: string; -} diff --git a/src/templates/ber/interfaces/@props/berReserveJoinHookprops.interface.ts b/src/templates/ber/interfaces/@props/berReserveJoinHookprops.interface.ts deleted file mode 100644 index f76db70c..00000000 --- a/src/templates/ber/interfaces/@props/berReserveJoinHookprops.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import BerReserveJoinBoxProps from "./berReserveJoinBoxProps.interface"; - -type BerReserveJoinHookProps = BerReserveJoinBoxProps; - -export default BerReserveJoinHookProps; diff --git a/src/templates/ber/interfaces/@props/berReserveListProps.interface.ts b/src/templates/ber/interfaces/@props/berReserveListProps.interface.ts deleted file mode 100644 index ca9970ef..00000000 --- a/src/templates/ber/interfaces/@props/berReserveListProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import BerReserve from "../berReserve.interface"; - -export default interface BerReserveListProps { - reserveList: Array<BerReserve>; -} diff --git a/src/templates/ber/interfaces/@props/berReserveMapProps.interface.ts b/src/templates/ber/interfaces/@props/berReserveMapProps.interface.ts deleted file mode 100644 index dc5d77ec..00000000 --- a/src/templates/ber/interfaces/@props/berReserveMapProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface BerReserveMapProps { - currentRoom: number; - reservedList: Array<number>; - handleClick: (roomNumber: number) => void; -} diff --git a/src/templates/ber/interfaces/@props/berReserveStudentListProps.interface.ts b/src/templates/ber/interfaces/@props/berReserveStudentListProps.interface.ts deleted file mode 100644 index fab59321..00000000 --- a/src/templates/ber/interfaces/@props/berReserveStudentListProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface BerReserveStudentListProps { - studentList: Array<string>; - handleClick: (student: string) => void; -} diff --git a/src/templates/ber/interfaces/berCreateReserveQuery.interface.ts b/src/templates/ber/interfaces/berCreateReserveQuery.interface.ts deleted file mode 100644 index 1acf89a2..00000000 --- a/src/templates/ber/interfaces/berCreateReserveQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface BerCreateReserveQuery { - berNumber: number; - reservationTime: string; - reservationUsersName: string; -} diff --git a/src/templates/ber/interfaces/berReserve.interface.ts b/src/templates/ber/interfaces/berReserve.interface.ts deleted file mode 100644 index 7eda0bfa..00000000 --- a/src/templates/ber/interfaces/berReserve.interface.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default interface BerReserve { - id: number; - berNumber: number; - reservation: string; - reservationUsersName: string; - user: { - id: number; - name: string; - nickname: string; - profileImage: string; - grade: number; - class_number: number; - student_number: number; - }; -} diff --git a/src/templates/ber/interfaces/berReserveQuery.interface.ts b/src/templates/ber/interfaces/berReserveQuery.interface.ts deleted file mode 100644 index d8e41827..00000000 --- a/src/templates/ber/interfaces/berReserveQuery.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import BerReserve from "./berReserve.interface"; - -export default interface BerReserveQuery { - reservedBerNumber: Array<number>; - berResList: Array<BerReserve>; -} diff --git a/src/templates/ber/interfaces/index.ts b/src/templates/ber/interfaces/index.ts deleted file mode 100644 index d8550896..00000000 --- a/src/templates/ber/interfaces/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type { default as BerReserve } from "./berReserve.interface"; -export type { default as BerReserveListProps } from "./@props/berReserveListProps.interface"; -export type { default as BerReserveQuery } from "./berReserveQuery.interface"; -export type { default as BerCreateReserveQuery } from "./berCreateReserveQuery.interface"; -export type { default as BerReserveMapProps } from "./@props/berReserveMapProps.interface"; -export type { default as BerReserveJoinBoxProps } from "./@props/berReserveJoinBoxProps.interface"; -export type { default as BerReserveJoinHookProps } from "./@props/berReserveJoinHookprops.interface"; -export type { default as BerReserveStudentListProps } from "./@props/berReserveStudentListProps.interface"; -export type { default as BerReserveCheckBoxProps } from "./@props/berReserveCheckBoxProps.interface"; diff --git a/src/templates/calendar/assets/data/defaultBannerData.ts b/src/templates/calendar/assets/data/defaultBannerData.ts deleted file mode 100644 index cdedb397..00000000 --- a/src/templates/calendar/assets/data/defaultBannerData.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as Banner from "@/assets/images"; - -const defaultBannerData = [ - { href: "https://buma.wiki", src: Banner.Banner1Image }, - { href: "https://jjoing-frontend.vercel.app", src: Banner.Banner2Image }, - { href: "https://dev.com", src: Banner.Banner3Image }, - { href: "https://google.com", src: Banner.Banner4Image }, -]; - -export default defaultBannerData; diff --git a/src/templates/calendar/assets/data/index.ts b/src/templates/calendar/assets/data/index.ts deleted file mode 100644 index c81be29d..00000000 --- a/src/templates/calendar/assets/data/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as defaultBannerData } from "./defaultBannerData"; diff --git a/src/templates/calendar/assets/icons/CalendarArrowIcon.tsx b/src/templates/calendar/assets/icons/CalendarArrowIcon.tsx deleted file mode 100644 index 22a556a7..00000000 --- a/src/templates/calendar/assets/icons/CalendarArrowIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { CalendarArrowDirectionType } from "../../types"; - -const PATH = { - RIGHT: - "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z", - LEFT: "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z", -}; - -interface MealArrowIconProps extends React.SVGProps<SVGSVGElement> { - direction: CalendarArrowDirectionType; -} - -const MealArrowIcon = ({ direction, ...props }: MealArrowIconProps) => { - return ( - <svg - {...props} - width="36" - height="38" - viewBox="0 0 41 41" - fill="none" - cursor="pointer" - xmlns="http://www.w3.org/2000/svg" - > - <path d={PATH[direction]} fill="#E6E6E6" /> - </svg> - ); -}; - -export default MealArrowIcon; diff --git a/src/templates/calendar/assets/icons/PlanModalCloseIcon.tsx b/src/templates/calendar/assets/icons/PlanModalCloseIcon.tsx deleted file mode 100644 index 1200560f..00000000 --- a/src/templates/calendar/assets/icons/PlanModalCloseIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const PlanModalCloseIcon = ({ - ...props -}: React.SVGAttributes<HTMLOrSVGElement>) => { - return ( - <svg - width="14" - height="14" - cursor="pointer" - {...props} - viewBox="0 0 9 9" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M1.04983 0.228055C1.1194 0.158391 1.20201 0.103125 1.29296 0.0654173C1.3839 0.0277098 1.48138 0.00830078 1.57983 0.00830078C1.67828 0.00830078 1.77577 0.0277098 1.86671 0.0654173C1.95765 0.103125 2.04027 0.158391 2.10983 0.228055L4.82983 2.94706L7.54983 0.228055C7.61943 0.158455 7.70206 0.103244 7.793 0.0655768C7.88394 0.0279092 7.9814 0.00852204 8.07983 0.00852203C8.17826 0.00852203 8.27573 0.0279092 8.36667 0.0655768C8.4576 0.103244 8.54023 0.158455 8.60983 0.228055C8.67943 0.297656 8.73464 0.380284 8.77231 0.471221C8.80998 0.562159 8.82937 0.659625 8.82937 0.758055C8.82937 0.856485 8.80998 0.953952 8.77231 1.04489C8.73464 1.13583 8.67943 1.21845 8.60983 1.28806L5.89083 4.00806L8.60983 6.72806C8.7504 6.86862 8.82937 7.05927 8.82937 7.25806C8.82937 7.45684 8.7504 7.64749 8.60983 7.78805C8.46927 7.92862 8.27862 8.00759 8.07983 8.00759C7.88104 8.00759 7.6904 7.92862 7.54983 7.78805L4.82983 5.06906L2.10983 7.78805C1.96927 7.92862 1.77862 8.00759 1.57983 8.00759C1.38104 8.00759 1.1904 7.92862 1.04983 7.78805C0.909268 7.64749 0.830299 7.45684 0.830299 7.25806C0.830299 7.05927 0.909268 6.86862 1.04983 6.72806L3.76883 4.00806L1.04983 1.28806C0.980168 1.21849 0.924902 1.13587 0.887195 1.04493C0.849487 0.953989 0.830078 0.856505 0.830078 0.758055C0.830078 0.659605 0.849487 0.562121 0.887195 0.471179C0.924902 0.380237 0.980168 0.29762 1.04983 0.228055Z" - fill="black" - /> - </svg> - ); -}; - -export default PlanModalCloseIcon; diff --git a/src/templates/calendar/assets/icons/index.ts b/src/templates/calendar/assets/icons/index.ts deleted file mode 100644 index 01114e7a..00000000 --- a/src/templates/calendar/assets/icons/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as PlanModalCloseIcon } from "./PlanModalCloseIcon"; -export { default as CalendarArrowIcon } from "./CalendarArrowIcon"; diff --git a/src/templates/calendar/interfaces/@props/calendarArrowIconProps.interface.ts b/src/templates/calendar/interfaces/@props/calendarArrowIconProps.interface.ts deleted file mode 100644 index 7d69725e..00000000 --- a/src/templates/calendar/interfaces/@props/calendarArrowIconProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { CalendarArrowDirectionType } from "../../types"; - -export default interface CalendarArrowIconProps - extends React.SVGProps<SVGSVGElement> { - direction: CalendarArrowDirectionType; -} diff --git a/src/templates/calendar/interfaces/@props/calendarListItemProps.interface.ts b/src/templates/calendar/interfaces/@props/calendarListItemProps.interface.ts deleted file mode 100644 index 097a1da8..00000000 --- a/src/templates/calendar/interfaces/@props/calendarListItemProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import CalendarItem from "../calendarItem.interface"; - -export default interface CalendarListItemProps { - calendar?: CalendarItem; - isEmpty?: boolean; -} diff --git a/src/templates/calendar/interfaces/@props/calendarPlanAddModalProps.interface.ts b/src/templates/calendar/interfaces/@props/calendarPlanAddModalProps.interface.ts deleted file mode 100644 index 93e2923c..00000000 --- a/src/templates/calendar/interfaces/@props/calendarPlanAddModalProps.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface CalendarPlanAddModalProps { - date: string; -} diff --git a/src/templates/calendar/interfaces/@props/calendarPlanAddQuery.interface.ts b/src/templates/calendar/interfaces/@props/calendarPlanAddQuery.interface.ts deleted file mode 100644 index 314e2dd3..00000000 --- a/src/templates/calendar/interfaces/@props/calendarPlanAddQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface CalendarPlanAddQuery { - title: string; - date: string; - planType: string; -} diff --git a/src/templates/calendar/interfaces/calendar.interface.ts b/src/templates/calendar/interfaces/calendar.interface.ts deleted file mode 100644 index 862ccd2c..00000000 --- a/src/templates/calendar/interfaces/calendar.interface.ts +++ /dev/null @@ -1,9 +0,0 @@ -export default interface Calendar { - title: string; - priority: number; - date: string; - color: string; - type: string; - grade: number; - classNumber: number; -} diff --git a/src/templates/calendar/interfaces/calendarItem.interface.ts b/src/templates/calendar/interfaces/calendarItem.interface.ts deleted file mode 100644 index daad041e..00000000 --- a/src/templates/calendar/interfaces/calendarItem.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import CalendarPlan from "./calendarPlan.interface"; - -export default interface CalendarItem { - date: string; - plans: Array<CalendarPlan>; -} diff --git a/src/templates/calendar/interfaces/calendarPlan.interface.ts b/src/templates/calendar/interfaces/calendarPlan.interface.ts deleted file mode 100644 index 2a7da9bc..00000000 --- a/src/templates/calendar/interfaces/calendarPlan.interface.ts +++ /dev/null @@ -1,11 +0,0 @@ -import Calendar from "./calendar.interface"; - -export default interface CalendarPlan extends Calendar { - id: number; - type: string; - user: { - id: number; - nickName: string; - profileImage: string; - }; -} diff --git a/src/templates/calendar/interfaces/index.ts b/src/templates/calendar/interfaces/index.ts deleted file mode 100644 index 2addbdde..00000000 --- a/src/templates/calendar/interfaces/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type { default as CalendarArrowIconProps } from "./@props/calendarArrowIconProps.interface"; -export type { default as CalendarListItemProps } from "./@props/calendarListItemProps.interface"; -export type { default as CalendarPlanAddModalProps } from "./@props/calendarPlanAddModalProps.interface"; -export type { default as CalendarItem } from "./calendarItem.interface"; -export type { default as Calendar } from "./calendar.interface"; -export type { default as CalendarPlan } from "./calendarPlan.interface"; -export type { default as CalendarPlanAddQuery } from "./@props/calendarPlanAddQuery.interface"; diff --git a/src/templates/calendar/types/changeDate.type.ts b/src/templates/calendar/types/changeDate.type.ts deleted file mode 100644 index 40279e94..00000000 --- a/src/templates/calendar/types/changeDate.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -type ChangeDateType = "INCREASE" | "DECREASE"; - -export default ChangeDateType; diff --git a/src/templates/home/assets/data/defaultBannerData.ts b/src/templates/home/assets/data/defaultBannerData.ts deleted file mode 100644 index cdedb397..00000000 --- a/src/templates/home/assets/data/defaultBannerData.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as Banner from "@/assets/images"; - -const defaultBannerData = [ - { href: "https://buma.wiki", src: Banner.Banner1Image }, - { href: "https://jjoing-frontend.vercel.app", src: Banner.Banner2Image }, - { href: "https://dev.com", src: Banner.Banner3Image }, - { href: "https://google.com", src: Banner.Banner4Image }, -]; - -export default defaultBannerData; diff --git a/src/templates/meal/assets/data/MealArrowIcon.tsx b/src/templates/meal/assets/data/MealArrowIcon.tsx deleted file mode 100644 index 2e4eb2c5..00000000 --- a/src/templates/meal/assets/data/MealArrowIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { MealArrowIconProps } from "../../interfaces"; - -const PATH = { - RIGHT: - "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z", - LEFT: "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z", -}; - -const MealArrowIcon = ({ direction, ...props }: MealArrowIconProps) => { - return ( - <svg - {...props} - width="36" - height="38" - viewBox="0 0 41 41" - fill="none" - cursor="pointer" - xmlns="http://www.w3.org/2000/svg" - > - <path d={PATH[direction]} fill="#E6E6E6" /> - </svg> - ); -}; - -export default MealArrowIcon; diff --git a/src/templates/meal/interfaces/@props/mealArrowIconProps.interface.ts b/src/templates/meal/interfaces/@props/mealArrowIconProps.interface.ts deleted file mode 100644 index 14e9cf0b..00000000 --- a/src/templates/meal/interfaces/@props/mealArrowIconProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { MealArrowDirectionType } from "../../types"; - -export default interface MealArrowIconProps - extends React.SVGProps<SVGSVGElement> { - direction: MealArrowDirectionType; -} diff --git a/src/templates/meal/interfaces/@props/mealListItemProps.interface.ts b/src/templates/meal/interfaces/@props/mealListItemProps.interface.ts deleted file mode 100644 index e44a5378..00000000 --- a/src/templates/meal/interfaces/@props/mealListItemProps.interface.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default interface MealListItemProps { - mealName: string; - meal: { - content: string; - cal: number; - }; -} diff --git a/src/templates/meal/interfaces/index.ts b/src/templates/meal/interfaces/index.ts deleted file mode 100644 index e79aa45c..00000000 --- a/src/templates/meal/interfaces/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type { default as MealArrowIconProps } from "./@props/mealArrowIconProps.interface"; -export type { default as MealListItemProps } from "./@props/mealListItemProps.interface"; diff --git a/src/templates/meal/types/changeDate.type.ts b/src/templates/meal/types/changeDate.type.ts deleted file mode 100644 index 40279e94..00000000 --- a/src/templates/meal/types/changeDate.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -type ChangeDateType = "INCREASE" | "DECREASE"; - -export default ChangeDateType; diff --git a/src/templates/meal/types/index.ts b/src/templates/meal/types/index.ts deleted file mode 100644 index c5960637..00000000 --- a/src/templates/meal/types/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type { default as MealArrowDirectionType } from "./mealArrowDirection.type"; -export type { default as ChangeDateType } from "./changeDate.type"; diff --git a/src/templates/meal/types/mealArrowDirection.type.ts b/src/templates/meal/types/mealArrowDirection.type.ts deleted file mode 100644 index 6a666345..00000000 --- a/src/templates/meal/types/mealArrowDirection.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -type MealArrowDirectionType = "RIGHT" | "LEFT"; - -export default MealArrowDirectionType; diff --git a/src/templates/meister/assets/data/graphColorData.ts b/src/templates/meister/assets/data/graphColorData.ts deleted file mode 100644 index 9d2a4513..00000000 --- a/src/templates/meister/assets/data/graphColorData.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { color } from "@/styles"; -import { SCORE } from "../../constants"; - -const graphColorData = { - [SCORE.AVG]: color.primary_yellow, - [SCORE.MY]: color.primary_blue, - [SCORE.MAX]: color.primary_red, -}; - -export default graphColorData; diff --git a/src/templates/meister/assets/data/meisterChartData.ts b/src/templates/meister/assets/data/meisterChartData.ts deleted file mode 100644 index fb29e00a..00000000 --- a/src/templates/meister/assets/data/meisterChartData.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { MEISTER, SCORE } from "../../constants"; -import { MeisterChartData } from "../../interfaces"; - -const meisterChartData: Array<MeisterChartData> = [ - { group: MEISTER.직업기초능력, scoreType: SCORE.AVG }, - { group: MEISTER.직업기초능력, scoreType: SCORE.MY }, - { group: MEISTER.직업기초능력, scoreType: SCORE.MAX }, - - { group: MEISTER.전문기술역량, scoreType: SCORE.AVG }, - { group: MEISTER.전문기술역량, scoreType: SCORE.MY }, - { group: MEISTER.전문기술역량, scoreType: SCORE.MAX }, - - { group: MEISTER.인성직업의식, scoreType: SCORE.AVG }, - { group: MEISTER.인성직업의식, scoreType: SCORE.MY }, - { group: MEISTER.인성직업의식, scoreType: SCORE.MAX }, - - { group: MEISTER.인문학적소양, scoreType: SCORE.AVG }, - { group: MEISTER.인문학적소양, scoreType: SCORE.MY }, - { group: MEISTER.인문학적소양, scoreType: SCORE.MAX }, - - { group: MEISTER.외국어능력, scoreType: SCORE.AVG }, - { group: MEISTER.외국어능력, scoreType: SCORE.MY }, - { group: MEISTER.외국어능력, scoreType: SCORE.MAX }, -]; - -export default meisterChartData; diff --git a/src/templates/meister/assets/data/meisterDefaultData.ts b/src/templates/meister/assets/data/meisterDefaultData.ts deleted file mode 100644 index 10c5c94f..00000000 --- a/src/templates/meister/assets/data/meisterDefaultData.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Meister } from "../../interfaces"; - -const meisterDefaultData: Meister = { - meister: { - score: 0, - positivePoint: 0, - negativePoint: 0, - lastUpdate: "2000-03-01T00:00:00.000000", - loginError: false, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - }, - avg: { - score: 0, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - positivePoint: 0, - negativePoint: 0, - }, - max: { - score: 0, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - positivePoint: 0, - negativePoint: 0, - }, -}; - -export default meisterDefaultData; diff --git a/src/templates/meister/assets/data/meisterDetailDefaultData.ts b/src/templates/meister/assets/data/meisterDetailDefaultData.ts deleted file mode 100644 index a3521299..00000000 --- a/src/templates/meister/assets/data/meisterDetailDefaultData.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { MeisterDetail } from "../../interfaces"; - -const meisterDetailDefaultData: MeisterDetail = { - meister: { - score: 0, - pointHtmlContent: "", - scoreHtmlContent: "", - positivePoint: 0, - negativePoint: 0, - lastUpdate: "2000-03-01T00:00:00.000000", - loginError: false, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - }, - avg: { - score: 0, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - positivePoint: 0, - negativePoint: 0, - }, - max: { - score: 0, - basicJobSkills: 0, - professionalTech: 0, - workEthic: 0, - humanities: 0, - foreignScore: 0, - positivePoint: 0, - negativePoint: 0, - }, -}; - -export default meisterDetailDefaultData; diff --git a/src/templates/meister/assets/data/meisterListData.ts b/src/templates/meister/assets/data/meisterListData.ts deleted file mode 100644 index 86a5e91c..00000000 --- a/src/templates/meister/assets/data/meisterListData.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { color } from "@/styles"; -import { MeisterKeyType } from "../../types"; -import { MEISTER } from "../../constants"; - -const meisterListData: Array<{ - name: MeisterKeyType; - color: string; -}> = [ - { name: MEISTER.전문기술역량, color: color.primary_mint }, - { name: MEISTER.인성직업의식, color: color.primary_red }, - { name: MEISTER.인문학적소양, color: color.primary_yellow }, - { name: MEISTER.외국어능력, color: color.primary_blue }, -]; - -export default meisterListData; diff --git a/src/templates/meister/assets/data/meisterVariables.ts b/src/templates/meister/assets/data/meisterVariables.ts deleted file mode 100644 index 9b5dcb2e..00000000 --- a/src/templates/meister/assets/data/meisterVariables.ts +++ /dev/null @@ -1,9 +0,0 @@ -const meisterVariables = [ - "직업 기초 능력", - "전문 기술 역량", - "인성 직업 의식", - "인문학적 소양", - "외국어 능력", -]; - -export default meisterVariables; diff --git a/src/templates/meister/assets/data/radarChartVariables.ts b/src/templates/meister/assets/data/radarChartVariables.ts deleted file mode 100644 index 00b6001f..00000000 --- a/src/templates/meister/assets/data/radarChartVariables.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { MEISTER } from "../../constants"; - -const radarChartVariables = [ - { key: MEISTER.직업기초능력, label: "직업기초능력" }, - { key: MEISTER.전문기술역량, label: "전문기술역량" }, - { key: MEISTER.인성직업의식, label: "인성/직업의식" }, - { key: MEISTER.인문학적소양, label: "인문학적 소양" }, - { key: MEISTER.외국어능력, label: "외국어 능력" }, -]; - -export default radarChartVariables; diff --git a/src/templates/meister/assets/data/timetableDefaultData.ts b/src/templates/meister/assets/data/timetableDefaultData.ts deleted file mode 100644 index 437793aa..00000000 --- a/src/templates/meister/assets/data/timetableDefaultData.ts +++ /dev/null @@ -1,11 +0,0 @@ -const timetableDefaultData: Record<string, [{ subject: string }]> = { - SUNDAY: [{ subject: "" }], - FRIDAY: [{ subject: "" }], - SATURDAY: [{ subject: "" }], - TUESDAY: [{ subject: "" }], - THURSDAY: [{ subject: "" }], - MONDAY: [{ subject: "" }], - WEDNESDAY: [{ subject: "" }], -}; - -export default timetableDefaultData; diff --git a/src/templates/meister/interfaces/@props/circularProgressBoxProps.interface.ts b/src/templates/meister/interfaces/@props/circularProgressBoxProps.interface.ts deleted file mode 100644 index 2676335c..00000000 --- a/src/templates/meister/interfaces/@props/circularProgressBoxProps.interface.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default interface CircularProgressBoxProps { - chapter: string; - score: string; - statusColor: string; - value: number; - text: string; -} diff --git a/src/templates/meister/interfaces/index.ts b/src/templates/meister/interfaces/index.ts deleted file mode 100644 index 6664f560..00000000 --- a/src/templates/meister/interfaces/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type { default as CircularProgressBoxProps } from "./@props/circularProgressBoxProps.interface"; -export type { default as Meister } from "./meister.interface"; -export type { default as MeisterChartData } from "./meisterChartData.interface"; -export type { default as MeisterDetail } from "./meisterDetail.interface"; diff --git a/src/templates/meister/interfaces/meister.interface.ts b/src/templates/meister/interfaces/meister.interface.ts deleted file mode 100644 index 2bec67a7..00000000 --- a/src/templates/meister/interfaces/meister.interface.ts +++ /dev/null @@ -1,34 +0,0 @@ -export default interface Meister { - meister: { - score: number; - positivePoint: number; - negativePoint: number; - lastUpdate: string; - loginError: boolean; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - }; - avg: { - score: number; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - positivePoint: number; - negativePoint: number; - }; - max: { - score: number; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - positivePoint: number; - negativePoint: number; - }; -} diff --git a/src/templates/meister/interfaces/meisterChartData.interface.ts b/src/templates/meister/interfaces/meisterChartData.interface.ts deleted file mode 100644 index 5c1dc303..00000000 --- a/src/templates/meister/interfaces/meisterChartData.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { MeisterKeyType, MeisterScoreType } from "../types"; - -export default interface MeisterChartData { - group: MeisterKeyType; - scoreType: MeisterScoreType; -} diff --git a/src/templates/meister/interfaces/meisterDetail.interface.ts b/src/templates/meister/interfaces/meisterDetail.interface.ts deleted file mode 100644 index 1a57a827..00000000 --- a/src/templates/meister/interfaces/meisterDetail.interface.ts +++ /dev/null @@ -1,36 +0,0 @@ -export default interface MeisterDetail { - meister: { - scoreHtmlContent: string; - pointHtmlContent: string; - score: number; - positivePoint: number; - negativePoint: number; - lastUpdate: string; - loginError: boolean; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - }; - avg: { - score: number; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - positivePoint: number; - negativePoint: number; - }; - max: { - score: number; - basicJobSkills: number; - professionalTech: number; - workEthic: number; - humanities: number; - foreignScore: number; - positivePoint: number; - negativePoint: number; - }; -} diff --git a/src/templates/post/assets/data/categoryList.ts b/src/templates/post/assets/data/categoryList.ts deleted file mode 100644 index 0e50158f..00000000 --- a/src/templates/post/assets/data/categoryList.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CATEGORY } from "../../constants"; - -const categoryList = [ - CATEGORY.COMMON, - CATEGORY.NOTICE, - CATEGORY.PROJECT, - CATEGORY.CODE_REVIEW, - CATEGORY.FOUND, - CATEGORY.LOST, -]; - -export default categoryList; diff --git a/src/templates/post/assets/data/dateTime.ts b/src/templates/post/assets/data/dateTime.ts deleted file mode 100644 index 59eeb37d..00000000 --- a/src/templates/post/assets/data/dateTime.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { POST_INPUT } from "../../constants"; - -const dateTime: Array<{ - label: string; - name: string; - dataName: "startTime" | "endTime"; -}> = [ - { - label: "시작 날짜", - name: POST_INPUT.START_TIME, - dataName: "startTime", - }, - { - label: "마감 날짜", - name: POST_INPUT.END_TIME, - dataName: "endTime", - }, -]; - -export default dateTime; diff --git a/src/templates/post/assets/data/defaultPostData.ts b/src/templates/post/assets/data/defaultPostData.ts deleted file mode 100644 index 5ca88c42..00000000 --- a/src/templates/post/assets/data/defaultPostData.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { CATEGORY } from "../../constants"; -import { Post } from "../../interfaces"; - -const defaultPostData: Post = { - id: "", - title: "", - category: CATEGORY.COMMON, - content: "", - prUrl: "", - isFinished: false, - lostThingImage: "", - place: "", - keepingPlace: "", - startTime: "", - endTime: "", - field: "", - user: { - id: -1, - nickName: "", - profileImage: "", - }, - createdAt: "", - likeCount: 0, - commentCount: 0, - doesLike: false, -}; - -export default defaultPostData; diff --git a/src/templates/post/interfaces/@props/commentContentBoxProps.interface.ts b/src/templates/post/interfaces/@props/commentContentBoxProps.interface.ts deleted file mode 100644 index 53d62605..00000000 --- a/src/templates/post/interfaces/@props/commentContentBoxProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default interface CommentContentBoxProps { - isDetailMode: boolean; - handleDetailModeChange: () => void; - content: string; - commentInput: string; -} diff --git a/src/templates/post/interfaces/@props/commentLikeInformationBoxProps.interface.ts b/src/templates/post/interfaces/@props/commentLikeInformationBoxProps.interface.ts deleted file mode 100644 index 79bdaa6d..00000000 --- a/src/templates/post/interfaces/@props/commentLikeInformationBoxProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Comment from "../comment.interface"; - -export default interface CommentLikeInformationBoxProps { - handleRecommentWriteModeChange: () => void; - comment: Comment; -} diff --git a/src/templates/post/interfaces/@props/commentListItemProps.interface.ts b/src/templates/post/interfaces/@props/commentListItemProps.interface.ts deleted file mode 100644 index 896ee782..00000000 --- a/src/templates/post/interfaces/@props/commentListItemProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Comment from "../comment.interface"; - -export default interface CommentListItemProps { - comment: Comment; -} diff --git a/src/templates/post/interfaces/@props/commentQueryProps.interface.ts b/src/templates/post/interfaces/@props/commentQueryProps.interface.ts deleted file mode 100644 index 1f62e515..00000000 --- a/src/templates/post/interfaces/@props/commentQueryProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface CommentQueryProps { - detail: string; - id: number; -} diff --git a/src/templates/post/interfaces/@props/createRecommentBoxProps.interface.ts b/src/templates/post/interfaces/@props/createRecommentBoxProps.interface.ts deleted file mode 100644 index 44abb709..00000000 --- a/src/templates/post/interfaces/@props/createRecommentBoxProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface CreateRecommentBoxProps { - handleModeCancelClick: () => void; - id: number; -} diff --git a/src/templates/post/interfaces/@props/getCommentListProps.interface.ts b/src/templates/post/interfaces/@props/getCommentListProps.interface.ts deleted file mode 100644 index 790e29a2..00000000 --- a/src/templates/post/interfaces/@props/getCommentListProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface GetCommentListProps { - id: number; - pageParam: number; -} diff --git a/src/templates/post/interfaces/@props/getPostListProps.interface.ts b/src/templates/post/interfaces/@props/getPostListProps.interface.ts deleted file mode 100644 index 56b94757..00000000 --- a/src/templates/post/interfaces/@props/getPostListProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface GetPostListProps { - category: string; - page: number; -} diff --git a/src/templates/post/interfaces/@props/likeIconProps.interface.ts b/src/templates/post/interfaces/@props/likeIconProps.interface.ts deleted file mode 100644 index 7acdd45f..00000000 --- a/src/templates/post/interfaces/@props/likeIconProps.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface LikeIconProps extends React.SVGProps<SVGSVGElement> { - isLiked: boolean; -} diff --git a/src/templates/post/interfaces/@props/postCategoryBoxProps.interface.ts b/src/templates/post/interfaces/@props/postCategoryBoxProps.interface.ts deleted file mode 100644 index 0e69eac6..00000000 --- a/src/templates/post/interfaces/@props/postCategoryBoxProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PostCategoryType } from "../../types"; - -export default interface PostCategoryBoxProps { - handleChangeCategory: (e: React.ChangeEvent<HTMLInputElement>) => void; - currentCategory: PostCategoryType; -} diff --git a/src/templates/post/interfaces/@props/postCategoryInputBoxProps.interface.ts b/src/templates/post/interfaces/@props/postCategoryInputBoxProps.interface.ts deleted file mode 100644 index 8fcadd3a..00000000 --- a/src/templates/post/interfaces/@props/postCategoryInputBoxProps.interface.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Post from "../post.interface"; - -export default interface PostCategoryInputBoxProps { - handleChange: ( - eventOrContent?: string | React.ChangeEvent<HTMLInputElement>, - ) => void; - postData: Post; - lostImageUrl?: undefined; - handleFileSelect?: (file?: File) => Promise<void>; -} diff --git a/src/templates/post/interfaces/@props/postCommentProps.interface.ts b/src/templates/post/interfaces/@props/postCommentProps.interface.ts deleted file mode 100644 index bf048be3..00000000 --- a/src/templates/post/interfaces/@props/postCommentProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface PostCommentProps { - id: number; - detail: string; -} diff --git a/src/templates/post/interfaces/@props/postCountBoxProps.interface.ts b/src/templates/post/interfaces/@props/postCountBoxProps.interface.ts deleted file mode 100644 index 8ddc47d0..00000000 --- a/src/templates/post/interfaces/@props/postCountBoxProps.interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default interface PostCountBoxProps { - commentCount: number; - likeCount: number; - doesLike: boolean; - id: string; -} diff --git a/src/templates/post/interfaces/@props/postDetailParamsProps.interface.ts b/src/templates/post/interfaces/@props/postDetailParamsProps.interface.ts deleted file mode 100644 index ecac0089..00000000 --- a/src/templates/post/interfaces/@props/postDetailParamsProps.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface PostDetailParamsProps { - id: number; -} diff --git a/src/templates/post/interfaces/@props/postListItemInformationBarProps.interface.ts b/src/templates/post/interfaces/@props/postListItemInformationBarProps.interface.ts deleted file mode 100644 index 85b9d57d..00000000 --- a/src/templates/post/interfaces/@props/postListItemInformationBarProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface PostListItemInformationBarProps { - likeCount: number; - commentCount: number; - createdAt: string; -} diff --git a/src/templates/post/interfaces/@props/postProps.interface.ts b/src/templates/post/interfaces/@props/postProps.interface.ts deleted file mode 100644 index 849c03a3..00000000 --- a/src/templates/post/interfaces/@props/postProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Post from "../post.interface"; - -export default interface PostProps { - post: Post; -} diff --git a/src/templates/post/interfaces/@props/postSectionBoxProps.interface.ts b/src/templates/post/interfaces/@props/postSectionBoxProps.interface.ts deleted file mode 100644 index 9bf14a86..00000000 --- a/src/templates/post/interfaces/@props/postSectionBoxProps.interface.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default interface PostSectionBoxProps { - title: string; - content?: string; - startTime?: string; - endTime?: string; - isProjectDate?: boolean; - isContent?: boolean; - isUrl?: boolean; - isDefault?: boolean; - isImage?: boolean; -} diff --git a/src/templates/post/interfaces/@props/recommentViewButtonProps.interface.ts b/src/templates/post/interfaces/@props/recommentViewButtonProps.interface.ts deleted file mode 100644 index 411f231f..00000000 --- a/src/templates/post/interfaces/@props/recommentViewButtonProps.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface RecommentViewButtonProps { - handleViewRecommentModeChange: () => void; - isViewRecommentMode: boolean; - recommentCount: number; -} diff --git a/src/templates/post/interfaces/@props/useLikeProps.interface.ts b/src/templates/post/interfaces/@props/useLikeProps.interface.ts deleted file mode 100644 index 7a52cfd8..00000000 --- a/src/templates/post/interfaces/@props/useLikeProps.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default interface UseLikeProps { - doesLike: boolean; - likeCount: number; -} diff --git a/src/templates/post/interfaces/comment.interface.ts b/src/templates/post/interfaces/comment.interface.ts deleted file mode 100644 index b1c65e82..00000000 --- a/src/templates/post/interfaces/comment.interface.ts +++ /dev/null @@ -1,14 +0,0 @@ -export default interface Comment { - id: number; - detail: string; - reCommentCount: number; - postId: number; - likeCount: number; - createdAt: string; - doesLike: boolean; - user: { - id: number; - nickName: string; - profileImage: string; - }; -} diff --git a/src/templates/post/interfaces/index.ts b/src/templates/post/interfaces/index.ts deleted file mode 100644 index 3c8f40c8..00000000 --- a/src/templates/post/interfaces/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -export type { default as PostListProperty } from "./postListProperty.type"; -export type { default as PostListQuery } from "./postListQuery.interface"; -export type { default as PostListQueryProperty } from "./postListQueryProperty.interface"; -export type { default as Post } from "./post.interface"; -export type { default as GetPostListProps } from "./@props/getPostListProps.interface"; -export type { default as PostListItemInformationBarProps } from "./@props/postListItemInformationBarProps.interface"; -export type { default as PostQuery } from "./postQuery.interface"; -export type { default as PostData } from "./postData.interface"; -export type { default as PostCategoryInputBoxProps } from "./@props/postCategoryInputBoxProps.interface"; -export type { default as PostCategoryBoxProps } from "./@props/postCategoryBoxProps.interface"; -export type { default as PostCommentProps } from "./@props/postCommentProps.interface"; -export type { default as GetCommentListProps } from "./@props/getCommentListProps.interface"; -export type { default as PostUpdateQuery } from "./postUpdateQuery.interface"; -export type { default as PostCreateQuery } from "./postCreateQuery.interface"; -export type { default as PostDetailParamsProps } from "./@props/postDetailParamsProps.interface"; -export type { default as PostProps } from "./@props/postProps.interface"; -export type { default as PostSectionBoxProps } from "./@props/postSectionBoxProps.interface"; -export type { default as LikeIconProps } from "./@props/likeIconProps.interface"; -export type { default as PostCountBoxProps } from "./@props/postCountBoxProps.interface"; -export type { default as UseLikeProps } from "./@props/useLikeProps.interface"; -export type { default as Comment } from "./comment.interface"; -export type { default as CommentQueryProps } from "./@props/commentQueryProps.interface"; -export type { default as CommentListItemProps } from "./@props/commentListItemProps.interface"; -export type { default as CommentContentBoxProps } from "./@props/commentContentBoxProps.interface"; -export type { default as RecommentViewButtonProps } from "./@props/recommentViewButtonProps.interface"; -export type { default as CommentLikeInformationBoxProps } from "./@props/commentLikeInformationBoxProps.interface"; -export type { default as CreateRecommentBoxProps } from "./@props/createRecommentBoxProps.interface"; -export type { defualt as Recomment } from "./recomment.interface"; diff --git a/src/templates/post/interfaces/post.interface.ts b/src/templates/post/interfaces/post.interface.ts deleted file mode 100644 index f607322e..00000000 --- a/src/templates/post/interfaces/post.interface.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { PostCategoryType } from "../types"; - -export default interface Post { - id: string; - title: string; - content: string; - user: { - id: number; - nickName: string; - profileImage: string; - }; - category: PostCategoryType; - createdAt: string; - likeCount: number; - commentCount: number; - doesLike: boolean; - - // POST.PROJECT - startTime?: string; - endTime?: string; - field?: string; - - // POST.CODE_REVIEW - prUrl?: string; - isFinished?: boolean; - - // POST.LOST & POST.FOUND - lostThingImage?: string; - place?: string; - foundUser?: { - id: number; - nickName: string; - }; - - // POST.FOUND - keepingPlace?: string; -} diff --git a/src/templates/post/interfaces/postCreateQuery.interface.ts b/src/templates/post/interfaces/postCreateQuery.interface.ts deleted file mode 100644 index 0f76de05..00000000 --- a/src/templates/post/interfaces/postCreateQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface PostCreateQuery { - create: { - id: number; - }; -} diff --git a/src/templates/post/interfaces/postData.interface.ts b/src/templates/post/interfaces/postData.interface.ts deleted file mode 100644 index 12e78168..00000000 --- a/src/templates/post/interfaces/postData.interface.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { PostCategoryType } from "../types"; - -export default interface PostData { - id: string; - title: string; - category: PostCategoryType; - content: string; - prUrl: string; - isFinished: boolean; - lostThingImage: string; - place: string; - keepingPlace: string; - startTime: Date | string; - endTime: Date | string; - field: string; -} diff --git a/src/templates/post/interfaces/postListProperty.type.ts b/src/templates/post/interfaces/postListProperty.type.ts deleted file mode 100644 index 2d799967..00000000 --- a/src/templates/post/interfaces/postListProperty.type.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Post from "./post.interface"; - -type PostListOmitType = "content"; -type PostListProperty = Omit<Post, PostListOmitType>; - -export default PostListProperty; diff --git a/src/templates/post/interfaces/postListQuery.interface.ts b/src/templates/post/interfaces/postListQuery.interface.ts deleted file mode 100644 index 0cded8fd..00000000 --- a/src/templates/post/interfaces/postListQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import PostListQueryProperty from "./postListQueryProperty.interface"; - -export default interface PostListQuery { - readByCategory: PostListQueryProperty; -} diff --git a/src/templates/post/interfaces/postListQueryProperty.interface.ts b/src/templates/post/interfaces/postListQueryProperty.interface.ts deleted file mode 100644 index 7203c1a2..00000000 --- a/src/templates/post/interfaces/postListQueryProperty.interface.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { PostListProperty } from "."; - -export default interface PostListQueryProperty { - entity: Array<PostListProperty>; - totalPage: number; - currentPage: number; -} diff --git a/src/templates/post/interfaces/postQuery.interface.ts b/src/templates/post/interfaces/postQuery.interface.ts deleted file mode 100644 index 8d65b272..00000000 --- a/src/templates/post/interfaces/postQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Post from "./post.interface"; - -export default interface PostQuery { - readOne: Post; -} diff --git a/src/templates/post/interfaces/postUpdateQuery.interface.ts b/src/templates/post/interfaces/postUpdateQuery.interface.ts deleted file mode 100644 index 0aeb700f..00000000 --- a/src/templates/post/interfaces/postUpdateQuery.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface PostUpdateQuery { - update: { - id: number; - }; -} diff --git a/src/templates/post/interfaces/recomment.interface.ts b/src/templates/post/interfaces/recomment.interface.ts deleted file mode 100644 index b1d4ba79..00000000 --- a/src/templates/post/interfaces/recomment.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Comment from "./comment.interface"; - -export default interface Recomment extends Omit<Comment, "postId"> { - commentId: number; -} diff --git a/src/templates/timetable/index.tsx b/src/templates/timetable/index.tsx deleted file mode 100644 index e071976d..00000000 --- a/src/templates/timetable/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import styled from "styled-components"; -import { color, flex, font } from "@/styles"; -import React from "react"; -import { Column, Row } from "@/components/Flex"; -import { Aside } from "@/components/common"; -import dayjs from "dayjs"; -import "dayjs/locale/ko"; -import { useTimeTable } from "./hooks"; -import { get요일ByWeekday } from "../meister/helpers"; - -const TimeTablePage = () => { - const { dayTimeTable } = useTimeTable(); - return ( - <> - <Layout> - <Row gap="12px" alignItems="center"> - <TitleText>🗓️ 시간표</TitleText> - <SubTitleText> - {dayjs().locale("ko").format("YYYY년 M월 D일")} - </SubTitleText> - </Row> - {!Object.entries(dayTimeTable).length && ( - <TimeTableBox> - <Column> - {Array.from({ length: 8 }).map((_, i) => ( - <TableItem color={color.primary_blue}> - <TableHeadText> - {i ? `${i}교시` : "교시 \\ 요일"} - </TableHeadText> - </TableItem> - ))} - </Column> - {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"].map( - (weekday) => ( - <TableBox> - <TableItem color={color.primary_blue}> - <TableHeadText>{get요일ByWeekday(weekday)}</TableHeadText> - </TableItem> - {dayTimeTable[weekday]?.map(({ subject }) => ( - <TableItem color={color.white}> - <TableText>{subject}</TableText> - </TableItem> - ))} - </TableBox> - ), - )} - </TimeTableBox> - )} - </Layout> - <Aside /> - </> - ); -}; - -const Layout = styled.div` - width: 100%; - ${flex.COLUMN}; - gap: 8px; -`; - -const TitleText = styled.h1` - ${font.H3}; -`; - -const SubTitleText = styled.span` - ${font.H6}; - font-weight: 500; - color: ${color.gray}; -`; - -const TimeTableBox = styled.div` - width: fit-content; - background-color: white; - border: 1px solid ${color.on_tertiary}; - border-collapse: collapse; - display: flex; -`; - -const TableBox = styled.div` - width: fit-content; - ${flex.COLUMN_CENTER}; - margin-bottom: auto; -`; - -const TableItem = styled.div<{ color: string }>` - width: 100%; - text-align: center; - border: 1px solid ${color.on_tertiary}; - background-color: ${(props) => props.color}; - color: ${(props) => - props.color === color.primary_blue ? color.white : color.black}; -`; - -const TableText = styled.div` - ${font.p2}; - width: 10vw; - height: 9vh; - ${flex.CENTER}; -`; - -const TableHeadText = styled(TableText)` - ${font.H6}; -`; - -export default TimeTablePage; From 08bbf6357d074755196890d4dbaac9ccfc603f08 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:40:51 +0900 Subject: [PATCH 02/28] =?UTF-8?q?chore(modal):=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=94=B0=EB=A1=9C=20=EB=B9=BC=EC=84=9C=20=EB=AA=A8=EB=93=88?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@modal/context/index.ts | 1 + src/@modal/context/modal.context.ts | 9 +++++ src/@modal/hooks/index.ts | 1 + src/@modal/hooks/useModal.ts | 23 +++++++++++++ src/@modal/layouts/LoginModal.tsx | 47 ++++++++++++++++++++++++++ src/@modal/layouts/ModalView.tsx | 52 +++++++++++++++++++++++++++++ src/@modal/layouts/index.tsx | 18 ++++++++++ src/@modal/types/ModalState.type.ts | 6 ++++ src/@modal/types/index.ts | 1 + 9 files changed, 158 insertions(+) create mode 100644 src/@modal/context/index.ts create mode 100644 src/@modal/context/modal.context.ts create mode 100644 src/@modal/hooks/index.ts create mode 100644 src/@modal/hooks/useModal.ts create mode 100644 src/@modal/layouts/LoginModal.tsx create mode 100644 src/@modal/layouts/ModalView.tsx create mode 100644 src/@modal/layouts/index.tsx create mode 100644 src/@modal/types/ModalState.type.ts create mode 100644 src/@modal/types/index.ts diff --git a/src/@modal/context/index.ts b/src/@modal/context/index.ts new file mode 100644 index 00000000..89a0494a --- /dev/null +++ b/src/@modal/context/index.ts @@ -0,0 +1 @@ +export { default as modalContext } from "./modal.context"; diff --git a/src/@modal/context/modal.context.ts b/src/@modal/context/modal.context.ts new file mode 100644 index 00000000..de3c8f87 --- /dev/null +++ b/src/@modal/context/modal.context.ts @@ -0,0 +1,9 @@ +import { atom } from "jotai"; +import { ModalState } from "../types"; + +const modalContext = atom<ModalState>({ + component: null, + visible: false, +}); + +export default modalContext; diff --git a/src/@modal/hooks/index.ts b/src/@modal/hooks/index.ts new file mode 100644 index 00000000..ae36cb60 --- /dev/null +++ b/src/@modal/hooks/index.ts @@ -0,0 +1 @@ +export { default as useModal } from "./useModal"; diff --git a/src/@modal/hooks/useModal.ts b/src/@modal/hooks/useModal.ts new file mode 100644 index 00000000..2b7cede7 --- /dev/null +++ b/src/@modal/hooks/useModal.ts @@ -0,0 +1,23 @@ +import React from "react"; +import { useAtom } from "jotai"; +import { ModalState } from "../types"; +import { modalContext } from "../context"; + +const useModal = () => { + const [modal, setModal] = useAtom(modalContext); + + const openModal = React.useCallback( + ({ component }: ModalState) => { + setModal({ component, visible: true }); + }, + [setModal], + ); + + const closeModal = React.useCallback(() => { + setModal({ component: null, visible: false }); + }, [setModal]); + + return { openModal, closeModal, visible: !!modal.visible }; +}; + +export default useModal; diff --git a/src/@modal/layouts/LoginModal.tsx b/src/@modal/layouts/LoginModal.tsx new file mode 100644 index 00000000..f9d16059 --- /dev/null +++ b/src/@modal/layouts/LoginModal.tsx @@ -0,0 +1,47 @@ +import { useRouter } from "next/navigation"; +import styled from "styled-components"; +import { Logo } from "@/assets/icons"; +import { ROUTER } from "@/constants"; +import useWindow from "@/hooks/useWindow"; +import { theme, flex, font } from "@/styles"; + +const LoginModal = () => { + const router = useRouter(); + const { isWindow } = useWindow(); + + const handleLoginButtonClick = () => { + if (isWindow) { + router.push(process.env.NEXT_PUBLIC_OAUTH_URL || ROUTER.HOME); + } + }; + + return ( + <Container> + <Logo width={60} height={60} /> + <LoginButton onClick={handleLoginButtonClick}> + BSM 계정으로 로그인 + </LoginButton> + </Container> + ); +}; + +const Container = styled.div` + width: fit-content; + height: fit-content; + padding: 40px 30px; + background-color: ${theme.white}; + border-radius: 6px; + ${flex.COLUMN_CENTER}; + gap: 5vh; +`; + +const LoginButton = styled.button` + width: fit-content; + border-radius: 4px; + padding: 8px 14px; + background-color: ${theme.primary_blue}; + color: ${theme.white}; + ${font.btn3}; +`; + +export default LoginModal; diff --git a/src/@modal/layouts/ModalView.tsx b/src/@modal/layouts/ModalView.tsx new file mode 100644 index 00000000..33fcf57b --- /dev/null +++ b/src/@modal/layouts/ModalView.tsx @@ -0,0 +1,52 @@ +import styled, { css } from "styled-components"; +import { flex } from "@/styles"; +import { ModalState } from "../types"; + +interface ModalViewProps extends ModalState { + onClose?: () => void; +} + +const ModalView = ({ component, visible, onClose }: ModalViewProps) => { + return ( + <Container> + <Background hidden={!visible} onClick={onClose} /> + <ModalContainer>{component}</ModalContainer> + </Container> + ); +}; + +const Container = styled.div``; + +const Background = styled.div<{ hidden: boolean }>` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + z-index: 10; + ${({ hidden }) => + hidden && + css` + display: none; + `} +`; + +const ModalContainer = styled.div` + ${flex.COLUMN_CENTER}; + position: fixed; + top: 50%; + left: 50%; + width: fit-content; + height: fit-content; + z-index: 20; + transform: translate(-50%, -50%); + + ${({ hidden }) => + hidden && + css` + display: none; + `} +`; + +export default ModalView; diff --git a/src/@modal/layouts/index.tsx b/src/@modal/layouts/index.tsx new file mode 100644 index 00000000..b8043760 --- /dev/null +++ b/src/@modal/layouts/index.tsx @@ -0,0 +1,18 @@ +import { useAtomValue } from "jotai"; +import { modalContext } from "../context"; +import { useModal } from "../hooks"; +import ModalView from "./ModalView"; + +const Modal = () => { + const modal = useAtomValue(modalContext); + const { closeModal } = useModal(); + + const handleModalClose = () => { + modal.onClose?.(); + if (!modal.menualClose) closeModal(); + }; + + return <ModalView {...modal} onClose={handleModalClose} />; +}; + +export default Modal; diff --git a/src/@modal/types/ModalState.type.ts b/src/@modal/types/ModalState.type.ts new file mode 100644 index 00000000..65771972 --- /dev/null +++ b/src/@modal/types/ModalState.type.ts @@ -0,0 +1,6 @@ +export default interface ModalState { + component: React.ReactNode; + visible?: boolean; + menualClose?: boolean; + onClose?: () => void; +} diff --git a/src/@modal/types/index.ts b/src/@modal/types/index.ts new file mode 100644 index 00000000..5465768f --- /dev/null +++ b/src/@modal/types/index.ts @@ -0,0 +1 @@ +export type { default as ModalState } from "./ModalState.type"; From a7e561d2632daf6895f877e17c8a3791a909b6f7 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:41:02 +0900 Subject: [PATCH 03/28] =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=EC=9E=88=EB=8A=94=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +---- yarn.lock | 52 +++++----------------------------------------------- 2 files changed, 6 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 6fcd93a4..062c1cbf 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "@types/node": "18.16.19", "@types/react": "18.2.14", "@types/react-dom": "18.2.6", - "@types/react-infinite-scroll-component": "^5.0.0", "@types/react-spinner": "^0.2.0", "@types/styled-components": "^5.1.26", "@types/tinymce": "^4.6.5", @@ -38,6 +37,7 @@ "graphql": "^16.8.0", "graphql-request": "^6.1.0", "jest": "^29.3.1", + "jotai": "^2.5.1", "jwt-decode": "^3.1.2", "msw": "^1.2.3", "next": "13.5.2", @@ -47,15 +47,12 @@ "react-circular-progressbar": "^2.1.0", "react-d3-radar": "^1.0.0-rc6", "react-dom": "18.2.0", - "react-infinite-scroll-component": "^6.1.0", - "react-responsive-carousel": "^3.2.23", "react-scroll-horizontal": "^1.6.6", "react-slick": "^0.29.0", "react-spinner": "^0.2.7", "react-spinner-overlay": "^0.1.33", "react-spinners": "^0.13.8", "react-toastify": "^9.1.3", - "recoil": "^0.7.7", "rehype-sanitize": "^6.0.0", "slick-carousel": "^1.8.1", "styled-components": "^6.0.8", diff --git a/yarn.lock b/yarn.lock index 387d644b..2beef8a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1779,13 +1779,6 @@ dependencies: "@types/react" "*" -"@types/react-infinite-scroll-component@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@types/react-infinite-scroll-component/-/react-infinite-scroll-component-5.0.0.tgz#f460f99f5c2f1b0eda482704505789100e0aaa6b" - integrity sha512-1DrmAOFfiy6nchA/KiXCAEzXxG4VHsEGJGlRyMZYy8A9WGfr0fAVe+MXep+VkjIPnNPf06qDbJGSNiPzt67wJg== - dependencies: - react-infinite-scroll-component "*" - "@types/react-slick@^0.23.12": version "0.23.12" resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.12.tgz#41db46f837a453770123ebd84b0adc773ab8a583" @@ -4758,11 +4751,6 @@ graphql@*, graphql@^16.8.0, graphql@^16.8.1: resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07" integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw== -hamt_plus@1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601" - integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA== - handlebars@^4.7.7: version "4.7.8" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.8.tgz#41c42c18b1be2365439188c77c6afae71c0cd9e9" @@ -6071,6 +6059,11 @@ jiti@^1.19.1: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== +jotai@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.5.1.tgz#eed05a32a4ac1264c531a77e86478f7ad3197ca3" + integrity sha512-vanPCCSuHczUXNbVh/iUunuMfrWRL4FdBtAbTRmrfqezJcKb8ybBTg8iivyYuUHapjcDETyJe1E4inlo26bVHA== + js-levenshtein@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" @@ -8257,20 +8250,6 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" -react-easy-swipe@^0.0.21: - version "0.0.21" - resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb" - integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg== - dependencies: - prop-types "^15.5.8" - -react-infinite-scroll-component@*, react-infinite-scroll-component@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f" - integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ== - dependencies: - throttle-debounce "^2.1.0" - react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -8335,15 +8314,6 @@ react-motion@^0.5.2: prop-types "^15.5.8" raf "^3.1.0" -react-responsive-carousel@^3.2.23: - version "3.2.23" - resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d" - integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg== - dependencies: - classnames "^2.2.5" - prop-types "^15.5.8" - react-easy-swipe "^0.0.21" - react-scroll-horizontal@^1.6.6: version "1.6.6" resolved "https://registry.yarnpkg.com/react-scroll-horizontal/-/react-scroll-horizontal-1.6.6.tgz#b887be6a4e3a116054783b496c0ae8b50bfaab32" @@ -8491,13 +8461,6 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -recoil@^0.7.7: - version "0.7.7" - resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e" - integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ== - dependencies: - hamt_plus "1.0.2" - redent@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" @@ -9486,11 +9449,6 @@ text-table@^0.2.0, text-table@~0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== -throttle-debounce@^2.1.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2" - integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ== - through2@^4.0.0: version "4.0.2" resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764" From dfe34c9ce81f083791552b218aa32b2f6edaa719 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:41:26 +0900 Subject: [PATCH 04/28] =?UTF-8?q?refactor(user):=20=EC=9C=A0=EC=A0=80=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@user/assets/data/defaultUser.data.ts | 17 +++++ src/@user/assets/data/index.ts | 1 + src/@user/constants/index.ts | 1 + src/@user/constants/role.constant.ts | 6 ++ src/@user/context/index.ts | 1 + src/@user/context/user.context.ts | 7 +++ src/@user/hooks/index.ts | 1 + src/@user/hooks/useUser.tsx | 76 +++++++++++++++++++++++ src/@user/types/User.ts | 15 +++++ src/@user/types/index.ts | 1 + 10 files changed, 126 insertions(+) create mode 100644 src/@user/assets/data/defaultUser.data.ts create mode 100644 src/@user/assets/data/index.ts create mode 100644 src/@user/constants/index.ts create mode 100644 src/@user/constants/role.constant.ts create mode 100644 src/@user/context/index.ts create mode 100644 src/@user/context/user.context.ts create mode 100644 src/@user/hooks/index.ts create mode 100644 src/@user/hooks/useUser.tsx create mode 100644 src/@user/types/User.ts create mode 100644 src/@user/types/index.ts diff --git a/src/@user/assets/data/defaultUser.data.ts b/src/@user/assets/data/defaultUser.data.ts new file mode 100644 index 00000000..3f85d6f5 --- /dev/null +++ b/src/@user/assets/data/defaultUser.data.ts @@ -0,0 +1,17 @@ +const defaultUserData = { + isLogin: false, + id: 0, + nickname: "", + email: "", + name: "", + profile_url: "", + profile_image: "", + authority: "", + role: "", + enroll: 0, + grade: 0, + classNum: 0, + studentNumber: 0, +}; + +export default defaultUserData; diff --git a/src/@user/assets/data/index.ts b/src/@user/assets/data/index.ts new file mode 100644 index 00000000..3367def0 --- /dev/null +++ b/src/@user/assets/data/index.ts @@ -0,0 +1 @@ +export { default as defaultUserData } from "./defaultUser.data"; diff --git a/src/@user/constants/index.ts b/src/@user/constants/index.ts new file mode 100644 index 00000000..e88f8adc --- /dev/null +++ b/src/@user/constants/index.ts @@ -0,0 +1 @@ +export { default as ROLE } from "./role.constant"; diff --git a/src/@user/constants/role.constant.ts b/src/@user/constants/role.constant.ts new file mode 100644 index 00000000..63b13cfa --- /dev/null +++ b/src/@user/constants/role.constant.ts @@ -0,0 +1,6 @@ +const ROLE = { + ADMIN: "ADMIN", + USER: "USER", +} as const; + +export default ROLE; diff --git a/src/@user/context/index.ts b/src/@user/context/index.ts new file mode 100644 index 00000000..d5273b5d --- /dev/null +++ b/src/@user/context/index.ts @@ -0,0 +1 @@ +export { default as userContext } from "./user.context"; diff --git a/src/@user/context/user.context.ts b/src/@user/context/user.context.ts new file mode 100644 index 00000000..3993d26f --- /dev/null +++ b/src/@user/context/user.context.ts @@ -0,0 +1,7 @@ +import { atom } from "jotai"; +import { User } from "../types"; +import { defaultUserData } from "../assets/data"; + +const userContext = atom<User>(defaultUserData); + +export default userContext; diff --git a/src/@user/hooks/index.ts b/src/@user/hooks/index.ts new file mode 100644 index 00000000..0eb122d7 --- /dev/null +++ b/src/@user/hooks/index.ts @@ -0,0 +1 @@ +export { default as useUser } from "./useUser"; diff --git a/src/@user/hooks/useUser.tsx b/src/@user/hooks/useUser.tsx new file mode 100644 index 00000000..311421b7 --- /dev/null +++ b/src/@user/hooks/useUser.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import { useQuery } from "@tanstack/react-query"; +import httpClient from "@/apis/httpClient/httpClient"; +import KEY from "@/constants/key.constant"; +import Storage from "@/storage"; +import { authorization, refresh } from "@/apis/token"; +import { isAxiosError } from "axios"; +import { TOKEN } from "@/storage/constants"; +import { ERROR } from "@/apis/constants"; +import LoginModal from "@/@modal/layouts/LoginModal"; +import { useDidMountEffect } from "@/hooks"; +import { useAtom } from "jotai"; +import { useModal } from "@/@modal/hooks"; +import { User } from "../types"; +import { userContext } from "../context"; +import { ROLE } from "../constants"; + +const useUser = () => { + const [user, setUser] = useAtom(userContext); + const { openModal } = useModal(); + + const { + data: userInfo, + error, + isSuccess, + refetch, + } = useQuery<User>( + [KEY.USER], + async () => { + const { data } = await httpClient.user.get(authorization()); + return data; + }, + { enabled: !!Storage.getItem(TOKEN.ACCESS) }, + ); + + const isSameUser = (id: number) => { + return userInfo?.id === id; + }; + + React.useEffect(() => { + if (isAxiosError(error) && error.response) { + const { code } = error.response.data; + if (code === ERROR.CODE.TOKEN_403_2) { + refresh().then(() => refetch()); + } + } + }, [error, refetch]); + + React.useEffect(() => { + if (userInfo) setUser(userInfo); + }, [setUser, userInfo]); + + React.useEffect(() => { + if (!Storage.getItem(TOKEN.ACCESS)) { + openModal({ component: <LoginModal /> }); + } + }, [openModal]); + + useDidMountEffect(() => { + if (isSuccess && !userInfo) { + return openModal({ + component: <LoginModal />, + }); + } + }, [isSuccess]); + + return { + user, + isLogined: !!userInfo, + isAdmin: userInfo?.authority === ROLE.ADMIN, + role: userInfo?.role === "STUDENT" ? "학생" : "선생님", + isSameUser, + }; +}; + +export default useUser; diff --git a/src/@user/types/User.ts b/src/@user/types/User.ts new file mode 100644 index 00000000..f8df45f2 --- /dev/null +++ b/src/@user/types/User.ts @@ -0,0 +1,15 @@ +export default interface UserType { + isLogin: boolean; + id: number; + nickname: string; + email: string; + name: string; + profile_url: string; + profile_image: string; + authority: string; + role: string; + enroll: number; + grade: number; + classNum: number; + studentNumber: number; +} diff --git a/src/@user/types/index.ts b/src/@user/types/index.ts new file mode 100644 index 00000000..ce72a675 --- /dev/null +++ b/src/@user/types/index.ts @@ -0,0 +1 @@ +export type { default as User } from "./User"; From 27f8170fc674fe8fe853767e8a6292e690c1e75c Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:41:49 +0900 Subject: [PATCH 05/28] =?UTF-8?q?refactor(app):=20=EC=95=B1=20=EB=94=94?= =?UTF-8?q?=EB=A0=89=ED=84=B0=EB=A6=AC=20=EC=9D=B4=EB=A6=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD,=20React=20import=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/constants/error.constant.ts | 24 ++++++++++++++++++++++++ src/apis/constants/index.ts | 1 + src/apis/httpClient/httpClient.ts | 4 ++-- src/app/applications/page.tsx | 1 - src/app/layout.tsx | 4 ++-- src/app/meal/page.tsx | 1 - src/app/not-found.tsx | 4 ++-- src/app/post/[id]/edit/page.tsx | 4 ++-- src/app/post/[id]/page.tsx | 4 ++-- src/app/post/page.tsx | 4 ++-- src/app/timetable/page.tsx | 2 +- 11 files changed, 38 insertions(+), 15 deletions(-) create mode 100644 src/apis/constants/error.constant.ts create mode 100644 src/apis/constants/index.ts diff --git a/src/apis/constants/error.constant.ts b/src/apis/constants/error.constant.ts new file mode 100644 index 00000000..1a121966 --- /dev/null +++ b/src/apis/constants/error.constant.ts @@ -0,0 +1,24 @@ +const ERROR = { + CODE: { + IMG_400_1: "IMG-400-1", + DOCS_404_1: "DOCS-404-1", + DOCS_404_2: "DOCS-404-2", + DOCS_403_1: "DOCS-403-1", + COMMON_403_1: "COMMON-403-1", + USER_403_1: "USER-403-1", + DOCS_403_2: "DOCS-403-2", + TOKEN_403_1: "TOKEN-403-1", + TOKEN_403_2: "TOKEN-403-2", + TOKEN_403_3: "TOKEN-403-3", + USER_404_1: "USER-404-1", + }, + STATUS: { + SUCCESS: 200, + NOT_FOUND: 404, + FORBIDDEN: 403, + BAD_REQUEST: 400, + SERVER_ERROR: 500, + }, +} as const; + +export default ERROR; diff --git a/src/apis/constants/index.ts b/src/apis/constants/index.ts new file mode 100644 index 00000000..f0c84612 --- /dev/null +++ b/src/apis/constants/index.ts @@ -0,0 +1 @@ +export { default as ERROR } from "./error.constant"; diff --git a/src/apis/httpClient/httpClient.ts b/src/apis/httpClient/httpClient.ts index ca8787b9..5dc045b2 100644 --- a/src/apis/httpClient/httpClient.ts +++ b/src/apis/httpClient/httpClient.ts @@ -1,8 +1,8 @@ import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; import { requestInterceptors, responseInterceptors } from "@/apis/interceptor"; -import ERROR from "@/constants/error.constant"; import { TOKEN } from "@/storage/constants/"; -import Storage from "../../storage"; +import Storage from "@/storage"; +import { ERROR } from "../constants"; import { refresh } from "../token"; export interface HttpClientConfig { diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx index 291e107c..8ec2b37e 100644 --- a/src/app/applications/page.tsx +++ b/src/app/applications/page.tsx @@ -1,7 +1,6 @@ "use client"; import ApplicationsPage from "@/templates/applications/layouts"; -import React from "react"; const Applications = () => { return <ApplicationsPage />; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 33443d15..40415dcf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,9 @@ -import Provider from "@/provider/provider.helper"; +import Provider from "@/provider/MainProvider"; import React from "react"; export const metadata = { title: "BSM", - description: "부산소마고 학생 정보 관리 서비스입니다.", + description: "부산소마고 스마트 학생 생활 플랫폼입니다.", }; export default function RootLayout({ diff --git a/src/app/meal/page.tsx b/src/app/meal/page.tsx index 75545062..d81a697d 100644 --- a/src/app/meal/page.tsx +++ b/src/app/meal/page.tsx @@ -1,7 +1,6 @@ "use client"; import MealPage from "@/templates/meal/layouts"; -import React from "react"; const Meal = () => { return <MealPage />; diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index c7e0b4ae..f21720d8 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -3,7 +3,7 @@ import { PageNotFound } from "@/assets/images"; import { Button } from "@/components/atoms"; import ROUTER from "@/constants/router.constant"; -import { color, flex } from "@/styles"; +import { theme, flex } from "@/styles"; import Image from "next/image"; import { useRouter } from "next/navigation"; import React from "react"; @@ -15,7 +15,7 @@ const NotFound = () => { <Container> <StyledImage width={999} height={999} src={PageNotFound} alt="404" /> <Button - color={color.primary_blue} + color={theme.primary_blue} onClick={() => router.push(ROUTER.HOME)} > 홈으로 돌아가기 diff --git a/src/app/post/[id]/edit/page.tsx b/src/app/post/[id]/edit/page.tsx index 0e3e4c76..833eee3f 100644 --- a/src/app/post/[id]/edit/page.tsx +++ b/src/app/post/[id]/edit/page.tsx @@ -2,13 +2,13 @@ import PostEditPage from "@/templates/post/layouts/edit"; -interface IPostUpdateAppPageParams { +interface PostUpdatePageParams { params: { id: number; }; } -const Update = ({ params }: IPostUpdateAppPageParams) => { +const Update = ({ params }: PostUpdatePageParams) => { return <PostEditPage {...params} />; }; diff --git a/src/app/post/[id]/page.tsx b/src/app/post/[id]/page.tsx index 53632a94..8732fa07 100644 --- a/src/app/post/[id]/page.tsx +++ b/src/app/post/[id]/page.tsx @@ -2,13 +2,13 @@ import PostDetailPage from "@/templates/post/layouts/detail"; -interface IPostAppPageParams { +interface PostDetailPageParams { params: { id: number; }; } -const PostDetail = ({ params }: IPostAppPageParams) => { +const PostDetail = ({ params }: PostDetailPageParams) => { return <PostDetailPage {...params} />; }; diff --git a/src/app/post/page.tsx b/src/app/post/page.tsx index f9350246..f51ab907 100644 --- a/src/app/post/page.tsx +++ b/src/app/post/page.tsx @@ -1,9 +1,9 @@ "use client"; -import PostPage from "@/templates/post/layouts/list"; +import PostListPage from "@/templates/post/layouts/list"; const Post = () => { - return <PostPage />; + return <PostListPage />; }; export default Post; diff --git a/src/app/timetable/page.tsx b/src/app/timetable/page.tsx index 983a3677..6c0a0b33 100644 --- a/src/app/timetable/page.tsx +++ b/src/app/timetable/page.tsx @@ -1,6 +1,6 @@ "use client"; -import TimeTablePage from "@/templates/timetable"; +import TimeTablePage from "@/templates/timetable/layouts"; const TimeTable = () => { return <TimeTablePage />; From b45c733189fba268b692c32db80f69613e6308b1 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:42:01 +0900 Subject: [PATCH 06/28] =?UTF-8?q?chore(icons):=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ArrowIcon.tsx | 34 +++++++++++++++++++++++++++ src/assets/icons/Check.tsx | 8 +++---- src/assets/icons/HistorySeparator.tsx | 8 +++---- src/assets/icons/Like.tsx | 9 ++++--- src/assets/icons/LinkArrow.tsx | 13 ++++------ src/assets/icons/MealIcon.tsx | 9 +++++-- src/assets/icons/Setting.tsx | 24 ++++++------------- src/assets/icons/UploadIcon.tsx | 4 ++-- src/assets/icons/View.tsx | 8 +++---- src/assets/icons/XIcon.tsx | 19 +++++++++++++++ src/assets/icons/index.ts | 12 ++++------ 11 files changed, 92 insertions(+), 56 deletions(-) create mode 100644 src/assets/icons/ArrowIcon.tsx create mode 100644 src/assets/icons/XIcon.tsx diff --git a/src/assets/icons/ArrowIcon.tsx b/src/assets/icons/ArrowIcon.tsx new file mode 100644 index 00000000..b829c51b --- /dev/null +++ b/src/assets/icons/ArrowIcon.tsx @@ -0,0 +1,34 @@ +import { DIRECTION } from "@/constants"; + +const path = { + [DIRECTION.TOP]: + "M1.66419 23.4679C2.24222 24.0457 3.02609 24.3703 3.84342 24.3703C4.66075 24.3703 5.44462 24.0457 6.02265 23.4679L21.2803 8.21018L36.538 23.4679C37.1193 24.0293 37.898 24.34 38.7061 24.333C39.5143 24.326 40.2874 24.0018 40.8589 23.4303C41.4304 22.8588 41.7546 22.0857 41.7616 21.2775C41.7686 20.4694 41.4579 19.6907 40.8965 19.1094L23.4596 1.67249C22.8815 1.09464 22.0977 0.77002 21.2803 0.77002C20.463 0.77002 19.6791 1.09464 19.1011 1.67249L1.66419 19.1094C1.08634 19.6874 0.761719 20.4713 0.761719 21.2886C0.761719 22.106 1.08634 22.8898 1.66419 23.4679Z", + [DIRECTION.RIGHT]: + "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z", + [DIRECTION.BOTTOM]: + "M40.8592 1.67228C40.2812 1.09443 39.4973 0.769805 38.68 0.769805C37.8627 0.769805 37.0788 1.09443 36.5008 1.67228L21.2431 16.93L5.98543 1.67228C5.40409 1.1108 4.62548 0.800118 3.81729 0.80714C3.00911 0.814163 2.23601 1.13833 1.66452 1.70983C1.09302 2.28132 0.768859 3.05442 0.761836 3.8626C0.754813 4.67079 1.0655 5.44939 1.62697 6.03073L19.0639 23.4676C19.6419 24.0455 20.4258 24.3701 21.2431 24.3701C22.0604 24.3701 22.8443 24.0455 23.4223 23.4676L40.8592 6.03073C41.4371 5.45271 41.7617 4.66884 41.7617 3.85151C41.7617 3.03417 41.4371 2.25031 40.8592 1.67228Z", + [DIRECTION.LEFT]: + "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z", +}; + +interface ArrowIconProps extends React.SVGProps<SVGSVGElement> { + direction?: "TOP" | "RIGHT" | "BOTTOM" | "LEFT"; +} + +const ArrowIcon = ({ + direction = DIRECTION.BOTTOM, + ...props +}: ArrowIconProps) => { + return ( + <svg + {...props} + viewBox="0 0 41 41" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path d={path[direction]} fill="#727272" /> + </svg> + ); +}; + +export default ArrowIcon; diff --git a/src/assets/icons/Check.tsx b/src/assets/icons/Check.tsx index 913252f3..d24c908d 100644 --- a/src/assets/icons/Check.tsx +++ b/src/assets/icons/Check.tsx @@ -1,11 +1,9 @@ -import { SVGAttribute } from "@/interfaces"; +import React from "react"; -const Check = ({ width = 24, height = 24, isPointable }: SVGAttribute) => { +const Check = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( <svg - width={width} - height={height} - cursor={isPointable ? "pointer" : ""} + {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" diff --git a/src/assets/icons/HistorySeparator.tsx b/src/assets/icons/HistorySeparator.tsx index 24972148..581e0696 100644 --- a/src/assets/icons/HistorySeparator.tsx +++ b/src/assets/icons/HistorySeparator.tsx @@ -1,4 +1,4 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; import React from "react"; const HistorySeparator = () => { @@ -12,13 +12,13 @@ const HistorySeparator = () => { > <path d="M0 4C0 3.58579 0.335786 3.25 0.75 3.25H4.03125V4.75H0.75C0.335787 4.75 0 4.41421 0 4V4Z" - fill={color.content} + fill={theme.content} /> <path d="M10.002 3.25H13.2832C13.6974 3.25 14.0332 3.58579 14.0332 4V4C14.0332 4.41421 13.6974 4.75 13.2832 4.75H10.002V3.25Z" - fill={color.content} + fill={theme.content} /> - <circle cx="7" cy="4" r="3" stroke={color.content} strokeWidth={1.5} /> + <circle cx="7" cy="4" r="3" stroke={theme.content} strokeWidth={1.5} /> </svg> ); }; diff --git a/src/assets/icons/Like.tsx b/src/assets/icons/Like.tsx index 60ceb6ae..b5024756 100644 --- a/src/assets/icons/Like.tsx +++ b/src/assets/icons/Like.tsx @@ -1,11 +1,10 @@ -import { SVGAttribute } from "@/interfaces"; +import React from "react"; -const Like = ({ width = 50, height = 50, isPointable }: SVGAttribute) => { +const Like = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( <svg - width={width} - height={height} - cursor={isPointable ? "pointer" : ""} + {...props} + cursor="pointer" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg" diff --git a/src/assets/icons/LinkArrow.tsx b/src/assets/icons/LinkArrow.tsx index 32ded025..0faa9f92 100644 --- a/src/assets/icons/LinkArrow.tsx +++ b/src/assets/icons/LinkArrow.tsx @@ -1,21 +1,16 @@ -import { SVGAttribute } from "@/interfaces"; +import React from "react"; -const LinkArrow = ({ - width = 12, - height = 20, - color = "#727272", -}: SVGAttribute) => { +const LinkArrow = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( <svg - width={width} - height={height} + {...props} viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8.34727 9.99356L0.997266 2.64356C0.747266 2.39356 0.626266 2.10189 0.634266 1.76856C0.642266 1.43523 0.771599 1.14356 1.02227 0.89356C1.27227 0.64356 1.56393 0.51856 1.89727 0.51856C2.2306 0.51856 2.52227 0.64356 2.77227 0.89356L10.4723 8.56856C10.6723 8.76856 10.8223 8.99356 10.9223 9.24356C11.0223 9.49356 11.0723 9.74356 11.0723 9.99356C11.0723 10.2436 11.0223 10.4936 10.9223 10.7436C10.8223 10.9936 10.6723 11.2186 10.4723 11.4186L2.77227 19.1186C2.52227 19.3686 2.22627 19.4896 1.88427 19.4816C1.54227 19.4736 1.2466 19.3442 0.997266 19.0936C0.747266 18.8436 0.622266 18.5519 0.622266 18.2186C0.622266 17.8852 0.747266 17.5936 0.997266 17.3436L8.34727 9.99356Z" - fill={color} + fill="#727272" /> </svg> ); diff --git a/src/assets/icons/MealIcon.tsx b/src/assets/icons/MealIcon.tsx index 55a5c08f..49d216ba 100644 --- a/src/assets/icons/MealIcon.tsx +++ b/src/assets/icons/MealIcon.tsx @@ -1,8 +1,9 @@ import React from "react"; +import styled from "styled-components"; const MealIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( - <svg + <StyledSVG width="19" height="15" {...props} @@ -14,8 +15,12 @@ const MealIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => { d="M2.45564 9.83447C2.00781 9.83447 1.6243 9.68747 1.30511 9.39347C0.985928 9.09947 0.826607 8.74648 0.82715 8.33447V1.58447C0.82715 1.17197 0.986742 0.818724 1.30593 0.524724C1.62511 0.230724 2.00835 0.0839739 2.45564 0.0844739H17.1121C17.5599 0.0844739 17.9434 0.231474 18.2626 0.525474C18.5818 0.819474 18.7411 1.17247 18.7406 1.58447V8.33447C18.7406 8.74697 18.581 9.10022 18.2618 9.39423C17.9426 9.68822 17.5594 9.83498 17.1121 9.83447H2.45564ZM2.51671 12.4595L2.45564 11.3345L17.0917 10.622L17.1528 11.747L2.51671 12.4595ZM2.45564 14.3157V13.1907H17.1121V14.3157H2.45564ZM8.35893 7.20947C9.36317 7.20947 10.3302 7.04698 11.2601 6.72197C12.19 6.39698 13.0007 5.89698 13.6922 5.22197C13.7737 5.74697 14.0722 6.14697 14.5879 6.42197C15.1036 6.69697 15.6736 6.83447 16.2978 6.83447V3.08447C15.6736 3.08447 15.1036 3.22522 14.5879 3.50672C14.0722 3.78822 13.7737 4.19747 13.6922 4.73447C12.973 4.08447 12.1552 3.58447 11.2389 3.23447C10.3226 2.88447 9.36262 2.70947 8.35893 2.70947C7.28684 2.70947 6.25546 2.88147 5.26479 3.22547C4.27413 3.56947 3.47345 4.14747 2.86277 4.95947C3.47345 5.77197 4.27413 6.35022 5.26479 6.69422C6.25546 7.03822 7.28684 7.20997 8.35893 7.20947Z" fill="#E54F5A" /> - </svg> + </StyledSVG> ); }; +const StyledSVG = styled.svg` + margin-top: 3px; +`; + export default MealIcon; diff --git a/src/assets/icons/Setting.tsx b/src/assets/icons/Setting.tsx index 9156d948..35912611 100644 --- a/src/assets/icons/Setting.tsx +++ b/src/assets/icons/Setting.tsx @@ -1,23 +1,13 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; +import React from "react"; -interface ISettingProps extends React.SVGAttributes<HTMLOrSVGElement> { - width?: number; - height?: number; - isPointable?: boolean; -} - -const Setting = ({ - width = 26, - height = 28, - isPointable = true, - ...props -}: ISettingProps) => { +const Setting = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( <svg {...props} - width={width} - height={height} - cursor={isPointable ? "pointer" : ""} + width={30} + height={30} + cursor="pointer" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" @@ -26,7 +16,7 @@ const Setting = ({ fillRule="evenodd" clipRule="evenodd" d="M12.1392 0.74282C11.7692 0.59082 11.2992 0.59082 10.3602 0.59082C9.42118 0.59082 8.95118 0.59082 8.58118 0.74282C8.08863 0.945031 7.69656 1.33459 7.49118 1.82582C7.39718 2.04882 7.36118 2.30982 7.34618 2.68882C7.33951 2.96342 7.26291 3.23179 7.12363 3.46854C6.98434 3.70529 6.78697 3.9026 6.55018 4.04182C6.30892 4.17592 6.03772 4.24697 5.7617 4.24836C5.48569 4.24976 5.21378 4.18147 4.97118 4.04982C4.63318 3.87182 4.38818 3.77382 4.14618 3.74182C3.61673 3.6723 3.08125 3.81462 2.65618 4.13782C2.33818 4.37982 2.10318 4.78382 1.63418 5.59082C1.16418 6.39782 0.930179 6.80082 0.877179 7.19582C0.807179 7.72182 0.951179 8.25382 1.27718 8.67482C1.42518 8.86682 1.63418 9.02782 1.95718 9.22982C2.43418 9.52682 2.74018 10.0328 2.74018 10.5908C2.74018 11.1488 2.43418 11.6548 1.95818 11.9508C1.63418 12.1538 1.42518 12.3148 1.27618 12.5068C1.11526 12.7148 0.997148 12.9525 0.928663 13.2064C0.860178 13.4602 0.84268 13.7252 0.877179 13.9858C0.930179 14.3798 1.16418 14.7838 1.63418 15.5908C2.10418 16.3978 2.33818 16.8008 2.65618 17.0438C3.08018 17.3668 3.61618 17.5088 4.14618 17.4398C4.38818 17.4078 4.63318 17.3098 4.97118 17.1318C5.2139 17 5.48599 16.9316 5.76221 16.933C6.03842 16.9344 6.3098 17.0055 6.55118 17.1398C7.03718 17.4198 7.32518 17.9348 7.34618 18.4928C7.36118 18.8728 7.39718 19.1328 7.49118 19.3558C7.69518 19.8458 8.08718 20.2358 8.58118 20.4388C8.95118 20.5908 9.42118 20.5908 10.3602 20.5908C11.2992 20.5908 11.7692 20.5908 12.1392 20.4388C12.6317 20.2366 13.0238 19.8471 13.2292 19.3558C13.3232 19.1328 13.3592 18.8728 13.3742 18.4928C13.3942 17.9348 13.6832 17.4188 14.1702 17.1398C14.4114 17.0057 14.6826 16.9347 14.9587 16.9333C15.2347 16.9319 15.5066 17.0002 15.7492 17.1318C16.0872 17.3098 16.3322 17.4078 16.5742 17.4398C17.1042 17.5098 17.6402 17.3668 18.0642 17.0438C18.3822 16.8018 18.6172 16.3978 19.0862 15.5908C19.5562 14.7838 19.7902 14.3808 19.8432 13.9858C19.8775 13.7251 19.8599 13.4601 19.7912 13.2063C19.7226 12.9524 19.6043 12.7147 19.4432 12.5068C19.2952 12.3148 19.0862 12.1538 18.7632 11.9518C18.2862 11.6548 17.9802 11.1488 17.9802 10.5908C17.9802 10.0328 18.2862 9.52682 18.7622 9.23082C19.0862 9.02782 19.2952 8.86682 19.4442 8.67482C19.6051 8.46688 19.7232 8.22911 19.7917 7.97525C19.8602 7.72139 19.8777 7.45648 19.8432 7.19582C19.7902 6.80182 19.5562 6.39782 19.0862 5.59082C18.6162 4.78382 18.3822 4.38082 18.0642 4.13782C17.6391 3.81462 17.1036 3.6723 16.5742 3.74182C16.3322 3.77382 16.0872 3.87182 15.7492 4.04982C15.5065 4.18165 15.2344 4.25004 14.9582 4.24864C14.6819 4.24724 14.4106 4.1761 14.1692 4.04182C13.9326 3.90248 13.7354 3.70511 13.5963 3.46837C13.4572 3.23163 13.3807 2.96333 13.3742 2.68882C13.3592 2.30882 13.3232 2.04882 13.2292 1.82582C13.1275 1.58256 12.979 1.3617 12.7919 1.17588C12.6049 0.990053 12.3831 0.842898 12.1392 0.74282ZM10.3602 13.5908C12.0302 13.5908 13.3832 12.2478 13.3832 10.5908C13.3832 8.93382 12.0292 7.59082 10.3602 7.59082C8.69018 7.59082 7.33718 8.93382 7.33718 10.5908C7.33718 12.2478 8.69118 13.5908 10.3602 13.5908Z" - fill={color.primary_blue} + fill={theme.primary_blue} /> </svg> ); diff --git a/src/assets/icons/UploadIcon.tsx b/src/assets/icons/UploadIcon.tsx index c3d4862d..381f567c 100644 --- a/src/assets/icons/UploadIcon.tsx +++ b/src/assets/icons/UploadIcon.tsx @@ -1,4 +1,4 @@ -import { color, flex } from "@/styles"; +import { theme, flex } from "@/styles"; import React from "react"; import styled from "styled-components"; @@ -28,7 +28,7 @@ const StyledButton = styled.button` ${flex.CENTER}; &:hover { - background-color: ${color.gray}; + background-color: ${theme.gray}; svg { path { fill: #0066cc; diff --git a/src/assets/icons/View.tsx b/src/assets/icons/View.tsx index b7fd3040..48799f31 100644 --- a/src/assets/icons/View.tsx +++ b/src/assets/icons/View.tsx @@ -1,11 +1,9 @@ -import { SVGAttribute } from "@/interfaces"; +import React from "react"; -const View = ({ width = 31, height = 23, isPointable }: SVGAttribute) => { +const View = ({ ...props }: React.SVGProps<SVGSVGElement>) => { return ( <svg - width={width} - height={height} - cursor={isPointable ? "pointer" : ""} + {...props} viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg" diff --git a/src/assets/icons/XIcon.tsx b/src/assets/icons/XIcon.tsx new file mode 100644 index 00000000..516cfea1 --- /dev/null +++ b/src/assets/icons/XIcon.tsx @@ -0,0 +1,19 @@ +const XIcon = ({ ...props }: React.SVGAttributes<HTMLOrSVGElement>) => { + return ( + <svg + width="14" + height="14" + {...props} + viewBox="0 0 9 9" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M1.04983 0.228055C1.1194 0.158391 1.20201 0.103125 1.29296 0.0654173C1.3839 0.0277098 1.48138 0.00830078 1.57983 0.00830078C1.67828 0.00830078 1.77577 0.0277098 1.86671 0.0654173C1.95765 0.103125 2.04027 0.158391 2.10983 0.228055L4.82983 2.94706L7.54983 0.228055C7.61943 0.158455 7.70206 0.103244 7.793 0.0655768C7.88394 0.0279092 7.9814 0.00852204 8.07983 0.00852203C8.17826 0.00852203 8.27573 0.0279092 8.36667 0.0655768C8.4576 0.103244 8.54023 0.158455 8.60983 0.228055C8.67943 0.297656 8.73464 0.380284 8.77231 0.471221C8.80998 0.562159 8.82937 0.659625 8.82937 0.758055C8.82937 0.856485 8.80998 0.953952 8.77231 1.04489C8.73464 1.13583 8.67943 1.21845 8.60983 1.28806L5.89083 4.00806L8.60983 6.72806C8.7504 6.86862 8.82937 7.05927 8.82937 7.25806C8.82937 7.45684 8.7504 7.64749 8.60983 7.78805C8.46927 7.92862 8.27862 8.00759 8.07983 8.00759C7.88104 8.00759 7.6904 7.92862 7.54983 7.78805L4.82983 5.06906L2.10983 7.78805C1.96927 7.92862 1.77862 8.00759 1.57983 8.00759C1.38104 8.00759 1.1904 7.92862 1.04983 7.78805C0.909268 7.64749 0.830299 7.45684 0.830299 7.25806C0.830299 7.05927 0.909268 6.86862 1.04983 6.72806L3.76883 4.00806L1.04983 1.28806C0.980168 1.21849 0.924902 1.13587 0.887195 1.04493C0.849487 0.953989 0.830078 0.856505 0.830078 0.758055C0.830078 0.659605 0.849487 0.562121 0.887195 0.471179C0.924902 0.380237 0.980168 0.29762 1.04983 0.228055Z" + fill="black" + /> + </svg> + ); +}; + +export default XIcon; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index afaa45a1..85720396 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,16 +1,9 @@ -export { default as CategoryArrow } from "./CategoryArrow"; export { default as Check } from "./Check"; -export { default as Emoji } from "./Emoji"; export { default as Like } from "./Like"; export { default as LinkArrow } from "./LinkArrow"; export { default as Logo } from "./Logo"; export { default as Setting } from "./Setting"; export { default as View } from "./View"; -export { default as Grinning } from "./emojis/Grinning"; -export { default as HoldingBackTears } from "./emojis/HoldingBackTears"; -export { default as Kissing } from "./emojis/Kissing"; -export { default as Laughing } from "./emojis/Laughing"; -export { default as Relaxed } from "./emojis/Relaxed"; export { default as Curve } from "./Curve"; export { default as HistorySeparator } from "./HistorySeparator"; export { default as UploadIcon } from "./UploadIcon"; @@ -21,3 +14,8 @@ export { default as CalendarIcon } from "./CalendarIcon"; export { default as NoticeIcon } from "./NoticeIcon"; export { default as ChatIcon } from "./ChatIcon"; export { default as BambooIcon } from "./BambooIcon"; +export { default as ArrowIcon } from "./ArrowIcon"; +export { default as XIcon } from "./XIcon"; +export { default as CheckIcon } from "./CheckIcon"; +export { default as DistributionIcon } from "./DistributionIcon"; +export { default as GraphIcon } from "./GraphIcon"; From 747bd1bb5a77dc56a8559ab962d60bcf46df0411 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:42:20 +0900 Subject: [PATCH 07/28] =?UTF-8?q?refactor(components):=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Button.tsx | 4 +- src/components/atoms/Category.tsx | 26 ++-- src/components/atoms/DropDown.tsx | 112 ++++++++++++++++++ src/components/atoms/FallbackImage.tsx | 60 ++++++++++ src/components/atoms/Input.tsx | 23 ++-- src/components/atoms/Loading.tsx | 7 +- src/components/atoms/Switch.tsx | 11 +- src/components/atoms/index.ts | 10 +- src/components/common/Aside/CheckInBox.tsx | 77 ++++++++++++ .../common/Aside/MeisterInfoBox.tsx | 61 ++++++++++ .../common/Aside/StudentInfoBox.tsx | 105 ++++++++++++++++ .../Aside/assets/data/defaultAside.data.ts | 17 +++ .../common/Aside/assets/data/index.ts | 1 + .../common/Aside/context/aside.context.ts | 6 + src/components/common/Aside/context/index.ts | 1 + src/components/common/Aside/hooks/index.ts | 1 + src/components/common/Aside/hooks/useAside.ts | 77 ++++++++++++ src/components/common/Aside/index.tsx | 25 ++-- src/components/common/ContentEditor/index.tsx | 63 ++++++++++ src/components/common/ContentViewer/index.tsx | 18 +++ src/components/common/DragDrop/hooks/index.ts | 1 + .../common/DragDrop/hooks/useDragDrop.ts | 93 +++++++++++++++ src/components/common/DragDrop/index.tsx | 100 ++++++++++++++++ src/components/common/Footer/Info.tsx | 11 +- src/components/common/Footer/index.tsx | 10 +- src/components/common/Header/Navigation.tsx | 10 +- .../common/Header/assets/data/index.ts | 2 +- .../Header/assets/data/navigationList.data.ts | 39 ++++++ src/components/common/Header/index.tsx | 14 +-- src/components/common/index.ts | 6 +- 30 files changed, 899 insertions(+), 92 deletions(-) create mode 100644 src/components/atoms/DropDown.tsx create mode 100644 src/components/atoms/FallbackImage.tsx create mode 100644 src/components/common/Aside/CheckInBox.tsx create mode 100644 src/components/common/Aside/MeisterInfoBox.tsx create mode 100644 src/components/common/Aside/StudentInfoBox.tsx create mode 100644 src/components/common/Aside/assets/data/defaultAside.data.ts create mode 100644 src/components/common/Aside/assets/data/index.ts create mode 100644 src/components/common/Aside/context/aside.context.ts create mode 100644 src/components/common/Aside/context/index.ts create mode 100644 src/components/common/Aside/hooks/index.ts create mode 100644 src/components/common/Aside/hooks/useAside.ts create mode 100644 src/components/common/ContentEditor/index.tsx create mode 100644 src/components/common/ContentViewer/index.tsx create mode 100644 src/components/common/DragDrop/hooks/index.ts create mode 100644 src/components/common/DragDrop/hooks/useDragDrop.ts create mode 100644 src/components/common/DragDrop/index.tsx create mode 100644 src/components/common/Header/assets/data/navigationList.data.ts diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx index a0981e7f..ca2385a5 100644 --- a/src/components/atoms/Button.tsx +++ b/src/components/atoms/Button.tsx @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { color: string; @@ -19,7 +19,7 @@ const StyledButton = styled.button<{ width: fit-content; border-radius: 4px; background-color: ${(props) => props.color}; - color: ${color.white}; + color: ${theme.white}; ${({ isSmall }) => isSmall ? css` diff --git a/src/components/atoms/Category.tsx b/src/components/atoms/Category.tsx index 7eb2d359..2480559a 100644 --- a/src/components/atoms/Category.tsx +++ b/src/components/atoms/Category.tsx @@ -1,18 +1,18 @@ import styled, { css } from "styled-components"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import { Row } from "@/components/Flex"; -interface ICategoryProps extends React.InputHTMLAttributes<HTMLInputElement> { +interface CategoryProps extends React.InputHTMLAttributes<HTMLInputElement> { id?: string; label?: string; - checked: boolean; + selected: boolean; } -const Category = ({ id, label, checked, ...props }: ICategoryProps) => { +const Category = ({ id, label, selected, ...props }: CategoryProps) => { return ( <Row> <StyledCategory id={id} type="radio" {...props} /> - <StyledLabel htmlFor={id} checked={checked}> + <StyledLabel htmlFor={id} selected={selected}> {label} </StyledLabel> </Row> @@ -23,7 +23,7 @@ const StyledCategory = styled.input` display: none; `; -const StyledLabel = styled.label<{ checked: boolean }>` +const StyledLabel = styled.label<{ selected: boolean }>` border: none; padding: 6px 16px; border-radius: 999px; @@ -32,18 +32,18 @@ const StyledLabel = styled.label<{ checked: boolean }>` align-items: center; box-shadow: 0 0 10px 0 rgba(144, 144, 144, 0.1); ${font.btn3}; - ${({ checked }) => - checked + ${({ selected }) => + selected ? css` - background-color: ${color.primary_blue}; - color: ${color.white}; + background-color: ${theme.primary_blue}; + color: ${theme.white}; ` : css` - background-color: ${color.white}; - color: ${color.gray}; + background-color: ${theme.white}; + color: ${theme.gray}; &:hover { - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; } `} `; diff --git a/src/components/atoms/DropDown.tsx b/src/components/atoms/DropDown.tsx new file mode 100644 index 00000000..2c968dc9 --- /dev/null +++ b/src/components/atoms/DropDown.tsx @@ -0,0 +1,112 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { theme, font, flex } from "@/styles"; +import { ArrowIcon } from "@/assets/icons"; + +interface DropDownProps { + optionList: Array<string>; + selected: string; + label: string; + width?: string; + handler: + | React.Dispatch<React.SetStateAction<string>> + | ((props: string | number) => void); +} + +const DropDown = ({ + optionList, + selected, + label, + width = "80px", + handler, +}: DropDownProps) => { + const [isHover, setIsHover] = React.useState(true); + + const toggleHandler = (option: string) => { + handler(option); + setIsHover(true); + }; + return ( + <StyledSelect + onMouseEnter={() => setIsHover(false)} + onMouseLeave={() => setIsHover(true)} + > + <StyledDefaultList width={width}> + <StyledDefaultListText label={label}>{selected}</StyledDefaultListText> + <ArrowIcon width={12} height={8} /> + </StyledDefaultList> + <StyledList isHover={isHover}> + {optionList.map((option) => ( + <StyledListItem + key={option} + width={width} + label={label} + onClick={() => toggleHandler(option)} + > + {option} + </StyledListItem> + ))} + </StyledList> + </StyledSelect> + ); +}; + +const StyledSelect = styled.div` + width: fit-content; + cursor: pointer; + z-index: 2; +`; + +const StyledDefaultList = styled.div<{ width: string }>` + ${flex.CENTER}; + gap: 8px; + width: ${({ width }) => width}; + padding: 6px 0; + border-radius: 4px; + background-color: ${theme.white}; + box-shadow: 4px 4px 10px 0 rgba(144, 144, 144, 0.15); + + &:hover { + background-color: ${theme.on_tertiary}; + } +`; + +const StyledDefaultListText = styled.div<{ label: string }>` + ${font.context}; + color: ${theme.black}; + + &:after { + content: "${({ label }) => label}"; + } +`; + +const StyledList = styled.ul<{ isHover: boolean }>` + position: absolute; + border-radius: 4px; + background-color: ${theme.white}; + padding: 6px 4px; + + ${({ isHover }) => + isHover && + css` + display: none; + `} +`; + +const StyledListItem = styled.li<{ width: string; label: string }>` + width: calc(${({ width }) => width} - 8px); + padding: 6px 0 6px 8px; + border-radius: 4px; + ${font.context}; + background-color: ${theme.white}; + + &:hover { + background-color: ${theme.on_tertiary}; + } + + &:after { + content: "${({ label }) => label}"; + } +`; + +export default DropDown; diff --git a/src/components/atoms/FallbackImage.tsx b/src/components/atoms/FallbackImage.tsx new file mode 100644 index 00000000..6160de1b --- /dev/null +++ b/src/components/atoms/FallbackImage.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import Image, { ImageProps, StaticImageData } from "next/image"; +import styled, { css } from "styled-components"; +import { StaticImport } from "next/dist/shared/lib/get-img-props"; + +interface FallbackImageProps extends ImageProps { + fallbackSrc: StaticImageData | string; + alt: string; + sizes?: string; + rounded?: boolean; + isShouldHide?: boolean; +} + +const FallbackImage = ({ + src, + fallbackSrc, + alt, + sizes, + isShouldHide, + rounded, + ...props +}: FallbackImageProps) => { + const [imgSrc, setImgSrc] = React.useState< + StaticImageData | StaticImport | string + >(""); + + React.useEffect(() => { + setImgSrc(src ?? "/"); + }, [src]); + + return ( + <StyledImage + src={imgSrc} + {...props} + alt={alt} + isshouldhide={isShouldHide} + onError={() => setImgSrc(fallbackSrc)} + isrounded={rounded?.toString()} + /> + ); +}; + +const StyledImage = styled(Image)<{ + isshouldhide?: boolean; + isrounded?: string; +}>` + height: auto; + ${({ isshouldhide }) => + isshouldhide && + css` + display: none; + `} + ${({ isrounded }) => + isrounded === "true" && + css` + border-radius: 50%; + `} +`; + +export default FallbackImage; diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx index 1bf970e4..9b4a9ace 100644 --- a/src/components/atoms/Input.tsx +++ b/src/components/atoms/Input.tsx @@ -1,22 +1,14 @@ -import React from "react"; import styled, { css } from "styled-components"; -import { color, font } from "@/styles"; +import { theme, font, flex } from "@/styles"; -interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> { +interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { width?: string; label?: string; type?: string; fontSize?: string; } -const Input = ({ - type, - width = "100%", - children, - label, - id, - ...props -}: IInputProps) => { +const Input = ({ type, width = "100%", label, id, ...props }: InputProps) => { return ( <StyledContainer type={type}> <StyledLabel type={type} htmlFor={id}> @@ -28,8 +20,7 @@ const Input = ({ }; const StyledContainer = styled.div<{ type?: string }>` - display: flex; - flex-direction: column; + ${flex.COLUMN_FLEX}; gap: 6px; ${({ type }) => @@ -37,7 +28,7 @@ const StyledContainer = styled.div<{ type?: string }>` css` flex-direction: row; align-items: center; - background-color: ${color.white}; + background-color: ${theme.white}; height: 50px; padding-left: 8px; `} @@ -56,8 +47,8 @@ const StyledLabel = styled.label<{ type?: string }>` width: fit-content; padding: 0 12px; border-radius: 4px; - color: ${color.white}; - background-color: ${color.primary_blue}; + color: ${theme.white}; + background-color: ${theme.primary_blue}; cursor: pointer; height: 30px; margin-left: 10px; diff --git a/src/components/atoms/Loading.tsx b/src/components/atoms/Loading.tsx index cb832b5f..e70c4e67 100644 --- a/src/components/atoms/Loading.tsx +++ b/src/components/atoms/Loading.tsx @@ -1,18 +1,17 @@ -import { color, flex } from "@/styles"; -import React from "react"; +import { theme, flex } from "@/styles"; import { PuffLoader } from "react-spinners"; import styled from "styled-components"; const Loading = () => { return ( <Container> - <PuffLoader color={color.primary_blue} size={40} /> + <PuffLoader color={theme.primary_blue} size={40} /> </Container> ); }; const Container = styled.div` - margin-top: 20px; + margin: 20px 0; width: 100%; ${flex.CENTER}; `; diff --git a/src/components/atoms/Switch.tsx b/src/components/atoms/Switch.tsx index 6493a085..513b2a68 100644 --- a/src/components/atoms/Switch.tsx +++ b/src/components/atoms/Switch.tsx @@ -1,13 +1,12 @@ -import React from "react"; import styled, { keyframes } from "styled-components"; -import { color } from "@/styles"; +import { theme } from "@/styles"; -interface ISwitchProps { +interface SwitchProps { isSwitch: boolean; handleToggle: () => void; } -const Switch = ({ isSwitch, handleToggle }: ISwitchProps) => { +const Switch = ({ isSwitch, handleToggle }: SwitchProps) => { return ( <ToggleButton isSwitch={isSwitch} onClick={handleToggle}> <ToggleCircle isSwitch={isSwitch} /> @@ -39,7 +38,7 @@ const ToggleButton = styled.div<{ isSwitch: boolean }>` height: 22px; border-radius: 15px; background-color: ${({ isSwitch }) => - isSwitch ? color.primary_blue : color.content}; + isSwitch ? theme.primary_blue : theme.content}; cursor: pointer; transition: background-color 0.2s ease; display: flex; @@ -51,7 +50,7 @@ const ToggleCircle = styled.div<{ isSwitch: boolean }>` width: 16px; height: 16px; border-radius: 50%; - background-color: ${color.white}; + background-color: ${theme.white}; transition: transform 0.3s ease; animation-fill-mode: forwards; transform: ${({ isSwitch }) => diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index d35578fd..411d1052 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,9 +1,7 @@ -export { default as AnonymousBox } from "./AnonymousBox"; +export { default as Button } from "./Button"; export { default as Category } from "./Category"; -export { default as CustomEditor } from "./CustomEditor"; -export { default as ImageWithFallback } from "./ImageWithFallback"; +export { default as DropDown } from "./DropDown"; +export { default as FallbackImage } from "./FallbackImage"; export { default as Input } from "./Input"; -export { default as Select } from "./Select"; +export { default as Loading } from "./Loading"; export { default as Switch } from "./Switch"; -export { default as Button } from "./Button"; -export { default as CustomViewer } from "./CustomViewer"; diff --git a/src/components/common/Aside/CheckInBox.tsx b/src/components/common/Aside/CheckInBox.tsx new file mode 100644 index 00000000..910564e6 --- /dev/null +++ b/src/components/common/Aside/CheckInBox.tsx @@ -0,0 +1,77 @@ +import styled from "styled-components"; +import { theme, font, flex } from "@/styles"; +import { useAside } from "./hooks"; + +const CheckInBox = () => { + const { aside, handlePopupOpenClick } = useAside(); + + return ( + <Container> + {aside.room && ( + <HGroup> + <Date> + {`${aside.room.yearSemester.year}`.substring(2, 4)}년 + {aside.room.yearSemester.semester}학기 + </Date> + <RoomNumber> + {aside.room.dormitoryType}동 {aside.room.roomNumber}호 + </RoomNumber> + </HGroup> + )} + <CheckButton + onClick={handlePopupOpenClick} + disabled={aside.room && aside.isCheckin} + > + {aside.room && aside.isCheckin ? "입사 완료" : "입사 체크"} + </CheckButton> + </Container> + ); +}; + +const Container = styled.section` + ${flex.COLUMN_BETWEEN}; + width: 40%; + height: 100%; + border-radius: 5px; + background-color: ${theme.white}; + display: flex; + padding: 22px 0; + + @media screen and (max-width: 900px) { + width: 100%; + } +`; + +const HGroup = styled.hgroup` + ${flex.COLUMN_FLEX}; + margin-right: auto; + padding-left: 18px; + + @media screen and (max-width: 900px) { + display: none; + } +`; + +const Date = styled.span` + ${font.H6}; + color: ${theme.gray}; +`; + +const RoomNumber = styled.span` + ${font.H5}; +`; + +const CheckButton = styled.button` + width: 78%; + height: 32px; + background-color: ${theme.primary_blue}; + border-radius: 3px; + color: ${theme.white}; + ${font.btn3}; + + &:disabled { + background-color: ${theme.content}; + } +`; + +export default CheckInBox; diff --git a/src/components/common/Aside/MeisterInfoBox.tsx b/src/components/common/Aside/MeisterInfoBox.tsx new file mode 100644 index 00000000..751d3dff --- /dev/null +++ b/src/components/common/Aside/MeisterInfoBox.tsx @@ -0,0 +1,61 @@ +import styled from "styled-components"; +import { theme, font, flex } from "@/styles"; +import { Row } from "@/components/Flex"; +import { useAside } from "./hooks"; + +const MeisterInfoBox = () => { + const { aside } = useAside(); + return ( + <Container> + <ScoreHGroup> + <ScoreName>인증제 점수</ScoreName> + <Row gap="4px"> + <Score>{aside.score}점</Score> + <Rank>{aside.ranking}위</Rank> + </Row> + </ScoreHGroup> + <ScoreHGroup> + <ScoreName>상벌점</ScoreName> + <Row gap="4px"> + <Score>{aside.positivePoint - aside.negativePoint}점</Score> + </Row> + </ScoreHGroup> + </Container> + ); +}; + +const Container = styled.section` + ${flex.COLUMN_HORIZONTAL}; + width: 60%; + height: 100%; + border-radius: 5px; + background-color: ${theme.white}; + padding: 10px 0 10px 18px; + gap: 6px; + + @media screen and (max-width: 900px) { + display: none; + } +`; + +const ScoreHGroup = styled.hgroup` + ${flex.COLUMN_FLEX}; +`; + +const ScoreName = styled.h1` + ${font.p3}; + font-weight: 500; + color: ${theme.gray}; +`; + +const Score = styled.h2` + ${font.H4}; +`; + +const Rank = styled.small` + margin-top: auto; + color: ${theme.gray}; + ${font.p3}; +`; + +export default MeisterInfoBox; diff --git a/src/components/common/Aside/StudentInfoBox.tsx b/src/components/common/Aside/StudentInfoBox.tsx new file mode 100644 index 00000000..73d63d2b --- /dev/null +++ b/src/components/common/Aside/StudentInfoBox.tsx @@ -0,0 +1,105 @@ +import styled from "styled-components"; +import { theme, font } from "@/styles"; +import { Row, Column } from "@/components/Flex"; +import { FallbackImage } from "@/components/atoms"; +import flex from "@/styles/flex"; +import { defaultProfile } from "@/assets/images"; +import { useUser } from "@/@user/hooks"; +import { useRouter } from "next/navigation"; + +const StudentInfoBox = () => { + const router = useRouter(); + const { user, role, isLogined } = useUser(); + + return ( + <Container> + {isLogined && ( + <FallbackImage + src={user.profile_image} + fallbackSrc={defaultProfile} + alt="프로필 이미지" + width={46} + height={46} + rounded + /> + )} + {isLogined && ( + <> + <Column> + <UserInfoBox> + <UserInfoText>{user.grade}학년</UserInfoText> + <UserInfoText>{user.classNum}반</UserInfoText> + <UserInfoText>{user.studentNumber}번</UserInfoText> + </UserInfoBox> + <Row gap="4px"> + <UserName>{user.name}</UserName> + <UserType>{role}</UserType> + </Row> + </Column> + <NavigateMyPageButton onClick={() => router.push(user.profile_url)}> + 내 정보 + </NavigateMyPageButton> + </> + )} + </Container> + ); +}; + +const Container = styled.main` + ${flex.CENTER}; + width: 100%; + height: 100%; + background-color: ${theme.white}; + gap: 8px; + padding: 4px 22px; + border-radius: 5px; + + @media screen and (max-width: 1074px) { + padding: 0px 14px; + } +`; + +const UserInfoBox = styled.div` + ${flex.FLEX}; + gap: 4px; + + @media screen and (max-width: 1074px) { + display: none; + } +`; + +const UserInfoText = styled.span` + ${font.p3}; + color: ${theme.gray}; +`; + +const UserName = styled.span` + ${font.H4}; +`; + +const UserType = styled.span` + ${font.p3}; + color: ${theme.gray}; + margin-top: auto; + + @media screen and (max-width: 1360px) { + display: none; + } +`; + +const NavigateMyPageButton = styled.button` + ${flex.CENTER}; + ${font.btn3}; + padding: 4px 10px; + border: none; + background-color: ${theme.primary_blue}; + border-radius: 5px; + margin-left: auto; + color: ${theme.white}; + + @media screen and (max-width: 900px) { + display: none; + } +`; + +export default StudentInfoBox; diff --git a/src/components/common/Aside/assets/data/defaultAside.data.ts b/src/components/common/Aside/assets/data/defaultAside.data.ts new file mode 100644 index 00000000..8a6a8ed1 --- /dev/null +++ b/src/components/common/Aside/assets/data/defaultAside.data.ts @@ -0,0 +1,17 @@ +const defaultAsideData = { + score: 0, + positivePoint: 0, + negativePoint: 0, + ranking: 0, + room: { + roomNumber: 0, + yearSemester: { + year: 0, + semester: 0, + }, + dormitoryType: "", + }, + isCheckin: false, +}; + +export default defaultAsideData; diff --git a/src/components/common/Aside/assets/data/index.ts b/src/components/common/Aside/assets/data/index.ts new file mode 100644 index 00000000..ccf6eb12 --- /dev/null +++ b/src/components/common/Aside/assets/data/index.ts @@ -0,0 +1 @@ +export { default as defaultAsideData } from "./defaultAside.data"; diff --git a/src/components/common/Aside/context/aside.context.ts b/src/components/common/Aside/context/aside.context.ts new file mode 100644 index 00000000..f9d325bf --- /dev/null +++ b/src/components/common/Aside/context/aside.context.ts @@ -0,0 +1,6 @@ +import { atom } from "jotai"; +import { defaultAsideData } from "../assets/data"; + +const asideContext = atom(defaultAsideData); + +export default asideContext; diff --git a/src/components/common/Aside/context/index.ts b/src/components/common/Aside/context/index.ts new file mode 100644 index 00000000..0bcd9e8d --- /dev/null +++ b/src/components/common/Aside/context/index.ts @@ -0,0 +1 @@ +export { default as asideContext } from "./aside.context"; diff --git a/src/components/common/Aside/hooks/index.ts b/src/components/common/Aside/hooks/index.ts new file mode 100644 index 00000000..8b62c7fb --- /dev/null +++ b/src/components/common/Aside/hooks/index.ts @@ -0,0 +1 @@ +export { default as useAside } from "./useAside"; diff --git a/src/components/common/Aside/hooks/useAside.ts b/src/components/common/Aside/hooks/useAside.ts new file mode 100644 index 00000000..d5197b93 --- /dev/null +++ b/src/components/common/Aside/hooks/useAside.ts @@ -0,0 +1,77 @@ +import { useQuery, useQueryClient } from "@tanstack/react-query"; +import React from "react"; +import { useAtom } from "jotai"; +import httpClient from "@/apis/httpClient"; +import Storage from "@/storage"; +import { KEY } from "@/constants"; +import { useWindow } from "@/hooks"; +import { TOKEN } from "@/storage/constants"; +import { asideContext } from "../context"; + +const useAside = () => { + const queryClient = useQueryClient(); + const [aside, setAside] = useAtom(asideContext); + const { isWindow } = useWindow(); + + const { data: asideInfo, isSuccess } = useQuery( + [KEY.ASIDE], + async () => { + const { data } = await httpClient.main.getByTitle({ + params: { title: "aside" }, + }); + return data; + }, + { enabled: !!Storage.getItem(TOKEN.ACCESS) }, + ); + + function openCenteredWindow( + url: string, + title: string, + w: number, + h: number, + ) { + const left = (window.innerWidth - w) / 2; + const top = (window.innerHeight - h) / 2; + + const features = `width=${w},height=${h},left=${left},top=${top},resizable=yes,scrollbars=yes,status=yes`; + const newWindow = window.open(url, title, features); + + if (newWindow) { + newWindow.focus(); + window.addEventListener("focus", () => { + queryClient.invalidateQueries([KEY.ASIDE]); + }); + } + } + const handlePopupOpenClick = () => { + if (isWindow) + openCenteredWindow( + `https://team-insert.github.io/bssm-checkin/join.html?authorization=${Storage.getItem( + TOKEN.ACCESS, + )}`, + "Centered Window", + 600, + 400, + ); + }; + + React.useEffect(() => { + if (isSuccess) { + const { ranking, room, meisterResAndAvgAndMax1, checkInRes } = asideInfo; + const { score, positivePoint, negativePoint } = + meisterResAndAvgAndMax1.meister; + setAside({ + score, + positivePoint, + negativePoint, + ranking, + room, + isCheckin: checkInRes, + }); + } + }, [setAside, asideInfo, isSuccess]); + + return { aside, handlePopupOpenClick }; +}; + +export default useAside; diff --git a/src/components/common/Aside/index.tsx b/src/components/common/Aside/index.tsx index f2682cda..129a9be0 100644 --- a/src/components/common/Aside/index.tsx +++ b/src/components/common/Aside/index.tsx @@ -1,40 +1,35 @@ import styled from "styled-components"; -import useUser from "@/hooks/useUser"; import { Row } from "@/components/Flex"; -import { font } from "@/styles"; -import InfomationBox from "./InfomationBox"; -import MeisterBox from "./MeisterBox"; -import JoinCheckBox from "./JoinCheckBox"; +import { flex } from "@/styles"; +import { useUser } from "@/@user/hooks"; +import InfomationBox from "./StudentInfoBox"; +import MeisterBox from "./MeisterInfoBox"; +import JoinCheckBox from "./CheckInBox"; const Aside = () => { - const { user, isLogined } = useUser(); + const { isLogined } = useUser(); return ( - <Layout> + <Row> {isLogined && ( <Container> - <InfomationBox user={user} isLogined={isLogined} /> + <InfomationBox /> <Row gap="6px" height="100%"> <MeisterBox /> <JoinCheckBox /> </Row> </Container> )} - </Layout> + </Row> ); }; -const Layout = styled.div` - display: flex; -`; - const Container = styled.aside` + ${flex.COLUMN_FLEX}; width: 22vw; height: 30vh; - display: flex; gap: 6px; margin-left: auto; - flex-direction: column; @media screen and (max-width: 900px) { width: 28vw; diff --git a/src/components/common/ContentEditor/index.tsx b/src/components/common/ContentEditor/index.tsx new file mode 100644 index 00000000..e4c759a3 --- /dev/null +++ b/src/components/common/ContentEditor/index.tsx @@ -0,0 +1,63 @@ +import "@uiw/react-md-editor/markdown-editor.css"; +import "@uiw/react-markdown-preview/markdown.css"; +import { toast } from "react-toastify"; +import MDEditor, { + ContextStore, + MDEditorProps, + getCommands, +} from "@uiw/react-md-editor"; +import rehypeSanitize from "rehype-sanitize"; +import { UploadIcon } from "@/assets/icons"; +import { useModal } from "@/@modal/hooks"; +import { useImageUpload } from "@/hooks"; +import DragDrop from "../DragDrop"; + +type ContentEditorPropsType = MDEditorProps & React.RefAttributes<ContextStore>; + +interface ContentEditorProps extends ContentEditorPropsType { + value: string; +} + +const ContentEditor = ({ ...props }: ContentEditorProps) => { + const { openModal, closeModal } = useModal(); + const { uploadImage } = useImageUpload(); + + const handleImageSelected = async (file?: File) => { + try { + const imageUrl = await uploadImage(file); + await navigator.clipboard.writeText(imageUrl); + toast.success("이미지 주소를 클립보드에 저장했어요."); + } catch (err) { + toast.error("이미지를 업로드에 실패했어요."); + } finally { + closeModal(); + } + }; + + const handleImageUploaderClick = () => { + openModal({ + component: ( + <DragDrop width="70vw" height="70vh" handler={handleImageSelected} /> + ), + }); + }; + + const imageUploader = { + name: "imageUploader", + keyCommand: "imageUploader", + icon: <UploadIcon onClick={handleImageUploaderClick} />, + }; + + return ( + <MDEditor + {...props} + preview="edit" + commands={[...getCommands(), imageUploader]} + previewOptions={{ + rehypePlugins: [[rehypeSanitize]], + }} + /> + ); +}; + +export default ContentEditor; diff --git a/src/components/common/ContentViewer/index.tsx b/src/components/common/ContentViewer/index.tsx new file mode 100644 index 00000000..2adde3d9 --- /dev/null +++ b/src/components/common/ContentViewer/index.tsx @@ -0,0 +1,18 @@ +import MDViewer from "@uiw/react-markdown-preview"; +import rehypeSanitize from "rehype-sanitize"; + +interface ContentViewerProps { + content?: string; +} + +const ContentViewer = ({ content }: ContentViewerProps) => { + return ( + <MDViewer + source={content} + wrapperElement={{ "data-color-mode": "light" }} + rehypePlugins={[rehypeSanitize]} + /> + ); +}; + +export default ContentViewer; diff --git a/src/components/common/DragDrop/hooks/index.ts b/src/components/common/DragDrop/hooks/index.ts new file mode 100644 index 00000000..1a9e28e2 --- /dev/null +++ b/src/components/common/DragDrop/hooks/index.ts @@ -0,0 +1 @@ +export { default as useDragDrop } from "./useDragDrop"; diff --git a/src/components/common/DragDrop/hooks/useDragDrop.ts b/src/components/common/DragDrop/hooks/useDragDrop.ts new file mode 100644 index 00000000..c1d89531 --- /dev/null +++ b/src/components/common/DragDrop/hooks/useDragDrop.ts @@ -0,0 +1,93 @@ +import React from "react"; + +const useDragDrop = (handler: (file?: File) => void) => { + const [isDragging, setIsDragging] = React.useState<boolean>(false); + const [file, setFile] = React.useState<File>(); + + const dragRef = React.useRef<HTMLLabelElement | null>(null); + + const handleChangeFiles = React.useCallback( + ( + e: + | React.ChangeEvent<HTMLInputElement> + | React.DragEvent<HTMLInputElement>, + ) => { + let selectFiles: Array<File> = []; + + if (e.type === "drop") { + const dragEvent = e as React.DragEvent<HTMLInputElement>; + const { files } = dragEvent.dataTransfer; + selectFiles = Array.from(files || []); + } else { + const changeEvent = e as React.ChangeEvent<HTMLInputElement>; + const { files } = changeEvent.target; + selectFiles = Array.from(files || []); + } + + const [currentFile] = selectFiles; + handler(currentFile); + setFile(currentFile); + }, + // eslint-disable-next-line + [], + ); + + const handleDragIn = React.useCallback((e: DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + }, []); + + const handleDragOut = React.useCallback((e: DragEvent) => { + handleDragIn(e); + setIsDragging(false); + // eslint-disable-next-line + }, []); + + const handleDragOver = React.useCallback((e: DragEvent) => { + handleDragIn(e); + if (e.dataTransfer) setIsDragging(true); + // eslint-disable-next-line + }, []); + + const handleDrop = React.useCallback( + (e: DragEvent) => { + handleDragIn(e); + handleChangeFiles(e as unknown as React.DragEvent<HTMLInputElement>); + setIsDragging(false); + }, + // eslint-disable-next-line + [handleChangeFiles], + ); + + const initDragEvents = React.useCallback(() => { + if (dragRef.current) { + dragRef.current.addEventListener("dragenter", handleDragIn); + dragRef.current.addEventListener("dragleave", handleDragOut); + dragRef.current.addEventListener("dragover", handleDragOver); + dragRef.current.addEventListener("drop", handleDrop); + } + }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]); + + const resetDragEvents = React.useCallback(() => { + if (dragRef.current) { + dragRef.current.removeEventListener("dragenter", handleDragIn); + dragRef.current.removeEventListener("dragleave", handleDragOut); + dragRef.current.removeEventListener("dragover", handleDragOver); + dragRef.current.removeEventListener("drop", handleDrop); + } + }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]); + + React.useEffect(() => { + initDragEvents(); + return () => resetDragEvents(); + }, [initDragEvents, resetDragEvents]); + + return { + handleChangeFiles, + isDragging, + dragRef, + file, + }; +}; + +export default useDragDrop; diff --git a/src/components/common/DragDrop/index.tsx b/src/components/common/DragDrop/index.tsx new file mode 100644 index 00000000..e423f5fb --- /dev/null +++ b/src/components/common/DragDrop/index.tsx @@ -0,0 +1,100 @@ +import Image from "next/image"; +import styled, { css } from "styled-components"; +import { flex, theme } from "@/styles"; +import { Column, Row } from "@/components/Flex"; +import { useDragDrop } from "./hooks"; + +interface DragDropProps { + handler: (file?: File) => void; + previewImage?: string; + width?: string; + height?: string; + isDontNeedPreview?: boolean; + isDontNeedChangeText?: boolean; +} + +const DragDrop = ({ + width, + height, + handler, + previewImage, + isDontNeedPreview, + isDontNeedChangeText, +}: DragDropProps) => { + const { handleChangeFiles, isDragging, dragRef, file } = useDragDrop(handler); + return ( + <Row> + <Column gap="6px"> + <NoneDisplayInput + onChange={handleChangeFiles} + type="file" + id="fileUpload" + multiple + /> + <DragDropButton + width={width} + height={height} + isDragging={isDragging} + htmlFor="fileUpload" + ref={dragRef} + > + <DragDropTitle> + {file && !isDontNeedChangeText + ? file.name + : "드래그하여 파일 업로드"} + </DragDropTitle> + </DragDropButton> + </Column> + {file && !isDontNeedPreview && previewImage && ( + <StyledImage + width={999} + height={999} + src={previewImage} + alt="미리보기" + /> + )} + </Row> + ); +}; + +const NoneDisplayInput = styled.input` + display: none; +`; + +const DragDropTitle = styled.div` + font-weight: 600; + font-size: 14px; +`; + +const StyledImage = styled(Image)` + border-radius: 6px; + width: 28vw; + height: 30vh; + padding: 6px; +`; + +const DragDropButton = styled.label<{ + width?: string; + height?: string; + isDragging: boolean; +}>` + ${flex.CENTER}; + width: ${({ width }) => width || "24vw"}; + height: ${({ height }) => height || "30vh"}; + border: 2px solid ${theme.container}; + ${({ isDragging }) => + isDragging + ? css` + background-color: ${theme.primary_blue}; + color: ${theme.white}; + ` + : css` + background-color: ${theme.white}; + color: ${theme.black}; + `}; + box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.05); + border-radius: 10px; + cursor: pointer; + transition: 0.12s ease-in; +`; +export default DragDrop; diff --git a/src/components/common/Footer/Info.tsx b/src/components/common/Footer/Info.tsx index da01dc12..53063c2f 100644 --- a/src/components/common/Footer/Info.tsx +++ b/src/components/common/Footer/Info.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import Image from "next/image"; -import { color, font } from "@/styles"; +import { theme, font, flex } from "@/styles"; import { QR } from "@/assets/images"; import { Row, Column } from "@/components/Flex"; @@ -41,8 +41,7 @@ const Info = () => { }; const Container = styled.footer` - display: flex; - flex-direction: column; + ${flex.COLUMN_FLEX}; `; const Title = styled.span` @@ -50,7 +49,7 @@ const Title = styled.span` `; const HGroup = styled.hgroup` - border-bottom: 1px solid ${color.content}; + border-bottom: 1px solid ${theme.content}; padding-bottom: 2%; margin-bottom: 2%; `; @@ -64,13 +63,13 @@ const SubTitle = styled.span` const PolicyText = styled.span` ${font.p4}; - color: ${color.content}; + color: ${theme.content}; `; const Copyright = styled.span` margin-top: 4%; ${font.p4}; - color: ${color.content}; + color: ${theme.content}; `; const QRCode = styled(Image)` diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx index 088bd647..03bed325 100644 --- a/src/components/common/Footer/index.tsx +++ b/src/components/common/Footer/index.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { color } from "@/styles"; +import { flex, theme } from "@/styles"; import Info from "./Info"; const Footer = () => { @@ -13,13 +13,11 @@ const Footer = () => { }; const Layout = styled.div` + ${flex.CENTER}; width: 100%; height: 400px; - color: ${color.content}; - display: flex; - justify-content: center; - align-items: center; - background-color: ${color.tertiary}; + color: ${theme.content}; + background-color: ${theme.tertiary}; `; const Container = styled.div` diff --git a/src/components/common/Header/Navigation.tsx b/src/components/common/Header/Navigation.tsx index 6e706797..cf86c891 100644 --- a/src/components/common/Header/Navigation.tsx +++ b/src/components/common/Header/Navigation.tsx @@ -1,12 +1,12 @@ import Link from "next/link"; import styled from "styled-components"; -import { color, flex, font } from "@/styles"; -import { navigationList } from "./assets/data"; +import { theme, flex, font } from "@/styles"; +import { navigationListData } from "./assets/data"; const Navigation = () => { return ( <NavigationList> - {navigationList.map(({ id, href, name }) => ( + {navigationListData.map(({ id, href, name }) => ( <NavigationListItem key={id} href={href}> {name} </NavigationListItem> @@ -16,15 +16,15 @@ const Navigation = () => { }; const NavigationList = styled.ul` + ${flex.VERTICAL}; width: 100%; - ${flex.HORIZONTAL}; gap: 7%; `; const NavigationListItem = styled(Link)` font-size: ${font.H6}; font-weight: 600; - color: ${color.black}; + color: ${theme.black}; cursor: pointer; white-space: pre-wrap; `; diff --git a/src/components/common/Header/assets/data/index.ts b/src/components/common/Header/assets/data/index.ts index 34a477f5..eaa7a5d2 100644 --- a/src/components/common/Header/assets/data/index.ts +++ b/src/components/common/Header/assets/data/index.ts @@ -1 +1 @@ -export { default as navigationList } from "./navigationList"; +export { default as navigationListData } from "./navigationList.data"; diff --git a/src/components/common/Header/assets/data/navigationList.data.ts b/src/components/common/Header/assets/data/navigationList.data.ts new file mode 100644 index 00000000..cd7cfccc --- /dev/null +++ b/src/components/common/Header/assets/data/navigationList.data.ts @@ -0,0 +1,39 @@ +const navigationListData = [ + { + id: 1, + name: "👩🏻‍🎓 마이스터", + href: "/meister", + }, + { + id: 2, + name: "📬 커뮤니티", + href: "/post", + }, + { + id: 3, + name: "🎋 대나무숲", + href: "/bamboo", + }, + { + id: 4, + name: "🕐 시간표", + href: "/timetable", + }, + { + id: 5, + name: "🍚 급식", + href: "/meal", + }, + { + id: 6, + name: "🗓️ 캘린더", + href: "/calendar", + }, + { + id: 7, + name: "☕️ 베르실 예약", + href: "/ber", + }, +]; + +export default navigationListData; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 44bd4c23..73f1209c 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,30 +1,26 @@ import React from "react"; import styled from "styled-components"; -import { color, flex } from "@/styles"; +import { theme, flex } from "@/styles"; import { Logo, Setting } from "@/assets/icons"; -import useModal from "@/hooks/useModal"; -import { SettingModal } from "@/components/common"; import Navigation from "./Navigation"; const Header = () => { - const { openModal } = useModal(); - return ( <Layout> <Logo width={42} /> <Navigation /> - <Setting onClick={() => openModal({ component: <SettingModal /> })} /> + <Setting /> </Layout> ); }; const Layout = styled.div` + ${flex.VERTICAL}; width: 100%; height: 70px; - ${flex.HORIZONTAL}; gap: 6%; - background-color: ${color.white}; - border-bottom: 0.5px solid ${color.on_tertiary}; + background-color: ${theme.white}; + border-bottom: 0.5px solid ${theme.on_tertiary}; padding: 0 8vw; `; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index cefbe583..58c07a20 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,6 +1,6 @@ export { default as Aside } from "./Aside"; +export { default as ContentEditor } from "./ContentEditor"; +export { default as ContentViewer } from "./ContentViewer"; +export { default as DragDrop } from "./DragDrop"; export { default as Footer } from "./Footer"; export { default as Header } from "./Header"; -export { default as Modal } from "./Modal"; -export { default as SettingModal } from "./Modal/SettingModal"; -export { default as EmojiModal } from "./Modal/EmojiModal"; From 5254c05f525bf50b8bbbc4e8359fff54f6ce1dcb Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:42:35 +0900 Subject: [PATCH 08/28] =?UTF-8?q?refactor(constant):=20=EC=83=81=EC=88=98?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/date.constant.ts | 6 +++--- src/constants/direction.constant.ts | 4 +++- src/constants/index.ts | 3 ++- src/constants/router.constant.ts | 4 ++-- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/constants/date.constant.ts b/src/constants/date.constant.ts index b9ca8256..14d8ed04 100644 --- a/src/constants/date.constant.ts +++ b/src/constants/date.constant.ts @@ -1,12 +1,12 @@ const DATE = { + DAY: "day", + DETAIL: "YYYY년 M월 D일 dddd", FRI: "FRI", MON: "MON", + WEEKDAY: "ddd", YYMMDD: "YYMMDD", YYYYMMDD: "YYYYMMDD", YYYYMMDDAHHMM: "YYYY. MM. DD A hh:mm", - DETAIL: "YYYY년 M월 D일 dddd", - WEEKDAY: "ddd", - DAY: "day", INCREASE: "INCREASE", DECREASE: "DECREASE", } as const; diff --git a/src/constants/direction.constant.ts b/src/constants/direction.constant.ts index f3ca614c..05a7d366 100644 --- a/src/constants/direction.constant.ts +++ b/src/constants/direction.constant.ts @@ -1,6 +1,8 @@ const DIRECTION = { - LEFT: "LEFT", + TOP: "TOP", RIGHT: "RIGHT", + BOTTOM: "BOTTOM", + LEFT: "LEFT", } as const; export default DIRECTION; diff --git a/src/constants/index.ts b/src/constants/index.ts index 7b4302a9..f77952ae 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,3 +1,4 @@ -export { default as ERROR } from "./error.constant"; +export { default as DATE } from "./date.constant"; +export { default as DIRECTION } from "./direction.constant"; export { default as KEY } from "./key.constant"; export { default as ROUTER } from "./router.constant"; diff --git a/src/constants/router.constant.ts b/src/constants/router.constant.ts index 6f0f2041..b45e816f 100644 --- a/src/constants/router.constant.ts +++ b/src/constants/router.constant.ts @@ -7,13 +7,13 @@ const ROUTER = { DETAIL: "/post", LIST: "/post", WRITE: "/post/write", - UPDATE: "/post/edit", + UPDATE: "/edit", }, TIMETABLE: "/timetable", MYPAGE: "/mypage", NOTFOUND: "/404", MEAL: "/meal", - RESERVE: "/reserve", + RESERVE: "/ber", JOIN_CHECK: "/join", CALENDER: "/calendar", } as const; From 952bbac6c235dc363d5cede2fc0f4d785dab1b32 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:42:50 +0900 Subject: [PATCH 09/28] =?UTF-8?q?refactor(hooks):=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/index.ts | 4 ++++ src/hooks/useDidMountEffect.ts | 14 +++++++------- src/hooks/useImageUpload.ts | 15 +++++++++++++++ src/hooks/useInfiniteScroll.ts | 28 ++++++++++++++++++++++++++++ 4 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 src/hooks/index.ts create mode 100644 src/hooks/useImageUpload.ts create mode 100644 src/hooks/useInfiniteScroll.ts diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 00000000..b10007a8 --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1,4 @@ +export { default as useDidMountEffect } from "./useDidMountEffect"; +export { default as useImageUpload } from "./useImageUpload"; +export { default as useWindow } from "./useWindow"; +export { default as useInfiniteScroll } from "./useInfiniteScroll"; diff --git a/src/hooks/useDidMountEffect.ts b/src/hooks/useDidMountEffect.ts index 62933c14..3cb44dea 100644 --- a/src/hooks/useDidMountEffect.ts +++ b/src/hooks/useDidMountEffect.ts @@ -1,13 +1,13 @@ -import { useRef, useEffect } from "react"; +import React from "react"; -export const useDidMountEffect = ( - func: () => void, - deps: React.DependencyList, -) => { - const didMount = useRef(false); +const useDidMountEffect = (func: () => void, deps: React.DependencyList) => { + const didMount = React.useRef(false); - useEffect(() => { + React.useEffect(() => { if (didMount.current) func(); else didMount.current = true; + // eslint-disable-next-line }, deps); }; + +export default useDidMountEffect; diff --git a/src/hooks/useImageUpload.ts b/src/hooks/useImageUpload.ts new file mode 100644 index 00000000..83b43357 --- /dev/null +++ b/src/hooks/useImageUpload.ts @@ -0,0 +1,15 @@ +import httpClient from "@/apis/httpClient"; + +const useImageUpload = () => { + const uploadImage = async (file?: File) => { + if (file) { + const formData = new FormData(); + formData.append("image", file, file.name); + const { data } = await httpClient.image.post(formData); + return data; + } + }; + return { uploadImage }; +}; + +export default useImageUpload; diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts new file mode 100644 index 00000000..feee3b82 --- /dev/null +++ b/src/hooks/useInfiniteScroll.ts @@ -0,0 +1,28 @@ +import { + FetchNextPageOptions, + InfiniteQueryObserverResult, +} from "@tanstack/react-query"; +import React from "react"; + +const useInfiniteScroll = ( + fetchNextPage: ( + options?: FetchNextPageOptions, + ) => Promise<InfiniteQueryObserverResult>, +) => { + const isScroll = () => { + const { scrollY } = window; + const screenHeight = window.innerHeight; + const bodyHeight = document.documentElement.offsetHeight; + const scrollEnd = scrollY + screenHeight; + const pos = scrollEnd + 2000; + const isEnd = pos >= bodyHeight; + if (isEnd) fetchNextPage(); + }; + + React.useEffect(() => { + window.addEventListener("scroll", isScroll); + return () => window.removeEventListener("scroll", isScroll); + }, []); +}; + +export default useInfiniteScroll; From 700ddccf717578c51b39262ad4454fe207bbe852 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:43:02 +0900 Subject: [PATCH 10/28] =?UTF-8?q?refactor(provider):=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EB=B0=94=EC=9D=B4=EB=8D=94=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/provider/LayoutProvider.tsx | 43 +++++++++++++++++++++++ src/provider/MainProvider.tsx | 20 +++++++++++ src/provider/ReactQueryProvider.tsx | 22 ++++++++++++ src/provider/StyledComponentsProvider.tsx | 29 +++++++++++++++ 4 files changed, 114 insertions(+) create mode 100644 src/provider/LayoutProvider.tsx create mode 100644 src/provider/MainProvider.tsx create mode 100644 src/provider/ReactQueryProvider.tsx create mode 100644 src/provider/StyledComponentsProvider.tsx diff --git a/src/provider/LayoutProvider.tsx b/src/provider/LayoutProvider.tsx new file mode 100644 index 00000000..5b07c5e7 --- /dev/null +++ b/src/provider/LayoutProvider.tsx @@ -0,0 +1,43 @@ +import "react-toastify/dist/ReactToastify.css"; +import { ToastContainer, toast } from "react-toastify"; +import styled from "styled-components"; +import { Footer, Header } from "@/components/common"; +import { GlobalStyle, flex } from "@/styles"; +import Modal from "@/@modal/layouts"; + +const LayoutProvider = ({ children }: React.PropsWithChildren) => { + return ( + <> + <StyledToastify autoClose={1000} position={toast.POSITION.TOP_RIGHT} /> + <GlobalStyle /> + <Modal /> + <Layout> + <Header /> + <Main>{children}</Main> + <Footer /> + </Layout> + </> + ); +}; + +const StyledToastify = styled(ToastContainer)` + .Toastify__toast { + color: black; + font-size: 14px; + } +`; + +const Layout = styled.div` + ${flex.COLUMN_FLEX}; + gap: 6vh; +`; + +const Main = styled.main` + ${flex.FLEX}; + gap: 14px; + width: 100%; + padding: 0 8vw; + min-height: 52vh; +`; + +export default LayoutProvider; diff --git a/src/provider/MainProvider.tsx b/src/provider/MainProvider.tsx new file mode 100644 index 00000000..aa9be3db --- /dev/null +++ b/src/provider/MainProvider.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { Provider as JotaiProvider } from "jotai"; +import ReactQueryProvider from "./ReactQueryProvider"; +import LayoutProvider from "./LayoutProvider"; +import StyledComponentsProvider from "./StyledComponentsProvider"; + +const MainProvider = ({ children }: React.PropsWithChildren) => { + return ( + <JotaiProvider> + <ReactQueryProvider> + <StyledComponentsProvider> + <LayoutProvider>{children}</LayoutProvider> + </StyledComponentsProvider> + </ReactQueryProvider> + </JotaiProvider> + ); +}; + +export default MainProvider; diff --git a/src/provider/ReactQueryProvider.tsx b/src/provider/ReactQueryProvider.tsx new file mode 100644 index 00000000..9154e31c --- /dev/null +++ b/src/provider/ReactQueryProvider.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + suspense: false, + enabled: true, + retry: 0, + }, + }, +}); + +const ReactQueryProvider = ({ children }: React.PropsWithChildren) => { + return ( + <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> + ); +}; + +export default ReactQueryProvider; diff --git a/src/provider/StyledComponentsProvider.tsx b/src/provider/StyledComponentsProvider.tsx new file mode 100644 index 00000000..0ed649c5 --- /dev/null +++ b/src/provider/StyledComponentsProvider.tsx @@ -0,0 +1,29 @@ +"use client"; + +import { useServerInsertedHTML } from "next/navigation"; +import React from "react"; +import { ServerStyleSheet, StyleSheetManager } from "styled-components"; + +const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => { + const [styledComponentsStyleSheet] = React.useState( + () => new ServerStyleSheet(), + ); + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement(); + styledComponentsStyleSheet.instance.clearTag(); + // eslint-disable-next-line + return <>{styles}</>; + }); + + // eslint-disable-next-line + if (typeof window !== "undefined") return <>{children}</>; + + return ( + <StyleSheetManager sheet={styledComponentsStyleSheet.instance}> + {children} + </StyleSheetManager> + ); +}; + +export default StyledComponentsRegistry; From ed0f643cbce965c96227a38d393660030f71fc29 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:43:19 +0900 Subject: [PATCH 11/28] =?UTF-8?q?refactor(storage):=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=AA=A8=EB=93=88=EB=93=A4=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/storage/constants/index.ts | 1 + src/storage/constants/setting.constant.ts | 11 +++++++++++ src/storage/index.ts | 8 ++++---- src/storage/types/StorageKey.type.ts | 12 ++++++++++++ src/storage/types/index.ts | 12 +----------- 5 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 src/storage/constants/setting.constant.ts create mode 100644 src/storage/types/StorageKey.type.ts diff --git a/src/storage/constants/index.ts b/src/storage/constants/index.ts index 924819b5..a44bbb28 100644 --- a/src/storage/constants/index.ts +++ b/src/storage/constants/index.ts @@ -1 +1,2 @@ export { default as TOKEN } from "./token.constant"; +export { default as SETTING } from "./setting.constant"; diff --git a/src/storage/constants/setting.constant.ts b/src/storage/constants/setting.constant.ts new file mode 100644 index 00000000..99e07322 --- /dev/null +++ b/src/storage/constants/setting.constant.ts @@ -0,0 +1,11 @@ +const SETTING = { + 회당불러올게시글수: "SETTING:회당불러올게시글수", + 헤더에이모티콘표시: "SETTING:헤더에이모티콘표시", + 헤더네비게이션배열: "SETTING:헤더네비게이션배열", + 테마: "SETTING:테마", + 홈페이지조회형식: "SETTING:홈페이지조회형식", + 시간표조회형식: "SETTING:시간표조회형식", + 리다이렉트경로: "SETTING:리다이렉트경로", +} as const; + +export default SETTING; diff --git a/src/storage/index.ts b/src/storage/index.ts index 08cc2f38..63f6134c 100644 --- a/src/storage/index.ts +++ b/src/storage/index.ts @@ -1,16 +1,16 @@ -import { StorageKeyType } from "./types"; +import { StorageKey } from "./types"; export default class Storage { - static getItem(key: StorageKeyType) { + static getItem(key: StorageKey) { return typeof window !== "undefined" ? localStorage.getItem(key) : null; } - static setItem(key: StorageKeyType, value: string) { + static setItem(key: StorageKey, value: string) { if (typeof window === "undefined") return; localStorage.setItem(key, value); } - static delItem(key: StorageKeyType) { + static delItem(key: StorageKey) { if (typeof window === "undefined") return; localStorage.removeItem(key); } diff --git a/src/storage/types/StorageKey.type.ts b/src/storage/types/StorageKey.type.ts new file mode 100644 index 00000000..9421cd16 --- /dev/null +++ b/src/storage/types/StorageKey.type.ts @@ -0,0 +1,12 @@ +type TokenType = "TOKEN:ACCESS" | "TOKEN:REFRESH"; +type SettingType = + | "SETTING:회당불러올게시글수" + | "SETTING:헤더에이모티콘표시" + | "SETTING:헤더네비게이션배열" + | "SETTING:테마" + | "SETTING:홈페이지조회형식" + | "SETTING:시간표조회형식" + | "SETTING:리다이렉트경로"; + +type StorageKey = TokenType | SettingType; +export default StorageKey; diff --git a/src/storage/types/index.ts b/src/storage/types/index.ts index b9c2eb99..1e5bf5ab 100644 --- a/src/storage/types/index.ts +++ b/src/storage/types/index.ts @@ -1,11 +1 @@ -type TokenType = "TOKEN:ACCESS" | "TOKEN:REFRESH"; -type SettingType = - | "SETTING:회당불러올게시글수" - | "SETTING:헤더에이모티콘표시" - | "SETTING:헤더네비게이션배열" - | "SETTING:테마" - | "SETTING:홈페이지조회형식" - | "SETTING:시간표조회형식" - | "SETTING:리다이렉트경로"; - -export type StorageKeyType = TokenType | SettingType; +export type { default as StorageKey } from "./StorageKey.type"; From ec0cbe1f8d3f845d4a996ea3d2ebd17b4173cd00 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:43:36 +0900 Subject: [PATCH 12/28] =?UTF-8?q?chore(flex):=20flex=20=EA=B1=B0=EA=BE=B8?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=81=EC=9A=A9=EB=90=98=EB=8D=98=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/flex.ts | 31 ++++++++++++++-- src/styles/globalStyle.ts | 78 +++++++++++++++++++++++++++++++++++++++ src/styles/index.ts | 4 +- src/styles/theme.ts | 31 ++++++++++++++++ 4 files changed, 138 insertions(+), 6 deletions(-) create mode 100644 src/styles/globalStyle.ts create mode 100644 src/styles/theme.ts diff --git a/src/styles/flex.ts b/src/styles/flex.ts index f40951f9..0efc7ff3 100644 --- a/src/styles/flex.ts +++ b/src/styles/flex.ts @@ -7,16 +7,24 @@ interface PropsType { const flexGenerator = ({ direction, align, justify }: PropsType) => ` display: flex; flex-direction: ${direction}; - justify-content: ${align}; - align-items: ${justify}; + justify-content: ${justify}; + align-items: ${align}; `; const flex = { + FLEX: flexGenerator({ align: "none", justify: "none" }), CENTER: flexGenerator({ align: "center", justify: "center" }), VERTICAL: flexGenerator({ align: "center" }), - HORIZONTAL: flexGenerator({ justify: "center " }), + HORIZONTAL: flexGenerator({ justify: "center" }), + START: flexGenerator({ align: "center", justify: "flex-start" }), + BETWEEN: flexGenerator({ align: "center", justify: "space-between" }), + END: flexGenerator({ align: "center", justify: "flex-end" }), - COLUMN: flexGenerator({ direction: "column" }), + COLUMN_FLEX: flexGenerator({ + direction: "column", + align: "none", + justify: "none", + }), COLUMN_CENTER: flexGenerator({ direction: "column", align: "center", @@ -24,6 +32,21 @@ const flex = { }), COLUMN_VERTICAL: flexGenerator({ direction: "column", align: "center" }), COLUMN_HORIZONTAL: flexGenerator({ direction: "column", justify: "center" }), + COLUMN_START: flexGenerator({ + direction: "column", + align: "center", + justify: "flex-start", + }), + COLUMN_BETWEEN: flexGenerator({ + direction: "column", + align: "center", + justify: "space-between", + }), + COLUMN_END: flexGenerator({ + direction: "column", + align: "center", + justify: "flex-end", + }), }; export default flex; diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts new file mode 100644 index 00000000..54e1fc1d --- /dev/null +++ b/src/styles/globalStyle.ts @@ -0,0 +1,78 @@ +"use client"; + +import { createGlobalStyle } from "styled-components"; +import { theme } from "."; + +const GlobalStyle = createGlobalStyle` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + :root { + @media screen and (min-width: 769px) and (max-width: 1025px) { + font-size: 80%; + } + + @media screen and (min-width: 541px) and (max-width: 768px) { + font-size: 70%; + } + + @media screen and (min-width: 301px) and (max-width: 540px) { + font-size: 60%; + } + + @media screen and (max-width: 300px) { + font-size: 50%; + } + } + + body { + background-color: ${theme.background}; + } + + ul, + li { + list-style: none; + } + + p { + display: inline-block; + } + + a { + display: inline-block; + text-decoration: none; + color: inherit; + } + + label { + cursor: pointer; + } + + input, + textarea { + -moz-user-select: auto; + -webkit-user-select: auto; + -ms-user-select: auto; + user-select: auto; + border: none; + outline: none; + resize: none; + } + + input:focus { + outline: none; + } + + button { + outline: none; + border: none; + background: none; + padding: 0; + cursor: pointer; + } +`; + +export default GlobalStyle; diff --git a/src/styles/index.ts b/src/styles/index.ts index 0c8eeeec..522a0b19 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1,4 +1,4 @@ -export { default as color } from "./color"; +export { default as theme } from "./theme"; export { default as font } from "./font"; export { default as flex } from "./flex"; -export { default as GlobalStyle } from "./style"; +export { default as GlobalStyle } from "./globalStyle"; diff --git a/src/styles/theme.ts b/src/styles/theme.ts new file mode 100644 index 00000000..7b9dae64 --- /dev/null +++ b/src/styles/theme.ts @@ -0,0 +1,31 @@ +const theme = { + black: "#000000", + white: "#FFFFFF", + orange: "#FF763B", + red: "#F44336", + gray: "#727272", + blue: "#228CEA", + green: "#3CAD4E", + + background: "#F9FAFF", + + primary_red: "#E54F5A", + primary_blue: "#73AEE3", + primary_yellow: "#FEBC56", + primary_mint: "#27C3BC", + + tertiary: "#303441", + on_tertiary: "#E6E6E6", + container: "#F9FAFF", + content: "#D9D9D9", + shadow: "#505050", + light_gray: "#fafafa", + + meal_shadow: "#EDEDED", + meal_header: "#FCFCFC", + + spider_first: "#FEA263", + spider_second: "#5E97C5", +}; + +export default theme; From 45805f149c65cd0bcd7ff3f66e5a6abd37877256 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:43:55 +0900 Subject: [PATCH 13/28] =?UTF-8?q?chore(applications):=20=EC=96=B4=ED=94=8C?= =?UTF-8?q?=EB=A6=AC=EC=BC=80=EC=9D=B4=EC=85=98=20=EB=8F=84=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/data/applicationList.data.ts | 43 +++++++++++++++++++ .../applications/assets/data/index.ts | 2 +- .../layouts/ApplicationListItem.tsx | 31 +++++++------ src/templates/applications/layouts/index.tsx | 6 +-- 4 files changed, 64 insertions(+), 18 deletions(-) create mode 100644 src/templates/applications/assets/data/applicationList.data.ts diff --git a/src/templates/applications/assets/data/applicationList.data.ts b/src/templates/applications/assets/data/applicationList.data.ts new file mode 100644 index 00000000..e26a2b9e --- /dev/null +++ b/src/templates/applications/assets/data/applicationList.data.ts @@ -0,0 +1,43 @@ +const applicationListData = [ + { + name: "BSM Deploy", + href: "https://deploy.bssm.kro.kr", + content: + "부산소마고 재학생을 위한 웹사이트 배포 서비스입니다.\n그동안 배포하지 못했던 프로젝트를 무료로 배포해보세요!", + }, + { + name: "BSM Auth", + href: "https://auth.bssm.kro.kr/", + content: + "부산소마고 재학생들의 모든 정보를 관리하는 서비스입니다.\n학생들이 프로젝트를 만들 때 구현하기 버거운 로그인 기능 또한 OAuth를 지원하여 쉽게 도와줍니다.", + }, + { + name: "BSM Tetris", + href: "https://tetris.bssm.kro.kr/", + content: "부산소마고 재학생들이 이용할 수 있는 간단한 테트리스 게임입니다.", + }, + { + name: "BSSM Portfolio", + href: "https://portfolio.bssm.io/", + content: + "부산소마고 재학생들이 서비스하는 프로젝트들을 한 눈에 모아볼 수 있는 서비스입니다.", + }, + { + name: "부마위키", + href: "https://buma.wiki", + content: + "부산소마고 재학생들이 자유롭게 편집하고 기여할 수 있는 교내 위키 서비스입니다.", + }, + { + name: "BGIT", + href: "https://bgit.bssm.kro.kr/", + content: "부산소마고 재학생들의 깃허브와 백준 랭킹 서비스입니다.", + }, + { + name: "심청이", + href: "https://www.simblue.kro.kr/", + content: "학교에서 받는 모든 신청들을 한 번에 모아둔 서비스입니다.", + }, +]; + +export default applicationListData; diff --git a/src/templates/applications/assets/data/index.ts b/src/templates/applications/assets/data/index.ts index 4cf92b7c..9c7567f6 100644 --- a/src/templates/applications/assets/data/index.ts +++ b/src/templates/applications/assets/data/index.ts @@ -1 +1 @@ -export { default as applicationList } from "./applicationList"; +export { default as applicationListData } from "./applicationList.data"; diff --git a/src/templates/applications/layouts/ApplicationListItem.tsx b/src/templates/applications/layouts/ApplicationListItem.tsx index 9ce00b00..c06e3262 100644 --- a/src/templates/applications/layouts/ApplicationListItem.tsx +++ b/src/templates/applications/layouts/ApplicationListItem.tsx @@ -1,23 +1,30 @@ import Link from "next/link"; import styled from "styled-components"; import { Row } from "@/components/Flex"; -import { color, flex, font } from "@/styles"; -import { ArrowIcon } from "../assets/icons"; +import { theme, flex, font } from "@/styles"; +import { ArrowIcon } from "@/assets/icons"; +import { DIRECTION } from "@/constants"; -interface IAppListItemProps { +interface ApplicationListItemProps { name: string; href: string; content: string; } -const ApplicationListItem = ({ name, href, content }: IAppListItemProps) => { +const ApplicationListItem = ({ + name, + href, + content, +}: ApplicationListItemProps) => { return ( <Container> <Row> <ApplicationNameText>{name}</ApplicationNameText> <LinkBox> - <LinkText href={href} target="_blank" /> - <ArrowIcon /> + <LinkText href={href} target="_blank"> + 서비스 보기 + </LinkText> + <ArrowIcon direction={DIRECTION.RIGHT} /> </LinkBox> </Row> <AppDescriptionText>{content}</AppDescriptionText> @@ -26,12 +33,12 @@ const ApplicationListItem = ({ name, href, content }: IAppListItemProps) => { }; const Container = styled.article` + ${flex.COLUMN_HORIZONTAL}; width: 100%; height: fit-content; - ${flex.COLUMN_VERTICAL}; gap: 4px; padding: 16px 32px; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 0 0 10px 0 rgba(144, 144, 144, 0.1); border-radius: 4px; @@ -51,19 +58,15 @@ const AppDescriptionText = styled.p` `; const LinkBox = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; gap: 8px; margin-left: auto; `; const LinkText = styled(Link)` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; text-decoration: none; - - &:after { - content: "서비스 보기"; - } `; export default ApplicationListItem; diff --git a/src/templates/applications/layouts/index.tsx b/src/templates/applications/layouts/index.tsx index 43a6c4f0..c05e613c 100644 --- a/src/templates/applications/layouts/index.tsx +++ b/src/templates/applications/layouts/index.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { flex, font } from "@/styles"; import { Aside } from "@/components/common"; import ApplicationListItem from "./ApplicationListItem"; -import { applicationList } from "../assets/data"; +import { applicationListData } from "../assets/data"; const ApplicationsPage = () => { return ( @@ -10,7 +10,7 @@ const ApplicationsPage = () => { <Layout> <PageTitleText>외부 서비스</PageTitleText> <ApplicationList> - {applicationList.map((application) => ( + {applicationListData.map((application) => ( <ApplicationListItem key={application.href} {...application} /> ))} </ApplicationList> @@ -31,7 +31,7 @@ const PageTitleText = styled.span` `; const ApplicationList = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 8px; `; From 09ee2937ed684571ad043b52f4e16f807aaeddd7 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:44:09 +0900 Subject: [PATCH 14/28] =?UTF-8?q?refactor(bamboo):=20=EB=8C=80=EB=82=98?= =?UTF-8?q?=EB=AC=B4=EC=88=B2=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/bamboo/hooks/useBamboo.tsx | 8 +-- .../bamboo/layouts/BambooCreateModal.tsx | 18 +++---- .../bamboo/layouts/BambooManageModal.tsx | 13 ++--- .../bamboo/layouts/BambooPostListItem.tsx | 21 ++++---- src/templates/bamboo/layouts/index.tsx | 54 +++++++++---------- .../bamboo/services/mutation.service.ts | 5 +- .../bamboo/services/query.service.ts | 10 ++-- .../types/@props/BambooPostListItem.type.ts | 8 +++ src/templates/bamboo/types/@props/index.ts | 1 + .../bamboo/types/BambooPendingPost.type.ts | 5 ++ src/templates/bamboo/types/BambooPost.type.ts | 6 +++ src/templates/bamboo/types/index.ts | 2 + 12 files changed, 81 insertions(+), 70 deletions(-) create mode 100644 src/templates/bamboo/types/@props/BambooPostListItem.type.ts create mode 100644 src/templates/bamboo/types/@props/index.ts create mode 100644 src/templates/bamboo/types/BambooPendingPost.type.ts create mode 100644 src/templates/bamboo/types/BambooPost.type.ts create mode 100644 src/templates/bamboo/types/index.ts diff --git a/src/templates/bamboo/hooks/useBamboo.tsx b/src/templates/bamboo/hooks/useBamboo.tsx index 541d5c30..fec88cd9 100644 --- a/src/templates/bamboo/hooks/useBamboo.tsx +++ b/src/templates/bamboo/hooks/useBamboo.tsx @@ -1,17 +1,14 @@ -import { isAdmin } from "@/helpers"; -import useModal from "@/hooks/useModal"; -import useUser from "@/hooks/useUser"; import dayjs from "dayjs"; +import { useModal } from "@/@modal/hooks"; import BambooCreateModal from "../layouts/BambooCreateModal"; +import BambooManageModal from "../layouts/BambooManageModal"; import { useAllowBambooMutation, useCreateBambooMutation, useDeleteBambooMutation, } from "../services/mutation.service"; -import BambooManageModal from "../layouts/BambooManageModal"; const useBamboo = () => { - const { user } = useUser(); const { openModal } = useModal(); const { mutate: createMutate } = useCreateBambooMutation(); const { mutate: deleteMutate } = useDeleteBambooMutation(); @@ -46,7 +43,6 @@ const useBamboo = () => { }; return { - isAdmin: isAdmin(user.authority), formatCreatedDate, handleOpenManageModalClick, handleOpenCreateModalClick, diff --git a/src/templates/bamboo/layouts/BambooCreateModal.tsx b/src/templates/bamboo/layouts/BambooCreateModal.tsx index 49da8de8..9d88daf5 100644 --- a/src/templates/bamboo/layouts/BambooCreateModal.tsx +++ b/src/templates/bamboo/layouts/BambooCreateModal.tsx @@ -1,10 +1,10 @@ -import { Button } from "@/components/atoms"; -import useModal from "@/hooks/useModal"; -import { color, flex, font } from "@/styles"; import React from "react"; import styled from "styled-components"; +import { XIcon } from "@/assets/icons"; +import { Button } from "@/components/atoms"; +import { theme, flex, font } from "@/styles"; +import { useModal } from "@/@modal/hooks"; import { useBamboo } from "../hooks"; -import { ModalCloseIcon } from "../assets/icons"; const BambooCreateModal = () => { const { closeModal } = useModal(); @@ -20,7 +20,7 @@ const BambooCreateModal = () => { <Container> <BambooModalHeader> <TitleText>🎋 대나무숲 제보하기</TitleText> - <ModalCloseIcon onClick={closeModal} /> + <XIcon onClick={closeModal} /> </BambooModalHeader> <BambooTextArea ref={textareaRef} @@ -30,7 +30,7 @@ const BambooCreateModal = () => { <BambooButtonBox> <Button onClick={() => handleCreateButtonClick(content)} - color={color.primary_blue} + color={theme.primary_blue} > 제보하기 </Button> @@ -43,10 +43,10 @@ const Container = styled.div` width: 40vw; height: 50vh; overflow-y: scroll; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 8px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; `; const BambooModalHeader = styled.header` @@ -64,7 +64,7 @@ const TitleText = styled.div` const BambooTextArea = styled.textarea` resize: none; - border: 1px solid ${color.on_tertiary}; + border: 1px solid ${theme.on_tertiary}; border-radius: 4px; height: 100%; margin: 16px 16px 0 16px; diff --git a/src/templates/bamboo/layouts/BambooManageModal.tsx b/src/templates/bamboo/layouts/BambooManageModal.tsx index f5a8bb39..7f3ef5ad 100644 --- a/src/templates/bamboo/layouts/BambooManageModal.tsx +++ b/src/templates/bamboo/layouts/BambooManageModal.tsx @@ -1,10 +1,10 @@ -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import React from "react"; import styled from "styled-components"; +import { useModal } from "@/@modal/hooks"; +import { XIcon } from "@/assets/icons"; import { useBambooPendingListQuery } from "@/templates/bamboo/services/query.service"; -import useModal from "@/hooks/useModal"; import BambooPostListItem from "./BambooPostListItem"; -import { ModalCloseIcon } from "../assets/icons"; const BambooManageModal = () => { const { closeModal } = useModal(); @@ -14,13 +14,14 @@ const BambooManageModal = () => { <Container> <BambooHeader> <BambooTitle>🎋 대나무숲 글 관리</BambooTitle> - <ModalCloseIcon onClick={closeModal} /> + <XIcon onClick={closeModal} /> </BambooHeader> <BambooBody> {isSuccess && bambooList?.map((bamboo) => ( <BambooPostListItem key={bamboo.id} + bambooId={bamboo.id} allowedId={bamboo.id} {...bamboo} isAdmin @@ -39,7 +40,7 @@ const Container = styled.div` width: 60vw; height: 90vh; overflow-y: scroll; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 8px; `; @@ -61,7 +62,7 @@ const BambooBody = styled.div` width: 100%; height: 100%; padding: 12px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 14px; `; diff --git a/src/templates/bamboo/layouts/BambooPostListItem.tsx b/src/templates/bamboo/layouts/BambooPostListItem.tsx index 5cc90d82..b5b5c4a1 100644 --- a/src/templates/bamboo/layouts/BambooPostListItem.tsx +++ b/src/templates/bamboo/layouts/BambooPostListItem.tsx @@ -1,11 +1,12 @@ +import styled from "styled-components"; import { Button } from "@/components/atoms"; -import { color, flex, font } from "@/styles"; import { Row } from "@/components/Flex"; -import styled from "styled-components"; -import { BambooPostListItemProps } from "../interfaces"; +import { theme, flex, font } from "@/styles"; import { useBamboo } from "../hooks"; +import { BambooPostListItemProps } from "../types/@props"; const BambooPostListItem = ({ + bambooId, allowedId, createdAt, content, @@ -30,14 +31,14 @@ const BambooPostListItem = ({ {isManageMode && ( <Button onClick={() => handleAcceptButtonClick(allowedId)} - color={color.primary_blue} + color={theme.primary_blue} > 승인 </Button> )} <Button - onClick={() => handleDeleteButtonClick(allowedId)} - color={color.primary_red} + onClick={() => handleDeleteButtonClick(bambooId)} + color={theme.primary_red} > 삭제 </Button> @@ -50,15 +51,15 @@ const BambooPostListItem = ({ const Container = styled.div` width: 100%; padding: 10px 22px; - background-color: ${color.white}; - ${flex.COLUMN}; + background-color: ${theme.white}; + ${flex.COLUMN_FLEX}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05); `; const InfomationBox = styled.div` width: 100%; padding: 10px 0; - border-bottom: 1.5px solid ${color.on_tertiary}; + border-bottom: 1.5px solid ${theme.on_tertiary}; display: flex; gap: 8px; `; @@ -77,7 +78,7 @@ const PostNumberText = styled.span` const PostDateText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; const PostContentText = styled.div` diff --git a/src/templates/bamboo/layouts/index.tsx b/src/templates/bamboo/layouts/index.tsx index 578a9759..94de4c24 100644 --- a/src/templates/bamboo/layouts/index.tsx +++ b/src/templates/bamboo/layouts/index.tsx @@ -1,20 +1,21 @@ import React from "react"; import styled from "styled-components"; import { Button } from "@/components/atoms"; -import InfiniteScroll from "react-infinite-scroll-component"; -import Loading from "@/components/atoms/Loading"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { Aside } from "@/components/common"; +import { useUser } from "@/@user/hooks"; +import { useInfiniteScroll } from "@/hooks"; import BambooPostListItem from "./BambooPostListItem"; import { useBambooListQuery } from "../services/query.service"; import { useBamboo } from "../hooks"; -import { BambooPostType } from "../interfaces"; +import { BambooPost } from "../types"; const BambooPage = () => { - const { isAdmin, handleOpenCreateModalClick, handleOpenManageModalClick } = + const { isAdmin } = useUser(); + const { handleOpenCreateModalClick, handleOpenManageModalClick } = useBamboo(); - const { bambooList, fetchNextPage, dataLength, hasMore } = - useBambooListQuery(); + const { bambooList, fetchNextPage } = useBambooListQuery(); + useInfiniteScroll(fetchNextPage); return ( <> @@ -23,35 +24,28 @@ const BambooPage = () => { <SubTitleText> 말 못할 고민이나 사연들을 익명으로 편하게 이야기해봐요. </SubTitleText> - <Button color={color.primary_blue} onClick={handleOpenCreateModalClick}> + <Button color={theme.primary_blue} onClick={handleOpenCreateModalClick}> 제보하기 </Button> {isAdmin && ( <Button - color={color.primary_blue} + color={theme.primary_blue} onClick={handleOpenManageModalClick} > 글 관리하기 </Button> )} - <InfiniteScroll - dataLength={dataLength} - next={fetchNextPage} - hasMore={hasMore} - loader={<Loading />} - > - {bambooList?.map((bamboos) => ( - <BambooPostListBox> - {bamboos.content.map((bamboo: BambooPostType) => ( - <BambooPostListItem - key={bamboo.allowedId} - {...bamboo} - isAdmin={isAdmin} - /> - ))} - </BambooPostListBox> - ))} - </InfiniteScroll> + {bambooList?.map((bamboos) => ( + <BambooPostListBox> + {bamboos.content.map((bamboo: BambooPost) => ( + <BambooPostListItem + key={bamboo.allowedId} + {...bamboo} + isAdmin={isAdmin} + /> + ))} + </BambooPostListBox> + ))} </Layout> <Aside /> </> @@ -60,7 +54,7 @@ const BambooPage = () => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 14px; `; @@ -70,11 +64,11 @@ const TitleText = styled.h1` const SubTitleText = styled.span` ${font.context}; - color: ${color.gray}; + color: ${theme.gray}; `; const BambooPostListBox = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 14px; `; diff --git a/src/templates/bamboo/services/mutation.service.ts b/src/templates/bamboo/services/mutation.service.ts index 67113b05..db900b05 100644 --- a/src/templates/bamboo/services/mutation.service.ts +++ b/src/templates/bamboo/services/mutation.service.ts @@ -1,7 +1,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { toast } from "react-toastify"; +import { useModal } from "@/@modal/hooks"; import { KEY } from "@/constants"; -import useModal from "@/hooks/useModal"; import { createBambooPost, deleteBambooPost, @@ -37,7 +37,8 @@ export const useDeleteBambooMutation = () => { return useMutation((id: number) => deleteBambooPost(id), { onSuccess: () => { toast.success("삭제가 완료되었습니다!"); - return queryClient.invalidateQueries([KEY.BAMBOO]); + queryClient.invalidateQueries([KEY.BAMBOO]); + queryClient.invalidateQueries([KEY.BAMBOO_ADMIN]); }, }); }; diff --git a/src/templates/bamboo/services/query.service.ts b/src/templates/bamboo/services/query.service.ts index c9e824bc..3bedbadc 100644 --- a/src/templates/bamboo/services/query.service.ts +++ b/src/templates/bamboo/services/query.service.ts @@ -1,7 +1,7 @@ import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; -import KEY from "@/constants/key.constant"; -import IBambooPendingPost from "@/interfaces/bambooPendingPost.interface"; +import { KEY } from "@/constants"; import { getBambooPendingPostList, getBambooPostList } from "./api.service"; +import { BambooPendingPost } from "../types"; export const useBambooListQuery = () => { const { data, hasNextPage, ...queryRest } = useInfiniteQuery({ @@ -12,19 +12,15 @@ export const useBambooListQuery = () => { return undefined; }, }); - const dataLength = data?.pages.flatMap((item) => item.data).length || 0; - const hasMore = hasNextPage || false; return { bambooList: data?.pages, - dataLength, - hasMore, ...queryRest, }; }; export const useBambooPendingListQuery = () => { - const { data, ...queryRest } = useQuery<Array<IBambooPendingPost>>({ + const { data, ...queryRest } = useQuery<Array<BambooPendingPost>>({ queryKey: [KEY.BAMBOO_ADMIN], queryFn: getBambooPendingPostList, }); diff --git a/src/templates/bamboo/types/@props/BambooPostListItem.type.ts b/src/templates/bamboo/types/@props/BambooPostListItem.type.ts new file mode 100644 index 00000000..bf662f2e --- /dev/null +++ b/src/templates/bamboo/types/@props/BambooPostListItem.type.ts @@ -0,0 +1,8 @@ +import BambooPostType from "../BambooPost.type"; + +interface BambooPostListItemProps extends BambooPostType { + isAdmin: boolean; + isManageMode?: boolean; +} + +export default BambooPostListItemProps; diff --git a/src/templates/bamboo/types/@props/index.ts b/src/templates/bamboo/types/@props/index.ts new file mode 100644 index 00000000..fb42909a --- /dev/null +++ b/src/templates/bamboo/types/@props/index.ts @@ -0,0 +1 @@ +export type { default as BambooPostListItemProps } from "./BambooPostListItem.type"; diff --git a/src/templates/bamboo/types/BambooPendingPost.type.ts b/src/templates/bamboo/types/BambooPendingPost.type.ts new file mode 100644 index 00000000..95f2ed70 --- /dev/null +++ b/src/templates/bamboo/types/BambooPendingPost.type.ts @@ -0,0 +1,5 @@ +export default interface BambooPendingPost { + id: number; + content: string; + createdAt: string; +} diff --git a/src/templates/bamboo/types/BambooPost.type.ts b/src/templates/bamboo/types/BambooPost.type.ts new file mode 100644 index 00000000..4d42f618 --- /dev/null +++ b/src/templates/bamboo/types/BambooPost.type.ts @@ -0,0 +1,6 @@ +export default interface BambooPost { + allowedId: number; + content: string; + bambooId: number; + createdAt: string; +} diff --git a/src/templates/bamboo/types/index.ts b/src/templates/bamboo/types/index.ts new file mode 100644 index 00000000..a0ffbcad --- /dev/null +++ b/src/templates/bamboo/types/index.ts @@ -0,0 +1,2 @@ +export type { default as BambooPost } from "./BambooPost.type"; +export type { default as BambooPendingPost } from "./BambooPendingPost.type"; From f46cd6b2d9186aac3bbf65dcc41b9018b2a28307 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:44:30 +0900 Subject: [PATCH 15/28] =?UTF-8?q?refactor(ber):=20=EB=B2=A0=EB=A5=B4?= =?UTF-8?q?=EC=8B=A4=20=EC=98=88=EC=95=BD=20=EB=8F=84=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ber/assets/data/defaultBerReserve.data.ts | 22 +++++++++++++++++++ src/templates/ber/assets/data/index.ts | 4 ++-- .../ber/assets/data/noticeRuleList.data.ts | 8 +++++++ .../helpers/getIfReservedRoomCSS.helper.ts | 8 +++---- .../helpers/getIfSelectedRoomCSS.helper.ts | 6 ++--- src/templates/ber/hooks/useBer.ts | 18 ++++++++------- src/templates/ber/hooks/useBerReserve.ts | 2 +- src/templates/ber/layouts/ReserveCheckBox.tsx | 11 +++++----- src/templates/ber/layouts/ReserveJoinBox.tsx | 15 ++++++------- src/templates/ber/layouts/ReserveList.tsx | 13 +++++------ src/templates/ber/layouts/ReserveMap.tsx | 15 ++++++------- .../ber/layouts/ReserveNoticeRuleList.tsx | 15 ++++++------- .../ber/layouts/ReserveStudentList.tsx | 11 +++++----- src/templates/ber/layouts/index.tsx | 6 ++--- src/templates/ber/services/api.service.ts | 4 ++-- .../ber/services/mutation.service.ts | 8 +++---- src/templates/ber/services/query.service.ts | 2 +- .../@props/BerReserveCheckBoxProps.type.ts | 4 ++++ .../@props/BerReserveJoinBoxProps.type.ts | 5 +++++ .../@props/BerReserveJoinHookprops.type.ts | 5 +++++ .../types/@props/BerReserveListProps.type.ts | 5 +++++ .../types/@props/BerReserveMapProps.type.ts | 5 +++++ .../@props/BerReserveStudentListProps.type.ts | 4 ++++ src/templates/ber/types/@props/index.ts | 6 +++++ .../ber/types/BerCreateReserveQuery.type.ts | 5 +++++ src/templates/ber/types/BerReserve.type.ts | 15 +++++++++++++ .../ber/types/BerReserveQuery.type.ts | 6 +++++ src/templates/ber/types/index.ts | 3 +++ 28 files changed, 160 insertions(+), 71 deletions(-) create mode 100644 src/templates/ber/assets/data/defaultBerReserve.data.ts create mode 100644 src/templates/ber/assets/data/noticeRuleList.data.ts create mode 100644 src/templates/ber/types/@props/BerReserveCheckBoxProps.type.ts create mode 100644 src/templates/ber/types/@props/BerReserveJoinBoxProps.type.ts create mode 100644 src/templates/ber/types/@props/BerReserveJoinHookprops.type.ts create mode 100644 src/templates/ber/types/@props/BerReserveListProps.type.ts create mode 100644 src/templates/ber/types/@props/BerReserveMapProps.type.ts create mode 100644 src/templates/ber/types/@props/BerReserveStudentListProps.type.ts create mode 100644 src/templates/ber/types/@props/index.ts create mode 100644 src/templates/ber/types/BerCreateReserveQuery.type.ts create mode 100644 src/templates/ber/types/BerReserve.type.ts create mode 100644 src/templates/ber/types/BerReserveQuery.type.ts create mode 100644 src/templates/ber/types/index.ts diff --git a/src/templates/ber/assets/data/defaultBerReserve.data.ts b/src/templates/ber/assets/data/defaultBerReserve.data.ts new file mode 100644 index 00000000..312b33b7 --- /dev/null +++ b/src/templates/ber/assets/data/defaultBerReserve.data.ts @@ -0,0 +1,22 @@ +const defaultBerReserveData = { + reservedBerNumber: [], + berResList: [ + { + id: 0, + berNumber: 0, + reservation: "2000-03-01", + reservationUsersName: "", + user: { + id: 0, + name: "", + nickname: "", + profileImage: "", + grade: 0, + class_number: 0, + student_number: 0, + }, + }, + ], +}; + +export default defaultBerReserveData; diff --git a/src/templates/ber/assets/data/index.ts b/src/templates/ber/assets/data/index.ts index c898355f..cf823bfd 100644 --- a/src/templates/ber/assets/data/index.ts +++ b/src/templates/ber/assets/data/index.ts @@ -1,2 +1,2 @@ -export { default as berReserveData } from "./berReserveData"; -export { default as noticeRuleList } from "./noticeRuleList"; +export { default as defaultBerReserveData } from "./defaultBerReserve.data"; +export { default as noticeRuleListData } from "./noticeRuleList.data"; diff --git a/src/templates/ber/assets/data/noticeRuleList.data.ts b/src/templates/ber/assets/data/noticeRuleList.data.ts new file mode 100644 index 00000000..2304bfba --- /dev/null +++ b/src/templates/ber/assets/data/noticeRuleList.data.ts @@ -0,0 +1,8 @@ +const noticeRuleListData = [ + "1. 사용 가능 시간은 9시 10분부터 10시 20분까지입니다.", + "2. 너무 시끄럽게 떠들 경우 퇴실처리될 수 있습니다.", + "3. 퇴실시, 소지품을 잘 챙기고 정리정돈 및 청소를 하고 나와야 합니다.", + "4. 예약 후 노쇼나, 위의 사항들을 어길 경우 페널티가 발생할 수 있습니다.", +]; + +export default noticeRuleListData; diff --git a/src/templates/ber/helpers/getIfReservedRoomCSS.helper.ts b/src/templates/ber/helpers/getIfReservedRoomCSS.helper.ts index a88d7928..5cb6a3d7 100644 --- a/src/templates/ber/helpers/getIfReservedRoomCSS.helper.ts +++ b/src/templates/ber/helpers/getIfReservedRoomCSS.helper.ts @@ -1,10 +1,10 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; import { css } from "styled-components"; const getIfReservedRoomCSS = (isReserved?: boolean) => { if (isReserved) { return css` - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; cursor: default; &:after { content: "예약중"; @@ -12,8 +12,8 @@ const getIfReservedRoomCSS = (isReserved?: boolean) => { `; } return css` - background-color: ${color.white}; - color: ${color.green}; + background-color: ${theme.white}; + color: ${theme.green}; &:after { content: "예약 가능"; } diff --git a/src/templates/ber/helpers/getIfSelectedRoomCSS.helper.ts b/src/templates/ber/helpers/getIfSelectedRoomCSS.helper.ts index bf35807a..9fbdd28e 100644 --- a/src/templates/ber/helpers/getIfSelectedRoomCSS.helper.ts +++ b/src/templates/ber/helpers/getIfSelectedRoomCSS.helper.ts @@ -1,11 +1,11 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; import { css } from "styled-components"; const getIfSelectedRoomCSS = (isClicked?: boolean) => { if (isClicked) { return css` - background-color: ${color.primary_blue}; - color: ${color.white}; + background-color: ${theme.primary_blue}; + color: ${theme.white}; &:after { content: "선택중"; } diff --git a/src/templates/ber/hooks/useBer.ts b/src/templates/ber/hooks/useBer.ts index 35106f6f..3113761a 100644 --- a/src/templates/ber/hooks/useBer.ts +++ b/src/templates/ber/hooks/useBer.ts @@ -1,23 +1,25 @@ -import DATE from "@/constants/date.constant"; import dayjs from "dayjs"; import { useSearchParams } from "next/navigation"; -import React, { useState } from "react"; -import useUser from "@/hooks/useUser"; +import React from "react"; +import DATE from "@/constants/date.constant"; +import { useUser } from "@/@user/hooks"; import { BER } from "../constants"; import { useDeleteReserveMutation } from "../services/mutation.service"; -import { berReserveData } from "../assets/data"; import { useReserveListQuery } from "../services/query.service"; -import { BerReserveQuery } from "../interfaces"; +import { BerReserveQuery } from "../types"; +import { defaultBerReserveData } from "../assets/data"; const useBer = () => { + const { user } = useUser(); const paramsDate = useSearchParams().get("date"); const currentDate = dayjs().format(DATE.YYYYMMDD); const [date, setDate] = React.useState(paramsDate || currentDate); - const [currentRoom, setCurrentRoom] = useState(0); + const [currentRoom, setCurrentRoom] = React.useState(0); const [berViewType, setBerViewType] = React.useState<string>(BER.신청하기); - const { user } = useUser(); - const [reserve, setReserve] = React.useState<BerReserveQuery>(berReserveData); + const [reserve, setReserve] = React.useState<BerReserveQuery>( + defaultBerReserveData, + ); const { reserveList, isSuccess, refetch } = useReserveListQuery(date); const { mutate: deleteMutate } = useDeleteReserveMutation(); diff --git a/src/templates/ber/hooks/useBerReserve.ts b/src/templates/ber/hooks/useBerReserve.ts index 2be41f4b..e47a2c20 100644 --- a/src/templates/ber/hooks/useBerReserve.ts +++ b/src/templates/ber/hooks/useBerReserve.ts @@ -1,7 +1,7 @@ import React from "react"; import { toast } from "react-toastify"; import { useCreateReserveMutation } from "../services/mutation.service"; -import { BerReserveJoinHookProps } from "../interfaces"; +import { BerReserveJoinHookProps } from "../types/@props"; const useBerReserve = ({ date, diff --git a/src/templates/ber/layouts/ReserveCheckBox.tsx b/src/templates/ber/layouts/ReserveCheckBox.tsx index bf7d1a77..bb73d67c 100644 --- a/src/templates/ber/layouts/ReserveCheckBox.tsx +++ b/src/templates/ber/layouts/ReserveCheckBox.tsx @@ -1,8 +1,7 @@ -import React from "react"; -import CheckIcon from "@/assets/icons/CheckIcon"; import styled, { css } from "styled-components"; -import { color, flex, font } from "@/styles"; -import { BerReserveCheckBoxProps } from "../interfaces"; +import { CheckIcon } from "@/assets/icons"; +import { theme, flex, font } from "@/styles"; +import { BerReserveCheckBoxProps } from "../types/@props"; const ReserveCheckBox = ({ isAgreeRule, @@ -38,11 +37,11 @@ const CheckButton = styled.button<{ isChecked: boolean }>` ${({ isChecked }) => isChecked ? css` - background-color: ${color.primary_blue}; + background-color: ${theme.primary_blue}; border: none; ` : css` - border: 1.5px solid ${color.black}; + border: 1.5px solid ${theme.black}; `}; `; diff --git a/src/templates/ber/layouts/ReserveJoinBox.tsx b/src/templates/ber/layouts/ReserveJoinBox.tsx index 1bbe1d33..0c6f9b16 100644 --- a/src/templates/ber/layouts/ReserveJoinBox.tsx +++ b/src/templates/ber/layouts/ReserveJoinBox.tsx @@ -1,9 +1,8 @@ +import styled from "styled-components"; import { Column } from "@/components/Flex"; import { Input } from "@/components/atoms"; -import { color, font } from "@/styles"; -import React from "react"; -import styled from "styled-components"; -import { BerReserveJoinBoxProps } from "../interfaces"; +import { theme, font } from "@/styles"; +import { BerReserveJoinBoxProps } from "../types/@props"; import { useBerReserve } from "../hooks"; import ReserveNoticeRuleList from "./ReserveNoticeRuleList"; import ReserveStudentList from "./ReserveStudentList"; @@ -66,20 +65,20 @@ const Container = styled.div` padding: 16px 20px; display: flex; flex-direction: column; - background-color: ${color.white}; + background-color: ${theme.white}; gap: 8px; `; const InfomationText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; const SubmitButton = styled.button` width: fit-content; padding: 6px 14px; - background-color: ${color.primary_blue}; - color: ${color.white}; + background-color: ${theme.primary_blue}; + color: ${theme.white}; border-radius: 4px; `; diff --git a/src/templates/ber/layouts/ReserveList.tsx b/src/templates/ber/layouts/ReserveList.tsx index 288071d6..efae079a 100644 --- a/src/templates/ber/layouts/ReserveList.tsx +++ b/src/templates/ber/layouts/ReserveList.tsx @@ -1,8 +1,7 @@ -import { color, flex, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { theme, flex, font } from "@/styles"; import { useBer } from "../hooks"; -import { BerReserveListProps } from "../interfaces"; +import { BerReserveListProps } from "../types/@props"; const ReserveList = ({ reserveList }: BerReserveListProps) => { const { isBerReserverSameAsUser, handleBerReserveDeleteClick } = useBer(); @@ -36,7 +35,7 @@ const ReserveList = ({ reserveList }: BerReserveListProps) => { const Container = styled.div` width: 100%; height: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; @@ -44,7 +43,7 @@ const BerReserveListItem = styled.div` width: 100%; height: fit-content; padding: 20px 30px; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; gap: 4px; `; @@ -58,8 +57,8 @@ const ReserveCancelButton = styled.button` width: fit-content; padding: 6px 10px; border-radius: 4px; - background-color: ${color.primary_red}; - color: ${color.white}; + background-color: ${theme.primary_red}; + color: ${theme.white}; `; export default ReserveList; diff --git a/src/templates/ber/layouts/ReserveMap.tsx b/src/templates/ber/layouts/ReserveMap.tsx index 7856559c..72c09b4a 100644 --- a/src/templates/ber/layouts/ReserveMap.tsx +++ b/src/templates/ber/layouts/ReserveMap.tsx @@ -1,8 +1,7 @@ -import { Column, Row } from "@/components/Flex"; -import { color, flex, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; -import { BerReserveMapProps } from "../interfaces"; +import { Column, Row } from "@/components/Flex"; +import { theme, flex, font } from "@/styles"; +import { BerReserveMapProps } from "../types/@props"; import { getIfReservedRoomCSS, getIfSelectedRoomCSS } from "../helpers"; const ReserveMap = ({ @@ -52,8 +51,8 @@ const CommonRoom = styled.div<{ isClicked?: boolean; isReserved?: boolean }>` width: 100%; height: 8vh; cursor: pointer; - background-color: ${color.white}; - color: ${color.green}; + background-color: ${theme.white}; + color: ${theme.green}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05); ${({ isReserved }) => getIfReservedRoomCSS(isReserved)}; @@ -68,7 +67,7 @@ const LongRoom = styled(CommonRoom)` const Wall = styled.div` width: 100%; height: 8vh; - background-color: ${color.light_gray}; + background-color: ${theme.light_gray}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05); ${flex.CENTER}; ${font.p3}; @@ -77,7 +76,7 @@ const Wall = styled.div` const CommunityHall = styled.div` width: 100%; height: 12vw; - background-color: ${color.light_gray}; + background-color: ${theme.light_gray}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.03); ${flex.CENTER}; ${font.H6}; diff --git a/src/templates/ber/layouts/ReserveNoticeRuleList.tsx b/src/templates/ber/layouts/ReserveNoticeRuleList.tsx index caf8fbac..c9ed2140 100644 --- a/src/templates/ber/layouts/ReserveNoticeRuleList.tsx +++ b/src/templates/ber/layouts/ReserveNoticeRuleList.tsx @@ -1,15 +1,14 @@ -import { Column } from "@/components/Flex"; -import { color, flex, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; -import { noticeRuleList } from "../assets/data"; +import { Column } from "@/components/Flex"; +import { theme, flex, font } from "@/styles"; +import { noticeRuleListData } from "../assets/data"; const ReserveNoticeRuleList = () => { return ( <Column gap="6px"> <NoticeTitleText>숙지 사항</NoticeTitleText> <NoticeTextList> - {noticeRuleList.map((notice) => ( + {noticeRuleListData.map((notice) => ( <NoticeTextListItem key={notice}>{notice}</NoticeTextListItem> ))} </NoticeTextList> @@ -19,18 +18,18 @@ const ReserveNoticeRuleList = () => { const NoticeTitleText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; const NoticeTextList = styled.ul` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 4px; list-style: decimal; `; const NoticeTextListItem = styled.li` ${font.p2}; - color: ${color.gray}; + color: ${theme.gray}; font-weight: 500; `; diff --git a/src/templates/ber/layouts/ReserveStudentList.tsx b/src/templates/ber/layouts/ReserveStudentList.tsx index 28d2c4ab..97debab5 100644 --- a/src/templates/ber/layouts/ReserveStudentList.tsx +++ b/src/templates/ber/layouts/ReserveStudentList.tsx @@ -1,8 +1,7 @@ -import React from "react"; import styled from "styled-components"; -import { color, flex, font } from "@/styles"; -import { BerReserveStudentListProps } from "../interfaces"; -import { BerReserveCloseIcon } from "../assets/icons"; +import { XIcon } from "@/assets/icons"; +import { theme, flex, font } from "@/styles"; +import { BerReserveStudentListProps } from "../types/@props"; const ReserveStudentList = ({ studentList, @@ -13,7 +12,7 @@ const ReserveStudentList = ({ {studentList.map((student) => ( <StudentListItem key={student} onClick={() => handleClick(student)}> {student} - <BerReserveCloseIcon /> + <XIcon /> </StudentListItem> ))} </StudentList> @@ -30,7 +29,7 @@ const StudentList = styled.div` const StudentListItem = styled.div` padding: 4px 12px; ${font.p4}; - background-color: ${color.white}; + background-color: ${theme.white}; border-radius: 999px; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.15); ${flex.CENTER}; diff --git a/src/templates/ber/layouts/index.tsx b/src/templates/ber/layouts/index.tsx index 6afd1462..21786080 100644 --- a/src/templates/ber/layouts/index.tsx +++ b/src/templates/ber/layouts/index.tsx @@ -31,7 +31,7 @@ const BerPage = () => { key={filter} id={filter} name={BER.RESERVE} - checked={berViewType === filter} + selected={berViewType === filter} onClick={() => setBerViewType(filter)} label={filter} /> @@ -69,7 +69,7 @@ const BerPage = () => { const Layout = styled.div` width: 100%; - ${flex.COLUMN_VERTICAL}; + ${flex.COLUMN_HORIZONTAL}; gap: 20px; `; @@ -87,7 +87,7 @@ const ReservationBox = styled.div` width: 100%; height: fit-content; padding: 0px 20px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; diff --git a/src/templates/ber/services/api.service.ts b/src/templates/ber/services/api.service.ts index b9f4c446..ac8e6e85 100644 --- a/src/templates/ber/services/api.service.ts +++ b/src/templates/ber/services/api.service.ts @@ -1,12 +1,12 @@ import httpClient from "@/apis/httpClient"; -import { ICreateReserve } from "@/interfaces"; +import { BerCreateReserveQuery } from "../types"; export const getReserveList = async (date: string) => { const { data } = await httpClient.ber.get({ params: { date } }); return data; }; -export const createReserve = async (berReserve: ICreateReserve) => { +export const createReserve = async (berReserve: BerCreateReserveQuery) => { const { data } = await httpClient.ber.post(berReserve); return data; }; diff --git a/src/templates/ber/services/mutation.service.ts b/src/templates/ber/services/mutation.service.ts index 71d419f3..3cdbf698 100644 --- a/src/templates/ber/services/mutation.service.ts +++ b/src/templates/ber/services/mutation.service.ts @@ -1,15 +1,15 @@ -import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { KEY } from "@/constants"; -import { ICreateReserve } from "@/interfaces"; import { toast } from "react-toastify"; import Swal from "sweetalert2"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { createReserve, deleteReserve } from "./api.service"; +import { BerCreateReserveQuery } from "../types"; export const useCreateReserveMutation = () => { const queryClient = useQueryClient(); return useMutation( - async (reserve: ICreateReserve) => createReserve(reserve), + async (reserve: BerCreateReserveQuery) => createReserve(reserve), { onSuccess: () => { queryClient.invalidateQueries([KEY.RESERVE]); diff --git a/src/templates/ber/services/query.service.ts b/src/templates/ber/services/query.service.ts index 9b4ef93e..c2d6c3f1 100644 --- a/src/templates/ber/services/query.service.ts +++ b/src/templates/ber/services/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getReserveList } from "./api.service"; export const useReserveListQuery = (date: string) => { diff --git a/src/templates/ber/types/@props/BerReserveCheckBoxProps.type.ts b/src/templates/ber/types/@props/BerReserveCheckBoxProps.type.ts new file mode 100644 index 00000000..1ee43d76 --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveCheckBoxProps.type.ts @@ -0,0 +1,4 @@ +export default interface BerReserveCheckBoxProps { + isAgreeRule: boolean; + handleClick: () => void; +} diff --git a/src/templates/ber/types/@props/BerReserveJoinBoxProps.type.ts b/src/templates/ber/types/@props/BerReserveJoinBoxProps.type.ts new file mode 100644 index 00000000..3982604d --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveJoinBoxProps.type.ts @@ -0,0 +1,5 @@ +export default interface BerReserveJoinBoxProps { + currentRoom: number; + setCurrentRoom: React.Dispatch<React.SetStateAction<number>>; + date: string; +} diff --git a/src/templates/ber/types/@props/BerReserveJoinHookprops.type.ts b/src/templates/ber/types/@props/BerReserveJoinHookprops.type.ts new file mode 100644 index 00000000..c8cb6b01 --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveJoinHookprops.type.ts @@ -0,0 +1,5 @@ +import BerReserveJoinBoxProps from "./BerReserveJoinBoxProps.type"; + +type BerReserveJoinHookProps = BerReserveJoinBoxProps; + +export default BerReserveJoinHookProps; diff --git a/src/templates/ber/types/@props/BerReserveListProps.type.ts b/src/templates/ber/types/@props/BerReserveListProps.type.ts new file mode 100644 index 00000000..669d514a --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveListProps.type.ts @@ -0,0 +1,5 @@ +import BerReserve from "../BerReserve.type"; + +export default interface BerReserveListProps { + reserveList: Array<BerReserve>; +} diff --git a/src/templates/ber/types/@props/BerReserveMapProps.type.ts b/src/templates/ber/types/@props/BerReserveMapProps.type.ts new file mode 100644 index 00000000..dc5d77ec --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveMapProps.type.ts @@ -0,0 +1,5 @@ +export default interface BerReserveMapProps { + currentRoom: number; + reservedList: Array<number>; + handleClick: (roomNumber: number) => void; +} diff --git a/src/templates/ber/types/@props/BerReserveStudentListProps.type.ts b/src/templates/ber/types/@props/BerReserveStudentListProps.type.ts new file mode 100644 index 00000000..fab59321 --- /dev/null +++ b/src/templates/ber/types/@props/BerReserveStudentListProps.type.ts @@ -0,0 +1,4 @@ +export default interface BerReserveStudentListProps { + studentList: Array<string>; + handleClick: (student: string) => void; +} diff --git a/src/templates/ber/types/@props/index.ts b/src/templates/ber/types/@props/index.ts new file mode 100644 index 00000000..fb77c432 --- /dev/null +++ b/src/templates/ber/types/@props/index.ts @@ -0,0 +1,6 @@ +export type { default as BerReserveCheckBoxProps } from "./BerReserveCheckBoxProps.type"; +export type { default as BerReserveJoinBoxProps } from "./BerReserveJoinBoxProps.type"; +export type { default as BerReserveJoinHookProps } from "./BerReserveJoinHookprops.type"; +export type { default as BerReserveListProps } from "./BerReserveListProps.type"; +export type { default as BerReserveMapProps } from "./BerReserveMapProps.type"; +export type { default as BerReserveStudentListProps } from "./BerReserveStudentListProps.type"; diff --git a/src/templates/ber/types/BerCreateReserveQuery.type.ts b/src/templates/ber/types/BerCreateReserveQuery.type.ts new file mode 100644 index 00000000..1acf89a2 --- /dev/null +++ b/src/templates/ber/types/BerCreateReserveQuery.type.ts @@ -0,0 +1,5 @@ +export default interface BerCreateReserveQuery { + berNumber: number; + reservationTime: string; + reservationUsersName: string; +} diff --git a/src/templates/ber/types/BerReserve.type.ts b/src/templates/ber/types/BerReserve.type.ts new file mode 100644 index 00000000..7eda0bfa --- /dev/null +++ b/src/templates/ber/types/BerReserve.type.ts @@ -0,0 +1,15 @@ +export default interface BerReserve { + id: number; + berNumber: number; + reservation: string; + reservationUsersName: string; + user: { + id: number; + name: string; + nickname: string; + profileImage: string; + grade: number; + class_number: number; + student_number: number; + }; +} diff --git a/src/templates/ber/types/BerReserveQuery.type.ts b/src/templates/ber/types/BerReserveQuery.type.ts new file mode 100644 index 00000000..7a1cf594 --- /dev/null +++ b/src/templates/ber/types/BerReserveQuery.type.ts @@ -0,0 +1,6 @@ +import BerReserve from "./BerReserve.type"; + +export default interface BerReserveQuery { + reservedBerNumber: Array<number>; + berResList: Array<BerReserve>; +} diff --git a/src/templates/ber/types/index.ts b/src/templates/ber/types/index.ts new file mode 100644 index 00000000..5cc4e0d5 --- /dev/null +++ b/src/templates/ber/types/index.ts @@ -0,0 +1,3 @@ +export type { default as BerCreateReserveQuery } from "./BerCreateReserveQuery.type"; +export type { default as BerReserve } from "./BerReserve.type"; +export type { default as BerReserveQuery } from "./BerReserveQuery.type"; From 827d8170a68329ffdddf920d6e61256fb3a52100 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:44:51 +0900 Subject: [PATCH 16/28] =?UTF-8?q?refactor(calendar):=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/calendar/constants/index.ts | 1 + .../helpers/getColorByDayName.helper.ts | 8 ++--- .../helpers/getColorByPlanType.helper.ts | 12 ++++---- .../helpers/getPlanNameByPlanType.helper.ts | 2 +- .../helpers/getPlanTypeByPlanName.helper.ts | 2 +- src/templates/calendar/helpers/index.ts | 4 +-- src/templates/calendar/hooks/useCalendar.tsx | 16 ++++------ .../calendar/layouts/CalendarListItem.tsx | 19 ++++++------ .../calendar/layouts/CalendarPlanAddModal.tsx | 29 +++++++++---------- .../CalendarPlanWriterInformationModal.tsx | 24 +++++++-------- src/templates/calendar/layouts/index.tsx | 23 ++++++++------- .../calendar/services/api.service.ts | 2 +- .../calendar/services/mutation.service.ts | 6 ++-- .../calendar/services/query.service.ts | 2 +- .../@props/CalendarArrowIconProps.type.ts | 6 ++++ .../@props/CalendarListItemProps.type.ts | 6 ++++ .../@props/CalendarPlanAddModalProps.type.ts | 3 ++ .../types/@props/CalendarPlanAddQuery.type.ts | 5 ++++ src/templates/calendar/types/@props/index.ts | 4 +++ .../calendar/types/CalendarItem.type.ts | 6 ++++ .../calendar/types/CalendarPlan.type.ts | 12 ++++++++ src/templates/calendar/types/Calender.type.ts | 9 ++++++ src/templates/calendar/types/index.ts | 6 ++-- 23 files changed, 128 insertions(+), 79 deletions(-) create mode 100644 src/templates/calendar/constants/index.ts create mode 100644 src/templates/calendar/types/@props/CalendarArrowIconProps.type.ts create mode 100644 src/templates/calendar/types/@props/CalendarListItemProps.type.ts create mode 100644 src/templates/calendar/types/@props/CalendarPlanAddModalProps.type.ts create mode 100644 src/templates/calendar/types/@props/CalendarPlanAddQuery.type.ts create mode 100644 src/templates/calendar/types/@props/index.ts create mode 100644 src/templates/calendar/types/CalendarItem.type.ts create mode 100644 src/templates/calendar/types/CalendarPlan.type.ts create mode 100644 src/templates/calendar/types/Calender.type.ts diff --git a/src/templates/calendar/constants/index.ts b/src/templates/calendar/constants/index.ts new file mode 100644 index 00000000..f28b65a2 --- /dev/null +++ b/src/templates/calendar/constants/index.ts @@ -0,0 +1 @@ +export { default as PLAN } from "./plan.constant"; diff --git a/src/templates/calendar/helpers/getColorByDayName.helper.ts b/src/templates/calendar/helpers/getColorByDayName.helper.ts index 04423332..0e8ecc59 100644 --- a/src/templates/calendar/helpers/getColorByDayName.helper.ts +++ b/src/templates/calendar/helpers/getColorByDayName.helper.ts @@ -1,13 +1,13 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; const getColorByDayName = (weekday: string) => { switch (weekday) { case "토": - return color.primary_blue; + return theme.primary_blue; case "일": - return color.primary_red; + return theme.primary_red; default: - return color.gray; + return theme.gray; } }; diff --git a/src/templates/calendar/helpers/getColorByPlanType.helper.ts b/src/templates/calendar/helpers/getColorByPlanType.helper.ts index cb16fe67..157151cd 100644 --- a/src/templates/calendar/helpers/getColorByPlanType.helper.ts +++ b/src/templates/calendar/helpers/getColorByPlanType.helper.ts @@ -1,24 +1,24 @@ import { css } from "styled-components"; -import { color } from "@/styles"; -import PLAN from "../constants/plan.constant"; +import { theme } from "@/styles"; +import { PLAN } from "../constants"; const getColorByPlanType = (planType: string) => { switch (planType) { case PLAN.CLASS: return css` - background-color: ${color.primary_blue}; + background-color: ${theme.primary_blue}; `; case PLAN.GRADE: return css` - background-color: ${color.primary_yellow}; + background-color: ${theme.primary_yellow}; `; case PLAN.SCHOOL: return css` - background-color: ${color.primary_red}; + background-color: ${theme.primary_red}; `; default: return css` - background-color: ${color.primary_mint}; + background-color: ${theme.primary_mint}; `; } }; diff --git a/src/templates/calendar/helpers/getPlanNameByPlanType.helper.ts b/src/templates/calendar/helpers/getPlanNameByPlanType.helper.ts index 00a4c916..0749d787 100644 --- a/src/templates/calendar/helpers/getPlanNameByPlanType.helper.ts +++ b/src/templates/calendar/helpers/getPlanNameByPlanType.helper.ts @@ -1,4 +1,4 @@ -import PLAN from "../constants/plan.constant"; +import { PLAN } from "../constants"; const getPlanNameByPlanType = (planType: string) => { switch (planType) { diff --git a/src/templates/calendar/helpers/getPlanTypeByPlanName.helper.ts b/src/templates/calendar/helpers/getPlanTypeByPlanName.helper.ts index 9c251554..9d113092 100644 --- a/src/templates/calendar/helpers/getPlanTypeByPlanName.helper.ts +++ b/src/templates/calendar/helpers/getPlanTypeByPlanName.helper.ts @@ -1,4 +1,4 @@ -import PLAN from "../constants/plan.constant"; +import { PLAN } from "../constants"; const getPlanTypeByPlanName = (planType: string) => { switch (planType) { diff --git a/src/templates/calendar/helpers/index.ts b/src/templates/calendar/helpers/index.ts index a0bc9aa0..62f3153c 100644 --- a/src/templates/calendar/helpers/index.ts +++ b/src/templates/calendar/helpers/index.ts @@ -1,5 +1,5 @@ -export { default as getColorByPlanType } from "./getColorByPlanType.helper"; export { default as getColorByDayName } from "./getColorByDayName.helper"; +export { default as getColorByPlanType } from "./getColorByPlanType.helper"; +export { default as getPaddingDayOfMonth } from "./getPaddingDayOfWeek.helper"; export { default as getPlanNameByPlanType } from "./getPlanNameByPlanType.helper"; export { default as getPlanTypeByPlanName } from "./getPlanTypeByPlanName.helper"; -export { default as getPaddingDayOfMonth } from "./getPaddingDayOfWeek.helper"; diff --git a/src/templates/calendar/hooks/useCalendar.tsx b/src/templates/calendar/hooks/useCalendar.tsx index 88e69294..a9109fe3 100644 --- a/src/templates/calendar/hooks/useCalendar.tsx +++ b/src/templates/calendar/hooks/useCalendar.tsx @@ -1,17 +1,16 @@ -import DATE from "@/constants/date.constant"; import dayjs from "dayjs"; import React from "react"; -import useModal from "@/hooks/useModal"; -import useUser from "@/hooks/useUser"; import { toast } from "react-toastify"; +import { useModal } from "@/@modal/hooks"; +import { useUser } from "@/@user/hooks"; +import { DATE } from "@/constants"; import { useAddCalendarPlanMutation, useDeleteCalendarPlanMutation, } from "../services/mutation.service"; -import { ChangeDateType } from "../types"; -import { CalendarPlanAddQuery } from "../interfaces"; import { getPlanTypeByPlanName } from "../helpers"; import CalendarPlanAddModal from "../layouts/CalendarPlanAddModal"; +import { CalendarPlanAddQuery } from "../types/@props"; const useCalendar = () => { const [currentMonth, setCurrentMonth] = React.useState(dayjs().month()); @@ -20,10 +19,6 @@ const useCalendar = () => { const { mutate: deleteMutate } = useDeleteCalendarPlanMutation(); const { mutate: addPlanMutate } = useAddCalendarPlanMutation(); - const isPlanWriterSameAsUser = (id: number) => { - return user.id === id; - }; - const handleOpenModalClick = (date?: string) => { if (date) { openModal({ @@ -55,7 +50,7 @@ const useCalendar = () => { deleteMutate(id); }; - const handleCalendarMonthChange = (month: ChangeDateType) => { + const handleCalendarMonthChange = (month: "INCREASE" | "DECREASE") => { if (month === DATE.INCREASE) { setCurrentMonth((prevMon) => (prevMon !== 12 ? prevMon + 1 : prevMon)); } @@ -76,7 +71,6 @@ const useCalendar = () => { return { currentMonth, - isPlanWriterSameAsUser, handleOpenModalClick, handlePlanAddButtonClick, handleDeleteCalendarPlanClick, diff --git a/src/templates/calendar/layouts/CalendarListItem.tsx b/src/templates/calendar/layouts/CalendarListItem.tsx index db5a8526..0f430c54 100644 --- a/src/templates/calendar/layouts/CalendarListItem.tsx +++ b/src/templates/calendar/layouts/CalendarListItem.tsx @@ -1,10 +1,11 @@ -import { color, flex, font } from "@/styles"; import dayjs from "dayjs"; import styled from "styled-components"; -import { CalendarListItemProps } from "../interfaces"; +import { theme, flex, font } from "@/styles"; import { useCalendar } from "../hooks"; import { getColorByPlanType } from "../helpers"; import CalendarPlanWriterInformationModal from "./CalendarPlanWriterInformationModal"; +import { CalendarListItemProps } from "../types/@props"; +import { CalendarPlan } from "../types"; const CalendarListItem = ({ calendar, isEmpty }: CalendarListItemProps) => { const { handleOpenModalClick, handleDeleteCalendarPlanClick } = useCalendar(); @@ -13,7 +14,7 @@ const CalendarListItem = ({ calendar, isEmpty }: CalendarListItemProps) => { <Container isEmpty={isEmpty}> <CalendarHead>{dayjs(calendar?.date).format("DD")}</CalendarHead> <CalendarBody> - {calendar?.plans.map((plan) => ( + {calendar?.plans.map((plan: CalendarPlan) => ( <CalendarPlanBox key={plan.id} type={plan.type} @@ -37,14 +38,14 @@ const CalendarListItem = ({ calendar, isEmpty }: CalendarListItemProps) => { const Container = styled.li<{ isEmpty?: boolean }>` width: 13%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; opacity: ${({ isEmpty }) => (isEmpty ? 0 : 1)}; `; const CalendarHead = styled.header` ${font.H5}; width: 100%; - border-top: 1px solid ${color.black}; + border-top: 1px solid ${theme.black}; padding: 10px 0; `; @@ -54,7 +55,7 @@ const CalendarBody = styled.section` min-height: 26vh; word-break: break-all; height: fit-content; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 8px; `; @@ -62,7 +63,7 @@ const CalendarPlanBox = styled.div<{ type: string }>` width: 100%; padding: 6px 10px; ${font.caption}; - color: ${color.white}; + color: ${theme.white}; cursor: pointer; position: relative; @@ -75,8 +76,8 @@ const CalendarPlanBox = styled.div<{ type: string }>` `; const CalendarPlanAddButton = styled.button` - background-color: ${color.light_gray}; - color: ${color.black}; + background-color: ${theme.light_gray}; + color: ${theme.black}; width: 100%; padding: 6px 0; `; diff --git a/src/templates/calendar/layouts/CalendarPlanAddModal.tsx b/src/templates/calendar/layouts/CalendarPlanAddModal.tsx index 12d2fc5e..ba550b80 100644 --- a/src/templates/calendar/layouts/CalendarPlanAddModal.tsx +++ b/src/templates/calendar/layouts/CalendarPlanAddModal.tsx @@ -1,14 +1,13 @@ -import { Column } from "@/components/Flex"; -import { Button, Input, Select } from "@/components/atoms"; -import useModal from "@/hooks/useModal"; -import { color, flex, font } from "@/styles"; import React from "react"; import styled from "styled-components"; -import getPlanType from "@/helpers/getPlanType.helper"; +import { Column } from "@/components/Flex"; +import { Button, Input, DropDown } from "@/components/atoms"; +import { theme, flex, font } from "@/styles"; +import { useModal } from "@/@modal/hooks"; +import { XIcon } from "@/assets/icons"; import PLAN from "../constants/plan.constant"; -import { CalendarPlanAddModalProps } from "../interfaces"; +import { CalendarPlanAddModalProps } from "../types/@props"; import { useCalendar } from "../hooks"; -import { PlanModalCloseIcon } from "../assets/icons"; const CalendarPlanAddModal = ({ date }: CalendarPlanAddModalProps) => { const { closeModal } = useModal(); @@ -20,7 +19,7 @@ const CalendarPlanAddModal = ({ date }: CalendarPlanAddModalProps) => { <Layout> <CalendarPlanHeader> <CalendarTitleText>📆 일정 추가하기</CalendarTitleText> - <PlanModalCloseIcon onClick={closeModal} /> + <XIcon onClick={closeModal} /> </CalendarPlanHeader> <CalendarPlanBody> <Input @@ -31,18 +30,18 @@ const CalendarPlanAddModal = ({ date }: CalendarPlanAddModalProps) => { /> <Column gap="6px"> <CalendarPlanClassifyText>일정 분류</CalendarPlanClassifyText> - <Select + <DropDown label="" width="100px" - options={[PLAN.학급일정, PLAN.학년일정, PLAN.학교일정]} - defaultOption={getPlanType(planType)} + optionList={[PLAN.학급일정, PLAN.학년일정, PLAN.학교일정]} + selected={planType} handler={setPlanType} /> </Column> <CalendarPlanAddButtonBox> <Button onClick={() => handlePlanAddButtonClick({ title, date, planType })} - color={color.primary_blue} + color={theme.primary_blue} > 추가하기 </Button> @@ -56,10 +55,10 @@ const Layout = styled.div` width: 40vw; height: fit-content; overflow-y: scroll; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 8px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; `; const CalendarPlanHeader = styled.header` @@ -77,7 +76,7 @@ const CalendarTitleText = styled.div` const CalendarPlanBody = styled.div` padding: 16px 28px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; diff --git a/src/templates/calendar/layouts/CalendarPlanWriterInformationModal.tsx b/src/templates/calendar/layouts/CalendarPlanWriterInformationModal.tsx index 253baf36..cd7ec289 100644 --- a/src/templates/calendar/layouts/CalendarPlanWriterInformationModal.tsx +++ b/src/templates/calendar/layouts/CalendarPlanWriterInformationModal.tsx @@ -1,19 +1,17 @@ -import React from "react"; -import { ImageWithFallback } from "@/components/atoms"; +import styled from "styled-components"; +import { FallbackImage } from "@/components/atoms"; import { defaultProfile } from "@/assets/images"; import { Row } from "@/components/Flex"; -import styled from "styled-components"; -import { color, font } from "@/styles"; -import { CalendarPlan } from "../interfaces"; -import { useCalendar } from "../hooks"; +import { useUser } from "@/@user/hooks"; +import { theme, font } from "@/styles"; +import { CalendarPlan } from "../types"; import { getPlanNameByPlanType } from "../helpers"; const CalendarPlanWriterInformationModal = ({ user, type }: CalendarPlan) => { - const { isPlanWriterSameAsUser } = useCalendar(); - + const { isSameUser } = useUser(); return ( <PlanWriterBox> - <ImageWithFallback + <FallbackImage width={20} height={20} src={user.profileImage} @@ -27,7 +25,7 @@ const CalendarPlanWriterInformationModal = ({ user, type }: CalendarPlan) => { · {getPlanNameByPlanType(type)} </PlanInformationText> </Row> - {isPlanWriterSameAsUser(user.id) && ( + {isSameUser(user.id) && ( <PlanWriterDeleteText>삭제하기</PlanWriterDeleteText> )} </PlanWriterBox> @@ -36,18 +34,18 @@ const CalendarPlanWriterInformationModal = ({ user, type }: CalendarPlan) => { const PlanInformationText = styled.span` ${font.p3}; - color: ${color.black}; + color: ${theme.black}; `; const PlanWriterDeleteText = styled(PlanInformationText)` - color: ${color.primary_red}; + color: ${theme.primary_red}; `; const PlanWriterBox = styled.div` display: none; width: fit-content; padding: 2px; - background-color: ${color.white}; + background-color: ${theme.white}; position: absolute; margin-top: -14vh; box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15); diff --git a/src/templates/calendar/layouts/index.tsx b/src/templates/calendar/layouts/index.tsx index 8d13873f..08996110 100644 --- a/src/templates/calendar/layouts/index.tsx +++ b/src/templates/calendar/layouts/index.tsx @@ -1,17 +1,16 @@ import styled from "styled-components"; import React from "react"; import dayjs from "dayjs"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; +import { ArrowIcon } from "@/assets/icons"; import { Column, Row } from "@/components/Flex"; -import DATE from "@/constants/date.constant"; -import DIRECTION from "@/constants/direction.constant"; +import { DATE, DIRECTION } from "@/constants"; import { useCalendarListQuery } from "../services/query.service"; import { useCalendar } from "../hooks"; import WeekDayHeaderBox from "./WeekDayHeaderBox"; -import { CalendarItem } from "../interfaces"; +import { CalendarItem } from "../types"; import { getPaddingDayOfMonth } from "../helpers"; import CalendarListItem from "./CalendarListItem"; -import { CalendarArrowIcon } from "../assets/icons"; const CalendarPage = () => { const { currentMonth, handleCalendarMonthChange } = useCalendar(); @@ -30,7 +29,9 @@ const CalendarPage = () => { </SubTitleText> </Column> <Row width="100%" gap="16px"> - <CalendarArrowIcon + <ArrowIcon + width={40} + height={40} direction={DIRECTION.LEFT} onClick={() => handleCalendarMonthChange(DATE.DECREASE)} /> @@ -48,7 +49,9 @@ const CalendarPage = () => { ))} </CalendarList> </CalendarBox> - <CalendarArrowIcon + <ArrowIcon + width={40} + height={40} direction={DIRECTION.RIGHT} onClick={() => handleCalendarMonthChange(DATE.INCREASE)} /> @@ -68,14 +71,14 @@ const TitleText = styled.span` `; const SubTitleText = styled.span` - color: ${color.gray}; + color: ${theme.gray}; `; const CalendarBox = styled.main` width: 100%; - background-color: ${color.white}; + background-color: ${theme.white}; border-radius: 5px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; padding: 24px 32px; gap: 36px; `; diff --git a/src/templates/calendar/services/api.service.ts b/src/templates/calendar/services/api.service.ts index cb60728b..9077169b 100644 --- a/src/templates/calendar/services/api.service.ts +++ b/src/templates/calendar/services/api.service.ts @@ -1,5 +1,5 @@ import httpClient from "@/apis/httpClient"; -import { Calendar } from "../interfaces"; +import { Calendar } from "../types"; export const getCalendarList = async (month: number) => { const { data } = await httpClient.calendar.get({ diff --git a/src/templates/calendar/services/mutation.service.ts b/src/templates/calendar/services/mutation.service.ts index 6016ccba..f34fc7a1 100644 --- a/src/templates/calendar/services/mutation.service.ts +++ b/src/templates/calendar/services/mutation.service.ts @@ -1,9 +1,9 @@ import { toast } from "react-toastify"; -import useModal from "@/hooks/useModal"; -import { KEY } from "@/constants"; import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { KEY } from "@/constants"; +import { useModal } from "@/@modal/hooks"; import { createCalendarItem, deleteCalendarItem } from "./api.service"; -import { Calendar } from "../interfaces"; +import { Calendar } from "../types"; export const useAddCalendarPlanMutation = () => { const { closeModal } = useModal(); diff --git a/src/templates/calendar/services/query.service.ts b/src/templates/calendar/services/query.service.ts index 1f73c0a0..6419e46d 100644 --- a/src/templates/calendar/services/query.service.ts +++ b/src/templates/calendar/services/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getCalendarList } from "./api.service"; export const useCalendarListQuery = (currentMonth: number) => { diff --git a/src/templates/calendar/types/@props/CalendarArrowIconProps.type.ts b/src/templates/calendar/types/@props/CalendarArrowIconProps.type.ts new file mode 100644 index 00000000..44d659a5 --- /dev/null +++ b/src/templates/calendar/types/@props/CalendarArrowIconProps.type.ts @@ -0,0 +1,6 @@ +import { CalendarArrowDirectionType } from ".."; + +export default interface CalendarArrowIconProps + extends React.SVGProps<SVGSVGElement> { + direction: CalendarArrowDirectionType; +} diff --git a/src/templates/calendar/types/@props/CalendarListItemProps.type.ts b/src/templates/calendar/types/@props/CalendarListItemProps.type.ts new file mode 100644 index 00000000..5485491a --- /dev/null +++ b/src/templates/calendar/types/@props/CalendarListItemProps.type.ts @@ -0,0 +1,6 @@ +import CalendarItem from "../CalendarItem.type"; + +export default interface CalendarListItemProps { + calendar?: CalendarItem; + isEmpty?: boolean; +} diff --git a/src/templates/calendar/types/@props/CalendarPlanAddModalProps.type.ts b/src/templates/calendar/types/@props/CalendarPlanAddModalProps.type.ts new file mode 100644 index 00000000..93e2923c --- /dev/null +++ b/src/templates/calendar/types/@props/CalendarPlanAddModalProps.type.ts @@ -0,0 +1,3 @@ +export default interface CalendarPlanAddModalProps { + date: string; +} diff --git a/src/templates/calendar/types/@props/CalendarPlanAddQuery.type.ts b/src/templates/calendar/types/@props/CalendarPlanAddQuery.type.ts new file mode 100644 index 00000000..314e2dd3 --- /dev/null +++ b/src/templates/calendar/types/@props/CalendarPlanAddQuery.type.ts @@ -0,0 +1,5 @@ +export default interface CalendarPlanAddQuery { + title: string; + date: string; + planType: string; +} diff --git a/src/templates/calendar/types/@props/index.ts b/src/templates/calendar/types/@props/index.ts new file mode 100644 index 00000000..7cc25aa3 --- /dev/null +++ b/src/templates/calendar/types/@props/index.ts @@ -0,0 +1,4 @@ +export type { default as CalendarArrowIconProps } from "./CalendarArrowIconProps.type"; +export type { default as CalendarListItemProps } from "./CalendarListItemProps.type"; +export type { default as CalendarPlanAddModalProps } from "./CalendarPlanAddModalProps.type"; +export type { default as CalendarPlanAddQuery } from "./CalendarPlanAddQuery.type"; diff --git a/src/templates/calendar/types/CalendarItem.type.ts b/src/templates/calendar/types/CalendarItem.type.ts new file mode 100644 index 00000000..f8f82780 --- /dev/null +++ b/src/templates/calendar/types/CalendarItem.type.ts @@ -0,0 +1,6 @@ +import CalendarPlan from "./CalendarPlan.type"; + +export default interface CalendarItem { + date: string; + plans: Array<CalendarPlan>; +} diff --git a/src/templates/calendar/types/CalendarPlan.type.ts b/src/templates/calendar/types/CalendarPlan.type.ts new file mode 100644 index 00000000..e9b26def --- /dev/null +++ b/src/templates/calendar/types/CalendarPlan.type.ts @@ -0,0 +1,12 @@ +import Calendar from "./Calender.type"; + +export default interface CalendarPlan extends Calendar { + id: number; + type: string; + title: string; + user: { + id: number; + nickName: string; + profileImage: string; + }; +} diff --git a/src/templates/calendar/types/Calender.type.ts b/src/templates/calendar/types/Calender.type.ts new file mode 100644 index 00000000..862ccd2c --- /dev/null +++ b/src/templates/calendar/types/Calender.type.ts @@ -0,0 +1,9 @@ +export default interface Calendar { + title: string; + priority: number; + date: string; + color: string; + type: string; + grade: number; + classNumber: number; +} diff --git a/src/templates/calendar/types/index.ts b/src/templates/calendar/types/index.ts index c010418e..426da1fe 100644 --- a/src/templates/calendar/types/index.ts +++ b/src/templates/calendar/types/index.ts @@ -1,2 +1,4 @@ -export type { default as CalendarArrowDirectionType } from "./calendarArrowDirection.type"; -export type { default as ChangeDateType } from "./changeDate.type"; +export type { default as CalendarItem } from "./CalendarItem.type"; +export type { default as Calendar } from "./Calender.type"; +export type { default as CalendarPlan } from "./CalendarPlan.type"; +export type { default as CalendarArrowDirectionType } from "./CalendarArrowDirection.type"; From 75ef997db2160411e56df41786fac8a57194e0c5 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:45:21 +0900 Subject: [PATCH 17/28] =?UTF-8?q?refactor(home):=20=ED=99=88=20=EB=8F=84?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/assets/data/defaultBanner.data.ts | 10 ++ src/templates/home/assets/data/index.ts | 2 +- .../home/helpers/getCurrentMeal.helper.ts | 20 ++++ ...4\202\254\353\252\205ByMealName.helper.ts" | 14 +++ src/templates/home/helpers/index.ts | 2 + src/templates/home/index.tsx | 11 +- .../home/layouts/BasicMode/HomeBamboo.tsx | 9 +- .../home/layouts/BasicMode/HomeCalendar.tsx | 22 ++-- .../home/layouts/BasicMode/HomeHead.tsx | 17 +-- .../home/layouts/BasicMode/HomeMainBanner.tsx | 6 +- .../home/layouts/BasicMode/HomeMeal.tsx | 26 ++-- .../home/layouts/BasicMode/HomeMiniBanner.tsx | 18 +-- .../home/layouts/BasicMode/HomePost.tsx | 11 +- .../home/layouts/BasicMode/HomePostList.tsx | 16 ++- .../home/layouts/BasicMode/HomeRadarChart.tsx | 5 +- .../home/layouts/BasicMode/HomeReserve.tsx | 10 +- .../home/layouts/BasicMode/HomeReserveMap.tsx | 36 +++--- .../home/layouts/BasicMode/index.tsx | 59 ++++------ .../home/layouts/RemoconMode/index.tsx | 111 +++++++++--------- src/templates/home/services/query.service.ts | 2 +- 20 files changed, 213 insertions(+), 194 deletions(-) create mode 100644 src/templates/home/assets/data/defaultBanner.data.ts create mode 100644 src/templates/home/helpers/getCurrentMeal.helper.ts create mode 100644 "src/templates/home/helpers/get\354\213\235\354\202\254\353\252\205ByMealName.helper.ts" create mode 100644 src/templates/home/helpers/index.ts diff --git a/src/templates/home/assets/data/defaultBanner.data.ts b/src/templates/home/assets/data/defaultBanner.data.ts new file mode 100644 index 00000000..cdedb397 --- /dev/null +++ b/src/templates/home/assets/data/defaultBanner.data.ts @@ -0,0 +1,10 @@ +import * as Banner from "@/assets/images"; + +const defaultBannerData = [ + { href: "https://buma.wiki", src: Banner.Banner1Image }, + { href: "https://jjoing-frontend.vercel.app", src: Banner.Banner2Image }, + { href: "https://dev.com", src: Banner.Banner3Image }, + { href: "https://google.com", src: Banner.Banner4Image }, +]; + +export default defaultBannerData; diff --git a/src/templates/home/assets/data/index.ts b/src/templates/home/assets/data/index.ts index c81be29d..94bdebf8 100644 --- a/src/templates/home/assets/data/index.ts +++ b/src/templates/home/assets/data/index.ts @@ -1 +1 @@ -export { default as defaultBannerData } from "./defaultBannerData"; +export { default as defaultBannerData } from "./defaultBanner.data"; diff --git a/src/templates/home/helpers/getCurrentMeal.helper.ts b/src/templates/home/helpers/getCurrentMeal.helper.ts new file mode 100644 index 00000000..1b6843fb --- /dev/null +++ b/src/templates/home/helpers/getCurrentMeal.helper.ts @@ -0,0 +1,20 @@ +import dayjs from "dayjs"; + +const getCurrentMeal = () => { + const currentTime = dayjs().format("HH:mm"); + let mealTime; + + switch (true) { + case currentTime >= "02:00" && currentTime < "08:00": + mealTime = "MORNING"; + break; + case currentTime >= "08:00" && currentTime < "13:00": + mealTime = "LUNCH"; + break; + default: + mealTime = "DINNER"; + } + + return mealTime; +}; +export default getCurrentMeal; diff --git "a/src/templates/home/helpers/get\354\213\235\354\202\254\353\252\205ByMealName.helper.ts" "b/src/templates/home/helpers/get\354\213\235\354\202\254\353\252\205ByMealName.helper.ts" new file mode 100644 index 00000000..8222f22d --- /dev/null +++ "b/src/templates/home/helpers/get\354\213\235\354\202\254\353\252\205ByMealName.helper.ts" @@ -0,0 +1,14 @@ +const get식사명ByMealName = (mealName: string) => { + switch (mealName) { + case "MORNING": + return "조식"; + case "LUNCH": + return "중식"; + case "DINNER": + return "석식"; + default: + return mealName; + } +}; + +export default get식사명ByMealName; diff --git a/src/templates/home/helpers/index.ts b/src/templates/home/helpers/index.ts new file mode 100644 index 00000000..b70c7878 --- /dev/null +++ b/src/templates/home/helpers/index.ts @@ -0,0 +1,2 @@ +export { default as getCurrentMeal } from "./getCurrentMeal.helper"; +export { default as get식사명ByMealName } from "./get식사명ByMealName.helper"; diff --git a/src/templates/home/index.tsx b/src/templates/home/index.tsx index ec570af5..e99c9459 100644 --- a/src/templates/home/index.tsx +++ b/src/templates/home/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import Storage from "@/storage"; import { flex } from "@/styles"; +import { SETTING } from "@/storage/constants"; import { Category } from "@/components/atoms"; import useWindow from "@/hooks/useWindow"; import BasicMode from "./layouts/BasicMode"; @@ -12,12 +13,12 @@ const HomePage = () => { const { isWindow } = useWindow(); React.useEffect(() => { - setViewMode(Storage.getItem("SETTING:홈페이지조회형식") || "기본 모드"); + setViewMode(Storage.getItem(SETTING.홈페이지조회형식) || "기본 모드"); }, [isWindow]); const handleChangeClick = (modeName: string) => { setViewMode(modeName); - Storage.setItem("SETTING:홈페이지조회형식", modeName); + Storage.setItem(SETTING.홈페이지조회형식, modeName); }; return ( @@ -30,7 +31,7 @@ const HomePage = () => { name="viewMode" onChange={() => handleChangeClick(modeName)} label={modeName} - checked={modeName === viewMode} + selected={modeName === viewMode} /> ))} </ModeBox> @@ -42,13 +43,13 @@ const HomePage = () => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 20px; `; const ModeBox = styled.div` width: fit-content; - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; flex-wrap: wrap; gap: 12px; `; diff --git a/src/templates/home/layouts/BasicMode/HomeBamboo.tsx b/src/templates/home/layouts/BasicMode/HomeBamboo.tsx index 3bff6422..b381461d 100644 --- a/src/templates/home/layouts/BasicMode/HomeBamboo.tsx +++ b/src/templates/home/layouts/BasicMode/HomeBamboo.tsx @@ -1,15 +1,14 @@ -import { color, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { theme, font } from "@/styles"; import { BambooIcon } from "@/assets/icons"; import HomeHead from "./HomeHead"; -interface IHomeBambooProps { +interface HomeBambooProps { allowedId: number; content: string; } -const HomeBamboo = ({ allowedId, content }: IHomeBambooProps) => { +const HomeBamboo = ({ allowedId, content }: HomeBambooProps) => { return ( <Container> <HomeHead @@ -27,7 +26,7 @@ const HomeBamboo = ({ allowedId, content }: IHomeBambooProps) => { const Container = styled.div` width: 20vw; height: 100%; - background-color: ${color.white}; + background-color: ${theme.white}; border-radius: 4px; `; diff --git a/src/templates/home/layouts/BasicMode/HomeCalendar.tsx b/src/templates/home/layouts/BasicMode/HomeCalendar.tsx index 42f595bd..921bd211 100644 --- a/src/templates/home/layouts/BasicMode/HomeCalendar.tsx +++ b/src/templates/home/layouts/BasicMode/HomeCalendar.tsx @@ -1,11 +1,10 @@ -import { color, flex, font } from "@/styles"; -import { CalendarIcon } from "@/assets/icons"; -import getPlanType from "@/helpers/getPlanType.helper"; -import React from "react"; import styled from "styled-components"; +import { theme, flex, font } from "@/styles"; +import { CalendarIcon } from "@/assets/icons"; +import { getPlanNameByPlanType } from "@/templates/calendar/helpers"; import HomeHead from "./HomeHead"; -interface IHomeCalendarProps { +interface HomeCalendarProps { calenders: Array<{ id: number; title: string; @@ -13,14 +12,15 @@ interface IHomeCalendarProps { }>; } -const HomeCalendar = ({ calenders }: IHomeCalendarProps) => { +const HomeCalendar = ({ calenders }: HomeCalendarProps) => { return ( <Container> <HomeHead icon={<CalendarIcon />} title="오늘의 일정" href="/calendar" /> <CalendarBody> {calenders?.map((calendar) => ( <CalendarContent> - - {calendar.title} <span>{getPlanType(calendar.type)}</span> + - {calendar.title}{" "} + <span>{getPlanNameByPlanType(calendar.type)}</span> </CalendarContent> ))} {!calenders.length && ( @@ -37,15 +37,15 @@ const Container = styled.div` width: 46%; height: 30vh; border-radius: 4px; - background-color: ${color.white}; - ${flex.COLUMN}; + background-color: ${theme.white}; + ${flex.COLUMN_FLEX}; `; const CalendarBody = styled.div` width: 100%; height: 100%; padding: 6px 24px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; `; const CalendarContent = styled.p` @@ -56,7 +56,7 @@ const CalendarContent = styled.p` span { ${font.p4}; - color: ${color.gray}; + color: ${theme.gray}; } `; diff --git a/src/templates/home/layouts/BasicMode/HomeHead.tsx b/src/templates/home/layouts/BasicMode/HomeHead.tsx index 46c5035e..fce7b9da 100644 --- a/src/templates/home/layouts/BasicMode/HomeHead.tsx +++ b/src/templates/home/layouts/BasicMode/HomeHead.tsx @@ -1,16 +1,17 @@ -import Arrow from "@/assets/icons/Arrow"; -import { color, flex, font } from "@/styles"; +import ArrowIcon from "@/assets/icons/ArrowIcon"; +import { DIRECTION } from "@/constants"; +import { theme, flex, font } from "@/styles"; import Link from "next/link"; import React from "react"; import styled from "styled-components"; -interface IHomeHeadProps { +interface HomeHeadProps { icon: React.JSX.Element; title: string; href?: string; } -const HomeHead = ({ icon, title, href }: IHomeHeadProps) => { +const HomeHead = ({ icon, title, href }: HomeHeadProps) => { return ( <Container> {icon} @@ -18,7 +19,7 @@ const HomeHead = ({ icon, title, href }: IHomeHeadProps) => { {href && ( <StyledLink href={href} target="_blank"> <StyledLinkHref /> - <Arrow direction="right" width={8} /> + <ArrowIcon direction={DIRECTION.RIGHT} width={8} /> </StyledLink> )} </Container> @@ -30,7 +31,7 @@ const Container = styled.div` ${flex.HORIZONTAL}; gap: 8px; padding: 6px 8px; - border-bottom: 1px solid ${color.on_tertiary}; + border-bottom: 1px solid ${theme.on_tertiary}; `; const StyledTitle = styled.span` @@ -39,14 +40,14 @@ const StyledTitle = styled.span` `; const StyledLink = styled(Link)` - ${flex.HORIZONTAL}; + ${flex.VERTICAL}; margin-left: auto; gap: 4px; `; const StyledLinkHref = styled.span` ${font.p4}; - color: ${color.gray}; + color: ${theme.gray}; &:after { content: "자세히 보기"; diff --git a/src/templates/home/layouts/BasicMode/HomeMainBanner.tsx b/src/templates/home/layouts/BasicMode/HomeMainBanner.tsx index b2b573a5..3e0a616a 100644 --- a/src/templates/home/layouts/BasicMode/HomeMainBanner.tsx +++ b/src/templates/home/layouts/BasicMode/HomeMainBanner.tsx @@ -1,14 +1,14 @@ -import { TestBanner } from "@/assets/images"; import Image from "next/image"; import { useRouter } from "next/navigation"; import React from "react"; import styled from "styled-components"; +import { TestBanner } from "@/assets/images"; -interface IHomeMainBannerProps { +interface HomeMainBannerProps { href?: string; } -const HomeMainBanner = ({ href }: IHomeMainBannerProps) => { +const HomeMainBanner = ({ href }: HomeMainBannerProps) => { const router = useRouter(); return ( diff --git a/src/templates/home/layouts/BasicMode/HomeMeal.tsx b/src/templates/home/layouts/BasicMode/HomeMeal.tsx index eaf49550..09b160de 100644 --- a/src/templates/home/layouts/BasicMode/HomeMeal.tsx +++ b/src/templates/home/layouts/BasicMode/HomeMeal.tsx @@ -1,16 +1,16 @@ -import { color, flex, font } from "@/styles"; -import { MealIcon } from "@/assets/icons"; -import React from "react"; import styled from "styled-components"; +import { theme, flex, font } from "@/styles"; +import { MealIcon } from "@/assets/icons"; import HomeHead from "./HomeHead"; +import { get식사명ByMealName } from "../../helpers"; -interface IHomeMealProps { +interface HomeMealProps { content: string; cal: string; - name: string; + mealName: string; } -const HomeMeal = ({ content, cal, name }: IHomeMealProps) => { +const HomeMeal = ({ mealName, content, cal }: HomeMealProps) => { return ( <Container> <HomeHead icon={<MealIcon />} title="오늘의 급식" href="/meal" /> @@ -25,7 +25,7 @@ const HomeMeal = ({ content, cal, name }: IHomeMealProps) => { /> {content && ( <MealCalorie> - {name}, {cal} + {get식사명ByMealName(mealName)}, {cal}kcal </MealCalorie> )} {!content && <MealContent>등록된 급식이 없어요.</MealContent>} @@ -38,15 +38,15 @@ const Container = styled.div` width: 46%; height: 30vh; border-radius: 4px; - background-color: ${color.white}; - ${flex.COLUMN}; + background-color: ${theme.white}; + ${flex.COLUMN_FLEX}; `; const MealBody = styled.div` width: 100%; height: 100%; padding: 6px 24px; - display: flex; + ${flex.FLEX}; `; const MealContent = styled.p` @@ -59,12 +59,8 @@ const MealContent = styled.p` const MealCalorie = styled.span` ${font.caption}; font-size: 10px; - color: ${color.gray}; + color: ${theme.gray}; margin-left: auto; - - &:after { - content: "kcal"; - } `; export default HomeMeal; diff --git a/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx b/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx index a879f4fe..72d27e79 100644 --- a/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx +++ b/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx @@ -1,22 +1,16 @@ import Image from "next/image"; import React from "react"; import styled from "styled-components"; -import { defaultBannerData } from "@/templates/calendar/assets/data"; import Link from "next/link"; -import { color } from "@/styles"; -import "react-responsive-carousel/lib/styles/carousel.min.css"; -import { Carousel } from "react-responsive-carousel"; +import { theme } from "@/styles"; +import { defaultBannerData } from "../../assets/data"; const HomeMiniBanner = () => { return ( <Layout> - <Carousel showArrows={false} autoPlay infiniteLoop showThumbs={false}> - {defaultBannerData.map((banner) => ( - <Container href={banner.href}> - <StyledBanner src={banner.src} alt="small banner" /> - </Container> - ))} - </Carousel> + <Container href={defaultBannerData[0].href}> + <StyledBanner src={defaultBannerData[0].src} alt="small banner" /> + </Container> </Layout> ); }; @@ -29,7 +23,7 @@ const Layout = styled.div` const Container = styled(Link)` width: 100%; height: 150px; - background-color: ${color.white}; + background-color: ${theme.white}; `; const StyledBanner = styled(Image)` diff --git a/src/templates/home/layouts/BasicMode/HomePost.tsx b/src/templates/home/layouts/BasicMode/HomePost.tsx index 2ea050f2..903f83e8 100644 --- a/src/templates/home/layouts/BasicMode/HomePost.tsx +++ b/src/templates/home/layouts/BasicMode/HomePost.tsx @@ -1,11 +1,10 @@ -import { color } from "@/styles"; -import { ChatIcon, NoticeIcon } from "@/assets/icons"; -import React from "react"; import styled from "styled-components"; +import { theme } from "@/styles"; +import { ChatIcon, NoticeIcon } from "@/assets/icons"; import HomeHead from "./HomeHead"; import HomePostList from "./HomePostList"; -interface IHomePostProps { +interface HomePostProps { notice: Array<{ id: number; title: string; @@ -18,7 +17,7 @@ interface IHomePostProps { }>; } -const HomePost = ({ notice, common }: IHomePostProps) => { +const HomePost = ({ notice, common }: HomePostProps) => { return ( <Container> <PostBox> @@ -36,7 +35,7 @@ const HomePost = ({ notice, common }: IHomePostProps) => { const Container = styled.div` width: 100%; height: 30vh; - background-color: ${color.white}; + background-color: ${theme.white}; border-radius: 4px; display: flex; `; diff --git a/src/templates/home/layouts/BasicMode/HomePostList.tsx b/src/templates/home/layouts/BasicMode/HomePostList.tsx index 3f3debb9..a70363e8 100644 --- a/src/templates/home/layouts/BasicMode/HomePostList.tsx +++ b/src/templates/home/layouts/BasicMode/HomePostList.tsx @@ -1,12 +1,10 @@ -import { ROUTER } from "@/constants"; -import DATE from "@/constants/date.constant"; -import { color, flex, font } from "@/styles"; import dayjs from "dayjs"; import Link from "next/link"; -import React from "react"; import styled from "styled-components"; +import { ROUTER } from "@/constants"; +import { theme, flex, font } from "@/styles"; -interface IHomePostListProps { +interface HomePostListProps { posts: Array<{ id: number; title: string; @@ -14,14 +12,14 @@ interface IHomePostListProps { }>; } -const HomePostList = ({ posts }: IHomePostListProps) => { +const HomePostList = ({ posts }: HomePostListProps) => { return ( <Container> {posts?.map((post) => ( <PostListItem href={`${ROUTER.POST.LIST}/${post.id}`} key={post.id}> <StyledTitle>{post.title}</StyledTitle> <StyledDate> - {dayjs(post.createdAt).format(DATE.YYYYMMDDAHHMM)} + {dayjs(post.createdAt).format("YYYY년 M월 D일")} </StyledDate> </PostListItem> ))} @@ -32,7 +30,7 @@ const HomePostList = ({ posts }: IHomePostListProps) => { const Container = styled.div` width: 100%; padding: 8px 0; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 8px; `; @@ -51,7 +49,7 @@ const StyledTitle = styled.span` const StyledDate = styled.span` ${font.p4}; margin-left: auto; - color: ${color.gray}; + color: ${theme.gray}; `; export default HomePostList; diff --git a/src/templates/home/layouts/BasicMode/HomeRadarChart.tsx b/src/templates/home/layouts/BasicMode/HomeRadarChart.tsx index 049465ed..3e9431b5 100644 --- a/src/templates/home/layouts/BasicMode/HomeRadarChart.tsx +++ b/src/templates/home/layouts/BasicMode/HomeRadarChart.tsx @@ -1,6 +1,5 @@ -import { color } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { theme } from "@/styles"; import DistributionIcon from "@/assets/icons/DistributionIcon"; import HomeHead from "./HomeHead"; @@ -19,7 +18,7 @@ const HomeRadarChart = () => { const Container = styled.div` width: 31.2vw; border-radius: 4px; - background-color: ${color.white}; + background-color: ${theme.white}; `; export default HomeRadarChart; diff --git a/src/templates/home/layouts/BasicMode/HomeReserve.tsx b/src/templates/home/layouts/BasicMode/HomeReserve.tsx index 4261b659..bd21747e 100644 --- a/src/templates/home/layouts/BasicMode/HomeReserve.tsx +++ b/src/templates/home/layouts/BasicMode/HomeReserve.tsx @@ -1,14 +1,14 @@ -import { color } from "@/styles"; -import { BerIcon } from "@/assets/icons"; -import React from "react"; import styled from "styled-components"; +import { theme } from "@/styles"; +import { ROUTER } from "@/constants"; +import { BerIcon } from "@/assets/icons"; import HomeHead from "./HomeHead"; import HomeReserveMap from "./HomeReserveMap"; const HomeReserve = () => { return ( <Container> - <HomeHead icon={<BerIcon />} title="베르실 예약" href="/reserve" /> + <HomeHead icon={<BerIcon />} title="베르실 예약" href={ROUTER.RESERVE} /> <ReserveBox> <HomeReserveMap reservedList={[]} /> </ReserveBox> @@ -19,7 +19,7 @@ const HomeReserve = () => { const Container = styled.div` width: 100%; height: 30vh; - background-color: ${color.white}; + background-color: ${theme.white}; border-radius: 4px; @media screen and (max-width: 1024px) { diff --git a/src/templates/home/layouts/BasicMode/HomeReserveMap.tsx b/src/templates/home/layouts/BasicMode/HomeReserveMap.tsx index b7f09517..cbc757c8 100644 --- a/src/templates/home/layouts/BasicMode/HomeReserveMap.tsx +++ b/src/templates/home/layouts/BasicMode/HomeReserveMap.tsx @@ -1,19 +1,17 @@ -import { Column, Row } from "@/components/Flex"; -import { roomStore } from "@/store/room.store"; -import { color, flex, font } from "@/styles"; +import React from "react"; import dayjs from "dayjs"; import { useRouter } from "next/navigation"; -import React, { useState } from "react"; -import { useRecoilState } from "recoil"; import styled, { css } from "styled-components"; +import { Column, Row } from "@/components/Flex"; +import { theme, flex, font } from "@/styles"; interface IReserveMapProps { reservedList: Array<number>; } const HomeReserveMap = ({ reservedList }: IReserveMapProps) => { - const [room, setRoom] = useRecoilState(roomStore); - const [date, setDate] = useState(dayjs().format("YYYY-MM-DD")); + const [room, setRoom] = React.useState(0); + const [date, setDate] = React.useState(dayjs().format("YYYY-MM-DD")); const router = useRouter(); const handleRoomButtonClick = (roomNumber: number) => { @@ -22,7 +20,7 @@ const HomeReserveMap = ({ reservedList }: IReserveMapProps) => { }; const handleReserveButtonClick = () => { - router.push(`/reserve?date=${date}`); + router.push(`/ber?date=${date}`); }; return ( @@ -91,15 +89,15 @@ const CommonRoom = styled.div<{ isClicked?: boolean; isReserved?: boolean }>` ${({ isReserved }) => isReserved ? css` - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; cursor: default; &:after { content: "예약중"; } ` : css` - background-color: ${color.white}; - color: ${color.green}; + background-color: ${theme.white}; + color: ${theme.green}; &:after { content: "예약 가능"; } @@ -107,8 +105,8 @@ const CommonRoom = styled.div<{ isClicked?: boolean; isReserved?: boolean }>` ${({ isClicked }) => isClicked && css` - background-color: ${color.primary_blue}; - color: ${color.white}; + background-color: ${theme.primary_blue}; + color: ${theme.white}; &:after { content: "선택중"; } @@ -126,7 +124,7 @@ const LongRoom = styled(CommonRoom)` const InputContainer = styled.div` width: 100%; height: 13vh; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05); padding: 14px; display: ${flex.CENTER}; @@ -134,7 +132,7 @@ const InputContainer = styled.div` `; const StyledInputWrap = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 6px; margin-top: auto; `; @@ -147,7 +145,7 @@ const StyledInput = styled.input` width: 120px; padding: 6px 10px; height: 30px; - background-color: ${color.white}; + background-color: ${theme.white}; ${font.caption}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05); `; @@ -155,13 +153,13 @@ const StyledInput = styled.input` const StyledButton = styled.button` margin-top: auto; border: none; - background-color: ${color.primary_blue}; + background-color: ${theme.primary_blue}; padding: 6px 14px; border-radius: 4px; width: fit-content; height: fit-content; ${font.caption}; - color: ${color.white}; + color: ${theme.white}; &:after { content: "예약하기"; } @@ -173,7 +171,7 @@ const StyledButton = styled.button` } &:disabled { - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; } `; diff --git a/src/templates/home/layouts/BasicMode/index.tsx b/src/templates/home/layouts/BasicMode/index.tsx index e55774bf..8b9c4013 100644 --- a/src/templates/home/layouts/BasicMode/index.tsx +++ b/src/templates/home/layouts/BasicMode/index.tsx @@ -1,10 +1,6 @@ -import React from "react"; -import { getMealName } from "@/helpers"; import { Column, Row } from "@/components/Flex"; import { Aside } from "@/components/common"; -import useUser from "@/hooks/useUser"; -import dayjs from "dayjs"; -import DATE from "@/constants/date.constant"; +import { useUser } from "@/@user/hooks"; import { useMainQuery } from "../../services/query.service"; import HomeMeal from "./HomeMeal"; import HomeReserve from "./HomeReserve"; @@ -13,40 +9,35 @@ import HomeCalendar from "./HomeCalendar"; import HomePost from "./HomePost"; import HomeMiniBanner from "./HomeMiniBanner"; import HomeBamboo from "./HomeBamboo"; +import { getCurrentMeal } from "../../helpers"; const BasicMode = () => { const { isSuccess, data } = useMainQuery(); const { isLogined } = useUser(); - const currentDate = dayjs().format(DATE.YYMMDD); + const currentMeal = getCurrentMeal(); - return ( - isSuccess && - isLogined && ( - <Column gap="8px"> - <Row gap="8px" width="100%"> - <HomeMeal - {...data.meal.data[currentDate]} - name={getMealName(currentDate)} - /> - <HomeReserve /> - <Aside /> - </Row> - <Row gap="8px" width="100%"> - <Column gap="20px" width="100%"> - <HomeMainBanner href="/post" /> - <Row gap="8px" width="100%"> - <HomeCalendar {...data.calender} /> - <HomePost notice={data.notice} common={data.common} /> - </Row> - </Column> - <Column gap="8px"> - <HomeMiniBanner /> - <HomeBamboo {...data.bamboo} /> - </Column> - </Row> - </Column> - ) - ); + return isSuccess && isLogined ? ( + <Column gap="8px"> + <Row gap="8px" width="100%"> + <HomeMeal {...data.meal.data[currentMeal]} mealName={currentMeal} /> + <HomeReserve /> + <Aside /> + </Row> + <Row gap="8px" width="100%"> + <Column gap="20px" width="100%"> + <HomeMainBanner href="/post" /> + <Row gap="8px" width="100%"> + <HomeCalendar {...data.calender} /> + <HomePost notice={data.notice} common={data.common} /> + </Row> + </Column> + <Column gap="8px"> + <HomeMiniBanner /> + <HomeBamboo {...data.bamboo} /> + </Column> + </Row> + </Column> + ) : null; }; export default BasicMode; diff --git a/src/templates/home/layouts/RemoconMode/index.tsx b/src/templates/home/layouts/RemoconMode/index.tsx index a260136b..e598cbac 100644 --- a/src/templates/home/layouts/RemoconMode/index.tsx +++ b/src/templates/home/layouts/RemoconMode/index.tsx @@ -1,15 +1,14 @@ +import Link from "next/link"; +import styled from "styled-components"; import { defaultProfile } from "@/assets/images"; import { Column, Row } from "@/components/Flex"; -import { ImageWithFallback } from "@/components/atoms"; -import useUser from "@/hooks/useUser"; +import { FallbackImage } from "@/components/atoms"; import { ROUTER } from "@/constants"; -import { color, flex, font } from "@/styles"; -import Link from "next/link"; -import React from "react"; -import styled from "styled-components"; +import { theme, flex, font } from "@/styles"; import { BerIcon, CalendarIcon, MealIcon, NoticeIcon } from "@/assets/icons"; import TimetableIcon from "@/assets/icons/TimetableIcon"; import JoinCheckIcon from "@/assets/icons/JoinCheckIcon"; +import { useUser } from "@/@user/hooks"; import { useMainQuery } from "../../services/query.service"; const remoconList = [ @@ -33,57 +32,55 @@ const RemoconMode = () => { const { user } = useUser(); const { data, isSuccess } = useMainQuery(); - return ( - isSuccess && ( - <Container> - <RemoconBox href="https://auth.bssm.kro.kr/user" target="_blank"> - <ImageWithFallback - src={user.profile_image} - fallbackSrc={defaultProfile} - alt="profile" - width={50} - height={50} - rounded - /> - <Column> - <StudentInfomation> - {user.grade}학년 {user.classNum}반 {user.studentNumber}번{" "} - {user.name} - </StudentInfomation> - <Nickname>{user.nickname}</Nickname> - </Column> - </RemoconBox> - <RemoconBox href={ROUTER.MEISTER}> - <Column width="100%"> - <ScoreName>인증제 점수</ScoreName> - <Row gap="4px"> - <Score>{data.meister.meister.score}</Score> - <SubText>{data.ranking}위</SubText> - </Row> - </Column> - <Column width="100%"> - <ScoreName>상점</ScoreName> - <PositivePoint>{data.meister.meister.positivePoint}</PositivePoint> - </Column> - <Column width="100%"> - <ScoreName>벌점</ScoreName> - <NegativePoint>{data.meister.meister.negativePoint}</NegativePoint> - </Column> + return isSuccess ? ( + <Container> + <RemoconBox href="https://auth.bssm.kro.kr/user" target="_blank"> + <FallbackImage + src={user.profile_image} + fallbackSrc={defaultProfile} + alt="profile" + width={50} + height={50} + rounded + /> + <Column> + <StudentInfomation> + {user.grade}학년 {user.classNum}반 {user.studentNumber}번{" "} + {user.name} + </StudentInfomation> + <Nickname>{user.nickname}</Nickname> + </Column> + </RemoconBox> + <RemoconBox href={ROUTER.MEISTER}> + <Column width="100%"> + <ScoreName>인증제 점수</ScoreName> + <Row gap="4px"> + <Score>{data.meister.meister.score}</Score> + <SubText>{data.ranking}위</SubText> + </Row> + </Column> + <Column width="100%"> + <ScoreName>상점</ScoreName> + <PositivePoint>{data.meister.meister.positivePoint}</PositivePoint> + </Column> + <Column width="100%"> + <ScoreName>벌점</ScoreName> + <NegativePoint>{data.meister.meister.negativePoint}</NegativePoint> + </Column> + </RemoconBox> + {remoconList.map((remocon) => ( + <RemoconBox href={remocon.href as string}> + {remocon.icon} + <RemoconText>{remocon.name}</RemoconText> </RemoconBox> - {remoconList.map((remocon) => ( - <RemoconBox href={remocon.href as string}> - {remocon.icon} - <RemoconText>{remocon.name}</RemoconText> - </RemoconBox> - ))} - </Container> - ) - ); + ))} + </Container> + ) : null; }; const Container = styled.div` width: 100%; - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; flex-wrap: wrap; justify-content: space-between; gap: 12px; @@ -92,7 +89,7 @@ const Container = styled.div` const RemoconBox = styled(Link)` width: 49.5%; height: 14vh; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; align-items: center; padding: 0px 30px; @@ -110,7 +107,7 @@ const Nickname = styled.span` const ScoreName = styled.span` ${font.H6}; - color: ${color.gray}; + color: ${theme.gray}; `; const Score = styled.span` @@ -122,16 +119,16 @@ const Score = styled.span` `; const PositivePoint = styled(Score)` - color: ${color.green}; + color: ${theme.green}; `; const NegativePoint = styled(Score)` - color: ${color.red}; + color: ${theme.red}; `; const SubText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; margin-top: auto; `; diff --git a/src/templates/home/services/query.service.ts b/src/templates/home/services/query.service.ts index db6f40e8..7209b088 100644 --- a/src/templates/home/services/query.service.ts +++ b/src/templates/home/services/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getMain } from "./api.service"; export const useMainQuery = () => { From e6e501deb379520185587c0b65e5492e53f8825b Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:45:36 +0900 Subject: [PATCH 18/28] =?UTF-8?q?refactor(meal):=20=EA=B8=89=EC=8B=9D=20?= =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meal/assets/data/defaultMealList.data.ts | 19 ++++++++++++ src/templates/meal/assets/data/index.ts | 2 +- src/templates/meal/hooks/useMeal.ts | 3 +- src/templates/meal/layouts/BlinkerBox.tsx | 11 +++---- src/templates/meal/layouts/MealListItem.tsx | 11 +++---- .../meal/layouts/MealPageTitleBox.tsx | 7 ++--- src/templates/meal/layouts/index.tsx | 31 ++++++++++--------- src/templates/meal/services/query.service.ts | 8 ++--- .../types/@props/MealListItemProps.type.ts | 7 +++++ src/templates/meal/types/@props/index.ts | 1 + 10 files changed, 60 insertions(+), 40 deletions(-) create mode 100644 src/templates/meal/assets/data/defaultMealList.data.ts create mode 100644 src/templates/meal/types/@props/MealListItemProps.type.ts create mode 100644 src/templates/meal/types/@props/index.ts diff --git a/src/templates/meal/assets/data/defaultMealList.data.ts b/src/templates/meal/assets/data/defaultMealList.data.ts new file mode 100644 index 00000000..550622e9 --- /dev/null +++ b/src/templates/meal/assets/data/defaultMealList.data.ts @@ -0,0 +1,19 @@ +const defaultMealListData = { + data: { + MORNING: { + content: "", + cal: 0, + }, + LUNCH: { + content: "", + cal: 0, + }, + DINNER: { + content: "", + cal: 0, + }, + }, + keys: [], +}; + +export default defaultMealListData; diff --git a/src/templates/meal/assets/data/index.ts b/src/templates/meal/assets/data/index.ts index fca31ab3..39d3ce94 100644 --- a/src/templates/meal/assets/data/index.ts +++ b/src/templates/meal/assets/data/index.ts @@ -1 +1 @@ -export { default as MealArrowIcon } from "./MealArrowIcon"; +export { default as defaultMealListData } from "./defaultMealList.data"; diff --git a/src/templates/meal/hooks/useMeal.ts b/src/templates/meal/hooks/useMeal.ts index 8e31ea0a..7e76eadd 100644 --- a/src/templates/meal/hooks/useMeal.ts +++ b/src/templates/meal/hooks/useMeal.ts @@ -3,7 +3,6 @@ import React from "react"; import "dayjs/locale/ko"; import DATE from "@/constants/date.constant"; import { MEAL } from "../constants"; -import { ChangeDateType } from "../types"; const useMeal = () => { const nowDate = dayjs().format(DATE.YYYYMMDD); @@ -35,7 +34,7 @@ const useMeal = () => { return dayjs(date, DATE.YYYYMMDD).locale("ko").format(DATE.DETAIL); }; - const handleCurrentDateChange = (operator: ChangeDateType) => { + const handleCurrentDateChange = (operator: "INCREASE" | "DECREASE") => { setCurrentDate((prevDate) => { const increaseDay = getWeekday(prevDate) === DATE.FRI ? 3 : 1; const decreaseDay = getWeekday(prevDate) === DATE.MON ? -3 : -1; diff --git a/src/templates/meal/layouts/BlinkerBox.tsx b/src/templates/meal/layouts/BlinkerBox.tsx index 9625f057..351f4a55 100644 --- a/src/templates/meal/layouts/BlinkerBox.tsx +++ b/src/templates/meal/layouts/BlinkerBox.tsx @@ -1,6 +1,5 @@ -import { color, flex } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { theme, flex } from "@/styles"; const BlinkerBox = () => { return ( @@ -13,7 +12,7 @@ const BlinkerBox = () => { }; const Layout = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; gap: 6px; @media screen and (max-width: 670px) { @@ -28,15 +27,15 @@ const Circle = styled.div` `; const Red = styled(Circle)` - background-color: ${color.primary_red}; + background-color: ${theme.primary_red}; `; const Yellow = styled(Circle)` - background-color: ${color.primary_yellow}; + background-color: ${theme.primary_yellow}; `; const Green = styled(Circle)` - background-color: ${color.primary_mint}; + background-color: ${theme.primary_mint}; `; export default BlinkerBox; diff --git a/src/templates/meal/layouts/MealListItem.tsx b/src/templates/meal/layouts/MealListItem.tsx index f0aad7b5..6a27e107 100644 --- a/src/templates/meal/layouts/MealListItem.tsx +++ b/src/templates/meal/layouts/MealListItem.tsx @@ -1,10 +1,9 @@ -import React from "react"; import styled from "styled-components"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { Row } from "@/components/Flex"; import BlinkerBox from "./BlinkerBox"; import { useMeal } from "../hooks"; -import { MealListItemProps } from "../interfaces"; +import { MealListItemProps } from "../types/@props"; const MealListItem = ({ mealName, meal }: MealListItemProps) => { const { get식사명ByMealName, replaceBrToLine } = useMeal(); @@ -26,7 +25,7 @@ const Layout = styled.div` width: 100%; height: 100%; border-radius: 12px; - background-color: ${color.white}; + background-color: ${theme.white}; box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.15); margin: 16px 0; transition: ease-in-out; @@ -55,7 +54,7 @@ const MealHeaderBox = styled.div` height: 32px; padding: 0 16px; border-radius: 12px 12px 0 0; - background-color: ${color.meal_header}; + background-color: ${theme.meal_header}; ${flex.CENTER}; justify-content: space-between; position: relative; @@ -78,7 +77,7 @@ const MealCalText = styled(MealTimeText)` const MealContentText = styled.p` width: 100%; height: 100%; - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; ${font.p1}; line-height: 180%; font-weight: 500; diff --git a/src/templates/meal/layouts/MealPageTitleBox.tsx b/src/templates/meal/layouts/MealPageTitleBox.tsx index 31ad4584..0159c86e 100644 --- a/src/templates/meal/layouts/MealPageTitleBox.tsx +++ b/src/templates/meal/layouts/MealPageTitleBox.tsx @@ -1,7 +1,6 @@ -import { Column } from "@/components/Flex"; -import { color, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { Column } from "@/components/Flex"; +import { theme, font } from "@/styles"; const MealPageTitleBox = () => { return ( @@ -19,7 +18,7 @@ const TitleText = styled.span` `; const Description = styled.span` - color: ${color.gray}; + color: ${theme.gray}; `; export default MealPageTitleBox; diff --git a/src/templates/meal/layouts/index.tsx b/src/templates/meal/layouts/index.tsx index aa6d175b..14e65fb8 100644 --- a/src/templates/meal/layouts/index.tsx +++ b/src/templates/meal/layouts/index.tsx @@ -1,28 +1,25 @@ import React from "react"; import styled from "styled-components"; import dayjs from "dayjs"; -import { emptyMealList } from "@/assets/data"; -import DATE from "@/constants/date.constant"; -import DIRECTION from "@/constants/direction.constant"; -import { color, flex, font } from "@/styles"; -import MealListItem from "./MealListItem"; +import { ArrowIcon } from "@/assets/icons"; +import { DATE, DIRECTION } from "@/constants"; +import { theme, flex, font } from "@/styles"; import { useMealQuery } from "../services/query.service"; +import { defaultMealListData } from "../assets/data"; import { useMeal } from "../hooks"; -import { MealArrowIcon } from "../assets/data"; +import MealListItem from "./MealListItem"; import MealPageTitleBox from "./MealPageTitleBox"; const MealPage = () => { const { currentDate, formatDate, handleCurrentDateChange } = useMeal(); - const [mealList, setMealList] = React.useState(emptyMealList); - const { refetch } = useMealQuery({ - date: dayjs(currentDate).format(DATE.YYMMDD), - }); + const [mealList, setMealList] = React.useState(defaultMealListData); + const { refetch } = useMealQuery(dayjs(currentDate).format(DATE.YYMMDD)); React.useEffect(() => { (async () => { const { data } = await refetch(); if (data.keys) return setMealList(data); - return setMealList(emptyMealList); + return setMealList(defaultMealListData); })(); }, [currentDate, refetch]); @@ -31,7 +28,9 @@ const MealPage = () => { <MealPageTitleBox /> <MealDateText>{formatDate(currentDate)}</MealDateText> <MealBox> - <MealArrowIcon + <ArrowIcon + width={40} + height={40} direction={DIRECTION.LEFT} onClick={() => handleCurrentDateChange(DATE.INCREASE)} /> @@ -50,7 +49,9 @@ const MealPage = () => { </NoMealText> )} </MealList> - <MealArrowIcon + <ArrowIcon + width={40} + height={40} direction={DIRECTION.RIGHT} onClick={() => handleCurrentDateChange(DATE.DECREASE)} /> @@ -61,7 +62,7 @@ const MealPage = () => { const Layout = styled.div` width: 100%; - ${flex.COLUMN_VERTICAL}; + ${flex.COLUMN_HORIZONTAL}; gap: 14px; `; @@ -92,7 +93,7 @@ const NoMealText = styled.span` width: 100%; ${flex.CENTER}; ${font.p2}; - color: ${color.gray}; + color: ${theme.gray}; `; export default MealPage; diff --git a/src/templates/meal/services/query.service.ts b/src/templates/meal/services/query.service.ts index c8813713..5f4ae328 100644 --- a/src/templates/meal/services/query.service.ts +++ b/src/templates/meal/services/query.service.ts @@ -1,12 +1,8 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getMealList } from "./api.service"; -interface IUseMealQueryProps { - date: string; -} - -export const useMealQuery = ({ date }: IUseMealQueryProps) => { +export const useMealQuery = (date: string) => { const { data, ...queryRest } = useQuery([KEY.MEAL], () => getMealList(date)); return { data, ...queryRest }; }; diff --git a/src/templates/meal/types/@props/MealListItemProps.type.ts b/src/templates/meal/types/@props/MealListItemProps.type.ts new file mode 100644 index 00000000..e44a5378 --- /dev/null +++ b/src/templates/meal/types/@props/MealListItemProps.type.ts @@ -0,0 +1,7 @@ +export default interface MealListItemProps { + mealName: string; + meal: { + content: string; + cal: number; + }; +} diff --git a/src/templates/meal/types/@props/index.ts b/src/templates/meal/types/@props/index.ts new file mode 100644 index 00000000..2af79843 --- /dev/null +++ b/src/templates/meal/types/@props/index.ts @@ -0,0 +1 @@ +export type { default as MealListItemProps } from "./MealListItemProps.type"; From 9d793008817ab2ee671c6a909e8ff11c931d654b Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:45:55 +0900 Subject: [PATCH 19/28] =?UTF-8?q?refactor(meister):=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=ED=84=B0=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/data/defaultMeister.data.ts | 38 +++++ .../assets/data/defaultMeisterDetail.data.ts | 40 +++++ .../meister/assets/data/graphColor.data.ts | 10 ++ src/templates/meister/assets/data/index.ts | 14 +- .../meister/assets/data/meisterChart.data.ts | 26 +++ .../meister/assets/data/meisterList.data.ts | 15 ++ .../assets/data/meisterVariable.data.ts | 9 ++ .../assets/data/radarChartVariable.data.ts | 11 ++ src/templates/meister/chart/MeisterChart.tsx | 22 +-- src/templates/meister/chart/RadarChart.tsx | 10 +- .../helpers/getMeisterChapter.helper.ts | 20 +++ .../meister/helpers/getStatusColor.helper.ts | 9 ++ src/templates/meister/helpers/index.ts | 6 +- src/templates/meister/hooks/index.ts | 1 + src/templates/meister/hooks/useMeister.tsx | 9 +- src/templates/meister/hooks/useMeisterHTML.ts | 142 ++++++++++++++++ .../meister/layouts/CircularProgressBox.tsx | 20 ++- .../meister/layouts/Distribution.tsx | 21 ++- .../meister/layouts/MeisterProfileBox.tsx | 31 ++-- .../meister/layouts/PointHTMLContent.tsx | 4 +- src/templates/meister/layouts/Ranking.tsx | 39 ++--- .../meister/layouts/RankingListItem.tsx | 26 +-- .../meister/layouts/ScoreHTMLContent.tsx | 8 +- .../meister/layouts/YearlyMeisterScore.tsx | 23 ++- src/templates/meister/layouts/index.tsx | 152 ++++++++---------- .../meister/services/query.service.ts | 12 +- .../@props/CircularProgressBoxProps.type.ts | 7 + src/templates/meister/types/@props/index.ts | 1 + src/templates/meister/types/Meister.type.ts | 34 ++++ .../meister/types/MeisterChartData.type.ts | 6 + .../meister/types/MeisterDetail.type.ts | 36 +++++ .../meister/types/MeisterRankingItem.type.ts | 11 ++ src/templates/meister/types/index.ts | 4 + 33 files changed, 615 insertions(+), 202 deletions(-) create mode 100644 src/templates/meister/assets/data/defaultMeister.data.ts create mode 100644 src/templates/meister/assets/data/defaultMeisterDetail.data.ts create mode 100644 src/templates/meister/assets/data/graphColor.data.ts create mode 100644 src/templates/meister/assets/data/meisterChart.data.ts create mode 100644 src/templates/meister/assets/data/meisterList.data.ts create mode 100644 src/templates/meister/assets/data/meisterVariable.data.ts create mode 100644 src/templates/meister/assets/data/radarChartVariable.data.ts create mode 100644 src/templates/meister/helpers/getMeisterChapter.helper.ts create mode 100644 src/templates/meister/helpers/getStatusColor.helper.ts create mode 100644 src/templates/meister/hooks/useMeisterHTML.ts create mode 100644 src/templates/meister/types/@props/CircularProgressBoxProps.type.ts create mode 100644 src/templates/meister/types/@props/index.ts create mode 100644 src/templates/meister/types/Meister.type.ts create mode 100644 src/templates/meister/types/MeisterChartData.type.ts create mode 100644 src/templates/meister/types/MeisterDetail.type.ts create mode 100644 src/templates/meister/types/MeisterRankingItem.type.ts diff --git a/src/templates/meister/assets/data/defaultMeister.data.ts b/src/templates/meister/assets/data/defaultMeister.data.ts new file mode 100644 index 00000000..f76d680e --- /dev/null +++ b/src/templates/meister/assets/data/defaultMeister.data.ts @@ -0,0 +1,38 @@ +import { Meister } from "../../types"; + +const defaultMeisterData: Meister = { + meister: { + score: 0, + positivePoint: 0, + negativePoint: 0, + lastUpdate: "2000-03-01T00:00:00.000000", + loginError: false, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + }, + avg: { + score: 0, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + positivePoint: 0, + negativePoint: 0, + }, + max: { + score: 0, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + positivePoint: 0, + negativePoint: 0, + }, +}; + +export default defaultMeisterData; diff --git a/src/templates/meister/assets/data/defaultMeisterDetail.data.ts b/src/templates/meister/assets/data/defaultMeisterDetail.data.ts new file mode 100644 index 00000000..ac5f77fb --- /dev/null +++ b/src/templates/meister/assets/data/defaultMeisterDetail.data.ts @@ -0,0 +1,40 @@ +import { MeisterDetail } from "../../types"; + +const defaultMeisterDetailData: MeisterDetail = { + meister: { + score: 0, + pointHtmlContent: "", + scoreHtmlContent: "", + positivePoint: 0, + negativePoint: 0, + lastUpdate: "2000-03-01T00:00:00.000000", + loginError: false, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + }, + avg: { + score: 0, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + positivePoint: 0, + negativePoint: 0, + }, + max: { + score: 0, + basicJobSkills: 0, + professionalTech: 0, + workEthic: 0, + humanities: 0, + foreignScore: 0, + positivePoint: 0, + negativePoint: 0, + }, +}; + +export default defaultMeisterDetailData; diff --git a/src/templates/meister/assets/data/graphColor.data.ts b/src/templates/meister/assets/data/graphColor.data.ts new file mode 100644 index 00000000..53969c94 --- /dev/null +++ b/src/templates/meister/assets/data/graphColor.data.ts @@ -0,0 +1,10 @@ +import { theme } from "@/styles"; +import { SCORE } from "../../constants"; + +const graphColorData = { + [SCORE.AVG]: theme.primary_yellow, + [SCORE.MY]: theme.primary_blue, + [SCORE.MAX]: theme.primary_red, +}; + +export default graphColorData; diff --git a/src/templates/meister/assets/data/index.ts b/src/templates/meister/assets/data/index.ts index d601a433..53f7ed10 100644 --- a/src/templates/meister/assets/data/index.ts +++ b/src/templates/meister/assets/data/index.ts @@ -1,7 +1,7 @@ -export { default as radarChartData } from "./radarChartVariables"; -export { default as graphColorData } from "./graphColorData"; -export { default as meisterChartData } from "./meisterChartData"; -export { default as meisterVariables } from "./meisterVariables"; -export { default as meisterListData } from "./meisterListData"; -export { default as meisterDetailDefaultData } from "./meisterDetailDefaultData"; -export { default as timetableDefaultData } from "./timetableDefaultData"; +export { default as defaultMeisterData } from "./defaultMeister.data"; +export { default as defaultMeisterDetailData } from "./defaultMeisterDetail.data"; +export { default as graphColorData } from "./graphColor.data"; +export { default as meisterChartData } from "./meisterChart.data"; +export { default as meisterListData } from "./meisterList.data"; +export { default as meisterVariableData } from "./meisterVariable.data"; +export { default as radarChartVariableData } from "./radarChartVariable.data"; diff --git a/src/templates/meister/assets/data/meisterChart.data.ts b/src/templates/meister/assets/data/meisterChart.data.ts new file mode 100644 index 00000000..592a0646 --- /dev/null +++ b/src/templates/meister/assets/data/meisterChart.data.ts @@ -0,0 +1,26 @@ +import { MEISTER, SCORE } from "../../constants"; +import { MeisterChartData } from "../../types"; + +const meisterChartData: Array<MeisterChartData> = [ + { group: MEISTER.직업기초능력, scoreType: SCORE.AVG }, + { group: MEISTER.직업기초능력, scoreType: SCORE.MY }, + { group: MEISTER.직업기초능력, scoreType: SCORE.MAX }, + + { group: MEISTER.전문기술역량, scoreType: SCORE.AVG }, + { group: MEISTER.전문기술역량, scoreType: SCORE.MY }, + { group: MEISTER.전문기술역량, scoreType: SCORE.MAX }, + + { group: MEISTER.인성직업의식, scoreType: SCORE.AVG }, + { group: MEISTER.인성직업의식, scoreType: SCORE.MY }, + { group: MEISTER.인성직업의식, scoreType: SCORE.MAX }, + + { group: MEISTER.인문학적소양, scoreType: SCORE.AVG }, + { group: MEISTER.인문학적소양, scoreType: SCORE.MY }, + { group: MEISTER.인문학적소양, scoreType: SCORE.MAX }, + + { group: MEISTER.외국어능력, scoreType: SCORE.AVG }, + { group: MEISTER.외국어능력, scoreType: SCORE.MY }, + { group: MEISTER.외국어능력, scoreType: SCORE.MAX }, +]; + +export default meisterChartData; diff --git a/src/templates/meister/assets/data/meisterList.data.ts b/src/templates/meister/assets/data/meisterList.data.ts new file mode 100644 index 00000000..1ad10701 --- /dev/null +++ b/src/templates/meister/assets/data/meisterList.data.ts @@ -0,0 +1,15 @@ +import { theme } from "@/styles"; +import { MeisterKeyType } from "../../types"; +import { MEISTER } from "../../constants"; + +const meisterListData: Array<{ + name: MeisterKeyType; + color: string; +}> = [ + { name: MEISTER.전문기술역량, color: theme.primary_mint }, + { name: MEISTER.인성직업의식, color: theme.primary_red }, + { name: MEISTER.인문학적소양, color: theme.primary_yellow }, + { name: MEISTER.외국어능력, color: theme.primary_blue }, +]; + +export default meisterListData; diff --git a/src/templates/meister/assets/data/meisterVariable.data.ts b/src/templates/meister/assets/data/meisterVariable.data.ts new file mode 100644 index 00000000..6ca841d9 --- /dev/null +++ b/src/templates/meister/assets/data/meisterVariable.data.ts @@ -0,0 +1,9 @@ +const meisterVariableData = [ + "직업 기초 능력", + "전문 기술 역량", + "인성 직업 의식", + "인문학적 소양", + "외국어 능력", +]; + +export default meisterVariableData; diff --git a/src/templates/meister/assets/data/radarChartVariable.data.ts b/src/templates/meister/assets/data/radarChartVariable.data.ts new file mode 100644 index 00000000..cc20905c --- /dev/null +++ b/src/templates/meister/assets/data/radarChartVariable.data.ts @@ -0,0 +1,11 @@ +import { MEISTER } from "../../constants"; + +const radarChartVariableData = [ + { key: MEISTER.직업기초능력, label: "직업기초능력" }, + { key: MEISTER.전문기술역량, label: "전문기술역량" }, + { key: MEISTER.인성직업의식, label: "인성/직업의식" }, + { key: MEISTER.인문학적소양, label: "인문학적 소양" }, + { key: MEISTER.외국어능력, label: "외국어 능력" }, +]; + +export default radarChartVariableData; diff --git a/src/templates/meister/chart/MeisterChart.tsx b/src/templates/meister/chart/MeisterChart.tsx index aa54245a..872b70be 100644 --- a/src/templates/meister/chart/MeisterChart.tsx +++ b/src/templates/meister/chart/MeisterChart.tsx @@ -1,16 +1,16 @@ -import React, { useState } from "react"; +import React from "react"; import * as d3 from "d3"; -import { color } from "@/styles"; -import { useDidMountEffect } from "@/hooks/useDidMountEffect"; -import { Meister } from "../interfaces"; +import { theme } from "@/styles"; +import { useDidMountEffect } from "@/hooks"; +import { Meister } from "../types"; import { graphColorData, meisterChartData, - meisterVariables, + meisterVariableData, } from "../assets/data"; const MeisterChart = ({ ...meisterData }: Meister) => { - const [canvasRef, setCanvasRef] = useState<HTMLDivElement | null>(null); + const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null); useDidMountEffect(() => { if (!canvasRef) return; @@ -54,16 +54,16 @@ const MeisterChart = ({ ...meisterData }: Meister) => { .duration(1000) .attr("y", `${108 - meisterData[item.scoreType][item.group]}%`) .text(Math.round(meisterData[item.scoreType][item.group])) - .style("fill", color.gray); + .style("fill", theme.gray); }); - meisterVariables.forEach((groupText, index) => { + meisterVariableData.forEach((groupText, index) => { svg .append("text") .attr("x", `${(index + 1) * 19.5 - 12}%`) .attr("y", "20%") .text(groupText) - .style("fill", color.gray) + .style("fill", theme.gray) .style("font-weight", "600") .style("font-size", "12px"); }); @@ -77,14 +77,14 @@ const MeisterChart = ({ ...meisterData }: Meister) => { .attr("y2", `${100 - item}%`) .attr("stroke-width", 1) .style("stroke-dasharray", "8, 3") - .attr("stroke", color.on_tertiary); + .attr("stroke", theme.on_tertiary); svg .append("text") .attr("x", 20) .attr("y", `${99 - item}%`) .text(item) - .style("fill", color.on_tertiary) + .style("fill", theme.on_tertiary) .style("font-weight", "600") .style("font-size", "12px"); }); diff --git a/src/templates/meister/chart/RadarChart.tsx b/src/templates/meister/chart/RadarChart.tsx index 45ae9671..971b0e8b 100644 --- a/src/templates/meister/chart/RadarChart.tsx +++ b/src/templates/meister/chart/RadarChart.tsx @@ -1,8 +1,8 @@ -import React, { useState } from "react"; +import React from "react"; import Radar from "react-d3-radar"; -import radarChartVariables from "../assets/data/radarChartVariables"; +import { radarChartVariableData } from "../assets/data"; import { MEISTER } from "../constants"; -import Meister from "../interfaces/meister.interface"; +import Meister from "../types/Meister.type"; interface DataSet { key: string; @@ -17,7 +17,7 @@ interface ChartData { const RadarChart = ({ ...meisterData }: Meister) => { const chartData: ChartData = { - variables: radarChartVariables, + variables: radarChartVariableData, sets: [ { key: "avg", @@ -43,7 +43,7 @@ const RadarChart = ({ ...meisterData }: Meister) => { }, ], }; - const [highlighted, setHighlighted] = useState<{ + const [highlighted, setHighlighted] = React.useState<{ key: string; label: string; } | null>(null); diff --git a/src/templates/meister/helpers/getMeisterChapter.helper.ts b/src/templates/meister/helpers/getMeisterChapter.helper.ts new file mode 100644 index 00000000..90d32a7d --- /dev/null +++ b/src/templates/meister/helpers/getMeisterChapter.helper.ts @@ -0,0 +1,20 @@ +import { MEISTER } from "../constants"; + +const getMeisterChapter = (chapter: string) => { + switch (chapter) { + case MEISTER.직업기초능력: + return "직업기초능력"; + case MEISTER.전문기술역량: + return "전문 기술 역량"; + case MEISTER.인성직업의식: + return "인성 직업 의식"; + case MEISTER.인문학적소양: + return "인문학적 소양"; + case MEISTER.외국어능력: + return "외국어 능력"; + default: + return chapter; + } +}; + +export default getMeisterChapter; diff --git a/src/templates/meister/helpers/getStatusColor.helper.ts b/src/templates/meister/helpers/getStatusColor.helper.ts new file mode 100644 index 00000000..bae2b751 --- /dev/null +++ b/src/templates/meister/helpers/getStatusColor.helper.ts @@ -0,0 +1,9 @@ +import { theme } from "@/styles"; + +const getStatusColor = (index: number) => { + if (!index) return theme.primary_yellow; + if (index === 1) return theme.primary_blue; + return theme.primary_red; +}; + +export default getStatusColor; diff --git a/src/templates/meister/helpers/index.ts b/src/templates/meister/helpers/index.ts index a510e848..742a01c0 100644 --- a/src/templates/meister/helpers/index.ts +++ b/src/templates/meister/helpers/index.ts @@ -1,3 +1,5 @@ -export { default as setMeisterPointNaming } from "./setMeisterPointNaming.helper"; -export { default as getStudentInformationHTML } from "./getStudentInformationHTML.helper"; export { default as get요일ByWeekday } from "./get요일ByWeekday.helper"; +export { default as getMeisterChapter } from "./getMeisterChapter.helper"; +export { default as getStatusColor } from "./getStatusColor.helper"; +export { default as getStudentInformationHTML } from "./getStudentInformationHTML.helper"; +export { default as setMeisterPointNaming } from "./setMeisterPointNaming.helper"; diff --git a/src/templates/meister/hooks/index.ts b/src/templates/meister/hooks/index.ts index c03410de..8389f9dc 100644 --- a/src/templates/meister/hooks/index.ts +++ b/src/templates/meister/hooks/index.ts @@ -1 +1,2 @@ export { default as useMeister } from "./useMeister"; +export { default as useMeisterHTML } from "./useMeisterHTML"; diff --git a/src/templates/meister/hooks/useMeister.tsx b/src/templates/meister/hooks/useMeister.tsx index 9f5f6e67..79096d20 100644 --- a/src/templates/meister/hooks/useMeister.tsx +++ b/src/templates/meister/hooks/useMeister.tsx @@ -3,14 +3,12 @@ import { useMeisterDetailQuery, useMeisterQuery, } from "../services/query.service"; -import meisterDefaultData from "../assets/data/meisterDefaultData"; +import meisterDefaultData from "../assets/data/defaultMeister.data"; import { getStudentInformationHTML, setMeisterPointNaming } from "../helpers"; -import meisterDefaultDetailData from "../assets/data/meisterDetailDefaultData"; +import meisterDefaultDetailData from "../assets/data/defaultMeisterDetail.data"; const useMeister = () => { - const meisterQuery = useMeisterQuery(); const [studentNum, setStudentNum] = React.useState(""); - const meisterDetailQuery = useMeisterDetailQuery(studentNum); const [meister, setMeister] = React.useState(meisterDefaultData); const [meisterDetail, setMeisterDetail] = React.useState( meisterDefaultDetailData, @@ -18,6 +16,9 @@ const useMeister = () => { const [isLoading, setIsLoading] = React.useState(false); const [studentInfo, setStudentInfo] = React.useState(""); + const meisterQuery = useMeisterQuery(); + const meisterDetailQuery = useMeisterDetailQuery(studentNum); + const handleStudentSearchClick = () => { setIsLoading(true); meisterDetailQuery.refetch().then(() => setIsLoading(false)); diff --git a/src/templates/meister/hooks/useMeisterHTML.ts b/src/templates/meister/hooks/useMeisterHTML.ts new file mode 100644 index 00000000..56805172 --- /dev/null +++ b/src/templates/meister/hooks/useMeisterHTML.ts @@ -0,0 +1,142 @@ +import { theme } from "@/styles"; + +export const useMeisterHTML = () => { + const getBasicJobSkills = (html: string) => { + return [ + { + title: "의사소통 국어", + value: +html.substring( + html.lastIndexOf("의사소통(국어) : ") + 11, + html.lastIndexOf("의사소통(국어) : ") + 12, + ), + status: theme.primary_blue, + }, + { + title: "의사소통 영어", + value: +html.substring( + html.lastIndexOf("의사소통(영어) : ") + 11, + html.lastIndexOf("의사소통(영어) : ") + 12, + ), + status: theme.primary_mint, + }, + { + title: "수리 활용", + value: +html.substring( + html.lastIndexOf("수리활용 : ") + 7, + html.lastIndexOf("수리활용 : ") + 8, + ), + status: theme.primary_red, + }, + { + title: "문제 해결", + value: +html.substring( + html.lastIndexOf("문제해결 : ") + 7, + html.lastIndexOf("문제해결 : ") + 8, + ), + status: theme.primary_yellow, + }, + ]; + }; + + const scoreParser = (html: string) => { + const parsedHTML = html; + return ( + parsedHTML + .replaceAll( + '<div>[ <span style="font-weight:bold; color:blue;">', + (match) => { + return `<section class="list-item">${match}`; + }, + ) + .replace(/\[ (\d{4}-\d{2}-\d{2}) \]/g, (match) => { + return `<br> + <hgroup class="section-date"> + ${match + .replaceAll("[ ", "") + .replaceAll(" ]", "") + .replace("-", "년 ") + .replace("-", "월 ")}일</hgroup></section>`; + }) + .replaceAll("- 시도와 전국은 중복부여 안함", "") + .replace(/[①-⑮].*?: -<br>/gi, "") + .replace(/[①-⑮].*?: -/gi, "") + .replace(/\([^)]*\)/gi, "") + .replace(/총점\s+([\d.]+)\s*점/gi, (match) => { + return `<span class="total-score-item">${match}</span>`; + }) + .replace(/ \d+ 점/gi, (match) => { + return `<span class="item-score" >${match.replaceAll( + " ", + "", + )}</span>`; + }) + .replaceAll( + '[ <span style="font-weight:bold; color:red;">종합</span> ]', + "", + ) + .replaceAll(",", "") + .replaceAll("font-weight:bold; color:blue;", "") + .replaceAll( + '⑥ 헌혈 : <span style="font-weight:bold;">0 점</span> ( 총 : 시간 )<br>', + "", + ) + .replaceAll( + '⑧ 스포츠관련 행사 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>', + "", + ) + .replaceAll( + '⑬ 직업관련 교육 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>', + "", + ) + .replaceAll( + '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;">0 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>', + "", + ) + .replaceAll("font-weight:bold;", "") + .replaceAll( + '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;"> 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>', + "", + ) + .replace(/[①-⑮]/gi, "") + // .replaceAll(":", "·") + .replaceAll( + '[ <span style="font-weight:bold; color:red;">종합</span> ]', + "", + ) + .replaceAll(": 점", ": 0점") + .replaceAll(": 점", ": 0점") + .replaceAll("\n", "") + .replaceAll("\t", "") + .replaceAll(" ", "") + ); + }; + + const pointParser = (html: string) => { + return html + + .replaceAll("\n", "") + .replaceAll("\t", "") + .replaceAll("상점내용 : ", ``) + .replaceAll("벌점내용 : ", ``) + .replaceAll("`", "") + .replaceAll( + "(상점 : ", + `\n<span style="font-size: 20px !important; font-weight: 600 !important;">상점 `, + ) + .replaceAll( + "(벌점 : ", + `\n<span style="font-size: 20px !important; font-weight: 600 !important;">벌점 `, + ) + .replaceAll("점)", "점</span>") + .replaceAll("부여일 : ", "20") + .replace(/상\d{2}-/gi, "") + .replace(/기숙사\d{2}-/gi, "") + .replace(/학교\d{2}-/gi, "") + .replace(/\(([^)]*선생님[^)]*)\)/gi, "$1") + .replace(/\([^)]*\)/gi, ""); + }; + + return { getBasicJobSkills, scoreParser, pointParser }; +}; + +export default useMeisterHTML; diff --git a/src/templates/meister/layouts/CircularProgressBox.tsx b/src/templates/meister/layouts/CircularProgressBox.tsx index 370383f6..a440fb4f 100644 --- a/src/templates/meister/layouts/CircularProgressBox.tsx +++ b/src/templates/meister/layouts/CircularProgressBox.tsx @@ -1,10 +1,14 @@ -import { Column, Row } from "@/components/Flex"; +import "react-circular-progressbar/dist/styles.css"; import { styled } from "styled-components"; -import { getMeisterChapter } from "@/helpers"; import { CircularProgressbar, buildStyles } from "react-circular-progressbar"; -import { color, flex, font } from "@/styles"; -import { CircularProgressBoxProps } from "../interfaces"; -import "react-circular-progressbar/dist/styles.css"; +import { Column, Row } from "@/components/Flex"; +import { theme, flex, font } from "@/styles"; +import { CircularProgressBoxProps } from "../types/@props"; +import { getMeisterChapter } from "../helpers"; + +const CircularProgressbarComponent = + // eslint-disable-next-line + CircularProgressbar as unknown as React.FC<any>; const CircularProgressBox = ({ chapter, @@ -21,14 +25,14 @@ const CircularProgressBox = ({ <ScoreBox statusColor={statusColor}>{score}</ScoreBox> </Column> <StyledCircularProgressBox> - <CircularProgressbar + <CircularProgressbarComponent value={value} text={text} styles={buildStyles({ textSize: "24px", pathColor: statusColor, textColor: statusColor, - trailColor: color.on_tertiary, + trailColor: theme.on_tertiary, })} /> </StyledCircularProgressBox> @@ -43,7 +47,7 @@ const Container = styled.div` width: 100%; height: 120px; padding: 16px 30px; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; flex-direction: column; align-items: center; diff --git a/src/templates/meister/layouts/Distribution.tsx b/src/templates/meister/layouts/Distribution.tsx index 2a368b98..259d84fc 100644 --- a/src/templates/meister/layouts/Distribution.tsx +++ b/src/templates/meister/layouts/Distribution.tsx @@ -1,15 +1,14 @@ -import DistributionIcon from "@/assets/icons/DistributionIcon"; +import styled from "styled-components"; +import { DistributionIcon } from "@/assets/icons"; import { Row } from "@/components/Flex"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import flex from "@/styles/flex"; -import React from "react"; -import styled from "styled-components"; import RadarChart from "../chart/RadarChart"; -import { Meister } from "../interfaces"; +import { Meister } from "../types"; const spiderChartValue = [ - { name: "내 점수", color: color.spider_first }, - { name: "학년 평균", color: color.spider_second }, + { name: "내 점수", color: theme.spider_first }, + { name: "학년 평균", color: theme.spider_second }, ]; const Distribution = ({ ...meisterData }: Meister) => { @@ -37,15 +36,15 @@ const Distribution = ({ ...meisterData }: Meister) => { const Container = styled.div` width: 22vw; height: 46vh; - background-color: ${color.white}; + background-color: ${theme.white}; padding: 12px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; justify-content: space-between; `; const TitleText = styled.span` ${font.H6}; - color: ${color.black}; + color: ${theme.black}; `; const RadarBox = styled.div` @@ -66,7 +65,7 @@ const StatusIcon = styled.div<{ statusColor: string }>` const StatusText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; export default Distribution; diff --git a/src/templates/meister/layouts/MeisterProfileBox.tsx b/src/templates/meister/layouts/MeisterProfileBox.tsx index df2c02f2..2b17a8fa 100644 --- a/src/templates/meister/layouts/MeisterProfileBox.tsx +++ b/src/templates/meister/layouts/MeisterProfileBox.tsx @@ -1,10 +1,10 @@ -import { Column, Row } from "@/components/Flex"; -import useUser from "@/hooks/useUser"; -import { color, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { Column, Row } from "@/components/Flex"; +import { theme, font } from "@/styles"; +import { useUser } from "@/@user/hooks"; +import { useRouter } from "next/navigation"; -interface IMeisterProfileBoxProps { +interface MeisterProfileBoxProps { meister: { score: number; positivePoint: number; @@ -13,8 +13,9 @@ interface IMeisterProfileBoxProps { name: string; } -const MeisterProfileBox = ({ meister, name }: IMeisterProfileBoxProps) => { - const { isLogined } = useUser(); +const MeisterProfileBox = ({ meister, name }: MeisterProfileBoxProps) => { + const { user, isLogined } = useUser(); + const router = useRouter(); return ( <Container> @@ -33,7 +34,9 @@ const MeisterProfileBox = ({ meister, name }: IMeisterProfileBoxProps) => { <DemeritPoint>벌점 ㆍ {meister.negativePoint}점</DemeritPoint> </Row> </Column> - <MyPageButton>내 정보</MyPageButton> + <MyPageButton onClick={() => router.push(user.profile_url)}> + 내 정보 + </MyPageButton> </> )} </Container> @@ -43,7 +46,7 @@ const MeisterProfileBox = ({ meister, name }: IMeisterProfileBoxProps) => { const Container = styled.div` width: 100%; padding: 14px 24px; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; align-items: center; gap: 18px; @@ -51,7 +54,7 @@ const Container = styled.div` const InfomationText = styled.span` ${font.H6}; - color: ${color.black}; + color: ${theme.black}; `; const Name = styled(InfomationText)``; @@ -59,7 +62,7 @@ const Name = styled(InfomationText)``; const RewardPointText = styled.span` ${font.p3}; line-height: 130%; - color: ${color.gray}; + color: ${theme.gray}; `; const MeisterPoint = styled(RewardPointText)``; @@ -68,7 +71,7 @@ const CreditPoint = styled(RewardPointText)``; const Separator = styled.div` width: 1.5px; - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; height: 12px; `; @@ -78,9 +81,9 @@ const MyPageButton = styled.div` padding: 4px 10px; border-radius: 4px; margin-left: auto; - background-color: ${color.primary_blue}; + background-color: ${theme.primary_blue}; ${font.btn3}; - color: ${color.white}; + color: ${theme.white}; cursor: pointer; `; diff --git a/src/templates/meister/layouts/PointHTMLContent.tsx b/src/templates/meister/layouts/PointHTMLContent.tsx index 425125fa..47196569 100644 --- a/src/templates/meister/layouts/PointHTMLContent.tsx +++ b/src/templates/meister/layouts/PointHTMLContent.tsx @@ -1,4 +1,4 @@ -import { color } from "@/styles"; +import { theme } from "@/styles"; import { styled } from "styled-components"; const PointHTMLContent = ({ pointHTML }: { pointHTML: string }) => { @@ -70,7 +70,7 @@ const StyledPointHTMLContent = styled.div` font-weight: 500 !important; text-align: center !important; white-space: pre-wrap !important; - color: ${color.gray}; + color: ${theme.gray}; padding-top: 10px !important; } diff --git a/src/templates/meister/layouts/Ranking.tsx b/src/templates/meister/layouts/Ranking.tsx index 391319ca..4e5f9100 100644 --- a/src/templates/meister/layouts/Ranking.tsx +++ b/src/templates/meister/layouts/Ranking.tsx @@ -1,17 +1,20 @@ -import { Category } from "@/components/atoms"; -import { flex, font } from "@/styles"; import React from "react"; import styled from "styled-components"; -import useUser from "@/hooks/useUser"; +import { Category } from "@/components/atoms"; +import { flex, font } from "@/styles"; +import { useUser } from "@/@user/hooks"; import { useMeisterRankingQuery } from "../services/query.service"; import RankingListItem from "./RankingListItem"; +import { MeisterRankingItem } from "../types"; const Ranking = () => { const { user } = useUser(); - const [currentGrade, setCurrentGrade] = React.useState(user.grade); - const { data, isSuccess, refetch } = useMeisterRankingQuery({ - grade: currentGrade, - }); + const [currentGrade, setCurrentGrade] = React.useState(2); + const { data, isSuccess, refetch } = useMeisterRankingQuery(currentGrade); + + React.useEffect(() => { + setCurrentGrade(user.grade); + }, [user]); React.useEffect(() => { refetch(); @@ -26,26 +29,16 @@ const Ranking = () => { id={`${grade}`} name="meisterRanking" onChange={(e) => setCurrentGrade(+e.target.id)} - checked={currentGrade === grade} + selected={currentGrade === grade} label={`${grade}학년`} /> ))} </CategoryBox> <RankingList> {isSuccess && - data.map( - (rankingItem: { - score: number; - positivePoint: number; - negativePoint: number; - student: { - grade: number; - classNo: number; - studentNo: number; - name: string; - }; - }) => <RankingListItem {...rankingItem} />, - )} + data.map((rankingItem: MeisterRankingItem, index: number) => ( + <RankingListItem {...rankingItem} index={index + 1} /> + ))} </RankingList> </Container> ); @@ -54,7 +47,7 @@ const Ranking = () => { const Container = styled.div` width: 100%; height: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; @@ -70,7 +63,7 @@ const RankingTitle = styled.span` const RankingList = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; diff --git a/src/templates/meister/layouts/RankingListItem.tsx b/src/templates/meister/layouts/RankingListItem.tsx index eee1a34f..00717b48 100644 --- a/src/templates/meister/layouts/RankingListItem.tsx +++ b/src/templates/meister/layouts/RankingListItem.tsx @@ -1,12 +1,12 @@ -import { Column, Row } from "@/components/Flex"; -import { color, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; +import { Column, Row } from "@/components/Flex"; +import { theme, font, flex } from "@/styles"; -interface IMeisterProfileBoxProps { +interface MeisterProfileBoxProps { score: number; positivePoint: number; negativePoint: number; + index: number; student: { grade: number; classNo: number; @@ -20,9 +20,11 @@ const RankingListItem = ({ student, positivePoint, negativePoint, -}: IMeisterProfileBoxProps) => { + index, +}: MeisterProfileBoxProps) => { return ( <Container> + <RankText>{index}</RankText> <Column> <Row alignItems="center" gap="5px"> <Department> @@ -54,15 +56,21 @@ const RankingListItem = ({ const Container = styled.div` width: 100%; padding: 14px 24px; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; align-items: center; gap: 18px; `; +const RankText = styled.div` + width: 50px; + ${flex.CENTER}; + ${font.H2}; +`; + const InfomationText = styled.span` ${font.H6}; - color: ${color.black}; + color: ${theme.black}; `; const Department = styled(InfomationText)``; @@ -78,7 +86,7 @@ const Name = styled(InfomationText)``; const RewardPointText = styled.span` ${font.p3}; line-height: 130%; - color: ${color.gray}; + color: ${theme.gray}; `; const MeisterPoint = styled(RewardPointText)``; @@ -87,7 +95,7 @@ const CreditPoint = styled(RewardPointText)``; const Separator = styled.div` width: 1.5px; - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; height: 12px; `; diff --git a/src/templates/meister/layouts/ScoreHTMLContent.tsx b/src/templates/meister/layouts/ScoreHTMLContent.tsx index 4d9fe743..746f1ec7 100644 --- a/src/templates/meister/layouts/ScoreHTMLContent.tsx +++ b/src/templates/meister/layouts/ScoreHTMLContent.tsx @@ -1,6 +1,6 @@ -import { color, font } from "@/styles"; import React from "react"; import styled from "styled-components"; +import { theme, font } from "@/styles"; import { setMeisterPointNaming } from "../helpers"; const ScoreHTMLContent = ({ scoreHTML }: { scoreHTML: string }) => { @@ -27,7 +27,7 @@ const StyledScoreHTMLContent = styled.div` .item-score { ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; } .total-score-item { @@ -48,7 +48,7 @@ const StyledScoreHTMLContent = styled.div` padding: 0; text-align: left; ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; font-weight: 500; } @@ -68,7 +68,7 @@ const StyledScoreHTMLContent = styled.div` &:nth-child(5) { display: none; } - background-color: ${color.white}; + background-color: ${theme.white}; width: 100%; padding: 16px 20px; border-radius: 4px; diff --git a/src/templates/meister/layouts/YearlyMeisterScore.tsx b/src/templates/meister/layouts/YearlyMeisterScore.tsx index ac028506..bd850198 100644 --- a/src/templates/meister/layouts/YearlyMeisterScore.tsx +++ b/src/templates/meister/layouts/YearlyMeisterScore.tsx @@ -1,11 +1,10 @@ -import GraphIcon from "@/assets/icons/GraphIcon"; -import { Row } from "@/components/Flex"; -import { color, font } from "@/styles"; -import React from "react"; import styled from "styled-components"; -import { getStatusColor } from "@/helpers"; +import { GraphIcon } from "@/assets/icons"; +import { Row } from "@/components/Flex"; +import { theme, font } from "@/styles"; import MeisterChart from "../chart/MeisterChart"; -import { Meister } from "../interfaces"; +import { Meister } from "../types"; +import { getStatusColor } from "../helpers"; const YearlyMeisterScore = ({ ...meisterData }: Meister) => { return ( @@ -18,7 +17,7 @@ const YearlyMeisterScore = ({ ...meisterData }: Meister) => { <StatusBox> {["학년 평균", "내 점수", "최고 점수"].map((year, index) => ( <Row key={year} alignItems="center" gap="4px"> - <StatusCircle statuscolor={getStatusColor(index)} /> + <StatusCircle statusColor={getStatusColor(index)} /> <StatusText>{year}</StatusText> </Row> ))} @@ -30,7 +29,7 @@ const YearlyMeisterScore = ({ ...meisterData }: Meister) => { const Container = styled.div` width: 70%; height: 46vh; - background-color: ${color.white}; + background-color: ${theme.white}; padding: 12px 16px; display: flex; justify-content: space-between; @@ -40,7 +39,7 @@ const Container = styled.div` const TitleText = styled.span` ${font.H6}; - color: ${color.black}; + color: ${theme.black}; `; const StatusBox = styled.div` @@ -49,16 +48,16 @@ const StatusBox = styled.div` gap: 16px; `; -const StatusCircle = styled.div<{ statuscolor: string }>` +const StatusCircle = styled.div<{ statusColor: string }>` width: 12px; height: 12px; border-radius: 50%; - background-color: ${({ statuscolor }) => statuscolor}; + background-color: ${({ statusColor }) => statusColor}; `; const StatusText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; export default YearlyMeisterScore; diff --git a/src/templates/meister/layouts/index.tsx b/src/templates/meister/layouts/index.tsx index 1d680bf3..a8616e20 100644 --- a/src/templates/meister/layouts/index.tsx +++ b/src/templates/meister/layouts/index.tsx @@ -1,9 +1,8 @@ import flex from "@/styles/flex"; import { Column, Row } from "@/components/Flex"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import { Category } from "@/components/atoms"; import Loading from "@/components/atoms/Loading"; -import { useMeisterHTML } from "@/hooks/useMeisterHTML"; import React from "react"; import styled from "styled-components"; import MeisterProfileBox from "./MeisterProfileBox"; @@ -14,14 +13,13 @@ import CircularProgressBox from "./CircularProgressBox"; import PointHTMLContent from "./PointHTMLContent"; import ScoreHTMLContent from "./ScoreHTMLContent"; import { meisterListData } from "../assets/data"; -import { useMeister } from "../hooks"; +import { useMeister, useMeisterHTML } from "../hooks"; const MeisterPage = () => { const [viewType, setViewType] = React.useState("분석"); const { isLoading, isSuccess, - meister, meisterDetail, studentInfo, studentNum, @@ -32,19 +30,19 @@ const MeisterPage = () => { return ( <Layout> - <Container> - <StyledTitle>조회 형식</StyledTitle> - <CategoryBox> - {["분석", "랭킹"].map((category) => ( - <Category - id={category} - name="meister" - label={category} - checked={viewType === category} - onChange={() => setViewType(category)} - /> - ))} - </CategoryBox> + <StyledTitle>조회 형식</StyledTitle> + <CategoryBox> + {["분석", "랭킹"].map((category) => ( + <Category + id={category} + name="meister" + label={category} + selected={viewType === category} + onChange={() => setViewType(category)} + /> + ))} + </CategoryBox> + {viewType === "분석" && ( <InputWrap> <Column gap="4px"> <InputTitle>학번 입력</InputTitle> @@ -64,41 +62,42 @@ const MeisterPage = () => { </Row> </Column> </InputWrap> - {isLoading ? ( - <Loading /> - ) : ( - <> - {isSuccess && viewType === "분석" && ( - <> - <MeisterProfileBox - meister={meisterDetail.meister} - name={studentInfo} - /> - <StatusCardBox> - {meisterListData.map(({ name, color: status }) => { - const rate = - (meister.meister[name] / meister.max[name]) * 100; - return ( - <CircularProgressBox - key={name} - chapter={name} - score={`${meister.meister[name]}점`} - statusColor={status} - value={rate} - text={`${Math.round(rate)}%`} - /> - ); - })} - </StatusCardBox> - <Row width="100%" justifyContent="space-between"> - <YearlyMeisterScore {...meisterDetail} /> - <Distribution {...meisterDetail} /> - </Row> - <StyledTitle>💼 직업 기초 능력</StyledTitle> - <StatusCardBox> - {getBasicJobSkills( - meisterDetail.meister.scoreHtmlContent, - ).map((item) => ( + )} + {isLoading ? ( + <Loading /> + ) : ( + <> + {isSuccess && viewType === "분석" && ( + <> + <MeisterProfileBox + meister={meisterDetail.meister} + name={studentInfo} + /> + <StatusCardBox> + {meisterListData.map(({ name, color: status }) => { + const rate = + (meisterDetail.meister[name] / meisterDetail.max[name]) * + 100; + return ( + <CircularProgressBox + key={name} + chapter={name} + score={`${meisterDetail.meister[name]}점`} + statusColor={status} + value={rate} + text={`${Math.round(rate)}%`} + /> + ); + })} + </StatusCardBox> + <Row width="100%" justifyContent="space-between"> + <YearlyMeisterScore {...meisterDetail} /> + <Distribution {...meisterDetail} /> + </Row> + <StyledTitle>💼 직업 기초 능력</StyledTitle> + <StatusCardBox> + {getBasicJobSkills(meisterDetail.meister.scoreHtmlContent).map( + (item) => ( <CircularProgressBox key={item.title} chapter={item.title} @@ -107,37 +106,28 @@ const MeisterPage = () => { value={[100, 75, 50, 25][item.value - 1]} text={`${["A", "B", "C", "D"][item.value - 1]}`} /> - ))} - </StatusCardBox> - <ScoreHTMLContent - scoreHTML={scoreParser( - meisterDetail.meister.scoreHtmlContent, - )} - /> - <PointHTMLContent - pointHTML={pointParser( - meisterDetail.meister.pointHtmlContent, - )} - /> - </> - )} - {isSuccess && viewType === "랭킹" && <Ranking />} - </> - )} - </Container> + ), + )} + </StatusCardBox> + <ScoreHTMLContent + scoreHTML={scoreParser(meisterDetail.meister.scoreHtmlContent)} + /> + <PointHTMLContent + pointHTML={pointParser(meisterDetail.meister.pointHtmlContent)} + /> + </> + )} + {viewType === "랭킹" && <Ranking />} + </> + )} </Layout> ); }; const Layout = styled.div` width: 100%; - ${flex.CENTER}; -`; - -const Container = styled.div` - width: 100%; - ${flex.COLUMN_CENTER}; - gap: 12px; + ${flex.COLUMN_VERTICAL}; + gap: 16px; `; const StatusCardBox = styled.div` @@ -170,16 +160,16 @@ const InputTitle = styled.span` `; const StyledInput = styled.input` - width: 70px; - padding: 8px 6px; + width: 100px; + padding: 8px 12px; box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.05); - background-color: ${color.white}; + background-color: ${theme.white}; `; const StyledButton = styled.button` width: fit-content; padding: 6px 14px; - background-color: ${color.primary_blue}; + background-color: ${theme.primary_blue}; border-radius: 6px; color: white; `; diff --git a/src/templates/meister/services/query.service.ts b/src/templates/meister/services/query.service.ts index 1b08ea18..2ef9a691 100644 --- a/src/templates/meister/services/query.service.ts +++ b/src/templates/meister/services/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getMeister, getMeisterDetail, getMeisterRanking } from "./api.service"; export const useMeisterQuery = () => { @@ -9,13 +9,7 @@ export const useMeisterQuery = () => { return { data, ...queryRest }; }; -interface IUseMeisterRankingQueryProps { - grade: number; -} - -export const useMeisterRankingQuery = ({ - grade, -}: IUseMeisterRankingQueryProps) => { +export const useMeisterRankingQuery = (grade: number) => { const { data, ...queryRest } = useQuery([KEY.RANKING], async () => getMeisterRanking(grade), ); @@ -26,7 +20,7 @@ export const useMeisterDetailQuery = (studentNumber: string) => { const { data, ...queryRest } = useQuery( [KEY.MEISTER_DETAIL], async () => getMeisterDetail(studentNumber), - { enabled: !!studentNumber }, + // { enabled: studentNumber.length === 4 }, ); return { data, ...queryRest }; }; diff --git a/src/templates/meister/types/@props/CircularProgressBoxProps.type.ts b/src/templates/meister/types/@props/CircularProgressBoxProps.type.ts new file mode 100644 index 00000000..2676335c --- /dev/null +++ b/src/templates/meister/types/@props/CircularProgressBoxProps.type.ts @@ -0,0 +1,7 @@ +export default interface CircularProgressBoxProps { + chapter: string; + score: string; + statusColor: string; + value: number; + text: string; +} diff --git a/src/templates/meister/types/@props/index.ts b/src/templates/meister/types/@props/index.ts new file mode 100644 index 00000000..125b572d --- /dev/null +++ b/src/templates/meister/types/@props/index.ts @@ -0,0 +1 @@ +export type { default as CircularProgressBoxProps } from "./CircularProgressBoxProps.type"; diff --git a/src/templates/meister/types/Meister.type.ts b/src/templates/meister/types/Meister.type.ts new file mode 100644 index 00000000..2bec67a7 --- /dev/null +++ b/src/templates/meister/types/Meister.type.ts @@ -0,0 +1,34 @@ +export default interface Meister { + meister: { + score: number; + positivePoint: number; + negativePoint: number; + lastUpdate: string; + loginError: boolean; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + }; + avg: { + score: number; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + positivePoint: number; + negativePoint: number; + }; + max: { + score: number; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + positivePoint: number; + negativePoint: number; + }; +} diff --git a/src/templates/meister/types/MeisterChartData.type.ts b/src/templates/meister/types/MeisterChartData.type.ts new file mode 100644 index 00000000..8153e7bc --- /dev/null +++ b/src/templates/meister/types/MeisterChartData.type.ts @@ -0,0 +1,6 @@ +import { MeisterKeyType, MeisterScoreType } from "."; + +export default interface MeisterChartData { + group: MeisterKeyType; + scoreType: MeisterScoreType; +} diff --git a/src/templates/meister/types/MeisterDetail.type.ts b/src/templates/meister/types/MeisterDetail.type.ts new file mode 100644 index 00000000..1a57a827 --- /dev/null +++ b/src/templates/meister/types/MeisterDetail.type.ts @@ -0,0 +1,36 @@ +export default interface MeisterDetail { + meister: { + scoreHtmlContent: string; + pointHtmlContent: string; + score: number; + positivePoint: number; + negativePoint: number; + lastUpdate: string; + loginError: boolean; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + }; + avg: { + score: number; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + positivePoint: number; + negativePoint: number; + }; + max: { + score: number; + basicJobSkills: number; + professionalTech: number; + workEthic: number; + humanities: number; + foreignScore: number; + positivePoint: number; + negativePoint: number; + }; +} diff --git a/src/templates/meister/types/MeisterRankingItem.type.ts b/src/templates/meister/types/MeisterRankingItem.type.ts new file mode 100644 index 00000000..0ea4b6b5 --- /dev/null +++ b/src/templates/meister/types/MeisterRankingItem.type.ts @@ -0,0 +1,11 @@ +export default interface MeisterRankingItem { + score: number; + positivePoint: number; + negativePoint: number; + student: { + grade: number; + classNo: number; + studentNo: number; + name: string; + }; +} diff --git a/src/templates/meister/types/index.ts b/src/templates/meister/types/index.ts index a7ab93d6..b858a9c2 100644 --- a/src/templates/meister/types/index.ts +++ b/src/templates/meister/types/index.ts @@ -1,2 +1,6 @@ +export type { default as Meister } from "./Meister.type"; +export type { default as MeisterChartData } from "./MeisterChartData.type"; +export type { default as MeisterDetail } from "./MeisterDetail.type"; export type { default as MeisterKeyType } from "./meisterKey.type"; export type { default as MeisterScoreType } from "./meisterScore.type"; +export type { default as MeisterRankingItem } from "./MeisterRankingItem.type"; From b360b90a8cc7d617642a3150052527cf4d24ddab Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:46:09 +0900 Subject: [PATCH 20/28] =?UTF-8?q?refactor(oauth):=20OAuth=20=EB=8F=84?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/oauth/hooks/useOAuth.ts | 2 +- src/templates/oauth/layouts/index.tsx | 7 +++---- src/templates/oauth/services/mutation.service.ts | 4 ---- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/templates/oauth/hooks/useOAuth.ts b/src/templates/oauth/hooks/useOAuth.ts index 46206ead..c309a790 100644 --- a/src/templates/oauth/hooks/useOAuth.ts +++ b/src/templates/oauth/hooks/useOAuth.ts @@ -1,7 +1,7 @@ -import { KEY } from "@/constants"; import { useQueryClient } from "@tanstack/react-query"; import { useRouter, useSearchParams } from "next/navigation"; import React from "react"; +import { KEY } from "@/constants"; import Storage from "@/storage"; import { useLoginMutation } from "../services/mutation.service"; diff --git a/src/templates/oauth/layouts/index.tsx b/src/templates/oauth/layouts/index.tsx index e8630bca..68c96185 100644 --- a/src/templates/oauth/layouts/index.tsx +++ b/src/templates/oauth/layouts/index.tsx @@ -1,8 +1,7 @@ -import React from "react"; import Image from "next/image"; -import { loading } from "@/assets/images"; import styled from "styled-components"; -import { color, flex, font } from "@/styles"; +import { loading } from "@/assets/images"; +import { theme, flex, font } from "@/styles"; import { useOAuth } from "../hooks"; const OAuthPage = () => { @@ -25,7 +24,7 @@ const Layout = styled.div` const LoadingText = styled.span` ${font.H6}; - color: ${color.black}; + color: ${theme.black}; `; export default OAuthPage; diff --git a/src/templates/oauth/services/mutation.service.ts b/src/templates/oauth/services/mutation.service.ts index f630e39d..f866e93e 100644 --- a/src/templates/oauth/services/mutation.service.ts +++ b/src/templates/oauth/services/mutation.service.ts @@ -1,4 +1,3 @@ -import throwAxiosError from "@/apis/error/throwAxiosError"; import { useMutation } from "@tanstack/react-query"; import Storage from "@/storage"; import { TOKEN } from "@/storage/constants"; @@ -10,8 +9,5 @@ export const useLoginMutation = (authCode: string | null) => { Storage.setItem(TOKEN.ACCESS, accessToken); Storage.setItem(TOKEN.REFRESH, refreshToken); }, - onError: (err) => { - throwAxiosError(err); - }, }); }; From 705372d41dff55d4f702b88bdcbea47c6c95b2fd Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:46:37 +0900 Subject: [PATCH 21/28] =?UTF-8?q?refactor(post):=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=ED=8C=90=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../post/assets/data/categoryList.data.ts | 12 +++++ .../post/assets/data/dateTime.data.ts | 20 +++++++ .../post/assets/data/defaultPost.data.ts | 28 ++++++++++ src/templates/post/assets/data/index.ts | 6 +-- .../post/assets/icons/CategoryArrow.tsx | 20 +++++++ .../post/assets/icons/PostArrowIcon.tsx | 33 ------------ .../post/assets/icons/ReactableLikeIcon.tsx | 2 +- src/templates/post/assets/icons/index.ts | 1 - .../getFilteredPostDataByCategory.helper.ts | 2 +- .../post/helpers/getPostIsValid.helper.ts | 2 +- .../post/helpers/getS3ImageUrl.helper.ts | 13 ----- src/templates/post/helpers/index.ts | 1 - src/templates/post/hooks/index.ts | 1 + src/templates/post/hooks/useComment.ts | 2 +- src/templates/post/hooks/useLike.ts | 2 +- src/templates/post/hooks/usePost.ts | 7 ++- src/templates/post/hooks/usePostWritable.ts | 24 +++++---- src/templates/post/hooks/useRecomment.ts | 6 +-- src/templates/post/hooks/useTextarea.ts | 54 +++++++++++++++++++ .../layouts/components/CodeReviewInputBox.tsx | 3 +- .../layouts/components/ContentInputBox.tsx | 9 ++-- .../post/layouts/components/FoundInputBox.tsx | 7 ++- .../layouts/components/LostFoundInputBox.tsx | 7 ++- .../layouts/components/ProjectInputBox.tsx | 11 ++-- .../post/layouts/components/TitleInputBox.tsx | 4 +- .../post/layouts/detail/CommentStylesheet.tsx | 8 +-- .../detail/PostCategoryInformationBox.tsx | 8 +-- .../post/layouts/detail/PostLikeCountBox.tsx | 5 +- .../post/layouts/detail/PostMainBox.tsx | 17 +++--- .../detail/PostMainlyInformationBox.tsx | 17 +++--- .../post/layouts/detail/SectionBox.tsx | 11 ++-- .../detail/comment/CommentContentBox.tsx | 6 +-- .../comment/CommentLikeInformationBox.tsx | 10 ++-- .../layouts/detail/comment/CommentList.tsx | 37 ++++++------- .../detail/comment/CommentListItem.tsx | 6 +-- .../detail/comment/CommentWritableBox.tsx | 12 ++--- .../detail/comment/CreateCommentBox.tsx | 18 +++---- .../detail/comment/RecommentViewButton.tsx | 18 +++---- src/templates/post/layouts/detail/index.tsx | 17 +++--- .../detail/recomment/CreateRecommentBox.tsx | 27 +++++----- .../detail/recomment/RecommentContentBox.tsx | 9 ++-- .../detail/recomment/RecommentList.tsx | 38 ++++++------- .../detail/recomment/RecommentListItem.tsx | 15 +++--- .../detail/recomment/RecommentWritableBox.tsx | 12 ++--- .../post/layouts/edit/UpdateTitleBox.tsx | 23 -------- src/templates/post/layouts/edit/index.tsx | 14 ++--- .../post/layouts/list/PostListItem.tsx | 16 +++--- .../list/PostListItemInformationBar.tsx | 6 +-- src/templates/post/layouts/list/index.tsx | 48 +++++++---------- .../post/layouts/write/CategoryBox.tsx | 13 +++-- .../post/layouts/write/WriteTitleBox.tsx | 23 -------- src/templates/post/layouts/write/index.tsx | 28 ++++++---- .../post/services/comment/api.service.ts | 2 +- .../post/services/comment/mutation.service.ts | 4 +- .../post/services/comment/query.service.ts | 8 ++- .../post/services/like/api.service.ts | 4 +- .../post/services/post/api.service.ts | 5 +- .../post/services/post/graphql.service.ts | 4 +- .../post/services/post/mutation.service.ts | 5 +- .../post/services/post/query.service.ts | 7 +-- .../post/services/recomment/api.service.ts | 2 +- .../services/recomment/mutation.service.ts | 3 +- .../post/services/recomment/query.service.ts | 9 ++-- .../@props/CommentContentBoxProps.type.ts | 6 +++ .../CommentLikeInformationBoxProps.type.ts | 6 +++ .../types/@props/CommentListItemProps.type.ts | 5 ++ .../types/@props/CommentQueryProps.type.ts | 4 ++ .../@props/CreateRecommentBoxProps.type.ts | 4 ++ .../types/@props/GetCommentListProps.type.ts | 4 ++ .../types/@props/GetPostListProps.type.ts | 4 ++ .../post/types/@props/LikeIconProps.type.ts | 3 ++ .../types/@props/PostCategoryBoxProps.type.ts | 6 +++ .../@props/PostCategoryInputBoxProps.type.ts | 10 ++++ .../types/@props/PostCommentProps.type.ts | 4 ++ .../types/@props/PostCountBoxProps.type.ts | 6 +++ .../@props/PostDetailParamsProps.type.ts | 3 ++ .../PostListItemInformationBarProps.type.ts | 5 ++ .../post/types/@props/PostProps.type.ts | 5 ++ .../types/@props/PostSectionBoxProps.type.ts | 11 ++++ .../@props/RecommentViewButtonProps.type.ts | 5 ++ .../post/types/@props/UseLikeProps.type.ts | 4 ++ src/templates/post/types/@props/index.ts | 18 +++++++ src/templates/post/types/Comment.type.ts | 14 +++++ src/templates/post/types/Post.type.ts | 37 +++++++++++++ .../post/types/PostCreateQuery.type.ts | 5 ++ src/templates/post/types/PostData.type.ts | 16 ++++++ .../post/types/PostListProperty.type.ts | 6 +++ .../post/types/PostListQuery.type.ts | 5 ++ .../post/types/PostListQueryProperty.type.ts | 7 +++ src/templates/post/types/PostQuery.type.ts | 5 ++ .../post/types/PostUpdateQuery.type.ts | 5 ++ src/templates/post/types/Recomment.type.ts | 5 ++ src/templates/post/types/index.ts | 12 ++++- 93 files changed, 627 insertions(+), 395 deletions(-) create mode 100644 src/templates/post/assets/data/categoryList.data.ts create mode 100644 src/templates/post/assets/data/dateTime.data.ts create mode 100644 src/templates/post/assets/data/defaultPost.data.ts create mode 100644 src/templates/post/assets/icons/CategoryArrow.tsx delete mode 100644 src/templates/post/assets/icons/PostArrowIcon.tsx delete mode 100644 src/templates/post/helpers/getS3ImageUrl.helper.ts create mode 100644 src/templates/post/hooks/useTextarea.ts delete mode 100644 src/templates/post/layouts/edit/UpdateTitleBox.tsx delete mode 100644 src/templates/post/layouts/write/WriteTitleBox.tsx create mode 100644 src/templates/post/types/@props/CommentContentBoxProps.type.ts create mode 100644 src/templates/post/types/@props/CommentLikeInformationBoxProps.type.ts create mode 100644 src/templates/post/types/@props/CommentListItemProps.type.ts create mode 100644 src/templates/post/types/@props/CommentQueryProps.type.ts create mode 100644 src/templates/post/types/@props/CreateRecommentBoxProps.type.ts create mode 100644 src/templates/post/types/@props/GetCommentListProps.type.ts create mode 100644 src/templates/post/types/@props/GetPostListProps.type.ts create mode 100644 src/templates/post/types/@props/LikeIconProps.type.ts create mode 100644 src/templates/post/types/@props/PostCategoryBoxProps.type.ts create mode 100644 src/templates/post/types/@props/PostCategoryInputBoxProps.type.ts create mode 100644 src/templates/post/types/@props/PostCommentProps.type.ts create mode 100644 src/templates/post/types/@props/PostCountBoxProps.type.ts create mode 100644 src/templates/post/types/@props/PostDetailParamsProps.type.ts create mode 100644 src/templates/post/types/@props/PostListItemInformationBarProps.type.ts create mode 100644 src/templates/post/types/@props/PostProps.type.ts create mode 100644 src/templates/post/types/@props/PostSectionBoxProps.type.ts create mode 100644 src/templates/post/types/@props/RecommentViewButtonProps.type.ts create mode 100644 src/templates/post/types/@props/UseLikeProps.type.ts create mode 100644 src/templates/post/types/@props/index.ts create mode 100644 src/templates/post/types/Comment.type.ts create mode 100644 src/templates/post/types/Post.type.ts create mode 100644 src/templates/post/types/PostCreateQuery.type.ts create mode 100644 src/templates/post/types/PostData.type.ts create mode 100644 src/templates/post/types/PostListProperty.type.ts create mode 100644 src/templates/post/types/PostListQuery.type.ts create mode 100644 src/templates/post/types/PostListQueryProperty.type.ts create mode 100644 src/templates/post/types/PostQuery.type.ts create mode 100644 src/templates/post/types/PostUpdateQuery.type.ts create mode 100644 src/templates/post/types/Recomment.type.ts diff --git a/src/templates/post/assets/data/categoryList.data.ts b/src/templates/post/assets/data/categoryList.data.ts new file mode 100644 index 00000000..b4d6552e --- /dev/null +++ b/src/templates/post/assets/data/categoryList.data.ts @@ -0,0 +1,12 @@ +import { CATEGORY } from "../../constants"; + +const categoryListData = [ + CATEGORY.COMMON, + CATEGORY.NOTICE, + CATEGORY.PROJECT, + CATEGORY.CODE_REVIEW, + CATEGORY.FOUND, + CATEGORY.LOST, +]; + +export default categoryListData; diff --git a/src/templates/post/assets/data/dateTime.data.ts b/src/templates/post/assets/data/dateTime.data.ts new file mode 100644 index 00000000..ee5a8185 --- /dev/null +++ b/src/templates/post/assets/data/dateTime.data.ts @@ -0,0 +1,20 @@ +import { POST_INPUT } from "../../constants"; + +const dateTimeData: Array<{ + label: string; + name: string; + dataName: "startTime" | "endTime"; +}> = [ + { + label: "시작 날짜", + name: POST_INPUT.START_TIME, + dataName: "startTime", + }, + { + label: "마감 날짜", + name: POST_INPUT.END_TIME, + dataName: "endTime", + }, +]; + +export default dateTimeData; diff --git a/src/templates/post/assets/data/defaultPost.data.ts b/src/templates/post/assets/data/defaultPost.data.ts new file mode 100644 index 00000000..f0579f0b --- /dev/null +++ b/src/templates/post/assets/data/defaultPost.data.ts @@ -0,0 +1,28 @@ +import { CATEGORY } from "../../constants"; +import { Post } from "../../types"; + +const defaultPostData: Post = { + id: "", + title: "", + category: CATEGORY.COMMON, + content: "", + prUrl: "", + isFinished: false, + lostThingImage: "", + place: "", + keepingPlace: "", + startTime: "", + endTime: "", + field: "", + user: { + id: -1, + nickName: "", + profileImage: "", + }, + createdAt: "", + likeCount: 0, + commentCount: 0, + doesLike: false, +}; + +export default defaultPostData; diff --git a/src/templates/post/assets/data/index.ts b/src/templates/post/assets/data/index.ts index 5cc4cdf7..ceb70bda 100644 --- a/src/templates/post/assets/data/index.ts +++ b/src/templates/post/assets/data/index.ts @@ -1,3 +1,3 @@ -export { default as categoryList } from "./categoryList"; -export { default as defaultPostData } from "./defaultPostData"; -export { default as dateTime } from "./dateTime"; +export { default as categoryListData } from "./categoryList.data"; +export { default as defaultPostData } from "./defaultPost.data"; +export { default as dateTimeData } from "./dateTime.data"; diff --git a/src/templates/post/assets/icons/CategoryArrow.tsx b/src/templates/post/assets/icons/CategoryArrow.tsx new file mode 100644 index 00000000..d524f20a --- /dev/null +++ b/src/templates/post/assets/icons/CategoryArrow.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const CategoryArrow = ({ ...props }: React.SVGProps<SVGSVGElement>) => { + return ( + <svg + {...props} + cursor="pointer" + viewBox="0 0 12 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M8.34727 9.99356L0.997266 2.64356C0.747266 2.39356 0.626266 2.10189 0.634266 1.76856C0.642266 1.43523 0.771599 1.14356 1.02227 0.89356C1.27227 0.64356 1.56393 0.51856 1.89727 0.51856C2.2306 0.51856 2.52227 0.64356 2.77227 0.89356L10.4723 8.56856C10.6723 8.76856 10.8223 8.99356 10.9223 9.24356C11.0223 9.49356 11.0723 9.74356 11.0723 9.99356C11.0723 10.2436 11.0223 10.4936 10.9223 10.7436C10.8223 10.9936 10.6723 11.2186 10.4723 11.4186L2.77227 19.1186C2.52227 19.3686 2.22627 19.4896 1.88427 19.4816C1.54227 19.4736 1.2466 19.3442 0.997266 19.0936C0.747266 18.8436 0.622266 18.5519 0.622266 18.2186C0.622266 17.8852 0.747266 17.5936 0.997266 17.3436L8.34727 9.99356Z" + fill="#222222" + /> + </svg> + ); +}; + +export default CategoryArrow; diff --git a/src/templates/post/assets/icons/PostArrowIcon.tsx b/src/templates/post/assets/icons/PostArrowIcon.tsx deleted file mode 100644 index 652e2cb8..00000000 --- a/src/templates/post/assets/icons/PostArrowIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { SVGAttribute } from "@/interfaces"; - -const path = { - top: "M1.66419 23.4679C2.24222 24.0457 3.02609 24.3703 3.84342 24.3703C4.66075 24.3703 5.44462 24.0457 6.02265 23.4679L21.2803 8.21018L36.538 23.4679C37.1193 24.0293 37.898 24.34 38.7061 24.333C39.5143 24.326 40.2874 24.0018 40.8589 23.4303C41.4304 22.8588 41.7546 22.0857 41.7616 21.2775C41.7686 20.4694 41.4579 19.6907 40.8965 19.1094L23.4596 1.67249C22.8815 1.09464 22.0977 0.77002 21.2803 0.77002C20.463 0.77002 19.6791 1.09464 19.1011 1.67249L1.66419 19.1094C1.08634 19.6874 0.761719 20.4713 0.761719 21.2886C0.761719 22.106 1.08634 22.8898 1.66419 23.4679Z", - right: - "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z", - bottom: - "M40.8592 1.67228C40.2812 1.09443 39.4973 0.769805 38.68 0.769805C37.8627 0.769805 37.0788 1.09443 36.5008 1.67228L21.2431 16.93L5.98543 1.67228C5.40409 1.1108 4.62548 0.800118 3.81729 0.80714C3.00911 0.814163 2.23601 1.13833 1.66452 1.70983C1.09302 2.28132 0.768859 3.05442 0.761836 3.8626C0.754813 4.67079 1.0655 5.44939 1.62697 6.03073L19.0639 23.4676C19.6419 24.0455 20.4258 24.3701 21.2431 24.3701C22.0604 24.3701 22.8443 24.0455 23.4223 23.4676L40.8592 6.03073C41.4371 5.45271 41.7617 4.66884 41.7617 3.85151C41.7617 3.03417 41.4371 2.25031 40.8592 1.67228Z", - left: "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z", -}; - -const PostArrowIcon = ({ - width = 41, - height = 25, - color = "#727272", - direction = "bottom", - ...props -}: SVGAttribute) => { - return ( - <svg - {...props} - width={width} - height={height} - viewBox="0 0 41 41" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path d={path[direction]} fill={color} /> - </svg> - ); -}; - -export default PostArrowIcon; diff --git a/src/templates/post/assets/icons/ReactableLikeIcon.tsx b/src/templates/post/assets/icons/ReactableLikeIcon.tsx index 11d57051..28b706d8 100644 --- a/src/templates/post/assets/icons/ReactableLikeIcon.tsx +++ b/src/templates/post/assets/icons/ReactableLikeIcon.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { LikeIconProps } from "../../interfaces"; +import { LikeIconProps } from "../../types/@props"; const ReactableLikeIcon = ({ isLiked, ...props }: LikeIconProps) => { return isLiked ? ( diff --git a/src/templates/post/assets/icons/index.ts b/src/templates/post/assets/icons/index.ts index d070f47c..b2f3ae93 100644 --- a/src/templates/post/assets/icons/index.ts +++ b/src/templates/post/assets/icons/index.ts @@ -2,4 +2,3 @@ export { default as CommentIcon } from "./CommentIcon"; export { default as LikeIcon } from "./LikeIcon"; export { default as TimeIcon } from "./TimeIcon"; export { default as AddCommentIcon } from "./AddCommentIcon"; -export { default as PostArrowIcon } from "./PostArrowIcon"; diff --git a/src/templates/post/helpers/getFilteredPostDataByCategory.helper.ts b/src/templates/post/helpers/getFilteredPostDataByCategory.helper.ts index 4d958052..d0bd2a96 100644 --- a/src/templates/post/helpers/getFilteredPostDataByCategory.helper.ts +++ b/src/templates/post/helpers/getFilteredPostDataByCategory.helper.ts @@ -1,6 +1,6 @@ import dayjs from "dayjs"; import { CATEGORY } from "../constants"; -import { Post } from "../interfaces"; +import { Post } from "../types"; const getFilteredPostDataByCategory = (post: Post) => { const { diff --git a/src/templates/post/helpers/getPostIsValid.helper.ts b/src/templates/post/helpers/getPostIsValid.helper.ts index 089faaae..038e4b5b 100644 --- a/src/templates/post/helpers/getPostIsValid.helper.ts +++ b/src/templates/post/helpers/getPostIsValid.helper.ts @@ -1,5 +1,5 @@ import { toast } from "react-toastify"; -import { Post } from "../interfaces"; +import { Post } from "../types"; import { CATEGORY } from "../constants"; const errorReturner = (message: string) => { diff --git a/src/templates/post/helpers/getS3ImageUrl.helper.ts b/src/templates/post/helpers/getS3ImageUrl.helper.ts deleted file mode 100644 index f6fde1b5..00000000 --- a/src/templates/post/helpers/getS3ImageUrl.helper.ts +++ /dev/null @@ -1,13 +0,0 @@ -import httpClient from "@/apis/httpClient"; - -const getS3ImageUrl = async (file?: File) => { - if (file) { - const formData = new FormData(); - formData.append("image", file, file.name); - - const { data: imageUrl } = await httpClient.image.post(formData); - return imageUrl; - } -}; - -export default getS3ImageUrl; diff --git a/src/templates/post/helpers/index.ts b/src/templates/post/helpers/index.ts index 2a078094..e45a9821 100644 --- a/src/templates/post/helpers/index.ts +++ b/src/templates/post/helpers/index.ts @@ -2,6 +2,5 @@ export { default as get회당불러올게시글개수 } from "./get회당불러 export { default as get카테고리명ByCategory } from "./get카테고리명ByCategory.helper"; export { default as getFilteredPostDataByCategory } from "./getFilteredPostDataByCategory.helper"; export { default as getPostIsValid } from "./getPostIsValid.helper"; -export { default as getS3ImageUrl } from "./getS3ImageUrl.helper"; export { default as getTextIsOverflow } from "./getTextIsOverflow.helper"; export { default as getTextDepthCount } from "./getTextDepthCount.helper"; diff --git a/src/templates/post/hooks/index.ts b/src/templates/post/hooks/index.ts index ba0e53ae..2fb2ad40 100644 --- a/src/templates/post/hooks/index.ts +++ b/src/templates/post/hooks/index.ts @@ -3,3 +3,4 @@ export { default as usePostWritable } from "./usePostWritable"; export { default as useLike } from "./useLike"; export { default as useComment } from "./useComment"; export { default as useRecomment } from "./useRecomment"; +export { default as useTextarea } from "./useTextarea"; diff --git a/src/templates/post/hooks/useComment.ts b/src/templates/post/hooks/useComment.ts index 5d84600a..aa8138c3 100644 --- a/src/templates/post/hooks/useComment.ts +++ b/src/templates/post/hooks/useComment.ts @@ -1,7 +1,7 @@ import React from "react"; import { toast } from "react-toastify"; -import useUser from "@/hooks/useUser"; import Swal from "sweetalert2"; +import { useUser } from "@/@user/hooks"; import { useCreateCommentMutation, useDeleteCommentMutation, diff --git a/src/templates/post/hooks/useLike.ts b/src/templates/post/hooks/useLike.ts index e728c8da..1f9220b1 100644 --- a/src/templates/post/hooks/useLike.ts +++ b/src/templates/post/hooks/useLike.ts @@ -1,5 +1,5 @@ import React from "react"; -import { UseLikeProps } from "../interfaces"; +import { UseLikeProps } from "../types/@props"; import { useUpdateCommentLikeMutation, useUpdatePostLikeMutation, diff --git a/src/templates/post/hooks/usePost.ts b/src/templates/post/hooks/usePost.ts index 23308027..6826afb5 100644 --- a/src/templates/post/hooks/usePost.ts +++ b/src/templates/post/hooks/usePost.ts @@ -1,15 +1,14 @@ -import { KEY, ROUTER } from "@/constants"; import { useQueryClient } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; import dayjs from "dayjs"; import React from "react"; import Swal from "sweetalert2"; -import useUser from "@/hooks/useUser"; +import { useUser } from "@/@user/hooks"; +import { KEY, ROUTER } from "@/constants"; import { CATEGORY } from "../constants"; -import { PostCategoryType } from "../types"; -import { Post } from "../interfaces"; import { defaultPostData } from "../assets/data"; import { useDeletePostMutation } from "../services/post/mutation.service"; +import { Post, PostCategoryType } from "../types"; const usePost = (defaultPostDataState?: Post) => { const [postData, setPostData] = React.useState<Post>(defaultPostData); diff --git a/src/templates/post/hooks/usePostWritable.ts b/src/templates/post/hooks/usePostWritable.ts index ef96428b..eaa48b6f 100644 --- a/src/templates/post/hooks/usePostWritable.ts +++ b/src/templates/post/hooks/usePostWritable.ts @@ -1,16 +1,12 @@ import React from "react"; -import { - getS3ImageUrl, - getFilteredPostDataByCategory, - getPostIsValid, -} from "../helpers"; +import { useImageUpload } from "@/hooks"; +import { getFilteredPostDataByCategory, getPostIsValid } from "../helpers"; import { useCreatePostMutation, useUpdatePostMutation, } from "../services/post/mutation.service"; -import { Post, PostData } from "../interfaces"; +import { Post, PostCategoryType, PostData } from "../types"; import { defaultPostData } from "../assets/data"; -import { PostCategoryType } from "../types"; // edit과 write를 동시에 처리하는 훅 const usePostWritable = (defaultPostDataState?: Post) => { @@ -18,6 +14,7 @@ const usePostWritable = (defaultPostDataState?: Post) => { const [lostImageUrl, setLostImageUrl] = React.useState(); const { mutate: updatePostMutate } = useUpdatePostMutation(); const { mutate: createPostMutate } = useCreatePostMutation(); + const { uploadImage } = useImageUpload(); const handleCategoryChangeClick = ( e: React.ChangeEvent<HTMLInputElement>, @@ -27,7 +24,12 @@ const usePostWritable = (defaultPostDataState?: Post) => { }; const handleImageFileSelect = async (file?: File) => { - setLostImageUrl(await getS3ImageUrl(file)); + const files = await uploadImage(file); + setLostImageUrl(files); + setPostData({ + ...postData, + lostThingImage: files, + }); }; const handlePostWriteButtonClick = () => { @@ -37,10 +39,10 @@ const usePostWritable = (defaultPostDataState?: Post) => { } }; - const handlePostEditButtonClick = () => { + const handlePostEditButtonClick = (id: number) => { + const updatePost = getFilteredPostDataByCategory(postData); if (getPostIsValid(postData)) { - const updatePost = getFilteredPostDataByCategory(postData); - updatePostMutate(updatePost as PostData); + updatePostMutate({ ...updatePost, id: `${id}` } as PostData); } }; diff --git a/src/templates/post/hooks/useRecomment.ts b/src/templates/post/hooks/useRecomment.ts index 10251b90..ece7e58e 100644 --- a/src/templates/post/hooks/useRecomment.ts +++ b/src/templates/post/hooks/useRecomment.ts @@ -1,7 +1,7 @@ +import React from "react"; import { toast } from "react-toastify"; import Swal from "sweetalert2"; -import React from "react"; -import useUser from "@/hooks/useUser"; +import { useUser } from "@/@user/hooks"; import { useCreateRecommentMutation, useDeleteRecommentMutation, @@ -42,7 +42,7 @@ const useRecomment = (id: number) => { }; const handleUpdateRecommentDetailClick = () => { - if (!recommentInput.trim()) return toast.error("내용을 입력해주세요."); + if (!recommentInput.trim()) return toast.error("내용을 입력해주세요!"); updateRecommentMutate({ id, detail: recommentInput }); setIsEditMode(false); }; diff --git a/src/templates/post/hooks/useTextarea.ts b/src/templates/post/hooks/useTextarea.ts new file mode 100644 index 00000000..1c07b976 --- /dev/null +++ b/src/templates/post/hooks/useTextarea.ts @@ -0,0 +1,54 @@ +import React from "react"; + +const useTextarea = (defaultContent?: string) => { + const [content, setContent] = React.useState(defaultContent || ""); + const textareaRef = React.useRef<HTMLTextAreaElement>(null); + const [textareaHeight, setTextareaHeight] = React.useState({ + row: 2, + lineBreak: [] as Array<boolean>, + }); + + const onInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => { + const { scrollHeight, clientHeight, value } = e.target; + + if (scrollHeight > clientHeight) { + setTextareaHeight((prev) => ({ + row: prev.row + 1, + lineBreak: { ...prev.lineBreak, [value.length - 1]: true }, + })); + } + if (textareaHeight.lineBreak[value.length]) { + setTextareaHeight((prev) => ({ + row: prev.row - 1, + lineBreak: { ...prev.lineBreak, [value.length]: false }, + })); + } + }; + + const onKeyEnter = ( + e: KeyboardEvent & React.ChangeEvent<HTMLTextAreaElement>, + ) => { + if (e.code === "Enter") { + setTextareaHeight((prev) => ({ + row: prev.row + 1, + lineBreak: { ...prev.lineBreak, [e.target.value.length]: true }, + })); + } + }; + + React.useEffect(() => { + if (textareaRef.current) textareaRef.current.focus(); + }, [textareaRef]); + + return { + textareaRef, + content, + setContent, + row: textareaHeight.row, + handleResizeTextAreaOnInput: onInput, + handleResizeTextareaKeyEnter: + onKeyEnter as unknown as React.KeyboardEventHandler<HTMLTextAreaElement>, + }; +}; + +export default useTextarea; diff --git a/src/templates/post/layouts/components/CodeReviewInputBox.tsx b/src/templates/post/layouts/components/CodeReviewInputBox.tsx index 99528634..74ec0e29 100644 --- a/src/templates/post/layouts/components/CodeReviewInputBox.tsx +++ b/src/templates/post/layouts/components/CodeReviewInputBox.tsx @@ -1,7 +1,6 @@ -import React from "react"; import { Input } from "@/components/atoms"; -import { PostCategoryInputBoxProps } from "../../interfaces"; import POST_INPUT from "../../constants/postInput.constant"; +import { PostCategoryInputBoxProps } from "../../types/@props"; const CodeReviewInputBox = ({ handleChange, diff --git a/src/templates/post/layouts/components/ContentInputBox.tsx b/src/templates/post/layouts/components/ContentInputBox.tsx index fbf5baed..96395186 100644 --- a/src/templates/post/layouts/components/ContentInputBox.tsx +++ b/src/templates/post/layouts/components/ContentInputBox.tsx @@ -1,9 +1,8 @@ -import React from "react"; -import { CustomEditor } from "@/components/atoms"; -import { Column } from "@/components/Flex"; import styled from "styled-components"; +import { Column } from "@/components/Flex"; import { font } from "@/styles"; -import { PostCategoryInputBoxProps } from "../../interfaces"; +import { ContentEditor } from "@/components/common"; +import { PostCategoryInputBoxProps } from "../../types/@props"; const ContentInputBox = ({ handleChange, @@ -12,7 +11,7 @@ const ContentInputBox = ({ return ( <Column gap="6px"> <TitleInputLabelText>글 내용</TitleInputLabelText> - <CustomEditor value={postData.content} onChange={handleChange} /> + <ContentEditor value={postData.content} onChange={handleChange} /> </Column> ); }; diff --git a/src/templates/post/layouts/components/FoundInputBox.tsx b/src/templates/post/layouts/components/FoundInputBox.tsx index 120b1f00..d4178600 100644 --- a/src/templates/post/layouts/components/FoundInputBox.tsx +++ b/src/templates/post/layouts/components/FoundInputBox.tsx @@ -1,7 +1,6 @@ -import React from "react"; import { Input } from "@/components/atoms"; -import { PostCategoryInputBoxProps } from "../../interfaces"; -import POST_INPUT from "../../constants/postInput.constant"; +import { PostCategoryInputBoxProps } from "../../types/@props"; +import { POST_INPUT } from "../../constants"; const FoundInputBox = ({ handleChange, @@ -13,7 +12,7 @@ const FoundInputBox = ({ placeholder="물품을 보관 중인 장소를 입력해주세요" name={POST_INPUT.KEEPING_PLACE} onChange={handleChange} - value={postData.place} + value={postData.keepingPlace} /> ); }; diff --git a/src/templates/post/layouts/components/LostFoundInputBox.tsx b/src/templates/post/layouts/components/LostFoundInputBox.tsx index b6e3379f..fb09d53b 100644 --- a/src/templates/post/layouts/components/LostFoundInputBox.tsx +++ b/src/templates/post/layouts/components/LostFoundInputBox.tsx @@ -1,9 +1,8 @@ -import React from "react"; -import { Input } from "@/components/atoms"; -import DragDrop from "@/components/atoms/DragDrop"; import styled from "styled-components"; +import { DragDrop } from "@/components/common"; +import { Input } from "@/components/atoms"; import { font } from "@/styles"; -import { PostCategoryInputBoxProps } from "../../interfaces"; +import { PostCategoryInputBoxProps } from "../../types/@props"; import { CATEGORY } from "../../constants"; import POST_INPUT from "../../constants/postInput.constant"; diff --git a/src/templates/post/layouts/components/ProjectInputBox.tsx b/src/templates/post/layouts/components/ProjectInputBox.tsx index 75e9787d..8dc73cbf 100644 --- a/src/templates/post/layouts/components/ProjectInputBox.tsx +++ b/src/templates/post/layouts/components/ProjectInputBox.tsx @@ -1,11 +1,10 @@ import { Input } from "@/components/atoms"; -import React from "react"; import { Column, Row } from "@/components/Flex"; import styled from "styled-components"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import POST_INPUT from "../../constants/postInput.constant"; -import { PostCategoryInputBoxProps } from "../../interfaces"; -import { dateTime } from "../../assets/data"; +import { PostCategoryInputBoxProps } from "../../types/@props"; +import { dateTimeData } from "../../assets/data"; const ProjectInputBox = ({ handleChange, @@ -21,7 +20,7 @@ const ProjectInputBox = ({ value={postData.field} /> <Row gap="12px"> - {dateTime.map(({ name, dataName, label }) => ( + {dateTimeData.map(({ name, dataName, label }) => ( <Column gap="4px"> <TitleInputLabelText>{label}</TitleInputLabelText> <DateInput @@ -43,7 +42,7 @@ const TitleInputLabelText = styled.h1` const DateInput = styled.input` padding: 10px 14px; - background-color: ${color.white}; + background-color: ${theme.white}; ${font.caption}; `; diff --git a/src/templates/post/layouts/components/TitleInputBox.tsx b/src/templates/post/layouts/components/TitleInputBox.tsx index 098d45de..27f09c7a 100644 --- a/src/templates/post/layouts/components/TitleInputBox.tsx +++ b/src/templates/post/layouts/components/TitleInputBox.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Input } from "@/components/atoms"; -import { PostCategoryInputBoxProps } from "../../interfaces"; -import POST_INPUT from "../../constants/postInput.constant"; +import { PostCategoryInputBoxProps } from "../../types/@props"; +import { POST_INPUT } from "../../constants"; const TitleInputBox = ({ handleChange, diff --git a/src/templates/post/layouts/detail/CommentStylesheet.tsx b/src/templates/post/layouts/detail/CommentStylesheet.tsx index 2428859b..33ddab50 100644 --- a/src/templates/post/layouts/detail/CommentStylesheet.tsx +++ b/src/templates/post/layouts/detail/CommentStylesheet.tsx @@ -1,15 +1,15 @@ -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import styled from "styled-components"; export const CommentWriter = styled.span` ${font.caption}; font-weight: 600; - color: ${color.gray}; + color: ${theme.gray}; `; export const CommentCreatedAt = styled.span` ${font.caption}; - color: ${color.gray}; + color: ${theme.gray}; @media screen and (max-width: 541px) { display: none; @@ -17,7 +17,7 @@ export const CommentCreatedAt = styled.span` `; export const CommentTextArea = styled.textarea` - border: 2px solid ${color.on_tertiary}; + border: 2px solid ${theme.on_tertiary}; border-radius: 4px; padding: 6px 12px; margin: 6px 0; diff --git a/src/templates/post/layouts/detail/PostCategoryInformationBox.tsx b/src/templates/post/layouts/detail/PostCategoryInformationBox.tsx index 88d50cd6..971c891a 100644 --- a/src/templates/post/layouts/detail/PostCategoryInformationBox.tsx +++ b/src/templates/post/layouts/detail/PostCategoryInformationBox.tsx @@ -1,8 +1,8 @@ import styled from "styled-components"; import { font } from "@/styles"; -import { CategoryArrow } from "@/assets/icons"; -import getCategory from "@/helpers/getCategory.helper"; -import { PostCategoryType } from "@/templates/post/types"; +import { PostCategoryType } from "../../types"; +import CategoryArrow from "../../assets/icons/CategoryArrow"; +import { get카테고리명ByCategory } from "../../helpers"; interface IPostCategoryProps { postType: PostCategoryType; @@ -13,7 +13,7 @@ const PostCategoryInformationBox = ({ postType }: IPostCategoryProps) => { <Container> <PostType>커뮤니티</PostType> <CategoryArrow width={12} height={12} /> - <CategoryType>{getCategory(postType)}</CategoryType> + <CategoryType>{get카테고리명ByCategory(postType)}</CategoryType> </Container> ); }; diff --git a/src/templates/post/layouts/detail/PostLikeCountBox.tsx b/src/templates/post/layouts/detail/PostLikeCountBox.tsx index 3a47fdb0..630af40e 100644 --- a/src/templates/post/layouts/detail/PostLikeCountBox.tsx +++ b/src/templates/post/layouts/detail/PostLikeCountBox.tsx @@ -1,11 +1,10 @@ -import React from "react"; import styled from "styled-components"; import { Row } from "@/components/Flex"; import { flex, font } from "@/styles"; import { CommentIcon } from "../../assets/icons"; import ReactableLikeIcon from "../../assets/icons/ReactableLikeIcon"; -import { PostCountBoxProps } from "../../interfaces"; import { useLike } from "../../hooks"; +import { PostCountBoxProps } from "../../types/@props"; const PostLikeCountBox = ({ likeCount, @@ -35,7 +34,7 @@ const PostLikeCountBox = ({ }; const LikeBox = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; gap: 4px; cursor: pointer; `; diff --git a/src/templates/post/layouts/detail/PostMainBox.tsx b/src/templates/post/layouts/detail/PostMainBox.tsx index fa61023f..c8e611e4 100644 --- a/src/templates/post/layouts/detail/PostMainBox.tsx +++ b/src/templates/post/layouts/detail/PostMainBox.tsx @@ -1,13 +1,13 @@ import styled from "styled-components"; import { Column } from "@/components/Flex"; -import { CustomViewer } from "@/components/atoms"; -import { PostProps } from "@/templates/post/interfaces"; import { CATEGORY } from "@/templates/post/constants"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; +import { ContentViewer } from "@/components/common"; import PostLikeCountBox from "./PostLikeCountBox"; import SectionBox from "./SectionBox"; import CommentList from "./comment/CommentList"; import CreateCommentBox from "./comment/CreateCommentBox"; +import { PostProps } from "../../types/@props"; const PostMainBox = ({ post }: PostProps) => { const is분실물찾기카테고리라면 = @@ -34,7 +34,7 @@ const PostMainBox = ({ post }: PostProps) => { {post.category === CATEGORY.CODE_REVIEW && ( <Column gap="20px"> <SectionBox title="🔗 코드리뷰 링크" content={post.prUrl} isUrl /> - <CustomViewer content={post.content} /> + <ContentViewer content={post.content} /> </Column> )} {is분실물찾기카테고리라면 && ( @@ -55,7 +55,7 @@ const PostMainBox = ({ post }: PostProps) => { </Column> )} {is일반이나공지사항카테고리라면 && ( - <CustomViewer content={post.content} /> + <ContentViewer content={post.content} /> )} <PostLikeCountBox {...post} /> {post.id && ( @@ -71,13 +71,14 @@ const PostMainBox = ({ post }: PostProps) => { const Container = styled.div` padding: 18px 8px; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 20px; `; const CommentWrap = styled.div` - ${flex.COLUMN}; - border-top: 1.5px solid ${color.on_tertiary}; + ${flex.COLUMN_FLEX}; + height: 100%; + border-top: 1.5px solid ${theme.on_tertiary}; padding-top: 10px; gap: 10px; `; diff --git a/src/templates/post/layouts/detail/PostMainlyInformationBox.tsx b/src/templates/post/layouts/detail/PostMainlyInformationBox.tsx index b21ec7e9..bbcc3b5f 100644 --- a/src/templates/post/layouts/detail/PostMainlyInformationBox.tsx +++ b/src/templates/post/layouts/detail/PostMainlyInformationBox.tsx @@ -1,11 +1,10 @@ import styled from "styled-components"; import { Column, Row } from "@/components/Flex"; -import color from "@/styles/color"; -import { flex, font } from "@/styles"; -import { ImageWithFallback } from "@/components/atoms"; +import { flex, font, theme } from "@/styles"; +import { FallbackImage } from "@/components/atoms"; import { defaultProfile } from "@/assets/images"; import { CommentIcon, LikeIcon, TimeIcon } from "@/templates/post/assets/icons"; -import { Post } from "@/templates/post/interfaces"; +import { Post } from "@/templates/post/types"; import dayjs from "dayjs"; import DATE from "@/constants/date.constant"; import "dayjs/locale/ko"; @@ -16,7 +15,7 @@ const PostMainlyInformationBox = ({ ...post }: Post) => { <TitleText>{post.title}</TitleText> <ProfileBox> <Profile> - <ImageWithFallback + <FallbackImage src={post.user.profileImage} alt="profile" width={38} @@ -57,7 +56,7 @@ const TitleText = styled.h1` `; const ProfileBox = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; gap: 12px; cursor: pointer; width: fit-content; @@ -67,7 +66,7 @@ const ProfileBox = styled.div` const Profile = styled.div` width: 42px; height: 42px; - border: 2px solid ${color.on_tertiary}; + border: 2px solid ${theme.on_tertiary}; border-radius: 50%; ${flex.CENTER}; `; @@ -78,7 +77,7 @@ const Author = styled.h2` const Date = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; @media screen and (max-width: 541px) { display: none; @@ -94,7 +93,7 @@ const ResponsiveDate = styled(Date)` const PostText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; export default PostMainlyInformationBox; diff --git a/src/templates/post/layouts/detail/SectionBox.tsx b/src/templates/post/layouts/detail/SectionBox.tsx index e987c57e..b90e2401 100644 --- a/src/templates/post/layouts/detail/SectionBox.tsx +++ b/src/templates/post/layouts/detail/SectionBox.tsx @@ -1,12 +1,11 @@ -import { Column } from "@/components/Flex"; -import { CustomViewer } from "@/components/atoms"; -import { font } from "@/styles"; import dayjs from "dayjs"; import Image from "next/image"; import Link from "next/link"; -import React from "react"; import styled from "styled-components"; -import { PostSectionBoxProps } from "../../interfaces"; +import { Column } from "@/components/Flex"; +import { font } from "@/styles"; +import { ContentViewer } from "@/components/common"; +import { PostSectionBoxProps } from "../../types/@props"; const SectionBox = ({ title, @@ -37,7 +36,7 @@ const SectionBox = ({ )} {isContent && ( <StyledViewerBox> - <CustomViewer content={content} /> + <ContentViewer content={content} /> </StyledViewerBox> )} {isDefault && <StyledContent>{content}</StyledContent>} diff --git a/src/templates/post/layouts/detail/comment/CommentContentBox.tsx b/src/templates/post/layouts/detail/comment/CommentContentBox.tsx index 9587bcf7..f3ccecd8 100644 --- a/src/templates/post/layouts/detail/comment/CommentContentBox.tsx +++ b/src/templates/post/layouts/detail/comment/CommentContentBox.tsx @@ -1,7 +1,7 @@ import { Column } from "@/components/Flex"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import { getTextDepthCount, getTextIsOverflow } from "@/templates/post/helpers"; -import { CommentContentBoxProps } from "@/templates/post/interfaces"; +import { CommentContentBoxProps } from "@/templates/post/types/@props"; import React from "react"; import styled from "styled-components"; @@ -28,7 +28,7 @@ const CommentContentBox = ({ const DetailViewButton = styled.button` border: none; width: fit-content; - color: ${color.gray}; + color: ${theme.gray}; ${font.caption}; border-radius: 999px; diff --git a/src/templates/post/layouts/detail/comment/CommentLikeInformationBox.tsx b/src/templates/post/layouts/detail/comment/CommentLikeInformationBox.tsx index 55b5a412..f93062b8 100644 --- a/src/templates/post/layouts/detail/comment/CommentLikeInformationBox.tsx +++ b/src/templates/post/layouts/detail/comment/CommentLikeInformationBox.tsx @@ -1,9 +1,9 @@ import { Row } from "@/components/Flex"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { AddCommentIcon } from "@/templates/post/assets/icons"; import ReactableLikeIcon from "@/templates/post/assets/icons/ReactableLikeIcon"; import { useLike } from "@/templates/post/hooks"; -import { CommentLikeInformationBoxProps } from "@/templates/post/interfaces"; +import { CommentLikeInformationBoxProps } from "@/templates/post/types/@props"; import React from "react"; import styled from "styled-components"; @@ -28,20 +28,20 @@ const CommentLikeInformationBox = ({ }; const StyledBox = styled.div` - ${flex.HORIZONTAL}; + ${flex.VERTICAL}; gap: 4px; cursor: pointer; padding: 2px 6px; &:hover { - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; border-radius: 999px; } `; const StyledText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; const StyledCommentText = styled(StyledText)` diff --git a/src/templates/post/layouts/detail/comment/CommentList.tsx b/src/templates/post/layouts/detail/comment/CommentList.tsx index daf3c4fe..4120ae4f 100644 --- a/src/templates/post/layouts/detail/comment/CommentList.tsx +++ b/src/templates/post/layouts/detail/comment/CommentList.tsx @@ -1,32 +1,25 @@ -import { color, flex } from "@/styles"; -import Loading from "@/components/atoms/Loading"; +import { theme, flex } from "@/styles"; import React from "react"; import styled from "styled-components"; +import { useInfiniteScroll } from "@/hooks"; import { useCommentListQuery } from "@/templates/post/services/comment/query.service"; -import { Comment, PostDetailParamsProps } from "@/templates/post/interfaces"; -import InfiniteScroll from "react-infinite-scroll-component"; +import { Comment } from "@/templates/post/types"; +import { PostDetailParamsProps } from "@/templates/post/types/@props"; import CommentListItem from "./CommentListItem"; const CommentList = ({ id }: PostDetailParamsProps) => { - const { commentList, fetchNextPage, hasMore, dataLength } = - useCommentListQuery(id); + const { commentList, fetchNextPage } = useCommentListQuery(id); + useInfiniteScroll(fetchNextPage); return ( <Container> - <InfiniteScroll - dataLength={dataLength} - next={fetchNextPage} - hasMore={hasMore} - loader={<Loading />} - > - {commentList?.map((comments) => ( - <CommentListBox> - {comments.entity.map((comment: Comment) => ( - <CommentListItem key={comment.id} comment={comment} /> - ))} - </CommentListBox> - ))} - </InfiniteScroll> + {commentList?.map((comments) => ( + <CommentListBox> + {comments.entity.map((comment: Comment) => ( + <CommentListItem key={comment.id} comment={comment} /> + ))} + </CommentListBox> + ))} </Container> ); }; @@ -34,13 +27,13 @@ const CommentList = ({ id }: PostDetailParamsProps) => { const Container = styled.div` width: 100%; height: 100%; - background-color: ${color.white}; + background-color: ${theme.white}; `; const CommentListBox = styled.div` width: 100%; height: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; `; export default CommentList; diff --git a/src/templates/post/layouts/detail/comment/CommentListItem.tsx b/src/templates/post/layouts/detail/comment/CommentListItem.tsx index 9ae9baac..89b09247 100644 --- a/src/templates/post/layouts/detail/comment/CommentListItem.tsx +++ b/src/templates/post/layouts/detail/comment/CommentListItem.tsx @@ -1,11 +1,11 @@ import { defaultProfile } from "@/assets/images"; import { Column } from "@/components/Flex"; -import { ImageWithFallback } from "@/components/atoms"; +import { FallbackImage } from "@/components/atoms"; import { flex } from "@/styles"; -import { CommentListItemProps } from "@/templates/post/interfaces"; import React from "react"; import styled from "styled-components"; import { useComment } from "@/templates/post/hooks"; +import { CommentListItemProps } from "@/templates/post/types/@props"; import CreateRecommentBox from "../recomment/CreateRecommentBox"; import RecommentList from "../recomment/RecommentList"; import CommentWritableBox from "./CommentWritableBox"; @@ -23,7 +23,7 @@ const CommentListItem = ({ comment }: CommentListItemProps) => { return ( <Container> <ProfileImage> - <ImageWithFallback + <FallbackImage src={comment.user.profileImage} fallbackSrc={defaultProfile} alt="프로필" diff --git a/src/templates/post/layouts/detail/comment/CommentWritableBox.tsx b/src/templates/post/layouts/detail/comment/CommentWritableBox.tsx index 1d987aea..2b8676bc 100644 --- a/src/templates/post/layouts/detail/comment/CommentWritableBox.tsx +++ b/src/templates/post/layouts/detail/comment/CommentWritableBox.tsx @@ -1,10 +1,10 @@ +import dayjs from "dayjs"; +import React from "react"; import { Column, Row } from "@/components/Flex"; import { Button } from "@/components/atoms"; -import { color } from "@/styles"; +import { theme } from "@/styles"; import { useComment } from "@/templates/post/hooks"; -import { Comment } from "@/templates/post/interfaces"; -import dayjs from "dayjs"; -import React from "react"; +import { Comment } from "@/templates/post/types"; import CommentContentBox from "./CommentContentBox"; import { CommentCreatedAt, @@ -42,13 +42,13 @@ const CommentWritableBox = ({ ...comment }: Comment) => { <> <Button align="RIGHT" - color={isEditMode ? color.primary_red : color.primary_blue} + color={isEditMode ? theme.primary_red : theme.primary_blue} onClick={handleEditModeChange} > {isEditMode ? "취소" : "수정"} </Button> <Button - color={isEditMode ? color.primary_blue : color.primary_red} + color={isEditMode ? theme.primary_blue : theme.primary_red} onClick={ isEditMode ? handleUpdateCommentDetailClick diff --git a/src/templates/post/layouts/detail/comment/CreateCommentBox.tsx b/src/templates/post/layouts/detail/comment/CreateCommentBox.tsx index 7f1f17fd..b4bec9fd 100644 --- a/src/templates/post/layouts/detail/comment/CreateCommentBox.tsx +++ b/src/templates/post/layouts/detail/comment/CreateCommentBox.tsx @@ -1,17 +1,13 @@ import React from "react"; import styled from "styled-components"; -import { color, flex, font } from "@/styles"; -import { Emoji } from "@/assets/icons"; -import useEmoji from "@/hooks/useEmoji"; -import { EmojiModal } from "@/components/common"; +import { theme, flex, font } from "@/styles"; import { Button } from "@/components/atoms"; import { useComment } from "@/templates/post/hooks"; -import { PostDetailParamsProps } from "@/templates/post/interfaces"; +import { PostDetailParamsProps } from "@/templates/post/types/@props"; const CreateCommentBox = ({ id }: PostDetailParamsProps) => { const { commentInput, handleCommentInputChange, handleCreateCommentClick } = useComment(id); - const { openEmoji, closeEmoji, visible } = useEmoji(); return ( <Container> @@ -20,9 +16,7 @@ const CreateCommentBox = ({ id }: PostDetailParamsProps) => { value={commentInput} /> <CommentToolBox> - {visible && <EmojiModal onClose={closeEmoji} top="-24%" right="84%" />} - <Emoji onClick={openEmoji} /> - <Button color={color.primary_blue} onClick={handleCreateCommentClick}> + <Button color={theme.primary_blue} onClick={handleCreateCommentClick}> 작성 </Button> </CommentToolBox> @@ -31,7 +25,7 @@ const CreateCommentBox = ({ id }: PostDetailParamsProps) => { }; const Container = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; width: 100%; gap: 8px; `; @@ -39,13 +33,13 @@ const Container = styled.div` const CommentTextArea = styled.textarea` width: 100%; height: 100px; - border: 2px solid ${color.on_tertiary}; + border: 2px solid ${theme.on_tertiary}; padding: 12px; ${font.p3}; `; const CommentToolBox = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; gap: 16px; margin-left: auto; position: relative; diff --git a/src/templates/post/layouts/detail/comment/RecommentViewButton.tsx b/src/templates/post/layouts/detail/comment/RecommentViewButton.tsx index a175d79b..28e19040 100644 --- a/src/templates/post/layouts/detail/comment/RecommentViewButton.tsx +++ b/src/templates/post/layouts/detail/comment/RecommentViewButton.tsx @@ -1,8 +1,8 @@ -import { color, flex, font } from "@/styles"; -import { PostArrowIcon } from "@/templates/post/assets/icons"; -import { RecommentViewButtonProps } from "@/templates/post/interfaces"; -import React from "react"; import styled from "styled-components"; +import { theme, flex, font } from "@/styles"; +import { RecommentViewButtonProps } from "@/templates/post/types/@props"; +import { ArrowIcon } from "@/assets/icons"; +import { DIRECTION } from "@/constants"; const RecommentViewButton = ({ handleViewRecommentModeChange, @@ -11,11 +11,11 @@ const RecommentViewButton = ({ }: RecommentViewButtonProps) => { return ( <Container onClick={handleViewRecommentModeChange}> - <PostArrowIcon - direction={isViewRecommentMode ? "top" : "bottom"} + <ArrowIcon + direction={isViewRecommentMode ? DIRECTION.TOP : DIRECTION.BOTTOM} width={12} height={12} - color={color.primary_blue} + color={theme.primary_blue} /> <RecommentViewCountText>답글 {recommentCount}개</RecommentViewCountText> </Container> @@ -31,12 +31,12 @@ const Container = styled.button` border-radius: 999px; &:hover { - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; } `; const RecommentViewCountText = styled.span` - color: ${color.primary_blue}; + color: ${theme.primary_blue}; ${font.caption}; font-weight: 600; margin-top: -4px; diff --git a/src/templates/post/layouts/detail/index.tsx b/src/templates/post/layouts/detail/index.tsx index 632a4667..9ece8267 100644 --- a/src/templates/post/layouts/detail/index.tsx +++ b/src/templates/post/layouts/detail/index.tsx @@ -1,15 +1,15 @@ import React from "react"; import styled from "styled-components"; -import { color, flex } from "@/styles"; +import { theme, flex } from "@/styles"; import { Row } from "@/components/Flex"; import { Button } from "@/components/atoms"; import { Aside } from "@/components/common"; import { usePostQuery } from "../../services/post/query.service"; import { usePost } from "../../hooks"; -import { PostDetailParamsProps } from "../../interfaces"; import PostCategoryInformationBox from "./PostCategoryInformationBox"; import PostTitle from "./PostMainlyInformationBox"; import PostMainBox from "./PostMainBox"; +import { PostDetailParamsProps } from "../../types/@props"; const PostDetailPage = ({ id }: PostDetailParamsProps) => { const { post } = usePostQuery(id); @@ -30,13 +30,13 @@ const PostDetailPage = ({ id }: PostDetailParamsProps) => { <> <Button align="RIGHT" - color={color.primary_blue} + color={theme.primary_blue} onClick={handleUpdateButtonClick} > 수정 </Button> <Button - color={color.primary_red} + color={theme.primary_red} onClick={handleDeleteButtonClick} > 삭제 @@ -55,18 +55,19 @@ const PostDetailPage = ({ id }: PostDetailParamsProps) => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + height: fit-content; + ${flex.COLUMN_FLEX}; border-radius: 4px; - background-color: ${color.white}; + background-color: ${theme.white}; padding: 22px 32px; `; const PostHeadBox = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; padding-bottom: 20px; - border-bottom: 1px solid ${color.on_tertiary}; + border-bottom: 1px solid ${theme.on_tertiary}; `; export default PostDetailPage; diff --git a/src/templates/post/layouts/detail/recomment/CreateRecommentBox.tsx b/src/templates/post/layouts/detail/recomment/CreateRecommentBox.tsx index 85f90f63..dbec2325 100644 --- a/src/templates/post/layouts/detail/recomment/CreateRecommentBox.tsx +++ b/src/templates/post/layouts/detail/recomment/CreateRecommentBox.tsx @@ -1,13 +1,12 @@ import { defaultProfile } from "@/assets/images"; import { Column, Row } from "@/components/Flex"; -import { Button, ImageWithFallback } from "@/components/atoms"; -import useTextarea from "@/hooks/useTextarea"; -import useUser from "@/hooks/useUser"; -import { color, font } from "@/styles"; +import { Button, FallbackImage } from "@/components/atoms"; +import { theme, font } from "@/styles"; import React from "react"; import styled from "styled-components"; -import { useRecomment } from "@/templates/post/hooks"; -import { CreateRecommentBoxProps } from "@/templates/post/interfaces"; +import { useRecomment, useTextarea } from "@/templates/post/hooks"; +import { CreateRecommentBoxProps } from "@/templates/post/types/@props"; +import { useUser } from "@/@user/hooks"; const CreateRecommentBox = ({ handleModeCancelClick, @@ -22,11 +21,12 @@ const CreateRecommentBox = ({ handleResizeTextareaKeyEnter, } = useTextarea(""); const { user } = useUser(); - const { handleCreateRecommentClick } = useRecomment(id); + const { handleRecommentInputChange, handleCreateRecommentClick } = + useRecomment(id); return ( <Container> - <ImageWithFallback + <FallbackImage src={user.profile_image} fallbackSrc={defaultProfile} alt="프로필" @@ -37,7 +37,10 @@ const CreateRecommentBox = ({ <Column width="100%" gap="10px"> <RecommentTextArea ref={textareaRef} - onChange={(e) => setContent(e.target.value)} + onChange={(e) => { + handleRecommentInputChange(e); + setContent(e.target.value); + }} value={detail} onInput={handleResizeTextAreaOnInput} onKeyDown={handleResizeTextareaKeyEnter} @@ -45,14 +48,14 @@ const CreateRecommentBox = ({ /> <Row gap="6px"> <Button - color={color.primary_red} + color={theme.primary_red} onClick={handleModeCancelClick} isSmall > 취소 </Button> <Button - color={color.primary_blue} + color={theme.primary_blue} onClick={() => { handleCreateRecommentClick(); handleModeCancelClick(); @@ -75,7 +78,7 @@ const Container = styled.div` `; const RecommentTextArea = styled.textarea<{ row: number }>` - border-bottom: 2px solid ${color.on_tertiary}; + border-bottom: 2px solid ${theme.on_tertiary}; width: 100%; height: ${({ row }) => `${(row || 1) * 14}px`}; padding-left: 8px; diff --git a/src/templates/post/layouts/detail/recomment/RecommentContentBox.tsx b/src/templates/post/layouts/detail/recomment/RecommentContentBox.tsx index 0ccb1a25..669fb462 100644 --- a/src/templates/post/layouts/detail/recomment/RecommentContentBox.tsx +++ b/src/templates/post/layouts/detail/recomment/RecommentContentBox.tsx @@ -1,9 +1,8 @@ +import styled from "styled-components"; import { Column } from "@/components/Flex"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import { getTextDepthCount, getTextIsOverflow } from "@/templates/post/helpers"; -import { CommentContentBoxProps } from "@/templates/post/interfaces"; -import React from "react"; -import styled from "styled-components"; +import { CommentContentBoxProps } from "@/templates/post/types/@props"; const RecommentContentBox = ({ isDetailMode, @@ -33,7 +32,7 @@ const CommentDetail = styled.p` const DetailViewButton = styled.button` border: none; width: fit-content; - color: ${color.gray}; + color: ${theme.gray}; ${font.caption}; border-radius: 999px; diff --git a/src/templates/post/layouts/detail/recomment/RecommentList.tsx b/src/templates/post/layouts/detail/recomment/RecommentList.tsx index 923bdba7..27484ebc 100644 --- a/src/templates/post/layouts/detail/recomment/RecommentList.tsx +++ b/src/templates/post/layouts/detail/recomment/RecommentList.tsx @@ -1,33 +1,25 @@ -import Loading from "@/components/atoms/Loading"; -import { color, flex } from "@/styles"; +import { theme, flex } from "@/styles"; import React from "react"; -import InfiniteScroll from "react-infinite-scroll-component"; import styled from "styled-components"; -import Recomment from "@/templates/post/interfaces/recomment.interface"; -import { PostDetailParamsProps } from "@/templates/post/interfaces"; +import Recomment from "@/templates/post/types/Recomment.type"; +import { useInfiniteScroll } from "@/hooks"; +import { PostDetailParamsProps } from "@/templates/post/types/@props"; import { useRecommentListQuery } from "@/templates/post/services/recomment/query.service"; import RecommentListItem from "./RecommentListItem"; const RecommentList = ({ id }: PostDetailParamsProps) => { - const { recommentList, fetchNextPage, hasMore, dataLength } = - useRecommentListQuery(id); + const { recommentList, fetchNextPage } = useRecommentListQuery(id); + useInfiniteScroll(fetchNextPage); return ( <Container> - <InfiniteScroll - dataLength={dataLength} - next={fetchNextPage} - hasMore={hasMore} - loader={<Loading />} - > - {recommentList?.map((recomments) => ( - <RecommentListBox key={recomments.currentPage}> - {recomments.entity.map((recomment: Recomment) => ( - <RecommentListItem key={recomment.id} {...recomment} /> - ))} - </RecommentListBox> - ))} - </InfiniteScroll> + {recommentList?.map((recomments) => ( + <RecommentListBox key={recomments.currentPage}> + {recomments.entity.map((recomment: Recomment) => ( + <RecommentListItem key={recomment.id} {...recomment} /> + ))} + </RecommentListBox> + ))} </Container> ); }; @@ -35,13 +27,13 @@ const RecommentList = ({ id }: PostDetailParamsProps) => { const Container = styled.div` width: 100%; height: 100%; - background-color: ${color.white}; + background-color: ${theme.white}; `; const RecommentListBox = styled.div` width: 100%; height: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; `; export default RecommentList; diff --git a/src/templates/post/layouts/detail/recomment/RecommentListItem.tsx b/src/templates/post/layouts/detail/recomment/RecommentListItem.tsx index 68fa1706..abe02726 100644 --- a/src/templates/post/layouts/detail/recomment/RecommentListItem.tsx +++ b/src/templates/post/layouts/detail/recomment/RecommentListItem.tsx @@ -1,12 +1,11 @@ +import styled from "styled-components"; import { defaultProfile } from "@/assets/images"; import { Column, Row } from "@/components/Flex"; -import { ImageWithFallback } from "@/components/atoms"; -import { color, flex, font } from "@/styles"; -import React from "react"; -import styled from "styled-components"; +import { FallbackImage } from "@/components/atoms"; +import { theme, flex, font } from "@/styles"; import { useLike } from "@/templates/post/hooks"; import ReactableLikeIcon from "@/templates/post/assets/icons/ReactableLikeIcon"; -import Recomment from "@/templates/post/interfaces/recomment.interface"; +import { Recomment } from "@/templates/post/types"; import RecommentWritableBox from "./RecommentWritableBox"; const RecommentListItem = ({ ...recomment }: Recomment) => { @@ -18,7 +17,7 @@ const RecommentListItem = ({ ...recomment }: Recomment) => { return ( <Container> <ProfileImage> - <ImageWithFallback + <FallbackImage src={recomment.user.profileImage} fallbackSrc={defaultProfile} alt="프로필" @@ -63,14 +62,14 @@ const StyledBox = styled.div` padding: 2px 6px; &:hover { - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; border-radius: 999px; } `; const StyledText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; export default RecommentListItem; diff --git a/src/templates/post/layouts/detail/recomment/RecommentWritableBox.tsx b/src/templates/post/layouts/detail/recomment/RecommentWritableBox.tsx index 045d60e9..4532ddeb 100644 --- a/src/templates/post/layouts/detail/recomment/RecommentWritableBox.tsx +++ b/src/templates/post/layouts/detail/recomment/RecommentWritableBox.tsx @@ -1,10 +1,10 @@ +import React from "react"; +import dayjs from "dayjs"; import { Column, Row } from "@/components/Flex"; import { Button } from "@/components/atoms"; -import { color } from "@/styles"; +import { theme } from "@/styles"; import { useRecomment } from "@/templates/post/hooks"; -import Recomment from "@/templates/post/interfaces/recomment.interface"; -import dayjs from "dayjs"; -import React from "react"; +import { Recomment } from "@/templates/post/types"; import RecommentContentBox from "./RecommentContentBox"; import { CommentCreatedAt, @@ -42,14 +42,14 @@ const RecommentWritableBox = ({ ...recomment }: Recomment) => { <> <Button align="RIGHT" - color={isEditMode ? color.primary_red : color.primary_blue} + color={isEditMode ? theme.primary_red : theme.primary_blue} onClick={handleEditModeChange} isSmall > {isEditMode ? "취소" : "수정"} </Button> <Button - color={isEditMode ? color.primary_blue : color.primary_red} + color={isEditMode ? theme.primary_blue : theme.primary_red} onClick={ isEditMode ? handleUpdateRecommentDetailClick diff --git a/src/templates/post/layouts/edit/UpdateTitleBox.tsx b/src/templates/post/layouts/edit/UpdateTitleBox.tsx deleted file mode 100644 index 98a6805b..00000000 --- a/src/templates/post/layouts/edit/UpdateTitleBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { color, font } from "@/styles"; -import React from "react"; -import styled from "styled-components"; - -const UpdateTitleBox = () => { - return ( - <> - <TitleText>✍🏻 글 수정하기</TitleText> - <SubTitleText>게시글의 어떤 내용을 수정하고 싶으신가요?</SubTitleText> - </> - ); -}; - -const TitleText = styled.h1` - ${font.H2}; -`; - -const SubTitleText = styled.p` - ${font.context}; - color: ${color.gray}; -`; - -export default UpdateTitleBox; diff --git a/src/templates/post/layouts/edit/index.tsx b/src/templates/post/layouts/edit/index.tsx index 5b2f2157..b07077ca 100644 --- a/src/templates/post/layouts/edit/index.tsx +++ b/src/templates/post/layouts/edit/index.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { Button } from "@/components/atoms"; import { Aside } from "@/components/common"; import { usePostQuery } from "../../services/post/query.service"; @@ -13,7 +13,7 @@ import { } from "../components"; import { CATEGORY } from "../../constants"; import { usePostWritable } from "../../hooks"; -import { PostDetailParamsProps } from "../../interfaces"; +import { PostDetailParamsProps } from "../../types/@props"; const PostEditPage = ({ id }: PostDetailParamsProps) => { const { post } = usePostQuery(id); @@ -67,8 +67,8 @@ const PostEditPage = ({ id }: PostDetailParamsProps) => { /> <Button align="RIGHT" - color={color.primary_blue} - onClick={handlePostEditButtonClick} + color={theme.primary_blue} + onClick={() => handlePostEditButtonClick(id)} > 작성 </Button> @@ -81,7 +81,7 @@ const PostEditPage = ({ id }: PostDetailParamsProps) => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 16px; `; @@ -91,11 +91,11 @@ const TitleText = styled.h1` const SubTitleText = styled.p` ${font.context}; - color: ${color.gray}; + color: ${theme.gray}; `; const InputBox = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 18px; `; diff --git a/src/templates/post/layouts/list/PostListItem.tsx b/src/templates/post/layouts/list/PostListItem.tsx index 341e4122..74ae2c4f 100644 --- a/src/templates/post/layouts/list/PostListItem.tsx +++ b/src/templates/post/layouts/list/PostListItem.tsx @@ -1,11 +1,11 @@ import styled from "styled-components"; import { Column, Row } from "@/components/Flex"; -import { color, font } from "@/styles"; +import { theme, font } from "@/styles"; import { defaultProfile } from "@/assets/images"; -import { ImageWithFallback } from "@/components/atoms"; +import { FallbackImage } from "@/components/atoms"; import Link from "next/link"; import { ROUTER } from "@/constants"; -import { PostListProperty } from "../../interfaces"; +import { PostListProperty } from "../../types"; import PostListItemInformationBar from "./PostListItemInformationBar"; import { EmptyImage } from "../../assets/images"; import { CATEGORY } from "../../constants"; @@ -26,8 +26,8 @@ const PostListItem = ({ return ( <Layout href={`${ROUTER.POST.LIST}/${id}`}> {is카테고리가분실물찾기라면 && ( - <ImageWithFallback - src={lostThingImage} + <FallbackImage + src={lostThingImage || "/"} alt="분실물 이미지" fallbackSrc={EmptyImage} width={50} @@ -37,7 +37,7 @@ const PostListItem = ({ <Column gap="4px"> <PostTitleText>{title}</PostTitleText> <Row alignItems="center" gap="12px"> - <ImageWithFallback + <FallbackImage src={user.profileImage} alt="profile" width={18} @@ -61,7 +61,7 @@ const PostListItem = ({ const Layout = styled(Link)` width: 100%; height: 80px; - background-color: ${color.white}; + background-color: ${theme.white}; display: flex; align-items: center; padding: 0px 24px; @@ -81,7 +81,7 @@ const PostWriterNameText = styled.span` const Separator = styled.div` width: 1px; height: 16px; - background-color: ${color.on_tertiary}; + background-color: ${theme.on_tertiary}; `; export default PostListItem; diff --git a/src/templates/post/layouts/list/PostListItemInformationBar.tsx b/src/templates/post/layouts/list/PostListItemInformationBar.tsx index 2314254d..b1f9ee3d 100644 --- a/src/templates/post/layouts/list/PostListItemInformationBar.tsx +++ b/src/templates/post/layouts/list/PostListItemInformationBar.tsx @@ -1,10 +1,10 @@ import React from "react"; import { Row } from "@/components/Flex"; import styled from "styled-components"; -import { color, font } from "@/styles"; -import { PostListItemInformationBarProps } from "../../interfaces"; +import { theme, font } from "@/styles"; import { CommentIcon, LikeIcon, TimeIcon } from "../../assets/icons"; import { usePost } from "../../hooks"; +import { PostListItemInformationBarProps } from "../../types/@props"; const PostListItemInformationBar = ({ likeCount, @@ -42,7 +42,7 @@ const InfomationBox = styled.div` const InfomationText = styled.span` ${font.p3}; - color: ${color.gray}; + color: ${theme.gray}; `; export default PostListItemInformationBar; diff --git a/src/templates/post/layouts/list/index.tsx b/src/templates/post/layouts/list/index.tsx index 5e5eae8f..44b2f4bd 100644 --- a/src/templates/post/layouts/list/index.tsx +++ b/src/templates/post/layouts/list/index.tsx @@ -1,21 +1,20 @@ import styled from "styled-components"; -import { color, flex, font } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { Button, Category } from "@/components/atoms"; import React from "react"; -import InfiniteScroll from "react-infinite-scroll-component"; -import Loading from "@/components/atoms/Loading"; import { Aside } from "@/components/common"; +import { useInfiniteScroll } from "@/hooks"; import { usePostListQuery } from "../../services/post/query.service"; import { usePost } from "../../hooks"; import { get카테고리명ByCategory } from "../../helpers"; import PostListItem from "./PostListItem"; -import { categoryList } from "../../assets/data"; +import { categoryListData } from "../../assets/data"; -const PostPage = () => { +const PostListPage = () => { const { currentCategory, handleWriteButtonClick, handleCheckCategoryClick } = usePost(); - const { postList, fetchNextPage, hasMore, dataLength } = - usePostListQuery(currentCategory); + const { postList, fetchNextPage } = usePostListQuery(currentCategory); + useInfiniteScroll(fetchNextPage); return ( <> @@ -23,35 +22,28 @@ const PostPage = () => { <TitleText>📒 학생 게시판</TitleText> <PostHeaderBox> <PostCategoryBox> - {categoryList.map((category) => ( + {categoryListData.map((category) => ( <Category key={category} id={category} name="CATEGORY" onChange={handleCheckCategoryClick} - checked={category === currentCategory} + selected={category === currentCategory} label={get카테고리명ByCategory(category)} /> ))} </PostCategoryBox> - <Button color={color.primary_blue} onClick={handleWriteButtonClick}> + <Button color={theme.primary_blue} onClick={handleWriteButtonClick}> 글쓰기 </Button> </PostHeaderBox> - <InfiniteScroll - dataLength={dataLength} - next={fetchNextPage} - hasMore={hasMore} - loader={<Loading />} - > - {postList?.map((posts) => ( - <PostListBox key={posts.currentPage}> - {posts.entity.map((post) => ( - <PostListItem key={post.id} {...post} /> - ))} - </PostListBox> - ))} - </InfiniteScroll> + {postList?.map((posts) => ( + <PostListBox key={posts.currentPage}> + {posts.entity.map((post) => ( + <PostListItem key={post.id} {...post} /> + ))} + </PostListBox> + ))} </Layout> <Aside /> </> @@ -60,7 +52,7 @@ const PostPage = () => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 12px; `; @@ -69,7 +61,7 @@ const TitleText = styled.span` `; const PostHeaderBox = styled.div` - ${flex.VERTICAL}; + ${flex.HORIZONTAL}; justify-content: space-between; `; @@ -80,8 +72,8 @@ const PostCategoryBox = styled.div` `; const PostListBox = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 8px; `; -export default PostPage; +export default PostListPage; diff --git a/src/templates/post/layouts/write/CategoryBox.tsx b/src/templates/post/layouts/write/CategoryBox.tsx index 48c3c133..ada6c7e6 100644 --- a/src/templates/post/layouts/write/CategoryBox.tsx +++ b/src/templates/post/layouts/write/CategoryBox.tsx @@ -1,13 +1,12 @@ +import styled from "styled-components"; import { Column } from "@/components/Flex"; import { font } from "@/styles"; import { Category } from "@/components/atoms"; -import React from "react"; -import styled from "styled-components"; -import useUser from "@/hooks/useUser"; -import { categoryList } from "../../assets/data"; +import { useUser } from "@/@user/hooks"; import { CATEGORY } from "../../constants"; -import { PostCategoryBoxProps } from "../../interfaces"; import { get카테고리명ByCategory } from "../../helpers"; +import { categoryListData } from "../../assets/data"; +import { PostCategoryBoxProps } from "../../types/@props"; const PostCategoryBox = ({ handleChangeCategory, @@ -18,7 +17,7 @@ const PostCategoryBox = ({ <Column gap="6px"> <CategoryLabel>카테고리</CategoryLabel> <CategoryList> - {categoryList.map((category) => { + {categoryListData.map((category) => { // 공지사항 카테고리는 admin만 등록할 수 있게 if (category === CATEGORY.NOTICE && !isAdmin) return; return ( @@ -28,7 +27,7 @@ const PostCategoryBox = ({ name="category" onChange={handleChangeCategory} label={get카테고리명ByCategory(category)} - checked={category === currentCategory} + selected={category === currentCategory} /> ); })} diff --git a/src/templates/post/layouts/write/WriteTitleBox.tsx b/src/templates/post/layouts/write/WriteTitleBox.tsx deleted file mode 100644 index ceb5e71e..00000000 --- a/src/templates/post/layouts/write/WriteTitleBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { color, font } from "@/styles"; -import React from "react"; -import styled from "styled-components"; - -const WriteTitleBox = () => { - return ( - <> - <TitleText>📕 글 쓰기</TitleText> - <SubTitleText>어떤 생각을 하고 계신가요?</SubTitleText> - </> - ); -}; - -const TitleText = styled.h1` - ${font.H2}; -`; - -const SubTitleText = styled.p` - ${font.context}; - color: ${color.gray}; -`; - -export default WriteTitleBox; diff --git a/src/templates/post/layouts/write/index.tsx b/src/templates/post/layouts/write/index.tsx index 8ac9939e..2ec1e874 100644 --- a/src/templates/post/layouts/write/index.tsx +++ b/src/templates/post/layouts/write/index.tsx @@ -1,8 +1,7 @@ import styled from "styled-components"; -import { color, flex } from "@/styles"; +import { theme, flex, font } from "@/styles"; import { Button } from "@/components/atoms"; import { Aside } from "@/components/common"; -import { usePostQuery } from "../../services/post/query.service"; import { TitleInputBox, ProjectInputBox, @@ -14,11 +13,8 @@ import { import { CATEGORY } from "../../constants"; import { usePostWritable } from "../../hooks"; import PostCategoryBox from "./CategoryBox"; -import WriteTitleBox from "./WriteTitleBox"; -import { PostDetailParamsProps } from "../../interfaces"; -const PostWritePage = ({ id }: PostDetailParamsProps) => { - const { post } = usePostQuery(id); +const PostWritePage = () => { const { postData, lostImageUrl, @@ -26,11 +22,12 @@ const PostWritePage = ({ id }: PostDetailParamsProps) => { handleImageFileSelect, handlePostWriteButtonClick, handleInputPostDataChange, - } = usePostWritable(post); + } = usePostWritable(); return ( <> <Layout> - <WriteTitleBox /> + <TitleText>📕 글 쓰기</TitleText> + <SubTitleText>어떤 생각을 하고 계신가요?</SubTitleText> <PostCategoryBox handleChangeCategory={handleCategoryChangeClick} currentCategory={postData.category} @@ -73,7 +70,7 @@ const PostWritePage = ({ id }: PostDetailParamsProps) => { /> <Button align="RIGHT" - color={color.primary_blue} + color={theme.primary_blue} onClick={handlePostWriteButtonClick} > 작성 @@ -87,13 +84,22 @@ const PostWritePage = ({ id }: PostDetailParamsProps) => { const Layout = styled.div` width: 100%; - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 16px; `; const InputBox = styled.div` - ${flex.COLUMN}; + ${flex.COLUMN_FLEX}; gap: 18px; `; +const TitleText = styled.h1` + ${font.H2}; +`; + +const SubTitleText = styled.p` + ${font.context}; + color: ${theme.gray}; +`; + export default PostWritePage; diff --git a/src/templates/post/services/comment/api.service.ts b/src/templates/post/services/comment/api.service.ts index 3b032bfc..6b4d06ab 100644 --- a/src/templates/post/services/comment/api.service.ts +++ b/src/templates/post/services/comment/api.service.ts @@ -1,5 +1,5 @@ import httpClient from "@/apis/httpClient"; -import { GetCommentListProps, PostCommentProps } from "../../interfaces"; +import { GetCommentListProps, PostCommentProps } from "../../types/@props"; export const getCommentList = async ({ id, diff --git a/src/templates/post/services/comment/mutation.service.ts b/src/templates/post/services/comment/mutation.service.ts index e1e6a411..811387e8 100644 --- a/src/templates/post/services/comment/mutation.service.ts +++ b/src/templates/post/services/comment/mutation.service.ts @@ -1,8 +1,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { toast } from "react-toastify"; -import KEY from "@/constants/key.constant"; -import { PostCommentProps } from "../../interfaces"; +import { KEY } from "@/constants"; import { createComment, deleteComment, updateComment } from "./api.service"; +import { PostCommentProps } from "../../types/@props"; export const useCreateCommentMutation = () => { const queryClient = useQueryClient(); diff --git a/src/templates/post/services/comment/query.service.ts b/src/templates/post/services/comment/query.service.ts index d2c57e65..db9c836e 100644 --- a/src/templates/post/services/comment/query.service.ts +++ b/src/templates/post/services/comment/query.service.ts @@ -1,18 +1,16 @@ import { useInfiniteQuery } from "@tanstack/react-query"; -import KEY from "@/constants/key.constant"; +import { KEY } from "@/constants"; import { getCommentList } from "./api.service"; export const useCommentListQuery = (id: number) => { const { data, hasNextPage, ...queryRest } = useInfiniteQuery({ - queryKey: [KEY.COMMENT], + queryKey: [KEY.COMMENT, id], queryFn: ({ pageParam = 0 }) => getCommentList({ id, pageParam }), getNextPageParam: ({ currentPage, totalPage }) => { if (currentPage !== totalPage) return currentPage + 1; return undefined; }, }); - const dataLength = data?.pages.flatMap((item) => item.data).length || 0; - const hasMore = hasNextPage || false; - return { commentList: data?.pages, dataLength, hasMore, ...queryRest }; + return { commentList: data?.pages, ...queryRest }; }; diff --git a/src/templates/post/services/like/api.service.ts b/src/templates/post/services/like/api.service.ts index 87769557..4a5bddff 100644 --- a/src/templates/post/services/like/api.service.ts +++ b/src/templates/post/services/like/api.service.ts @@ -9,7 +9,7 @@ export const updatePostLike = async (id: string) => { return data; }; -export const updateCommentLike = async (id: number) => { +export const updateCommentLike = async (id: string) => { const { data } = await httpClient.like.put({ type: LIKE.COMMENT, partyId: id, @@ -17,7 +17,7 @@ export const updateCommentLike = async (id: number) => { return data; }; -export const updateRecommentLike = async (id: number) => { +export const updateRecommentLike = async (id: string) => { const { data } = await httpClient.like.put({ type: LIKE.RECOMMENT, partyId: id, diff --git a/src/templates/post/services/post/api.service.ts b/src/templates/post/services/post/api.service.ts index 8b4961ab..1a2d101b 100644 --- a/src/templates/post/services/post/api.service.ts +++ b/src/templates/post/services/post/api.service.ts @@ -1,6 +1,5 @@ import { refresh } from "@/apis/token"; -import ERROR from "@/constants/error.constant"; -import { GetPostListProps, PostData } from "../../interfaces"; +import { ERROR } from "@/apis/constants"; import { createGraphQLPost, deleteGraphQLPost, @@ -8,6 +7,8 @@ import { getGraphQLPostList, updateGraphQLPost, } from "./graphql.service"; +import { GetPostListProps } from "../../types/@props"; +import { PostData } from "../../types"; export const getPostList = async (params: GetPostListProps) => { const data = await getGraphQLPostList(params); diff --git a/src/templates/post/services/post/graphql.service.ts b/src/templates/post/services/post/graphql.service.ts index 3d40b1e2..4bddc066 100644 --- a/src/templates/post/services/post/graphql.service.ts +++ b/src/templates/post/services/post/graphql.service.ts @@ -1,15 +1,15 @@ import { graphQLClient } from "@/graphql"; import { gql } from "graphql-request"; import { - GetPostListProps, PostCreateQuery, PostData, PostListQuery, PostQuery, PostUpdateQuery, -} from "../../interfaces"; +} from "../../types"; import { posts } from "../graphql/data.graphql"; import { get회당불러올게시글개수 } from "../../helpers"; +import { GetPostListProps } from "../../types/@props"; export const getGraphQLPostList = async ({ category, diff --git a/src/templates/post/services/post/mutation.service.ts b/src/templates/post/services/post/mutation.service.ts index 46494a86..7662e5d0 100644 --- a/src/templates/post/services/post/mutation.service.ts +++ b/src/templates/post/services/post/mutation.service.ts @@ -1,10 +1,9 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { toast } from "react-toastify"; import { useRouter } from "next/navigation"; -import KEY from "@/constants/key.constant"; -import ROUTER from "@/constants/router.constant"; +import { KEY, ROUTER } from "@/constants"; import { createPost, deletePost, updatePost } from "./api.service"; -import { PostData } from "../../interfaces"; +import { PostData } from "../../types"; export const useUpdatePostMutation = () => { const queryClient = useQueryClient(); diff --git a/src/templates/post/services/post/query.service.ts b/src/templates/post/services/post/query.service.ts index 68d5c005..a866ca29 100644 --- a/src/templates/post/services/post/query.service.ts +++ b/src/templates/post/services/post/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getPostList, getPost } from "./api.service"; import { PostCategoryType } from "../../types"; @@ -12,10 +12,7 @@ export const usePostListQuery = (category: PostCategoryType) => { currentPage !== totalPage ? currentPage + 1 : undefined, }, ); - const dataLength = data?.pages.flatMap((item) => item.entity).length || 0; - const hasMore = hasNextPage || false; - - return { postList: data?.pages, dataLength, hasMore, ...queryRest }; + return { postList: data?.pages, ...queryRest }; }; export const usePostQuery = (id: number) => { diff --git a/src/templates/post/services/recomment/api.service.ts b/src/templates/post/services/recomment/api.service.ts index 7d8e8085..c8b275bf 100644 --- a/src/templates/post/services/recomment/api.service.ts +++ b/src/templates/post/services/recomment/api.service.ts @@ -1,5 +1,5 @@ import httpClient from "@/apis/httpClient"; -import { GetCommentListProps, PostCommentProps } from "../../interfaces"; +import { GetCommentListProps, PostCommentProps } from "../../types/@props"; export const getRecommentList = async ({ id, diff --git a/src/templates/post/services/recomment/mutation.service.ts b/src/templates/post/services/recomment/mutation.service.ts index f5fc2ccc..78078289 100644 --- a/src/templates/post/services/recomment/mutation.service.ts +++ b/src/templates/post/services/recomment/mutation.service.ts @@ -1,12 +1,12 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { toast } from "react-toastify"; import KEY from "@/constants/key.constant"; -import { PostCommentProps } from "../../interfaces"; import { createRecomment, deleteRecomment, updateRecomment, } from "./api.service"; +import { PostCommentProps } from "../../types/@props"; export const useCreateRecommentMutation = () => { const queryClient = useQueryClient(); @@ -39,7 +39,6 @@ export const useDeleteRecommentMutation = () => { onSuccess: () => { toast.success("답글이 삭제되었어요."); queryClient.invalidateQueries([KEY.RECOMMENT]); - queryClient.invalidateQueries([KEY.COMMENT]); }, }); }; diff --git a/src/templates/post/services/recomment/query.service.ts b/src/templates/post/services/recomment/query.service.ts index 9857e3a9..101bb0c9 100644 --- a/src/templates/post/services/recomment/query.service.ts +++ b/src/templates/post/services/recomment/query.service.ts @@ -1,18 +1,15 @@ -import KEY from "@/constants/key.constant"; +import { KEY } from "@/constants"; import { useInfiniteQuery } from "@tanstack/react-query"; import { getRecommentList } from "./api.service"; export const useRecommentListQuery = (id: number) => { const { data, hasNextPage, ...queryRest } = useInfiniteQuery({ - queryKey: [KEY.RECOMMENT], + queryKey: [KEY.RECOMMENT, id], queryFn: ({ pageParam = 0 }) => getRecommentList({ id, pageParam }), getNextPageParam: ({ currentPage, totalPage }) => { if (currentPage !== totalPage) return currentPage + 1; return undefined; }, }); - const dataLength = data?.pages.flatMap((item) => item.data).length || 0; - const hasMore = hasNextPage || false; - - return { recommentList: data?.pages, dataLength, hasMore, ...queryRest }; + return { recommentList: data?.pages, ...queryRest }; }; diff --git a/src/templates/post/types/@props/CommentContentBoxProps.type.ts b/src/templates/post/types/@props/CommentContentBoxProps.type.ts new file mode 100644 index 00000000..53d62605 --- /dev/null +++ b/src/templates/post/types/@props/CommentContentBoxProps.type.ts @@ -0,0 +1,6 @@ +export default interface CommentContentBoxProps { + isDetailMode: boolean; + handleDetailModeChange: () => void; + content: string; + commentInput: string; +} diff --git a/src/templates/post/types/@props/CommentLikeInformationBoxProps.type.ts b/src/templates/post/types/@props/CommentLikeInformationBoxProps.type.ts new file mode 100644 index 00000000..cb6dfec0 --- /dev/null +++ b/src/templates/post/types/@props/CommentLikeInformationBoxProps.type.ts @@ -0,0 +1,6 @@ +import Comment from "../Comment.type"; + +export default interface CommentLikeInformationBoxProps { + handleRecommentWriteModeChange: () => void; + comment: Comment; +} diff --git a/src/templates/post/types/@props/CommentListItemProps.type.ts b/src/templates/post/types/@props/CommentListItemProps.type.ts new file mode 100644 index 00000000..6dece1d6 --- /dev/null +++ b/src/templates/post/types/@props/CommentListItemProps.type.ts @@ -0,0 +1,5 @@ +import Comment from "../Comment.type"; + +export default interface CommentListItemProps { + comment: Comment; +} diff --git a/src/templates/post/types/@props/CommentQueryProps.type.ts b/src/templates/post/types/@props/CommentQueryProps.type.ts new file mode 100644 index 00000000..1f62e515 --- /dev/null +++ b/src/templates/post/types/@props/CommentQueryProps.type.ts @@ -0,0 +1,4 @@ +export default interface CommentQueryProps { + detail: string; + id: number; +} diff --git a/src/templates/post/types/@props/CreateRecommentBoxProps.type.ts b/src/templates/post/types/@props/CreateRecommentBoxProps.type.ts new file mode 100644 index 00000000..44abb709 --- /dev/null +++ b/src/templates/post/types/@props/CreateRecommentBoxProps.type.ts @@ -0,0 +1,4 @@ +export default interface CreateRecommentBoxProps { + handleModeCancelClick: () => void; + id: number; +} diff --git a/src/templates/post/types/@props/GetCommentListProps.type.ts b/src/templates/post/types/@props/GetCommentListProps.type.ts new file mode 100644 index 00000000..790e29a2 --- /dev/null +++ b/src/templates/post/types/@props/GetCommentListProps.type.ts @@ -0,0 +1,4 @@ +export default interface GetCommentListProps { + id: number; + pageParam: number; +} diff --git a/src/templates/post/types/@props/GetPostListProps.type.ts b/src/templates/post/types/@props/GetPostListProps.type.ts new file mode 100644 index 00000000..56b94757 --- /dev/null +++ b/src/templates/post/types/@props/GetPostListProps.type.ts @@ -0,0 +1,4 @@ +export default interface GetPostListProps { + category: string; + page: number; +} diff --git a/src/templates/post/types/@props/LikeIconProps.type.ts b/src/templates/post/types/@props/LikeIconProps.type.ts new file mode 100644 index 00000000..7acdd45f --- /dev/null +++ b/src/templates/post/types/@props/LikeIconProps.type.ts @@ -0,0 +1,3 @@ +export default interface LikeIconProps extends React.SVGProps<SVGSVGElement> { + isLiked: boolean; +} diff --git a/src/templates/post/types/@props/PostCategoryBoxProps.type.ts b/src/templates/post/types/@props/PostCategoryBoxProps.type.ts new file mode 100644 index 00000000..f4998909 --- /dev/null +++ b/src/templates/post/types/@props/PostCategoryBoxProps.type.ts @@ -0,0 +1,6 @@ +import PostCategoryType from "../PostCategory.type"; + +export default interface PostCategoryBoxProps { + handleChangeCategory: (e: React.ChangeEvent<HTMLInputElement>) => void; + currentCategory: PostCategoryType; +} diff --git a/src/templates/post/types/@props/PostCategoryInputBoxProps.type.ts b/src/templates/post/types/@props/PostCategoryInputBoxProps.type.ts new file mode 100644 index 00000000..b640b78d --- /dev/null +++ b/src/templates/post/types/@props/PostCategoryInputBoxProps.type.ts @@ -0,0 +1,10 @@ +import Post from "../Post.type"; + +export default interface PostCategoryInputBoxProps { + handleChange: ( + eventOrContent?: string | React.ChangeEvent<HTMLInputElement>, + ) => void; + postData: Post; + lostImageUrl?: undefined; + handleFileSelect?: (file?: File) => Promise<void>; +} diff --git a/src/templates/post/types/@props/PostCommentProps.type.ts b/src/templates/post/types/@props/PostCommentProps.type.ts new file mode 100644 index 00000000..bf048be3 --- /dev/null +++ b/src/templates/post/types/@props/PostCommentProps.type.ts @@ -0,0 +1,4 @@ +export default interface PostCommentProps { + id: number; + detail: string; +} diff --git a/src/templates/post/types/@props/PostCountBoxProps.type.ts b/src/templates/post/types/@props/PostCountBoxProps.type.ts new file mode 100644 index 00000000..8ddc47d0 --- /dev/null +++ b/src/templates/post/types/@props/PostCountBoxProps.type.ts @@ -0,0 +1,6 @@ +export default interface PostCountBoxProps { + commentCount: number; + likeCount: number; + doesLike: boolean; + id: string; +} diff --git a/src/templates/post/types/@props/PostDetailParamsProps.type.ts b/src/templates/post/types/@props/PostDetailParamsProps.type.ts new file mode 100644 index 00000000..ecac0089 --- /dev/null +++ b/src/templates/post/types/@props/PostDetailParamsProps.type.ts @@ -0,0 +1,3 @@ +export default interface PostDetailParamsProps { + id: number; +} diff --git a/src/templates/post/types/@props/PostListItemInformationBarProps.type.ts b/src/templates/post/types/@props/PostListItemInformationBarProps.type.ts new file mode 100644 index 00000000..85b9d57d --- /dev/null +++ b/src/templates/post/types/@props/PostListItemInformationBarProps.type.ts @@ -0,0 +1,5 @@ +export default interface PostListItemInformationBarProps { + likeCount: number; + commentCount: number; + createdAt: string; +} diff --git a/src/templates/post/types/@props/PostProps.type.ts b/src/templates/post/types/@props/PostProps.type.ts new file mode 100644 index 00000000..cb43aef7 --- /dev/null +++ b/src/templates/post/types/@props/PostProps.type.ts @@ -0,0 +1,5 @@ +import Post from "../Post.type"; + +export default interface PostProps { + post: Post; +} diff --git a/src/templates/post/types/@props/PostSectionBoxProps.type.ts b/src/templates/post/types/@props/PostSectionBoxProps.type.ts new file mode 100644 index 00000000..9bf14a86 --- /dev/null +++ b/src/templates/post/types/@props/PostSectionBoxProps.type.ts @@ -0,0 +1,11 @@ +export default interface PostSectionBoxProps { + title: string; + content?: string; + startTime?: string; + endTime?: string; + isProjectDate?: boolean; + isContent?: boolean; + isUrl?: boolean; + isDefault?: boolean; + isImage?: boolean; +} diff --git a/src/templates/post/types/@props/RecommentViewButtonProps.type.ts b/src/templates/post/types/@props/RecommentViewButtonProps.type.ts new file mode 100644 index 00000000..411f231f --- /dev/null +++ b/src/templates/post/types/@props/RecommentViewButtonProps.type.ts @@ -0,0 +1,5 @@ +export default interface RecommentViewButtonProps { + handleViewRecommentModeChange: () => void; + isViewRecommentMode: boolean; + recommentCount: number; +} diff --git a/src/templates/post/types/@props/UseLikeProps.type.ts b/src/templates/post/types/@props/UseLikeProps.type.ts new file mode 100644 index 00000000..7a52cfd8 --- /dev/null +++ b/src/templates/post/types/@props/UseLikeProps.type.ts @@ -0,0 +1,4 @@ +export default interface UseLikeProps { + doesLike: boolean; + likeCount: number; +} diff --git a/src/templates/post/types/@props/index.ts b/src/templates/post/types/@props/index.ts new file mode 100644 index 00000000..fd4bc1f6 --- /dev/null +++ b/src/templates/post/types/@props/index.ts @@ -0,0 +1,18 @@ +export type { default as PostDetailParamsProps } from "./PostDetailParamsProps.type"; +export type { default as PostProps } from "./PostProps.type"; +export type { default as PostSectionBoxProps } from "./PostSectionBoxProps.type"; +export type { default as LikeIconProps } from "./LikeIconProps.type"; +export type { default as PostCountBoxProps } from "./PostCountBoxProps.type"; +export type { default as UseLikeProps } from "./UseLikeProps.type"; +export type { default as CommentQueryProps } from "./CommentQueryProps.type"; +export type { default as CommentListItemProps } from "./CommentListItemProps.type"; +export type { default as CommentContentBoxProps } from "./CommentContentBoxProps.type"; +export type { default as RecommentViewButtonProps } from "./RecommentViewButtonProps.type"; +export type { default as CommentLikeInformationBoxProps } from "./CommentLikeInformationBoxProps.type"; +export type { default as CreateRecommentBoxProps } from "./CreateRecommentBoxProps.type"; +export type { default as PostCategoryInputBoxProps } from "./PostCategoryInputBoxProps.type"; +export type { default as PostCategoryBoxProps } from "./PostCategoryBoxProps.type"; +export type { default as PostCommentProps } from "./PostCommentProps.type"; +export type { default as GetCommentListProps } from "./GetCommentListProps.type"; +export type { default as GetPostListProps } from "./GetPostListProps.type"; +export type { default as PostListItemInformationBarProps } from "./PostListItemInformationBarProps.type"; diff --git a/src/templates/post/types/Comment.type.ts b/src/templates/post/types/Comment.type.ts new file mode 100644 index 00000000..b1c65e82 --- /dev/null +++ b/src/templates/post/types/Comment.type.ts @@ -0,0 +1,14 @@ +export default interface Comment { + id: number; + detail: string; + reCommentCount: number; + postId: number; + likeCount: number; + createdAt: string; + doesLike: boolean; + user: { + id: number; + nickName: string; + profileImage: string; + }; +} diff --git a/src/templates/post/types/Post.type.ts b/src/templates/post/types/Post.type.ts new file mode 100644 index 00000000..4398f5d9 --- /dev/null +++ b/src/templates/post/types/Post.type.ts @@ -0,0 +1,37 @@ +import { PostCategoryType } from "."; + +export default interface Post { + id: string; + title: string; + content: string; + user: { + id: number; + nickName: string; + profileImage: string; + }; + category: PostCategoryType; + createdAt: string; + likeCount: number; + commentCount: number; + doesLike: boolean; + + // POST.PROJECT + startTime?: string; + endTime?: string; + field?: string; + + // POST.CODE_REVIEW + prUrl?: string; + isFinished?: boolean; + + // POST.LOST & POST.FOUND + lostThingImage?: string; + place?: string; + foundUser?: { + id: number; + nickName: string; + }; + + // POST.FOUND + keepingPlace?: string; +} diff --git a/src/templates/post/types/PostCreateQuery.type.ts b/src/templates/post/types/PostCreateQuery.type.ts new file mode 100644 index 00000000..0f76de05 --- /dev/null +++ b/src/templates/post/types/PostCreateQuery.type.ts @@ -0,0 +1,5 @@ +export default interface PostCreateQuery { + create: { + id: number; + }; +} diff --git a/src/templates/post/types/PostData.type.ts b/src/templates/post/types/PostData.type.ts new file mode 100644 index 00000000..15c1aec8 --- /dev/null +++ b/src/templates/post/types/PostData.type.ts @@ -0,0 +1,16 @@ +import { PostCategoryType } from "."; + +export default interface PostData { + id: string; + title: string; + category: PostCategoryType; + content: string; + prUrl: string; + isFinished: boolean; + lostThingImage: string; + place: string; + keepingPlace: string; + startTime: Date | string; + endTime: Date | string; + field: string; +} diff --git a/src/templates/post/types/PostListProperty.type.ts b/src/templates/post/types/PostListProperty.type.ts new file mode 100644 index 00000000..0956f5ef --- /dev/null +++ b/src/templates/post/types/PostListProperty.type.ts @@ -0,0 +1,6 @@ +import Post from "./Post.type"; + +type PostListOmitType = "content"; +type PostListProperty = Omit<Post, PostListOmitType>; + +export default PostListProperty; diff --git a/src/templates/post/types/PostListQuery.type.ts b/src/templates/post/types/PostListQuery.type.ts new file mode 100644 index 00000000..5bdbe35a --- /dev/null +++ b/src/templates/post/types/PostListQuery.type.ts @@ -0,0 +1,5 @@ +import PostListQueryProperty from "./PostListQueryProperty.type"; + +export default interface PostListQuery { + readByCategory: PostListQueryProperty; +} diff --git a/src/templates/post/types/PostListQueryProperty.type.ts b/src/templates/post/types/PostListQueryProperty.type.ts new file mode 100644 index 00000000..7203c1a2 --- /dev/null +++ b/src/templates/post/types/PostListQueryProperty.type.ts @@ -0,0 +1,7 @@ +import { PostListProperty } from "."; + +export default interface PostListQueryProperty { + entity: Array<PostListProperty>; + totalPage: number; + currentPage: number; +} diff --git a/src/templates/post/types/PostQuery.type.ts b/src/templates/post/types/PostQuery.type.ts new file mode 100644 index 00000000..ef41ca33 --- /dev/null +++ b/src/templates/post/types/PostQuery.type.ts @@ -0,0 +1,5 @@ +import Post from "./Post.type"; + +export default interface PostQuery { + readOne: Post; +} diff --git a/src/templates/post/types/PostUpdateQuery.type.ts b/src/templates/post/types/PostUpdateQuery.type.ts new file mode 100644 index 00000000..0aeb700f --- /dev/null +++ b/src/templates/post/types/PostUpdateQuery.type.ts @@ -0,0 +1,5 @@ +export default interface PostUpdateQuery { + update: { + id: number; + }; +} diff --git a/src/templates/post/types/Recomment.type.ts b/src/templates/post/types/Recomment.type.ts new file mode 100644 index 00000000..82dd2c1d --- /dev/null +++ b/src/templates/post/types/Recomment.type.ts @@ -0,0 +1,5 @@ +import Comment from "./Comment.type"; + +export default interface Recomment extends Omit<Comment, "postId"> { + commentId: number; +} diff --git a/src/templates/post/types/index.ts b/src/templates/post/types/index.ts index a19a0046..37c75ab4 100644 --- a/src/templates/post/types/index.ts +++ b/src/templates/post/types/index.ts @@ -1 +1,11 @@ -export type { default as PostCategoryType } from "./postCategory.type"; +export type { default as PostListProperty } from "./PostListProperty.type"; +export type { default as PostListQuery } from "./PostListQuery.type"; +export type { default as PostListQueryProperty } from "./PostListQueryProperty.type"; +export type { default as Post } from "./Post.type"; +export type { default as PostQuery } from "./PostQuery.type"; +export type { default as PostData } from "./PostData.type"; +export type { default as PostUpdateQuery } from "./PostUpdateQuery.type"; +export type { default as PostCreateQuery } from "./PostCreateQuery.type"; +export type { default as Comment } from "./Comment.type"; +export type { default as Recomment } from "./Recomment.type"; +export type { default as PostCategoryType } from "./PostCategory.type"; From 0a67d365fda754db6cf5db9a23eca209e00205fd Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:46:49 +0900 Subject: [PATCH 22/28] =?UTF-8?q?refactor(timetable):=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=ED=91=9C=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/data/defaultTimeTable.data.ts | 11 ++ src/templates/timetable/assets/data/index.ts | 1 + src/templates/timetable/hooks/useTimeTable.ts | 4 +- src/templates/timetable/layouts/index.tsx | 104 ++++++++++++++++++ .../timetable/services/query.service.ts | 2 +- 5 files changed, 119 insertions(+), 3 deletions(-) create mode 100644 src/templates/timetable/assets/data/defaultTimeTable.data.ts create mode 100644 src/templates/timetable/assets/data/index.ts create mode 100644 src/templates/timetable/layouts/index.tsx diff --git a/src/templates/timetable/assets/data/defaultTimeTable.data.ts b/src/templates/timetable/assets/data/defaultTimeTable.data.ts new file mode 100644 index 00000000..07db25ec --- /dev/null +++ b/src/templates/timetable/assets/data/defaultTimeTable.data.ts @@ -0,0 +1,11 @@ +const defaultTimeTableData: Record<string, [{ subject: string }]> = { + SUNDAY: [{ subject: "" }], + FRIDAY: [{ subject: "" }], + SATURDAY: [{ subject: "" }], + TUESDAY: [{ subject: "" }], + THURSDAY: [{ subject: "" }], + MONDAY: [{ subject: "" }], + WEDNESDAY: [{ subject: "" }], +}; + +export default defaultTimeTableData; diff --git a/src/templates/timetable/assets/data/index.ts b/src/templates/timetable/assets/data/index.ts new file mode 100644 index 00000000..0e90bfad --- /dev/null +++ b/src/templates/timetable/assets/data/index.ts @@ -0,0 +1 @@ +export { default as defaultTimeTableData } from "./defaultTimeTable.data"; diff --git a/src/templates/timetable/hooks/useTimeTable.ts b/src/templates/timetable/hooks/useTimeTable.ts index c52d7ed6..cc80d2f9 100644 --- a/src/templates/timetable/hooks/useTimeTable.ts +++ b/src/templates/timetable/hooks/useTimeTable.ts @@ -1,9 +1,9 @@ import React from "react"; -import { timetableDefaultData } from "@/templates/meister/assets/data"; import { useTimetableListQuery } from "../services/query.service"; +import { defaultTimeTableData } from "../assets/data"; const useTimeTable = () => { - const [dayTimeTable, setDayTimeTable] = React.useState(timetableDefaultData); + const [dayTimeTable, setDayTimeTable] = React.useState(defaultTimeTableData); const { data, isSuccess } = useTimetableListQuery(); React.useEffect(() => { diff --git a/src/templates/timetable/layouts/index.tsx b/src/templates/timetable/layouts/index.tsx new file mode 100644 index 00000000..084e4cba --- /dev/null +++ b/src/templates/timetable/layouts/index.tsx @@ -0,0 +1,104 @@ +import styled from "styled-components"; +import dayjs from "dayjs"; +import "dayjs/locale/ko"; +import { theme, flex, font } from "@/styles"; +import { Column, Row } from "@/components/Flex"; +import { Aside } from "@/components/common"; +import { useTimeTable } from "../hooks"; +import { get요일ByWeekday } from "../../meister/helpers"; + +const TimeTablePage = () => { + const { dayTimeTable } = useTimeTable(); + return ( + <> + <Layout> + <Row gap="12px" alignItems="center"> + <TitleText>🗓️ 시간표</TitleText> + <SubTitleText> + {dayjs().locale("ko").format("YYYY년 M월 D일")} + </SubTitleText> + </Row> + {!Object.entries(dayTimeTable).length && ( + <TimeTableBox> + <Column> + {Array.from({ length: 8 }).map((_, i) => ( + <TableItem color={theme.primary_blue}> + <TableHeadText> + {i ? `${i}교시` : "교시 \\ 요일"} + </TableHeadText> + </TableItem> + ))} + </Column> + {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"].map( + (weekday) => ( + <TableBox> + <TableItem color={theme.primary_blue}> + <TableHeadText>{get요일ByWeekday(weekday)}</TableHeadText> + </TableItem> + {dayTimeTable[weekday]?.map(({ subject }) => ( + <TableItem color={theme.white}> + <TableText>{subject}</TableText> + </TableItem> + ))} + </TableBox> + ), + )} + </TimeTableBox> + )} + </Layout> + <Aside /> + </> + ); +}; + +const Layout = styled.div` + width: 100%; + ${flex.COLUMN_FLEX}; + gap: 8px; +`; + +const TitleText = styled.h1` + ${font.H3}; +`; + +const SubTitleText = styled.span` + ${font.H6}; + font-weight: 500; + color: ${theme.gray}; +`; + +const TimeTableBox = styled.div` + width: fit-content; + background-color: white; + border: 1px solid ${theme.on_tertiary}; + border-collapse: collapse; + display: flex; +`; + +const TableBox = styled.div` + width: fit-content; + ${flex.COLUMN_CENTER}; + margin-bottom: auto; +`; + +const TableItem = styled.div<{ theme: string }>` + width: 100%; + text-align: center; + border: 1px solid ${theme.on_tertiary}; + background-color: ${(props) => props.color}; + color: ${(props) => + props.color === theme.primary_blue ? theme.white : theme.black}; +`; + +const TableText = styled.div` + ${font.p2}; + width: 10vw; + height: 9vh; + ${flex.CENTER}; +`; + +const TableHeadText = styled(TableText)` + ${font.H6}; +`; + +export default TimeTablePage; diff --git a/src/templates/timetable/services/query.service.ts b/src/templates/timetable/services/query.service.ts index 8ece7bb1..6b935557 100644 --- a/src/templates/timetable/services/query.service.ts +++ b/src/templates/timetable/services/query.service.ts @@ -1,5 +1,5 @@ -import { KEY } from "@/constants"; import { useQuery } from "@tanstack/react-query"; +import { KEY } from "@/constants"; import { getTimetable } from "./api.service"; export const useTimetableListQuery = () => { From d6944a782f59bd91039c9837f389be8657a6091c Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:51:46 +0900 Subject: [PATCH 23/28] =?UTF-8?q?fix(calendar)=20:=20=EB=8C=80=EC=86=8C?= =?UTF-8?q?=EB=AC=B8=EC=9E=90=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...ndarArrowDirection.type.ts => AlendarArrowDirection.type.ts} | 0 src/templates/calendar/types/index.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/templates/calendar/types/{calendarArrowDirection.type.ts => AlendarArrowDirection.type.ts} (100%) diff --git a/src/templates/calendar/types/calendarArrowDirection.type.ts b/src/templates/calendar/types/AlendarArrowDirection.type.ts similarity index 100% rename from src/templates/calendar/types/calendarArrowDirection.type.ts rename to src/templates/calendar/types/AlendarArrowDirection.type.ts diff --git a/src/templates/calendar/types/index.ts b/src/templates/calendar/types/index.ts index 426da1fe..6c2ab854 100644 --- a/src/templates/calendar/types/index.ts +++ b/src/templates/calendar/types/index.ts @@ -1,4 +1,4 @@ export type { default as CalendarItem } from "./CalendarItem.type"; export type { default as Calendar } from "./Calender.type"; export type { default as CalendarPlan } from "./CalendarPlan.type"; -export type { default as CalendarArrowDirectionType } from "./CalendarArrowDirection.type"; +export type { default as CalendarArrowDirectionType } from "./AlendarArrowDirection.type"; From c3fc98fb57de203f0f14d219b052543205ed3d4c Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:52:09 +0900 Subject: [PATCH 24/28] =?UTF-8?q?fix(calendar)=20:=20=EB=8C=80=EC=86=8C?= =?UTF-8?q?=EB=AC=B8=EC=9E=90=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...endarArrowDirection.type.ts => CalendarArrowDirection.type.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/templates/calendar/types/{AlendarArrowDirection.type.ts => CalendarArrowDirection.type.ts} (100%) diff --git a/src/templates/calendar/types/AlendarArrowDirection.type.ts b/src/templates/calendar/types/CalendarArrowDirection.type.ts similarity index 100% rename from src/templates/calendar/types/AlendarArrowDirection.type.ts rename to src/templates/calendar/types/CalendarArrowDirection.type.ts From 3c0f79f413419f811cf03f3e312470c45f4074c8 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 07:54:31 +0900 Subject: [PATCH 25/28] =?UTF-8?q?fix(calendar)=20:=20=EB=8C=80=EC=86=8C?= =?UTF-8?q?=EB=AC=B8=EC=9E=90=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/calendar/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/calendar/types/index.ts b/src/templates/calendar/types/index.ts index 6c2ab854..426da1fe 100644 --- a/src/templates/calendar/types/index.ts +++ b/src/templates/calendar/types/index.ts @@ -1,4 +1,4 @@ export type { default as CalendarItem } from "./CalendarItem.type"; export type { default as Calendar } from "./Calender.type"; export type { default as CalendarPlan } from "./CalendarPlan.type"; -export type { default as CalendarArrowDirectionType } from "./AlendarArrowDirection.type"; +export type { default as CalendarArrowDirectionType } from "./CalendarArrowDirection.type"; From 02d9a83212031f4112c7c7433953a111f50c4296 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 08:09:10 +0900 Subject: [PATCH 26/28] =?UTF-8?q?fix(post):=20=EB=8C=80=EC=86=8C=EB=AC=B8?= =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../types/{postCategory.type.ts => PoSSSstCategory.type.ts} | 0 src/templates/post/types/index.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/templates/post/types/{postCategory.type.ts => PoSSSstCategory.type.ts} (100%) diff --git a/src/templates/post/types/postCategory.type.ts b/src/templates/post/types/PoSSSstCategory.type.ts similarity index 100% rename from src/templates/post/types/postCategory.type.ts rename to src/templates/post/types/PoSSSstCategory.type.ts diff --git a/src/templates/post/types/index.ts b/src/templates/post/types/index.ts index 37c75ab4..ad6190f2 100644 --- a/src/templates/post/types/index.ts +++ b/src/templates/post/types/index.ts @@ -8,4 +8,4 @@ export type { default as PostUpdateQuery } from "./PostUpdateQuery.type"; export type { default as PostCreateQuery } from "./PostCreateQuery.type"; export type { default as Comment } from "./Comment.type"; export type { default as Recomment } from "./Recomment.type"; -export type { default as PostCategoryType } from "./PostCategory.type"; +export type { default as PostCategoryType } from "./PoSSSstCategory.type"; From 36400dff7eb746655c804b67f3c6fd4ab7f8cfbf Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 08:09:25 +0900 Subject: [PATCH 27/28] =?UTF-8?q?fix(post):=20=EB=8C=80=EC=86=8C=EB=AC=B8?= =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../types/{PoSSSstCategory.type.ts => PostCategory.type.ts} | 0 src/templates/post/types/index.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/templates/post/types/{PoSSSstCategory.type.ts => PostCategory.type.ts} (100%) diff --git a/src/templates/post/types/PoSSSstCategory.type.ts b/src/templates/post/types/PostCategory.type.ts similarity index 100% rename from src/templates/post/types/PoSSSstCategory.type.ts rename to src/templates/post/types/PostCategory.type.ts diff --git a/src/templates/post/types/index.ts b/src/templates/post/types/index.ts index ad6190f2..37c75ab4 100644 --- a/src/templates/post/types/index.ts +++ b/src/templates/post/types/index.ts @@ -8,4 +8,4 @@ export type { default as PostUpdateQuery } from "./PostUpdateQuery.type"; export type { default as PostCreateQuery } from "./PostCreateQuery.type"; export type { default as Comment } from "./Comment.type"; export type { default as Recomment } from "./Recomment.type"; -export type { default as PostCategoryType } from "./PoSSSstCategory.type"; +export type { default as PostCategoryType } from "./PostCategory.type"; From acdebcb5431d36c337d5c4de1a90d00ad9c8f162 Mon Sep 17 00:00:00 2001 From: Ubinquitous <ubinquitous1@gmail.com> Date: Wed, 22 Nov 2023 18:02:18 +0900 Subject: [PATCH 28/28] =?UTF-8?q?fix(home):=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/layouts/BasicMode/HomeMiniBanner.tsx | 2 +- src/templates/home/layouts/BasicMode/HomePostList.tsx | 11 +++++++---- src/templates/timetable/layouts/index.tsx | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx b/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx index 72d27e79..33105590 100644 --- a/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx +++ b/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx @@ -17,7 +17,7 @@ const HomeMiniBanner = () => { const Layout = styled.div` width: 20vw; - height: 210px; + height: 180px; `; const Container = styled(Link)` diff --git a/src/templates/home/layouts/BasicMode/HomePostList.tsx b/src/templates/home/layouts/BasicMode/HomePostList.tsx index a70363e8..864586e6 100644 --- a/src/templates/home/layouts/BasicMode/HomePostList.tsx +++ b/src/templates/home/layouts/BasicMode/HomePostList.tsx @@ -18,9 +18,7 @@ const HomePostList = ({ posts }: HomePostListProps) => { {posts?.map((post) => ( <PostListItem href={`${ROUTER.POST.LIST}/${post.id}`} key={post.id}> <StyledTitle>{post.title}</StyledTitle> - <StyledDate> - {dayjs(post.createdAt).format("YYYY년 M월 D일")} - </StyledDate> + <StyledDate>{dayjs(post.createdAt).format("M월 D일")}</StyledDate> </PostListItem> ))} </Container> @@ -31,7 +29,7 @@ const Container = styled.div` width: 100%; padding: 8px 0; ${flex.COLUMN_FLEX}; - gap: 8px; + gap: 4px; `; const PostListItem = styled(Link)` @@ -44,6 +42,11 @@ const PostListItem = styled(Link)` const StyledTitle = styled.span` ${font.p3}; font-weight: 600; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; `; const StyledDate = styled.span` diff --git a/src/templates/timetable/layouts/index.tsx b/src/templates/timetable/layouts/index.tsx index 084e4cba..be5d3f1a 100644 --- a/src/templates/timetable/layouts/index.tsx +++ b/src/templates/timetable/layouts/index.tsx @@ -18,7 +18,7 @@ const TimeTablePage = () => { {dayjs().locale("ko").format("YYYY년 M월 D일")} </SubTitleText> </Row> - {!Object.entries(dayTimeTable).length && ( + {Object.entries(dayTimeTable).length && ( <TimeTableBox> <Column> {Array.from({ length: 8 }).map((_, i) => (