diff --git a/src/apis/schdule.ts b/src/apis/schdule.ts new file mode 100644 index 0000000..39b4d0b --- /dev/null +++ b/src/apis/schdule.ts @@ -0,0 +1,14 @@ +import { ScheduleData } from "@/types/schedule"; +import { http } from "./http"; + +export const scheduleRegister = ( + data: ScheduleData +) => { + try { + const response = http.patch("/itemgroup.update", data); + return response; + } catch (error) { + console.log(error); + throw error; + } +}; \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index eebbd81..216c3dc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,7 @@ html, body { max-width: 100vw; + height: calc(100% - 6.5rem); background-color: #2B2B2B; } diff --git a/src/assets/images/ic_clock.png b/src/assets/images/ic_clock.png new file mode 100644 index 0000000..444e48c Binary files /dev/null and b/src/assets/images/ic_clock.png differ diff --git a/src/assets/images/ic_nodata.png b/src/assets/images/ic_nodata.png new file mode 100644 index 0000000..ce69f7b Binary files /dev/null and b/src/assets/images/ic_nodata.png differ diff --git a/src/components/atoms/calendar/Calendar.tsx b/src/components/atoms/calendar/Calendar.tsx index 9a27dd6..c2a579e 100644 --- a/src/components/atoms/calendar/Calendar.tsx +++ b/src/components/atoms/calendar/Calendar.tsx @@ -18,7 +18,7 @@ const Calendar = dynamic(() => import('react-calendar'), { ssr: false }); // 지 export interface HomeCalendarProps { mark?: string[]; setCalendarOpen?: any; - value: Date; + value?: Date; onChange: (date: Date) => void; } @@ -32,17 +32,18 @@ export function HomeCalendar({ const handleDateChange = (selectedDate: any) => { if (selectedDate instanceof Date) { onChange(selectedDate); + setCalendarOpen && setCalendarOpen(false); } }; const handleDate = (e: React.MouseEvent): void => { const newValue = new Date(); - if (e.currentTarget.id === "next") { + if (e.currentTarget.id === "next" && value) { // 다음달 - onChange(moment(newValue.setMonth(value.getMonth() + 1, 1)).toDate()) - } else if (e.currentTarget.id === "prev") { + onChange(moment(newValue.setMonth(value?.getMonth() + 1, 1)).toDate()) + } else if (e.currentTarget.id === "prev" && value) { // 저번달 - onChange(moment(newValue.setMonth(value.getMonth() - 1, 1)).toDate()) + onChange(moment(newValue.setMonth(value?.getMonth() - 1, 1)).toDate()) } }; diff --git a/src/components/molecules/noData/NoData.css b/src/components/molecules/noData/NoData.css new file mode 100644 index 0000000..7c97eec --- /dev/null +++ b/src/components/molecules/noData/NoData.css @@ -0,0 +1,21 @@ +.noData { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* padding-top: 3vh; */ + + width: 100%; + /* margin: 3vh 0; */ + height: 100%; + padding-bottom: 5.5rem; +} + +.noData__img { + width: 18%; + height: 40%; + min-height: 50px; + max-height: 80px; + min-width: 50px; + max-width: 80px; +} \ No newline at end of file diff --git a/src/components/molecules/noData/NoData.tsx b/src/components/molecules/noData/NoData.tsx new file mode 100644 index 0000000..6fb06be --- /dev/null +++ b/src/components/molecules/noData/NoData.tsx @@ -0,0 +1,22 @@ +import { Text } from "@/components/atoms/text"; +import { ICONS } from "@/constants/images"; +import Image from "next/image"; + +import { COLORS } from "@/styles"; +import "./NoData.css"; + +export const NoData = ({ title }: { title: string }) => { + return( +
+ no_data + {title} +
+ ) +} \ No newline at end of file diff --git a/src/components/molecules/noData/index.ts b/src/components/molecules/noData/index.ts new file mode 100644 index 0000000..9ba64d7 --- /dev/null +++ b/src/components/molecules/noData/index.ts @@ -0,0 +1 @@ +export { NoData } from "./NoData"; diff --git a/src/components/molecules/scheduleBox/ScheduleBox.css b/src/components/molecules/scheduleBox/ScheduleBox.css index c109928..3e3570f 100644 --- a/src/components/molecules/scheduleBox/ScheduleBox.css +++ b/src/components/molecules/scheduleBox/ScheduleBox.css @@ -29,4 +29,105 @@ .scheduleBox__attend { display: flex; justify-content: flex-end; +} + +/* SkeletonScheduleBox */ + +@keyframes loading { + 0% { + transform: translateX(0); + } + 50%, + 100% { + transform: translateX(460px); + } +} + +.skeleton-item { + width: 100%; + margin: 1rem 0; + /* height: 54%; */ + /* height: 100%; */ +} + + +.skeleton-info { + width: 100%; + /* height: 100%; */ + margin: 0 auto; + padding: 0.5rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: #404040; + border-radius: 50px; +} + + +.skeleton-name { + width: 15%; + height: 25px; + background-color: #5E5E5E; + border-radius: 10px; + position: relative; + overflow: hidden; +} + +.skeleton-name::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 100%; + background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E); + animation: loading 2s infinite linear; +} + +.skeleton-email { + width: 40%; + height: 25px; + background-color: #5E5E5E; + border-radius: 10px; + position: relative; + overflow: hidden; +} + + +.skeleton-email::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 100%; + background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E); + animation: loading 2s infinite linear; +} + +.skeleton-attend { + width: 15%; + height: 25px; + background-color: #5E5E5E; + border-radius: 10px; + position: relative; + overflow: hidden; +} + +.skeleton-attend::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 100%; + background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E); + animation: loading 2s infinite linear; +} + + +.element { + overflow: hidden; + position: relative; } \ No newline at end of file diff --git a/src/components/molecules/scheduleBox/SkeletonScheduleBox.tsx b/src/components/molecules/scheduleBox/SkeletonScheduleBox.tsx new file mode 100644 index 0000000..b7f4cc0 --- /dev/null +++ b/src/components/molecules/scheduleBox/SkeletonScheduleBox.tsx @@ -0,0 +1,13 @@ +import "./ScheduleBox.css"; + +export const SkeletonScheduleBox = () => { + return ( +
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/constants/images.ts b/src/constants/images.ts index 49f061e..9b5ffbb 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -14,6 +14,7 @@ export const ICONS = { down: require("@/assets/images/ic_down.png"), search: require("@/assets/images/ic_search.png"), calendar: require("@/assets/images/ic_calendar.png"), + clock: require("@/assets/images/ic_clock.png"), exchange: require("@/assets/images/ic_exchange.png"), memberProfileNone: require("@/assets/images/ic_member_profile_none.png"), manager: require("@/assets/images/ic_manager.png"), @@ -23,6 +24,7 @@ export const ICONS = { arrowRight: require("@/assets/images/ic_arrow_right.png"), back: require("@/assets/images/ic_back.png"), filter: require("@/assets/images/ic_filter.png"), + nodata: require("@/assets/images/ic_nodata.png"), floatingPlus: require("@/assets/images/Plus.png"), floatingLock: require("@/assets/images/ic_lock.png"), diff --git a/src/features/home/SetHome.tsx b/src/features/home/SetHome.tsx index 8d80a38..b0a80e3 100644 --- a/src/features/home/SetHome.tsx +++ b/src/features/home/SetHome.tsx @@ -22,13 +22,14 @@ const SetHome = () => { return ( -
+