From 2a763d469e54da09ec8fe8461fb84bf3382ba682 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 04:25:59 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20fullCalendar=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/components/TimelineBox/TimelineBox.tsx | 27 ++++++++++ yarn.lock | 60 ++++++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 src/components/TimelineBox/TimelineBox.tsx diff --git a/package.json b/package.json index 48f5e2ae..ac627be0 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", + "@fullcalendar/react": "^6.1.14", "@svgr/cli": "^8.1.0", + "fullcalendar": "^6.1.14", "react": "^18.3.1", "react-datepicker": "^7.2.0", "react-dom": "^18.3.1", diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx new file mode 100644 index 00000000..3755516e --- /dev/null +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; +import dayGridPlugin from '@fullcalendar/daygrid'; +import FullCalendar from '@fullcalendar/react'; +import timeGridPlugin from '@fullcalendar/timegrid'; + +const TimelineBox = () => { + return ( + + + + ); +}; + +const FullCalendarLayout = styled.div` + width: 57.9rem; +`; + +export default TimelineBox; diff --git a/yarn.lock b/yarn.lock index f6c221eb..d4cf2b9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,11 +1474,13 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f" integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g== + "@fal-works/esbuild-plugin-global-externals@^2.1.2": version "2.1.2" resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4" integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ== + "@floating-ui/core@^1.6.0": version "1.6.4" resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.4.tgz#0140cf5091c8dee602bff9da5ab330840ff91df6" @@ -1515,6 +1517,47 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c" integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA== +"@fullcalendar/core@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-6.1.14.tgz#75cd70ab28600dec630970e1015e4e7b59cd4a94" + integrity sha512-hIPRBevm0aMc2aHy1hRIJgXmI1QTvQM1neQa9oxtuqUmF1+ApYC3oAdwcQMTuI7lHHw3pKJDyJFkKLPPnL6HXA== + dependencies: + preact "~10.12.1" + +"@fullcalendar/daygrid@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/daygrid/-/daygrid-6.1.14.tgz#4afc48adbdd905b79777ff4c822c9ed0205df995" + integrity sha512-DSyjiA1dEM8k3bOCrZpZOmAOZu71KGtH02ze+4QKuhxkmn/zQghmmLRdfzpOrcyJg6xGKkoB4pBcO+2lXar8XQ== + +"@fullcalendar/interaction@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/interaction/-/interaction-6.1.14.tgz#c758581419e324cf82b53a38e7941942f7f0dd14" + integrity sha512-rXum5XCjq+WEPNctFeYL/JKZGeU2rlxrElygocdMegcrIBJQW5hnWWVE+i4/1dOmUKF80CbGVlXUyYXoqK2eFg== + +"@fullcalendar/list@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/list/-/list-6.1.14.tgz#526a8f9ce1d98457ab030c3e4ae47302afb92ebf" + integrity sha512-eV0/6iCumYfvlPzIUTAONWH17/JlQCyCChUz8m06L4E/sOiNjkHGz8vlVTmZKqXzx9oWOOyV/Nm3pCtHmVZh+Q== + +"@fullcalendar/multimonth@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/multimonth/-/multimonth-6.1.14.tgz#df82f13a5c9f44d6f6bd0e26fa306dd6be33f926" + integrity sha512-el2vbZZgTkdufgOvRxqx61czjRMfEK50449g4SkqbagtS3ITNMAv84KHFcsbXVbd9Nh3UhbXDuYZuzJZpvY7mQ== + dependencies: + "@fullcalendar/daygrid" "~6.1.14" + +"@fullcalendar/react@^6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/react/-/react-6.1.14.tgz#18adcb690074e933aeae6b26474f65bd22198021" + integrity sha512-sXLn2D8aPYLuDH3fy2ZhHTOz5WNSU1NhoECsGBzjUtz2IYHy6m5Y9TqlyqeAqVqFLDRSJAlKAr5LyrIvnD/IMA== + +"@fullcalendar/timegrid@~6.1.14": + version "6.1.14" + resolved "https://registry.yarnpkg.com/@fullcalendar/timegrid/-/timegrid-6.1.14.tgz#ff1849278b4991002ae1337d5435aaba3ae9aadc" + integrity sha512-ZByc3BVAtxWSVfyaNedROLlg/Tb2NQ43+MZZAfBSrVwVm2xyfQ+Bsx3pJyCXsRsUh2TFFTO07q7nMWe0jet3KQ== + dependencies: + "@fullcalendar/daygrid" "~6.1.14" + "@humanwhocodes/config-array@^0.11.14": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -5157,6 +5200,18 @@ fsevents@~2.3.2, fsevents@~2.3.3: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== +fullcalendar@^6.1.14: + version "6.1.14" + resolved "https://registry.yarnpkg.com/fullcalendar/-/fullcalendar-6.1.14.tgz#64858d63afc341793fe363411798b0b9663cd968" + integrity sha512-uGaJrhafNE50VwHRkIROxXMKDZUr7yXgCJ+8VZ561oL5kx2sSWaDsa9WrSYH/NedNJIklUP5XczhIVtcT3aiaQ== + dependencies: + "@fullcalendar/core" "~6.1.14" + "@fullcalendar/daygrid" "~6.1.14" + "@fullcalendar/interaction" "~6.1.14" + "@fullcalendar/list" "~6.1.14" + "@fullcalendar/multimonth" "~6.1.14" + "@fullcalendar/timegrid" "~6.1.14" + function-bind@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" @@ -6877,6 +6932,11 @@ postcss@^8.4.21, postcss@^8.4.32, postcss@^8.4.38, postcss@^8.4.39: picocolors "^1.0.1" source-map-js "^1.2.0" +preact@~10.12.1: + version "10.12.1" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.12.1.tgz#8f9cb5442f560e532729b7d23d42fd1161354a21" + integrity sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" From 1675ab7c9b744e75cbd570b8e5999ae9f36e45a1 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 07:02:29 +0900 Subject: [PATCH 02/23] style: fullcalendar css custom --- src/components/TimelineBox/TimelineBox.tsx | 115 ++++++++++++++++++++- 1 file changed, 112 insertions(+), 3 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 3755516e..508e2d34 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import dayGridPlugin from '@fullcalendar/daygrid'; +import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; @@ -8,20 +9,128 @@ const TimelineBox = () => { ); }; const FullCalendarLayout = styled.div` - width: 57.9rem; + width: 89.7rem; + height: 93rem; + + .fc-event-main { + color: ${(color) => color.theme.palette.BLACK}; + } + + /* 요일 행 TEXT 중간 정렬 */ + .fc td, + .fc th { + vertical-align: middle; + } + + /* 타임 그리드 30분당 일정 */ + .fc .fc-timegrid-slot-label { + height: 2.4rem; + } + + /* 요일 행 첫번째 border 없애기 */ + .fc-theme-standard td:first-of-type, + .fc-theme-standard th:first-of-type { + border: none; + } + + /* 타임 그리드 종일 일정 */ + .fc-scrollgrid-shrink { + height: 2.4rem; + + border-bottom: 1px solid #000; + } + + /* 타임 그리드 종일 마진 없애기 */ + .fc .fc-daygrid-body-natural .fc-daygrid-day-events { + margin: 0; + } + + .fc .fc-timegrid-divider { + padding: 0; + + border: none; + } + + .fc .fc-cell-shaded { + background: none; + } + + .fc .fc-timegrid-col, + .fc .fc-daygrid-day { + width: 12rem; + } + + /* 30분 줄선 지우기 */ + .fc .fc-timegrid-slot-minor { + border-top-style: none; + } + + .fc-direction-ltr .fc-timegrid-slot-label-frame { + text-align: center; + } + + .fc .fc-timegrid-axis-frame { + justify-content: center; + } + + /* 요일 헤더 높이 조정 */ + .fc .fc-col-header-cell { + width: 12rem; + height: 5.5rem; + + border-right: none; + border-left: none; + border-radius: 8px 8px 0 0; + } + + .fc-theme-standard .fc-scrollgrid { + border-top: none; + border-left: none; + } + + .fc .fc-day-today { + background: none; + } + + .fc .fc-day-sun { + background: #fafcff; + } + + .fc .fc-day-sat { + background: #fafcff; + } + + .fc .fc-daygrid-day-frame { + border-bottom: 1px solid #e0e0e0; + } `; export default TimelineBox; From 8afe2cf47917ce2bd50582d80f6545084e0ec3e9 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 07:45:36 +0900 Subject: [PATCH 03/23] feat: en dateTimeFormat --- src/components/TimelineBox/TimelineBox.tsx | 34 ++++++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 508e2d34..eccf45a1 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -15,7 +15,18 @@ const TimelineBox = () => { center: 'today,prev,next timeGridDay,timeGridWeek,dayGridMonth', right: 'dayGridMonth', }} - titleFormat={{ year: 'numeric', month: 'short' }} + views={{ + timeGridDay: { + titleFormat: { year: 'numeric', month: 'short' }, + }, + timeGridWeek: { + titleFormat: { year: 'numeric', month: 'short' }, + }, + dayGridMonth: { + titleFormat: { year: 'numeric', month: 'short' }, + }, + }} + // titleFormat={{ year: 'numeric', month: 'short' }} // locale="ko" slotDuration="00:30:00" editable={true} @@ -31,6 +42,23 @@ const TimelineBox = () => { week: '주간', day: '일간', }} + allDayText="종일" + titleFormat={{ year: 'numeric', month: 'long' }} + locale="ko" + slotLabelFormat={{ + hour: 'numeric', + minute: '2-digit', + meridiem: 'short', + hour12: true, + }} + slotLabelContent={(arg) => { + const formattedTime = new Intl.DateTimeFormat('en-US', { + hour: 'numeric', + // minute: '2-digit', + hour12: true, + }).format(arg.date); + return {formattedTime}; + }} /> ); @@ -52,6 +80,7 @@ const FullCalendarLayout = styled.div` /* 타임 그리드 30분당 일정 */ .fc .fc-timegrid-slot-label { + width: 5.7rem; height: 2.4rem; } @@ -94,7 +123,7 @@ const FullCalendarLayout = styled.div` } .fc-direction-ltr .fc-timegrid-slot-label-frame { - text-align: center; + text-align: left; } .fc .fc-timegrid-axis-frame { @@ -108,7 +137,6 @@ const FullCalendarLayout = styled.div` border-right: none; border-left: none; - border-radius: 8px 8px 0 0; } .fc-theme-standard .fc-scrollgrid { From f2798f19a7ba57ff1c8d053a305432f235e2af50 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 15:28:55 +0900 Subject: [PATCH 04/23] =?UTF-8?q?style:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20style=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 78 ++++++++++++++++++++-- src/styles/GlobalStyle.tsx | 5 ++ 2 files changed, 79 insertions(+), 4 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index eccf45a1..da815ae3 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -11,8 +11,8 @@ const TimelineBox = () => { initialView="timeGridWeek" plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin]} headerToolbar={{ - left: 'title', - center: 'today,prev,next timeGridDay,timeGridWeek,dayGridMonth', + left: 'title today prev next', + center: 'timeGridDay timeGridWeek dayGridMonth', right: 'dayGridMonth', }} views={{ @@ -26,14 +26,13 @@ const TimelineBox = () => { titleFormat: { year: 'numeric', month: 'short' }, }, }} - // titleFormat={{ year: 'numeric', month: 'short' }} - // locale="ko" slotDuration="00:30:00" editable={true} selectable={true} events={[ { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, { title: 'Lunch', start: '2024-07-07T12:00:00' }, + { title: 'All Day Event', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00', allDay: true }, ]} eventColor="#DFE9FF" buttonText={{ @@ -59,6 +58,17 @@ const TimelineBox = () => { }).format(arg.date); return {formattedTime}; }} + dayHeaderContent={(arg) => { + const day = new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(arg.date); + const date = arg.date.getDate(); + return ( + + {day} +
+ {date} + + ); + }} /> ); @@ -68,6 +78,10 @@ const FullCalendarLayout = styled.div` width: 89.7rem; height: 93rem; + :root { + --fc-button-active-bg-color: #3876f6; + } + .fc-event-main { color: ${(color) => color.theme.palette.BLACK}; } @@ -159,6 +173,62 @@ const FullCalendarLayout = styled.div` .fc .fc-daygrid-day-frame { border-bottom: 1px solid #e0e0e0; } + + /* Custom button styles */ + .fc-toolbar-chunk .fc-button { + width: 4.5rem; + height: 2.6rem; + padding: 0; + + background-color: #b9d0ff; + border: none; + border-radius: 8px; + } + + .fc-direction-ltr .fc-toolbar > * > :not(:first-child) { + margin-left: 0.4rem; + } + + .fc-button-active:focus { + box-shadow: none; + } + + .fc-toolbar-chunk { + display: flex; + align-items: center; + } + + .fc-toolbar-chunk .fc-prev-button, + .fc-toolbar-chunk .fc-next-button { + width: 2.6rem; + height: 2.6rem; + padding: 0; + + background-color: #121212; + } + + /* + .fc-toolbar-chunk .fc-button:hover { + background-color: #357ab8; + } + + .fc-toolbar-chunk .fc-button:focus { + outline: none; + box-shadow: 0 0 0 2px #357ab8; + } + + .fc-toolbar-chunk .fc-button-active { + background-color: #357ab8; + } */ + + .fc .fc-toolbar-title { + margin-right: 2.6rem; + } + + .fc-toolbar-chunk .fc-today-button { + background-color: #121212; + opacity: 1; + } `; export default TimelineBox; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 00fedbcb..e6d8bbcc 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -147,6 +147,11 @@ const style = css` html { font-size: 62.5%; } + + :root { + --fc-button-active-bg-color: #3876f6; + --fc-button-active-border-color: #3876f6; + } `; function GlobalStyle() { From f491f0213ca9e9af28fb5af8a89ba11f5be20fad Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 15:35:38 +0900 Subject: [PATCH 05/23] =?UTF-8?q?style:=20calendar=20font-size=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 7 ++----- src/styles/GlobalStyle.tsx | 1 - 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index da815ae3..ca746b70 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -78,10 +78,6 @@ const FullCalendarLayout = styled.div` width: 89.7rem; height: 93rem; - :root { - --fc-button-active-bg-color: #3876f6; - } - .fc-event-main { color: ${(color) => color.theme.palette.BLACK}; } @@ -90,6 +86,7 @@ const FullCalendarLayout = styled.div` .fc td, .fc th { vertical-align: middle; + ${({ theme }) => theme.fontTheme.CAPTION_01}; } /* 타임 그리드 30분당 일정 */ @@ -185,7 +182,7 @@ const FullCalendarLayout = styled.div` border-radius: 8px; } - .fc-direction-ltr .fc-toolbar > * > :not(:first-child) { + .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { margin-left: 0.4rem; } diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index e6d8bbcc..8b996c3e 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -150,7 +150,6 @@ const style = css` :root { --fc-button-active-bg-color: #3876f6; - --fc-button-active-border-color: #3876f6; } `; From 2db36456f332fe4fd15884022d2734a834135e60 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sat, 6 Jul 2024 17:56:19 +0900 Subject: [PATCH 06/23] =?UTF-8?q?style:=20button=20=EA=B0=84=EA=B2=A9=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 --- src/components/TimelineBox/TimelineBox.tsx | 67 ++++++++++++++++++---- src/styles/GlobalStyle.tsx | 2 + 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index ca746b70..5786b99f 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -5,15 +5,16 @@ import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; const TimelineBox = () => { + const today = new Date().toDateString(); + return ( { titleFormat: { year: 'numeric', month: 'short' }, }, }} + customButtons={{ + custom: { + text: '동기화', + click: () => alert('오늘 버튼 클릭됨'), + }, + }} slotDuration="00:30:00" editable={true} selectable={true} @@ -53,7 +60,6 @@ const TimelineBox = () => { slotLabelContent={(arg) => { const formattedTime = new Intl.DateTimeFormat('en-US', { hour: 'numeric', - // minute: '2-digit', hour12: true, }).format(arg.date); return {formattedTime}; @@ -61,12 +67,12 @@ const TimelineBox = () => { dayHeaderContent={(arg) => { const day = new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(arg.date); const date = arg.date.getDate(); + const isToday = arg.date.toDateString() === today; return ( - - {day} -
- {date} - + <> + {day} + {date} + ); }} /> @@ -78,8 +84,20 @@ const FullCalendarLayout = styled.div` width: 89.7rem; height: 93rem; + /* 이벤트 박스 */ .fc-event-main { - color: ${(color) => color.theme.palette.BLACK}; + width: 100%; + height: 100%; + padding: 0; + + color: ${(color) => color.theme.palette.GREY_04}; + + box-shadow: 2px 0 0 0 #3876f6 inset; + border-radius: 4px; + } + + .fc-direction-ltr .fc-daygrid-event { + margin: 0; } /* 요일 행 TEXT 중간 정렬 */ @@ -93,6 +111,10 @@ const FullCalendarLayout = styled.div` .fc .fc-timegrid-slot-label { width: 5.7rem; height: 2.4rem; + + color: ${(color) => color.theme.palette.GREY_04}; + + border-bottom: none; } /* 요일 행 첫번째 border 없애기 */ @@ -148,6 +170,7 @@ const FullCalendarLayout = styled.div` border-right: none; border-left: none; + border-radius: 8px 8px 0 0; } .fc-theme-standard .fc-scrollgrid { @@ -220,12 +243,36 @@ const FullCalendarLayout = styled.div` .fc .fc-toolbar-title { margin-right: 2.6rem; + ${({ theme }) => theme.fontTheme.HEADLINE_02}; } .fc-toolbar-chunk .fc-today-button { background-color: #121212; opacity: 1; } + + /* Override the button group border-radius styles */ + .fc-direction-ltr .fc-button-group > .fc-button { + margin-right: 0.4rem; + margin-left: 0; + + border-radius: 8px; + } + + .fc .fc-button-group { + margin-left: 5.4rem; + } +`; + +const WeekyDay = styled.div<{ isToday: boolean }>` + ${({ theme }) => theme.fontTheme.CAPTION_01}; + color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; + text-transform: uppercase; +`; + +const WeekyDate = styled.div<{ isToday: boolean }>` + ${({ theme }) => theme.fontTheme.HEADLINE_01}; + color: ${(props) => (props.isToday ? props.theme.palette.PRIMARY : props.theme.palette.BLACK)}; `; export default TimelineBox; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 8b996c3e..d04108fa 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -150,6 +150,8 @@ const style = css` :root { --fc-button-active-bg-color: #3876f6; + --fc-border-color: #e0e0e0; + --fc-highlight-color: #dfe9ff; } `; From 64785dc3409a41de5371dd8a6fa4ec99d8746840 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sun, 7 Jul 2024 02:40:33 +0900 Subject: [PATCH 07/23] =?UTF-8?q?style:=20day=EC=97=90=EC=84=9C=EB=8A=94?= =?UTF-8?q?=20=EC=A3=BC=EB=A7=90=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=95=88=EB=90=98=EA=B2=8C=20=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/Icon-synchronization.svg | 5 + src/components/TimelineBox/TimelineBox.tsx | 106 ++++++++++++++++----- 2 files changed, 85 insertions(+), 26 deletions(-) create mode 100644 src/assets/svg/Icon-synchronization.svg diff --git a/src/assets/svg/Icon-synchronization.svg b/src/assets/svg/Icon-synchronization.svg new file mode 100644 index 00000000..c0ac8b35 --- /dev/null +++ b/src/assets/svg/Icon-synchronization.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 5786b99f..0aa88c2e 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -4,7 +4,7 @@ import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; -const TimelineBox = () => { +function TimelineBox() { const today = new Date().toDateString(); return ( @@ -30,12 +30,14 @@ const TimelineBox = () => { customButtons={{ custom: { text: '동기화', - click: () => alert('오늘 버튼 클릭됨'), + click: () => {}, }, }} slotDuration="00:30:00" - editable={true} - selectable={true} + editable + selectable + nowIndicator + dayMaxEvents events={[ { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, { title: 'Lunch', start: '2024-07-07T12:00:00' }, @@ -78,7 +80,7 @@ const TimelineBox = () => { /> ); -}; +} const FullCalendarLayout = styled.div` width: 89.7rem; @@ -88,18 +90,37 @@ const FullCalendarLayout = styled.div` .fc-event-main { width: 100%; height: 100%; - padding: 0; + padding: 0.4rem 0.6rem; color: ${(color) => color.theme.palette.GREY_04}; box-shadow: 2px 0 0 0 #3876f6 inset; + border: none; border-radius: 4px; + ${({ theme }) => theme.fontTheme.CAPTION_03}; + } + + .fc-timegrid-event-harness-inset .fc-timegrid-event { + box-shadow: none; + border: none; + } + + .fc-h-event { + border: none; } .fc-direction-ltr .fc-daygrid-event { margin: 0; } + .fc-timegrid-event-harness > .fc-timegrid-event { + inset: 0.1rem; + } + + .fc-direction-ltr .fc-timegrid-col-events { + margin: 0; + } + /* 요일 행 TEXT 중간 정렬 */ .fc td, .fc th { @@ -125,9 +146,7 @@ const FullCalendarLayout = styled.div` /* 타임 그리드 종일 일정 */ .fc-scrollgrid-shrink { - height: 2.4rem; - - border-bottom: 1px solid #000; + max-height: 2.4rem; } /* 타임 그리드 종일 마진 없애기 */ @@ -182,12 +201,14 @@ const FullCalendarLayout = styled.div` background: none; } - .fc .fc-day-sun { + .fc .fc-day-sun, + .fc .fc-day-sat { background: #fafcff; } - .fc .fc-day-sat { - background: #fafcff; + .fc-timeGridDay-view .fc-day-sun, + .fc-timeGridDay-view .fc-day-sat { + background: none; } .fc .fc-daygrid-day-frame { @@ -205,6 +226,14 @@ const FullCalendarLayout = styled.div` border-radius: 8px; } + .fc-toolbar-chunk .fc-button:hover { + background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; + } + + .fc-toolbar-chunk .fc-button:active { + background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + } + .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { margin-left: 0.4rem; } @@ -224,30 +253,31 @@ const FullCalendarLayout = styled.div` height: 2.6rem; padding: 0; - background-color: #121212; - } - - /* - .fc-toolbar-chunk .fc-button:hover { - background-color: #357ab8; + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; } - .fc-toolbar-chunk .fc-button:focus { - outline: none; - box-shadow: 0 0 0 2px #357ab8; + .fc-toolbar-chunk .fc-prev-button:hover, + .fc-toolbar-chunk .fc-next-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; } - .fc-toolbar-chunk .fc-button-active { - background-color: #357ab8; - } */ - .fc .fc-toolbar-title { margin-right: 2.6rem; ${({ theme }) => theme.fontTheme.HEADLINE_02}; } .fc-toolbar-chunk .fc-today-button { - background-color: #121212; + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + opacity: 1; + } + + .fc-toolbar-chunk .fc-today-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + opacity: 1; + } + + .fc-toolbar-chunk .fc-today-button:active { + background-color: ${({ theme }) => theme.palette.BLACK_PASSED}; opacity: 1; } @@ -262,6 +292,30 @@ const FullCalendarLayout = styled.div` .fc .fc-button-group { margin-left: 5.4rem; } + + .fc .fc-custom-button { + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + } + + .fc .fc-custom-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + } + + /* 스타일링 현재 시간 표시 */ + .fc .fc-timegrid-now-indicator-line { + height: 0.2rem; + + background-color: ${({ theme }) => theme.palette.PRIMARY}; + border: none; + } + + .fc .fc-timegrid-now-indicator-arrow { + display: none; + } + + .fc-v-event .fc-event-main-frame { + padding: 1px; + } `; const WeekyDay = styled.div<{ isToday: boolean }>` From c386be5e3602351c138332ac17ecf973ac9a2aaa Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Sun, 7 Jul 2024 17:41:04 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20=EC=A3=BC=EA=B0=84,=20=EC=9B=94?= =?UTF-8?q?=EA=B0=84=EC=97=90=20=EB=94=B0=EB=9D=BC=20dayHeaderContent=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/components/TimelineBox/TimelineBox.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 0aa88c2e..27b4c520 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -3,9 +3,15 @@ import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; +import { useState } from 'react'; function TimelineBox() { const today = new Date().toDateString(); + const [currentView, setCurrentView] = useState('timeGridWeek'); + + const handleViewChange = (view: any) => { + setCurrentView(view.type); + }; return ( @@ -73,10 +79,12 @@ function TimelineBox() { return ( <> {day} - {date} + {currentView !== 'dayGridMonth' && {date}} ); }} + viewDidMount={handleViewChange} + datesSet={(dateInfo) => handleViewChange(dateInfo.view)} /> ); From 108c30241f7c78a122bb63db91ee5600d3480856 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 02:26:54 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EC=9D=BC=EA=B0=84,=20=EC=A3=BC?= =?UTF-8?q?=EA=B0=84,=20=EC=9B=94=EA=B0=84,=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 243 +++++++++++++-------- 1 file changed, 153 insertions(+), 90 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 27b4c520..075cc82d 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -46,8 +46,8 @@ function TimelineBox() { dayMaxEvents events={[ { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, - { title: 'Lunch', start: '2024-07-07T12:00:00' }, - { title: 'All Day Event', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00', allDay: true }, + { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, + { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-10T12:00:00', allDay: true }, ]} eventColor="#DFE9FF" buttonText={{ @@ -108,27 +108,6 @@ const FullCalendarLayout = styled.div` ${({ theme }) => theme.fontTheme.CAPTION_03}; } - .fc-timegrid-event-harness-inset .fc-timegrid-event { - box-shadow: none; - border: none; - } - - .fc-h-event { - border: none; - } - - .fc-direction-ltr .fc-daygrid-event { - margin: 0; - } - - .fc-timegrid-event-harness > .fc-timegrid-event { - inset: 0.1rem; - } - - .fc-direction-ltr .fc-timegrid-col-events { - margin: 0; - } - /* 요일 행 TEXT 중간 정렬 */ .fc td, .fc th { @@ -162,37 +141,15 @@ const FullCalendarLayout = styled.div` margin: 0; } - .fc .fc-timegrid-divider { - padding: 0; - - border: none; - } - - .fc .fc-cell-shaded { - background: none; - } - - .fc .fc-timegrid-col, - .fc .fc-daygrid-day { - width: 12rem; - } - /* 30분 줄선 지우기 */ .fc .fc-timegrid-slot-minor { border-top-style: none; } - .fc-direction-ltr .fc-timegrid-slot-label-frame { - text-align: left; - } - - .fc .fc-timegrid-axis-frame { - justify-content: center; - } - /* 요일 헤더 높이 조정 */ + .fc .fc-col-header-cell { - width: 12rem; + /* width: 12rem; */ height: 5.5rem; border-right: none; @@ -200,27 +157,18 @@ const FullCalendarLayout = styled.div` border-radius: 8px 8px 0 0; } - .fc-theme-standard .fc-scrollgrid { - border-top: none; - border-left: none; - } - - .fc .fc-day-today { + /* 일간에는 주말표시 안하기 */ + .fc .fc-timeGridDay-view .fc-day-sun, + .fc .fc-timeGridDay-view .fc-day-sat { background: none; } - .fc .fc-day-sun, - .fc .fc-day-sat { - background: #fafcff; - } - - .fc-timeGridDay-view .fc-day-sun, - .fc-timeGridDay-view .fc-day-sat { - background: none; + .fc .fc-button-primary:focus { + box-shadow: none; } - .fc .fc-daygrid-day-frame { - border-bottom: 1px solid #e0e0e0; + .fc .fc-button-active:focus { + box-shadow: none; } /* Custom button styles */ @@ -234,27 +182,57 @@ const FullCalendarLayout = styled.div` border-radius: 8px; } - .fc-toolbar-chunk .fc-button:hover { - background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; + /* Override the button group border-radius styles */ + .fc-direction-ltr .fc-button-group > .fc-button { + margin-right: 0.4rem; + margin-left: 0; + + border-radius: 8px; } - .fc-toolbar-chunk .fc-button:active { - background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + /* 스타일링 현재 시간 표시 */ + .fc .fc-timegrid-now-indicator-line { + height: 0.2rem; + + background-color: ${({ theme }) => theme.palette.PRIMARY}; + border: none; } - .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { - margin-left: 0.4rem; + /* 주말 색 다르게 */ + .fc .fc-day-sun, + .fc .fc-day-sat { + background: #fafcff; } - .fc-button-active:focus { + /* 시간 세로줄 테두리 없애기 */ + .fc-timegrid-axis { + color: ${({ theme }) => theme.palette.GREY_06}; + + border: none; + } + + /* 오늘 배경색 없애기 */ + .fc .fc-day-today { + background: none; + } + + /* 바깥 테두리 없애기 */ + .fc-scrollgrid-liquid { + border: none; + } + + /* event에 있는 기본 스타일 지우기 */ + .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: none; + border: none; } - .fc-toolbar-chunk { - display: flex; - align-items: center; + /* event inset 적용 */ + .fc-timegrid-event-harness > .fc-timegrid-event { + inset: 0.1rem; } + /* 좌우 버튼 스타일 */ .fc-toolbar-chunk .fc-prev-button, .fc-toolbar-chunk .fc-next-button { width: 2.6rem; @@ -264,16 +242,33 @@ const FullCalendarLayout = styled.div` background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; } + .fc-toolbar-chunk .fc-button:hover { + background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; + } + + .fc-toolbar-chunk .fc-button:active { + background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + } + .fc-toolbar-chunk .fc-prev-button:hover, .fc-toolbar-chunk .fc-next-button:hover { background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; } - .fc .fc-toolbar-title { - margin-right: 2.6rem; - ${({ theme }) => theme.fontTheme.HEADLINE_02}; + .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { + margin-left: 0.4rem; + } + + .fc-button-active:focus { + box-shadow: none; } + .fc-toolbar-chunk { + display: flex; + align-items: center; + } + + /* 오늘 버튼 */ .fc-toolbar-chunk .fc-today-button { background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; opacity: 1; @@ -281,20 +276,10 @@ const FullCalendarLayout = styled.div` .fc-toolbar-chunk .fc-today-button:hover { background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; - opacity: 1; } .fc-toolbar-chunk .fc-today-button:active { background-color: ${({ theme }) => theme.palette.BLACK_PASSED}; - opacity: 1; - } - - /* Override the button group border-radius styles */ - .fc-direction-ltr .fc-button-group > .fc-button { - margin-right: 0.4rem; - margin-left: 0; - - border-radius: 8px; } .fc .fc-button-group { @@ -309,14 +294,86 @@ const FullCalendarLayout = styled.div` background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; } - /* 스타일링 현재 시간 표시 */ - .fc .fc-timegrid-now-indicator-line { - height: 0.2rem; + /* 오늘 버튼 마진 */ + .fc .fc-toolbar-title { + margin-right: 2.6rem; + ${({ theme }) => theme.fontTheme.HEADLINE_02}; + } - background-color: ${({ theme }) => theme.palette.PRIMARY}; + /* 종일 아래 테두리 */ + .fc .fc-daygrid-day-frame { + /* border: 1px solid ${({ theme }) => theme.palette.GREY}; */ + + /* box-shadow: 1px 0 0 0 #e0e0e0 inset; */ + } + + .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { + box-shadow: 0 1px 0 0 #e0e0e0 inset; + } + + .fc .fc-daygrid-body-natural .fc-daygrid-day-events { + border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; + } + + .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { + border: 1px solid ${({ theme }) => theme.palette.GREY}; + } + + .fc .fc-cell-shaded { + display: none; + } + + /* 현재시간 화살표 지우기 */ + .fc-timegrid-now-indicator-arrow { + display: none; + } + + .fc-daygrid-event-harness { + margin: 0.2rem 0.1rem; + + /* background-color: #dfe9ff; + border-left: 2px solid var(--primary, #3876f6); + border-radius: 4px; */ + } + + .fc .fc-timegrid-axis-frame { + justify-content: flex-start; + } + + /* 시간 왼쪽에 붙이기 */ + .fc-direction-ltr .fc-timegrid-slot-label-frame { + text-align: left; + } + + /* .fc .fc-daygrid-day-frame { + } */ + + /* + + .fc-h-event { border: none; } + .fc-direction-ltr .fc-daygrid-event { + margin: 0; + } + + + .fc-direction-ltr .fc-timegrid-col-events { + margin: 0; + } + + + .fc .fc-timegrid-axis-frame { + justify-content: center; + } + + .fc-theme-standard .fc-scrollgrid { + border: none; + border-top: none; + border-left: none; + } + .fc .fc-timegrid-now-indicator-arrow { display: none; } @@ -324,6 +381,12 @@ const FullCalendarLayout = styled.div` .fc-v-event .fc-event-main-frame { padding: 1px; } + + .fc .fc-scrollgrid-section-body table { + border: 1px solid #e0e0e0; + } + + */ `; const WeekyDay = styled.div<{ isToday: boolean }>` From bd472f9b3cf7340132b86bba1a8bd92b769b34d8 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 03:11:40 +0900 Subject: [PATCH 10/23] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=85=EB=B3=84=20?= =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 69 +++++++++++++++++----- 1 file changed, 54 insertions(+), 15 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 075cc82d..e029ac61 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -47,7 +47,7 @@ function TimelineBox() { events={[ { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, - { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-10T12:00:00', allDay: true }, + { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, ]} eventColor="#DFE9FF" buttonText={{ @@ -73,13 +73,22 @@ function TimelineBox() { return {formattedTime}; }} dayHeaderContent={(arg) => { - const day = new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(arg.date); + const isTimeGridDay = currentView === 'timeGridDay'; + const day = new Intl.DateTimeFormat('en-US', { weekday: isTimeGridDay ? 'long' : 'short' }).format(arg.date); const date = arg.date.getDate(); const isToday = arg.date.toDateString() === today; return ( <> - {day} - {currentView !== 'dayGridMonth' && {date}} + {!isTimeGridDay ? ( + <> + {day} + {currentView !== 'dayGridMonth' && {date}} + + ) : ( + + {date}일 {day} + + )} ); }} @@ -300,11 +309,30 @@ const FullCalendarLayout = styled.div` ${({ theme }) => theme.fontTheme.HEADLINE_02}; } - /* 종일 아래 테두리 */ - .fc .fc-daygrid-day-frame { - /* border: 1px solid ${({ theme }) => theme.palette.GREY}; */ + /* 종일 이벤트 테두리 */ + .fc .fc-daygrid-day-frame .fc-event-main { + display: flex; + align-items: center; + box-sizing: border-box; + height: 2.1rem; + padding: 0.3rem 1.2rem; + + color: ${({ theme }) => theme.palette.WITHE}; + + background-color: ${({ theme }) => theme.palette.PRIMARY}; + border: none; + } + + .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { + background-color: ${({ theme }) => theme.palette.WITHE}; + } + + .fc .fc-daygrid-event-harness { + margin: 0; + } - /* box-shadow: 1px 0 0 0 #e0e0e0 inset; */ + .fc .fc-daygrid-event { + margin: 0; } .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { @@ -328,13 +356,13 @@ const FullCalendarLayout = styled.div` display: none; } - .fc-daygrid-event-harness { + /* .fc-daygrid-event-harness { margin: 0.2rem 0.1rem; - /* background-color: #dfe9ff; + background-color: #dfe9ff; border-left: 2px solid var(--primary, #3876f6); - border-radius: 4px; */ - } + border-radius: 4px; + } */ .fc .fc-timegrid-axis-frame { justify-content: flex-start; @@ -345,6 +373,10 @@ const FullCalendarLayout = styled.div` text-align: left; } + .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { + float: left; + } + /* .fc .fc-daygrid-day-frame { } */ @@ -389,13 +421,20 @@ const FullCalendarLayout = styled.div` */ `; -const WeekyDay = styled.div<{ isToday: boolean }>` - ${({ theme }) => theme.fontTheme.CAPTION_01}; +const DayLayout = styled.div` + display: flex; + gap: 1.2rem; + align-items: flex-end; + margin-left: 0.8rem; +`; + +const WeekDay = styled.div<{ isToday: boolean }>` + ${({ theme }) => theme.fontTheme.CAPTION_02}; color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; text-transform: uppercase; `; -const WeekyDate = styled.div<{ isToday: boolean }>` +const WeekDate = styled.div<{ isToday: boolean }>` ${({ theme }) => theme.fontTheme.HEADLINE_01}; color: ${(props) => (props.isToday ? props.theme.palette.PRIMARY : props.theme.palette.BLACK)}; `; From 3a2af89a16021547f8a4977b2b5128c0e8c3e98d Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 04:02:33 +0900 Subject: [PATCH 11/23] =?UTF-8?q?feat:=20=EC=A2=85=EC=9D=BC=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8,=20=EC=8B=9C=EA=B0=84=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=83=89=20=EA=B5=AC=EB=B3=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 56 ++++++---------------- 1 file changed, 14 insertions(+), 42 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index e029ac61..9305806b 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -49,7 +49,7 @@ function TimelineBox() { { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, ]} - eventColor="#DFE9FF" + eventColor="#3876f6" buttonText={{ today: '오늘', month: '월간', @@ -111,6 +111,7 @@ const FullCalendarLayout = styled.div` color: ${(color) => color.theme.palette.GREY_04}; + background-color: #dfe9ff; box-shadow: 2px 0 0 0 #3876f6 inset; border: none; border-radius: 4px; @@ -356,13 +357,22 @@ const FullCalendarLayout = styled.div` display: none; } - /* .fc-daygrid-event-harness { + .fc-direction-ltr .fc-daygrid-event.fc-event-end { + display: flex; + align-items: center; + box-sizing: border-box; + height: 2.1rem; margin: 0.2rem 0.1rem; + padding: 0.3rem 1.2rem; background-color: #dfe9ff; border-left: 2px solid var(--primary, #3876f6); border-radius: 4px; - } */ + } + + .fc-daygrid-event-dot { + display: none; + } .fc .fc-timegrid-axis-frame { justify-content: flex-start; @@ -377,48 +387,10 @@ const FullCalendarLayout = styled.div` float: left; } - /* .fc .fc-daygrid-day-frame { - } */ - - /* - - .fc-h-event { - border: none; - } - - .fc-direction-ltr .fc-daygrid-event { - margin: 0; - } - - + /* 이벤트 꽉차게 */ .fc-direction-ltr .fc-timegrid-col-events { margin: 0; } - - - .fc .fc-timegrid-axis-frame { - justify-content: center; - } - - .fc-theme-standard .fc-scrollgrid { - border: none; - border-top: none; - border-left: none; - } - - .fc .fc-timegrid-now-indicator-arrow { - display: none; - } - - .fc-v-event .fc-event-main-frame { - padding: 1px; - } - - .fc .fc-scrollgrid-section-body table { - border: 1px solid #e0e0e0; - } - - */ `; const DayLayout = styled.div` From 34fc29c7fd23d1d8a7ae9f21bdce6a28ceeebf2a Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 05:13:30 +0900 Subject: [PATCH 12/23] =?UTF-8?q?fix:=20=EC=A2=85=EC=9D=BC,=20=EA=B7=B8?= =?UTF-8?q?=EC=99=B8=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=EB=B3=84?= =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 9305806b..62570a9c 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -49,7 +49,7 @@ function TimelineBox() { { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, ]} - eventColor="#3876f6" + eventColor="#dfe9ff" buttonText={{ today: '오늘', month: '월간', @@ -104,7 +104,10 @@ const FullCalendarLayout = styled.div` height: 93rem; /* 이벤트 박스 */ + .fc-event-main { + display: flex; + align-items: center; width: 100%; height: 100%; padding: 0.4rem 0.6rem; @@ -314,6 +317,7 @@ const FullCalendarLayout = styled.div` .fc .fc-daygrid-day-frame .fc-event-main { display: flex; align-items: center; + justify-content: center; box-sizing: border-box; height: 2.1rem; padding: 0.3rem 1.2rem; @@ -357,13 +361,18 @@ const FullCalendarLayout = styled.div` display: none; } - .fc-direction-ltr .fc-daygrid-event.fc-event-end { + .fc-direction-ltr .fc-daygrid-event { display: flex; - align-items: center; + justify-content: center; box-sizing: border-box; height: 2.1rem; - margin: 0.2rem 0.1rem; - padding: 0.3rem 1.2rem; + margin: 0.1rem; + + background-color: #3876f6; + } + + .fc .fc-daygrid-dot-event { + padding: 0.4rem 0.6rem; background-color: #dfe9ff; border-left: 2px solid var(--primary, #3876f6); From baa1b12528c29aa70f6f8012f22100b4be6f5622 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 05:55:16 +0900 Subject: [PATCH 13/23] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=ED=91=9C=EC=8B=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimelineBox/DayHeaderContent.tsx | 50 +++++++ .../TimelineBox/SlotLabelContent.tsx | 15 +++ src/components/TimelineBox/TimelineBox.tsx | 127 +++++++----------- 3 files changed, 113 insertions(+), 79 deletions(-) create mode 100644 src/components/TimelineBox/DayHeaderContent.tsx create mode 100644 src/components/TimelineBox/SlotLabelContent.tsx diff --git a/src/components/TimelineBox/DayHeaderContent.tsx b/src/components/TimelineBox/DayHeaderContent.tsx new file mode 100644 index 00000000..6df2dd4c --- /dev/null +++ b/src/components/TimelineBox/DayHeaderContent.tsx @@ -0,0 +1,50 @@ +import styled from '@emotion/styled'; +import { DayHeaderContentArg } from '@fullcalendar/core'; + +interface DayHeaderContentProps { + arg: DayHeaderContentArg; + currentView: string; + today: string; +} + +function DayHeaderContent({ arg, currentView, today }: DayHeaderContentProps) { + const isTimeGridDay = currentView === 'timeGridDay'; + const day = new Intl.DateTimeFormat('en-US', { weekday: isTimeGridDay ? 'long' : 'short' }).format(arg.date); + const date = arg.date.getDate(); + const isToday = arg.date.toDateString() === today; + + return ( +
+ {!isTimeGridDay ? ( + <> + {day} + {currentView !== 'dayGridMonth' && {date}} + + ) : ( + + {date}일 {day} + + )} +
+ ); +} + +const DayLayout = styled.div` + display: flex; + gap: 1.2rem; + align-items: flex-end; + margin-left: 0.8rem; +`; + +const WeekDay = styled.div<{ isToday: boolean }>` + ${({ theme }) => theme.fontTheme.CAPTION_02}; + color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; + text-transform: uppercase; +`; + +const WeekDate = styled.div<{ isToday: boolean }>` + ${({ theme }) => theme.fontTheme.HEADLINE_01}; + color: ${(props) => (props.isToday ? props.theme.palette.PRIMARY : props.theme.palette.BLACK)}; +`; + +export default DayHeaderContent; diff --git a/src/components/TimelineBox/SlotLabelContent.tsx b/src/components/TimelineBox/SlotLabelContent.tsx new file mode 100644 index 00000000..d5de90e1 --- /dev/null +++ b/src/components/TimelineBox/SlotLabelContent.tsx @@ -0,0 +1,15 @@ +import { SlotLabelContentArg } from '@fullcalendar/core'; + +interface SlotLabelContentProps { + arg: SlotLabelContentArg; +} + +function SlotLabelContent({ arg }: SlotLabelContentProps) { + const formattedTime = new Intl.DateTimeFormat('en-US', { + hour: 'numeric', + hour12: true, + }).format(arg.date); + return {formattedTime}; +} + +export default SlotLabelContent; diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 62570a9c..0dd41f8e 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -1,16 +1,24 @@ import styled from '@emotion/styled'; +import { ViewMountArg, DatesSetArg } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; import { useState } from 'react'; +import DayHeaderContent from '@/components/TimelineBox/DayHeaderContent'; +import SlotLabelContent from '@/components/TimelineBox/SlotLabelContent'; + function TimelineBox() { const today = new Date().toDateString(); const [currentView, setCurrentView] = useState('timeGridWeek'); - const handleViewChange = (view: any) => { - setCurrentView(view.type); + const handleViewChange = (view: ViewMountArg) => { + setCurrentView(view.view.type); + }; + + const handleDatesSet = (dateInfo: DatesSetArg) => { + setCurrentView(dateInfo.view.type); }; return ( @@ -65,35 +73,10 @@ function TimelineBox() { meridiem: 'short', hour12: true, }} - slotLabelContent={(arg) => { - const formattedTime = new Intl.DateTimeFormat('en-US', { - hour: 'numeric', - hour12: true, - }).format(arg.date); - return {formattedTime}; - }} - dayHeaderContent={(arg) => { - const isTimeGridDay = currentView === 'timeGridDay'; - const day = new Intl.DateTimeFormat('en-US', { weekday: isTimeGridDay ? 'long' : 'short' }).format(arg.date); - const date = arg.date.getDate(); - const isToday = arg.date.toDateString() === today; - return ( - <> - {!isTimeGridDay ? ( - <> - {day} - {currentView !== 'dayGridMonth' && {date}} - - ) : ( - - {date}일 {day} - - )} - - ); - }} + slotLabelContent={(arg) => } + dayHeaderContent={(arg) => } viewDidMount={handleViewChange} - datesSet={(dateInfo) => handleViewChange(dateInfo.view)} + datesSet={handleDatesSet} /> ); @@ -152,6 +135,8 @@ const FullCalendarLayout = styled.div` /* 타임 그리드 종일 마진 없애기 */ .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin: 0; + + border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; } /* 30분 줄선 지우기 */ @@ -170,20 +155,16 @@ const FullCalendarLayout = styled.div` border-radius: 8px 8px 0 0; } - /* 일간에는 주말표시 안하기 */ - .fc .fc-timeGridDay-view .fc-day-sun, - .fc .fc-timeGridDay-view .fc-day-sat { - background: none; + /* 주말 색 다르게 */ + .fc .fc-day-sun, + .fc .fc-day-sat { + background: #fafcff; } .fc .fc-button-primary:focus { box-shadow: none; } - .fc .fc-button-active:focus { - box-shadow: none; - } - /* Custom button styles */ .fc-toolbar-chunk .fc-button { width: 4.5rem; @@ -211,12 +192,6 @@ const FullCalendarLayout = styled.div` border: none; } - /* 주말 색 다르게 */ - .fc .fc-day-sun, - .fc .fc-day-sat { - background: #fafcff; - } - /* 시간 세로줄 테두리 없애기 */ .fc-timegrid-axis { color: ${({ theme }) => theme.palette.GREY_06}; @@ -328,28 +303,16 @@ const FullCalendarLayout = styled.div` border: none; } - .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { - background-color: ${({ theme }) => theme.palette.WITHE}; - } - .fc .fc-daygrid-event-harness { margin: 0; } - .fc .fc-daygrid-event { - margin: 0; - } - - .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { - box-shadow: 0 1px 0 0 #e0e0e0 inset; - } - - .fc .fc-daygrid-body-natural .fc-daygrid-day-events { - border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; + .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { + background-color: ${({ theme }) => theme.palette.WITHE}; } - .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { - border: 1px solid ${({ theme }) => theme.palette.GREY}; + .fc .fc-daygrid-event { + margin: 0; } .fc .fc-cell-shaded { @@ -392,32 +355,38 @@ const FullCalendarLayout = styled.div` text-align: left; } - .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { - float: left; - } - /* 이벤트 꽉차게 */ .fc-direction-ltr .fc-timegrid-col-events { margin: 0; } -`; -const DayLayout = styled.div` - display: flex; - gap: 1.2rem; - align-items: flex-end; - margin-left: 0.8rem; -`; + /* 버튼 focus 그림자 없애기 */ + .fc .fc-button-primary:not(:disabled).fc-button-active:focus, + .fc .fc-button-primary:not(:disabled):active:focus { + box-shadow: none; + } -const WeekDay = styled.div<{ isToday: boolean }>` - ${({ theme }) => theme.fontTheme.CAPTION_02}; - color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; - text-transform: uppercase; -`; + /* stylelint-disable selector-class-pattern */ + + /* 일간에는 주말표시 안하기 */ + .fc .fc-timeGridDay-view .fc-day-sun, + .fc .fc-timeGridDay-view .fc-day-sat { + background: none; + } + + .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { + box-shadow: 0 1px 0 0 #e0e0e0 inset; + } + + .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { + border: 1px solid ${({ theme }) => theme.palette.GREY}; + } + + .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { + float: left; + } -const WeekDate = styled.div<{ isToday: boolean }>` - ${({ theme }) => theme.fontTheme.HEADLINE_01}; - color: ${(props) => (props.isToday ? props.theme.palette.PRIMARY : props.theme.palette.BLACK)}; + /* stylelint-enable selector-class-pattern */ `; export default TimelineBox; From f7b9b518f483733d0ddcc6e0d6456ef5bc037aed Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 07:01:42 +0900 Subject: [PATCH 14/23] =?UTF-8?q?feat:=20=EB=8F=99=EA=B8=B0=ED=99=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 26 +++++++++++++++------ src/components/common/button/RefreshBtn.tsx | 2 ++ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 0dd41f8e..d6210751 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -6,6 +6,7 @@ import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; import { useState } from 'react'; +import RefreshBtn from '@/components/common/button/RefreshBtn'; import DayHeaderContent from '@/components/TimelineBox/DayHeaderContent'; import SlotLabelContent from '@/components/TimelineBox/SlotLabelContent'; @@ -23,12 +24,15 @@ function TimelineBox() { return ( + + + {}, - }, - }} + // customButtons={{ + // custom: { + // text: '동기화', + // click: () => {}, + // }, + // }} slotDuration="00:30:00" editable selectable @@ -82,6 +86,14 @@ function TimelineBox() { ); } +const CustomButtonContainer = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; + width: 100%; + margin-bottom: -2.6rem; +`; + const FullCalendarLayout = styled.div` width: 89.7rem; height: 93rem; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index 592bf12d..09435823 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -30,6 +30,8 @@ const RefreshBtnCss = css` `; const RefreshBtnLayout = styled.button<{ isDisabled: boolean }>` + z-index: 2; + ${RefreshBtnCss} color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Grey.Grey5 : theme.palette.Grey.White)}; From 5453d250fe42e51783e1ffc1a83bf612e01421c4 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 07:25:02 +0900 Subject: [PATCH 15/23] =?UTF-8?q?feat:=20=EB=8B=AC=EB=A0=A5=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=EC=97=90=EC=84=9C=20=EC=9D=BC=EB=B9=BC=EA=B3=A0=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=EB=A7=8C=20=EB=84=A3=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 26 +++++++++++++++------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index d6210751..4d78e10a 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { ViewMountArg, DatesSetArg } from '@fullcalendar/core'; +import { ViewMountArg, DatesSetArg, DayCellContentArg } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; @@ -22,6 +22,22 @@ function TimelineBox() { setCurrentView(dateInfo.view.type); }; + const customDayCellContent = (info: DayCellContentArg) => { + const number = document.createElement('a'); + number.classList.add('fc-daygrid-day-number'); + number.innerHTML = info.dayNumberText.replace('일', ''); + + if (info.view.type === 'dayGridMonth') { + return { + html: number.outerHTML, + }; + } + + return { + domNodes: [], + }; + }; + return ( @@ -45,12 +61,6 @@ function TimelineBox() { titleFormat: { year: 'numeric', month: 'short' }, }, }} - // customButtons={{ - // custom: { - // text: '동기화', - // click: () => {}, - // }, - // }} slotDuration="00:30:00" editable selectable @@ -81,6 +91,7 @@ function TimelineBox() { dayHeaderContent={(arg) => } viewDidMount={handleViewChange} datesSet={handleDatesSet} + dayCellContent={customDayCellContent} /> ); @@ -99,7 +110,6 @@ const FullCalendarLayout = styled.div` height: 93rem; /* 이벤트 박스 */ - .fc-event-main { display: flex; align-items: center; From c169e36c23c87b636ee1f6143ac622434542879a Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 14:46:55 +0900 Subject: [PATCH 16/23] =?UTF-8?q?feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimelineBox/TimelineBox.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index 4d78e10a..ce32961c 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -69,6 +69,7 @@ function TimelineBox() { events={[ { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, + { title: 'Lunch', start: '2024-07-08T12:00:00', end: '2024-07-08T12:30:00' }, { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, ]} eventColor="#dfe9ff" @@ -92,6 +93,11 @@ function TimelineBox() { viewDidMount={handleViewChange} datesSet={handleDatesSet} dayCellContent={customDayCellContent} + eventTimeFormat={{ + hour: 'numeric', + minute: '2-digit', + hour12: false, + }} /> ); @@ -126,6 +132,10 @@ const FullCalendarLayout = styled.div` ${({ theme }) => theme.fontTheme.CAPTION_03}; } + .fc-v-event .fc-event-main-frame { + height: auto; + } + /* 요일 행 TEXT 중간 정렬 */ .fc td, .fc th { From e25177ebb5a92c88816c0191d9d619a9b445214b Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 16:31:46 +0900 Subject: [PATCH 17/23] =?UTF-8?q?style:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20theme=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimelineBox/FullCalendarStyle.ts | 344 ++++++++++++++++++ src/components/TimelineBox/TimelineBox.tsx | 325 +---------------- src/pages/Calendar.tsx | 1 - 3 files changed, 355 insertions(+), 315 deletions(-) create mode 100644 src/components/TimelineBox/FullCalendarStyle.ts diff --git a/src/components/TimelineBox/FullCalendarStyle.ts b/src/components/TimelineBox/FullCalendarStyle.ts new file mode 100644 index 00000000..55c6b2fe --- /dev/null +++ b/src/components/TimelineBox/FullCalendarStyle.ts @@ -0,0 +1,344 @@ +import styled from '@emotion/styled'; + +const FullCalendarLayout = styled.div<{ size: string }>` + width: ${({ size }) => (size === 'big' ? '89.7rem' : '58rem')}; + height: 93rem; + + .fc .fc-toolbar.fc-header-toolbar { + margin-bottom: 1.8rem; + } + + /* 이벤트 박스 */ + .fc-event-main { + display: flex; + align-items: center; + width: 100%; + height: 100%; + padding: 0.4rem 0.6rem; + + color: ${(color) => color.theme.palette.GREY_08}; + + background-color: ${({ theme }) => theme.palette.Blue2}; + box-shadow: 2px 0 0 0 ${({ theme }) => theme.palette.primary} inset; + border: none; + border-radius: 4px; + ${({ theme }) => theme.fontTheme.CAPTION_03}; + } + + .fc-v-event .fc-event-main-frame { + height: auto; + } + + .fc-daygrid-day-top { + height: 0; + } + + /* 요일 행 TEXT 중간 정렬 */ + .fc td, + .fc th { + vertical-align: middle; + ${({ theme }) => theme.fontTheme.CAPTION_01}; + } + + /* 타임 그리드 30분당 일정 */ + .fc .fc-timegrid-slot-label { + width: 5.7rem; + height: 2.4rem; + + color: ${(color) => color.theme.palette.GREY_04}; + + border-bottom: none; + } + + /* 요일 행 첫번째 border 없애기 */ + .fc-theme-standard td:first-of-type, + .fc-theme-standard th:first-of-type { + border: none; + } + + /* 타임 그리드 종일 일정 */ + .fc-scrollgrid-shrink { + max-height: 2.4rem; + } + + /* 타임 그리드 종일 마진 없애기 */ + .fc .fc-daygrid-body-natural .fc-daygrid-day-events { + margin: 0; + + border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; + } + + /* 30분 줄선 지우기 */ + .fc .fc-timegrid-slot-minor { + border-top-style: none; + } + + /* 요일 헤더 높이 조정 */ + + .fc .fc-col-header-cell { + /* width: 12rem; */ + height: 5.5rem; + + border-right: none; + border-left: none; + border-radius: 8px 8px 0 0; + } + + /* 주말 색 다르게 */ + .fc .fc-day-sun, + .fc .fc-day-sat { + background: ${({ theme }) => theme.palette.Blue1}; + } + + .fc .fc-button-primary:focus { + box-shadow: none; + } + + /* Custom button styles */ + .fc-toolbar-chunk .fc-button { + width: 4.5rem; + height: 2.6rem; + padding: 0; + + background-color: ${({ theme }) => theme.palette.Blue3}; + border: none; + border-radius: 8px; + } + + /* Override the button group border-radius styles */ + .fc-direction-ltr .fc-button-group > .fc-button { + margin-right: 0.4rem; + margin-left: 0; + + border-radius: 8px; + } + + /* 스타일링 현재 시간 표시 */ + .fc .fc-timegrid-now-indicator-line { + height: 0.2rem; + + background-color: ${({ theme }) => theme.palette.PRIMARY}; + border: none; + } + + /* 시간 세로줄 테두리 없애기 */ + .fc-timegrid-axis { + color: ${({ theme }) => theme.palette.GREY_06}; + + border: none; + } + + /* 오늘 배경색 없애기 */ + .fc .fc-day-today { + background: none; + } + + /* event에 있는 기본 스타일 지우기 */ + .fc-timegrid-event-harness-inset .fc-timegrid-event { + box-shadow: none; + border: none; + } + + /* event inset 적용 */ + .fc-timegrid-event-harness > .fc-timegrid-event { + inset: 0.1rem; + } + + /* 좌우 버튼 스타일 */ + .fc-toolbar-chunk .fc-prev-button, + .fc-toolbar-chunk .fc-next-button { + width: 2.6rem; + height: 2.6rem; + padding: 0; + + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + } + + .fc-toolbar-chunk .fc-button:hover { + background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; + } + + .fc-toolbar-chunk .fc-button:active { + background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + } + + .fc-toolbar-chunk .fc-prev-button:hover, + .fc-toolbar-chunk .fc-next-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + } + + .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { + margin-left: 0.4rem; + } + + .fc-button-active:focus { + box-shadow: none; + } + + .fc-toolbar-chunk { + display: flex; + align-items: center; + } + + /* 오늘 버튼 */ + .fc-toolbar-chunk .fc-today-button { + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + opacity: 1; + } + + .fc-toolbar-chunk .fc-today-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + } + + .fc-toolbar-chunk .fc-today-button:active { + background-color: ${({ theme }) => theme.palette.BLACK_PASSED}; + } + + .fc .fc-button-group { + margin-left: 5.4rem; + } + + .fc .fc-custom-button { + background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + } + + .fc .fc-custom-button:hover { + background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + } + + /* 오늘 버튼 마진 */ + .fc .fc-toolbar-title { + margin-right: 0.75rem; + padding: 0 1rem; + ${({ theme }) => theme.fontTheme.HEADLINE_02}; + } + + /* 종일 이벤트 테두리 */ + .fc .fc-daygrid-day-frame .fc-event-main { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 2.1rem; + padding: 0.3rem 1.2rem; + + color: ${({ theme }) => theme.palette.WITHE}; + + background-color: ${({ theme }) => theme.palette.PRIMARY}; + border: none; + } + + .fc .fc-daygrid-event-harness { + margin: 0; + } + + .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { + background-color: ${({ theme }) => theme.palette.WITHE}; + } + + .fc .fc-daygrid-event { + margin: 0; + } + + .fc .fc-cell-shaded { + display: none; + } + + /* 현재시간 화살표 지우기 */ + .fc-timegrid-now-indicator-arrow { + display: none; + } + + .fc-direction-ltr .fc-daygrid-event { + display: flex; + justify-content: center; + box-sizing: border-box; + height: 2.1rem; + margin: 0.1rem; + + background-color: ${({ theme }) => theme.palette.primary}; + } + + .fc .fc-daygrid-dot-event { + padding: 0.4rem 0.6rem; + + background-color: ${({ theme }) => theme.palette.Blue2}; + border-left: 2px solid ${({ theme }) => theme.palette.primary}; + border-radius: 4px; + } + + .fc .fc-h-event { + border: none; + } + + .fc-daygrid-event-dot { + display: none; + } + + .fc .fc-timegrid-axis-frame { + justify-content: flex-start; + } + + /* 시간 왼쪽에 붙이기 */ + .fc-direction-ltr .fc-timegrid-slot-label-frame { + text-align: left; + } + + /* 이벤트 꽉차게 */ + .fc-direction-ltr .fc-timegrid-col-events { + margin: 0; + } + + /* 버튼 focus 그림자 없애기 */ + .fc .fc-button-primary:not(:disabled).fc-button-active:focus, + .fc .fc-button-primary:not(:disabled):active:focus { + box-shadow: none; + } + + /* 바깥 테두리 없애기 */ + .fc .fc-scrollgrid-liquid { + height: 65.5rem; + overflow: auto; + + border: none; + + scrollbar-width: thin; + scrollbar-color: ${({ theme }) => theme.palette.grey6} transparent; + } + + /* 스크롤 커스텀 */ + .fc-scrollgrid-liquid::-webkit-scrollbar { + width: 0.6rem; + } + + .fc-scrollgrid-liquid::-webkit-scrollbar-thumb { + width: 0.6rem; + + background-color: ${({ theme }) => theme.palette.grey6}; + border-radius: 3px; + } + + /* stylelint-disable selector-class-pattern */ + + /* 일간에는 주말표시 안하기 */ + .fc .fc-timeGridDay-view .fc-day-sun, + .fc .fc-timeGridDay-view .fc-day-sat { + background: none; + } + + .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { + box-shadow: 0 1px 0 0 #e0e0e0 inset; + } + + .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { + border: 1px solid ${({ theme }) => theme.palette.GREY}; + } + + .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { + float: left; + } + + /* stylelint-enable selector-class-pattern */ +`; + +export default FullCalendarLayout; diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/TimelineBox/TimelineBox.tsx index ce32961c..6e427933 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/TimelineBox/TimelineBox.tsx @@ -8,9 +8,14 @@ import { useState } from 'react'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import DayHeaderContent from '@/components/TimelineBox/DayHeaderContent'; +import FullCalendarLayout from '@/components/TimelineBox/FullCalendarStyle'; import SlotLabelContent from '@/components/TimelineBox/SlotLabelContent'; -function TimelineBox() { +interface TimelineBoxProps { + size: 'small' | 'big'; +} + +function TimelineBox({ size }: TimelineBoxProps) { const today = new Date().toDateString(); const [currentView, setCurrentView] = useState('timeGridWeek'); @@ -39,7 +44,7 @@ function TimelineBox() { }; return ( - + @@ -55,7 +60,9 @@ function TimelineBox() { titleFormat: { year: 'numeric', month: 'short' }, }, timeGridWeek: { - titleFormat: { year: 'numeric', month: 'short' }, + titleFormat(date) { + return `${date.date.year}년 ${date.date.month + 1}월`; + }, }, dayGridMonth: { titleFormat: { year: 'numeric', month: 'short' }, @@ -80,7 +87,6 @@ function TimelineBox() { day: '일간', }} allDayText="종일" - titleFormat={{ year: 'numeric', month: 'long' }} locale="ko" slotLabelFormat={{ hour: 'numeric', @@ -88,6 +94,7 @@ function TimelineBox() { meridiem: 'short', hour12: true, }} + /* eslint-disable */ slotLabelContent={(arg) => } dayHeaderContent={(arg) => } viewDidMount={handleViewChange} @@ -111,314 +118,4 @@ const CustomButtonContainer = styled.div` margin-bottom: -2.6rem; `; -const FullCalendarLayout = styled.div` - width: 89.7rem; - height: 93rem; - - /* 이벤트 박스 */ - .fc-event-main { - display: flex; - align-items: center; - width: 100%; - height: 100%; - padding: 0.4rem 0.6rem; - - color: ${(color) => color.theme.palette.GREY_04}; - - background-color: #dfe9ff; - box-shadow: 2px 0 0 0 #3876f6 inset; - border: none; - border-radius: 4px; - ${({ theme }) => theme.fontTheme.CAPTION_03}; - } - - .fc-v-event .fc-event-main-frame { - height: auto; - } - - /* 요일 행 TEXT 중간 정렬 */ - .fc td, - .fc th { - vertical-align: middle; - ${({ theme }) => theme.fontTheme.CAPTION_01}; - } - - /* 타임 그리드 30분당 일정 */ - .fc .fc-timegrid-slot-label { - width: 5.7rem; - height: 2.4rem; - - color: ${(color) => color.theme.palette.GREY_04}; - - border-bottom: none; - } - - /* 요일 행 첫번째 border 없애기 */ - .fc-theme-standard td:first-of-type, - .fc-theme-standard th:first-of-type { - border: none; - } - - /* 타임 그리드 종일 일정 */ - .fc-scrollgrid-shrink { - max-height: 2.4rem; - } - - /* 타임 그리드 종일 마진 없애기 */ - .fc .fc-daygrid-body-natural .fc-daygrid-day-events { - margin: 0; - - border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; - } - - /* 30분 줄선 지우기 */ - .fc .fc-timegrid-slot-minor { - border-top-style: none; - } - - /* 요일 헤더 높이 조정 */ - - .fc .fc-col-header-cell { - /* width: 12rem; */ - height: 5.5rem; - - border-right: none; - border-left: none; - border-radius: 8px 8px 0 0; - } - - /* 주말 색 다르게 */ - .fc .fc-day-sun, - .fc .fc-day-sat { - background: #fafcff; - } - - .fc .fc-button-primary:focus { - box-shadow: none; - } - - /* Custom button styles */ - .fc-toolbar-chunk .fc-button { - width: 4.5rem; - height: 2.6rem; - padding: 0; - - background-color: #b9d0ff; - border: none; - border-radius: 8px; - } - - /* Override the button group border-radius styles */ - .fc-direction-ltr .fc-button-group > .fc-button { - margin-right: 0.4rem; - margin-left: 0; - - border-radius: 8px; - } - - /* 스타일링 현재 시간 표시 */ - .fc .fc-timegrid-now-indicator-line { - height: 0.2rem; - - background-color: ${({ theme }) => theme.palette.PRIMARY}; - border: none; - } - - /* 시간 세로줄 테두리 없애기 */ - .fc-timegrid-axis { - color: ${({ theme }) => theme.palette.GREY_06}; - - border: none; - } - - /* 오늘 배경색 없애기 */ - .fc .fc-day-today { - background: none; - } - - /* 바깥 테두리 없애기 */ - .fc-scrollgrid-liquid { - border: none; - } - - /* event에 있는 기본 스타일 지우기 */ - .fc-timegrid-event-harness-inset .fc-timegrid-event { - box-shadow: none; - border: none; - } - - /* event inset 적용 */ - .fc-timegrid-event-harness > .fc-timegrid-event { - inset: 0.1rem; - } - - /* 좌우 버튼 스타일 */ - .fc-toolbar-chunk .fc-prev-button, - .fc-toolbar-chunk .fc-next-button { - width: 2.6rem; - height: 2.6rem; - padding: 0; - - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; - } - - .fc-toolbar-chunk .fc-button:hover { - background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; - } - - .fc-toolbar-chunk .fc-button:active { - background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; - } - - .fc-toolbar-chunk .fc-prev-button:hover, - .fc-toolbar-chunk .fc-next-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; - } - - .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { - margin-left: 0.4rem; - } - - .fc-button-active:focus { - box-shadow: none; - } - - .fc-toolbar-chunk { - display: flex; - align-items: center; - } - - /* 오늘 버튼 */ - .fc-toolbar-chunk .fc-today-button { - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; - opacity: 1; - } - - .fc-toolbar-chunk .fc-today-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; - } - - .fc-toolbar-chunk .fc-today-button:active { - background-color: ${({ theme }) => theme.palette.BLACK_PASSED}; - } - - .fc .fc-button-group { - margin-left: 5.4rem; - } - - .fc .fc-custom-button { - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; - } - - .fc .fc-custom-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; - } - - /* 오늘 버튼 마진 */ - .fc .fc-toolbar-title { - margin-right: 2.6rem; - ${({ theme }) => theme.fontTheme.HEADLINE_02}; - } - - /* 종일 이벤트 테두리 */ - .fc .fc-daygrid-day-frame .fc-event-main { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - height: 2.1rem; - padding: 0.3rem 1.2rem; - - color: ${({ theme }) => theme.palette.WITHE}; - - background-color: ${({ theme }) => theme.palette.PRIMARY}; - border: none; - } - - .fc .fc-daygrid-event-harness { - margin: 0; - } - - .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { - background-color: ${({ theme }) => theme.palette.WITHE}; - } - - .fc .fc-daygrid-event { - margin: 0; - } - - .fc .fc-cell-shaded { - display: none; - } - - /* 현재시간 화살표 지우기 */ - .fc-timegrid-now-indicator-arrow { - display: none; - } - - .fc-direction-ltr .fc-daygrid-event { - display: flex; - justify-content: center; - box-sizing: border-box; - height: 2.1rem; - margin: 0.1rem; - - background-color: #3876f6; - } - - .fc .fc-daygrid-dot-event { - padding: 0.4rem 0.6rem; - - background-color: #dfe9ff; - border-left: 2px solid var(--primary, #3876f6); - border-radius: 4px; - } - - .fc-daygrid-event-dot { - display: none; - } - - .fc .fc-timegrid-axis-frame { - justify-content: flex-start; - } - - /* 시간 왼쪽에 붙이기 */ - .fc-direction-ltr .fc-timegrid-slot-label-frame { - text-align: left; - } - - /* 이벤트 꽉차게 */ - .fc-direction-ltr .fc-timegrid-col-events { - margin: 0; - } - - /* 버튼 focus 그림자 없애기 */ - .fc .fc-button-primary:not(:disabled).fc-button-active:focus, - .fc .fc-button-primary:not(:disabled):active:focus { - box-shadow: none; - } - - /* stylelint-disable selector-class-pattern */ - - /* 일간에는 주말표시 안하기 */ - .fc .fc-timeGridDay-view .fc-day-sun, - .fc .fc-timeGridDay-view .fc-day-sat { - background: none; - } - - .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { - box-shadow: 0 1px 0 0 #e0e0e0 inset; - } - - .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { - border: 1px solid ${({ theme }) => theme.palette.GREY}; - } - - .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { - float: left; - } - - /* stylelint-enable selector-class-pattern */ -`; - export default TimelineBox; diff --git a/src/pages/Calendar.tsx b/src/pages/Calendar.tsx index 2c8bc553..d71f44fa 100644 --- a/src/pages/Calendar.tsx +++ b/src/pages/Calendar.tsx @@ -1,5 +1,4 @@ function Calendar() { return
calendar
; } - export default Calendar; From 064d8a0aa025511d851d97538b5357c1b5169d41 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 17:20:17 +0900 Subject: [PATCH 18/23] =?UTF-8?q?fix:=20=ED=8F=B4=EB=8D=94=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B0=8F=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fullCalendar}/DayHeaderContent.tsx | 0 .../fullCalendar/FullCalendarBox.tsx} | 14 ++++++++------ .../fullCalendar}/FullCalendarStyle.ts | 4 ++++ .../fullCalendar}/SlotLabelContent.tsx | 0 4 files changed, 12 insertions(+), 6 deletions(-) rename src/components/{TimelineBox => common/fullCalendar}/DayHeaderContent.tsx (100%) rename src/components/{TimelineBox/TimelineBox.tsx => common/fullCalendar/FullCalendarBox.tsx} (88%) rename src/components/{TimelineBox => common/fullCalendar}/FullCalendarStyle.ts (99%) rename src/components/{TimelineBox => common/fullCalendar}/SlotLabelContent.tsx (100%) diff --git a/src/components/TimelineBox/DayHeaderContent.tsx b/src/components/common/fullCalendar/DayHeaderContent.tsx similarity index 100% rename from src/components/TimelineBox/DayHeaderContent.tsx rename to src/components/common/fullCalendar/DayHeaderContent.tsx diff --git a/src/components/TimelineBox/TimelineBox.tsx b/src/components/common/fullCalendar/FullCalendarBox.tsx similarity index 88% rename from src/components/TimelineBox/TimelineBox.tsx rename to src/components/common/fullCalendar/FullCalendarBox.tsx index 6e427933..3b7f269d 100644 --- a/src/components/TimelineBox/TimelineBox.tsx +++ b/src/components/common/fullCalendar/FullCalendarBox.tsx @@ -7,15 +7,15 @@ import timeGridPlugin from '@fullcalendar/timegrid'; import { useState } from 'react'; import RefreshBtn from '@/components/common/button/RefreshBtn'; -import DayHeaderContent from '@/components/TimelineBox/DayHeaderContent'; -import FullCalendarLayout from '@/components/TimelineBox/FullCalendarStyle'; -import SlotLabelContent from '@/components/TimelineBox/SlotLabelContent'; +import DayHeaderContent from '@/components/common/fullCalendar/DayHeaderContent'; +import FullCalendarLayout from '@/components/common/fullCalendar/FullCalendarStyle'; +import SlotLabelContent from '@/components/common/fullCalendar/SlotLabelContent'; -interface TimelineBoxProps { +interface FullCalendarBoxProps { size: 'small' | 'big'; } -function TimelineBox({ size }: TimelineBoxProps) { +function FullCalendarBox({ size }: FullCalendarBoxProps) { const today = new Date().toDateString(); const [currentView, setCurrentView] = useState('timeGridWeek'); @@ -114,8 +114,10 @@ const CustomButtonContainer = styled.div` display: flex; align-items: center; justify-content: flex-end; + box-sizing: border-box; width: 100%; margin-bottom: -2.6rem; + padding-right: 1rem; `; -export default TimelineBox; +export default FullCalendarBox; diff --git a/src/components/TimelineBox/FullCalendarStyle.ts b/src/components/common/fullCalendar/FullCalendarStyle.ts similarity index 99% rename from src/components/TimelineBox/FullCalendarStyle.ts rename to src/components/common/fullCalendar/FullCalendarStyle.ts index 55c6b2fe..750e66f7 100644 --- a/src/components/TimelineBox/FullCalendarStyle.ts +++ b/src/components/common/fullCalendar/FullCalendarStyle.ts @@ -8,6 +8,10 @@ const FullCalendarLayout = styled.div<{ size: string }>` margin-bottom: 1.8rem; } + .fc .fc-timegrid-slot-label-cushion { + padding: 0 1.2rem 0 0; + } + /* 이벤트 박스 */ .fc-event-main { display: flex; diff --git a/src/components/TimelineBox/SlotLabelContent.tsx b/src/components/common/fullCalendar/SlotLabelContent.tsx similarity index 100% rename from src/components/TimelineBox/SlotLabelContent.tsx rename to src/components/common/fullCalendar/SlotLabelContent.tsx From 3ed6623876a2f974b32953711b1a3498c5530631 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 17:32:12 +0900 Subject: [PATCH 19/23] =?UTF-8?q?delete:=20=EC=A4=91=EB=B3=B5=20=EB=8F=99?= =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=95=84=EC=9D=B4=EC=BD=98=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/assets/svg/Icon-synchronization.svg | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 src/assets/svg/Icon-synchronization.svg diff --git a/src/assets/svg/Icon-synchronization.svg b/src/assets/svg/Icon-synchronization.svg deleted file mode 100644 index c0ac8b35..00000000 --- a/src/assets/svg/Icon-synchronization.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - From 93ba7c2a564e74b46bece2bfdea4d1026ab892a2 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 17:43:38 +0900 Subject: [PATCH 20/23] =?UTF-8?q?style:=20=EA=B8=B0=EB=B3=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/fullCalendar/FullCalendarStyle.ts | 12 ++++++++---- src/styles/GlobalStyle.tsx | 2 -- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/common/fullCalendar/FullCalendarStyle.ts b/src/components/common/fullCalendar/FullCalendarStyle.ts index 750e66f7..f84c3a6f 100644 --- a/src/components/common/fullCalendar/FullCalendarStyle.ts +++ b/src/components/common/fullCalendar/FullCalendarStyle.ts @@ -94,6 +94,10 @@ const FullCalendarLayout = styled.div<{ size: string }>` background: ${({ theme }) => theme.palette.Blue1}; } + .fc .fc-button-primary:not(:disabled).fc-button-active { + background: ${({ theme }) => theme.palette.primary}; + } + .fc .fc-button-primary:focus { box-shadow: none; } @@ -109,6 +113,10 @@ const FullCalendarLayout = styled.div<{ size: string }>` border-radius: 8px; } + .fc-toolbar-chunk .fc-button:active { + background-color: ${({ theme }) => theme.palette.Blue3}; + } + /* Override the button group border-radius styles */ .fc-direction-ltr .fc-button-group > .fc-button { margin-right: 0.4rem; @@ -162,10 +170,6 @@ const FullCalendarLayout = styled.div<{ size: string }>` background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; } - .fc-toolbar-chunk .fc-button:active { - background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; - } - .fc-toolbar-chunk .fc-prev-button:hover, .fc-toolbar-chunk .fc-next-button:hover { background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index d04108fa..29c43d97 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -149,8 +149,6 @@ const style = css` } :root { - --fc-button-active-bg-color: #3876f6; - --fc-border-color: #e0e0e0; --fc-highlight-color: #dfe9ff; } `; From 81c2c10432332e7e5d1ad431ab647816e66052cb Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 22:03:18 +0900 Subject: [PATCH 21/23] =?UTF-8?q?fix:=20style=20props=EB=A1=9C=20=EC=83=89?= =?UTF-8?q?=EC=83=81=EB=B3=80=EA=B2=BD=20=EB=A1=9C=EC=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/fullCalendar/DayHeaderContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/fullCalendar/DayHeaderContent.tsx b/src/components/common/fullCalendar/DayHeaderContent.tsx index 6df2dd4c..e4ab8e65 100644 --- a/src/components/common/fullCalendar/DayHeaderContent.tsx +++ b/src/components/common/fullCalendar/DayHeaderContent.tsx @@ -38,13 +38,13 @@ const DayLayout = styled.div` const WeekDay = styled.div<{ isToday: boolean }>` ${({ theme }) => theme.fontTheme.CAPTION_02}; - color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; + color: ${({ isToday, theme }) => (isToday ? theme.palette.BLUE_DISABLED : theme.palette.GREY_04)}; text-transform: uppercase; `; const WeekDate = styled.div<{ isToday: boolean }>` ${({ theme }) => theme.fontTheme.HEADLINE_01}; - color: ${(props) => (props.isToday ? props.theme.palette.PRIMARY : props.theme.palette.BLACK)}; + color: ${({ isToday, theme }) => (isToday ? theme.palette.PRIMARY : theme.palette.BLACK)}; `; export default DayHeaderContent; From ab0870bdc96625b73af741e290eb01f812c22f81 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Mon, 8 Jul 2024 22:31:36 +0900 Subject: [PATCH 22/23] =?UTF-8?q?fix:=20theme=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/fullCalendar/DayHeaderContent.tsx | 4 +- .../common/fullCalendar/FullCalendarStyle.ts | 58 +++++++++---------- src/pages/Calendar.tsx | 8 ++- src/styles/palette.ts | 2 + 4 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/components/common/fullCalendar/DayHeaderContent.tsx b/src/components/common/fullCalendar/DayHeaderContent.tsx index e4ab8e65..9d0415e0 100644 --- a/src/components/common/fullCalendar/DayHeaderContent.tsx +++ b/src/components/common/fullCalendar/DayHeaderContent.tsx @@ -38,13 +38,13 @@ const DayLayout = styled.div` const WeekDay = styled.div<{ isToday: boolean }>` ${({ theme }) => theme.fontTheme.CAPTION_02}; - color: ${({ isToday, theme }) => (isToday ? theme.palette.BLUE_DISABLED : theme.palette.GREY_04)}; + color: ${({ isToday, theme }) => (isToday ? theme.palette.Blue.Blue11 : theme.palette.Grey.Grey6)}; text-transform: uppercase; `; const WeekDate = styled.div<{ isToday: boolean }>` ${({ theme }) => theme.fontTheme.HEADLINE_01}; - color: ${({ isToday, theme }) => (isToday ? theme.palette.PRIMARY : theme.palette.BLACK)}; + color: ${({ isToday, theme }) => (isToday ? theme.palette.Primary : theme.palette.Grey.Black)}; `; export default DayHeaderContent; diff --git a/src/components/common/fullCalendar/FullCalendarStyle.ts b/src/components/common/fullCalendar/FullCalendarStyle.ts index f84c3a6f..52b825fd 100644 --- a/src/components/common/fullCalendar/FullCalendarStyle.ts +++ b/src/components/common/fullCalendar/FullCalendarStyle.ts @@ -20,10 +20,10 @@ const FullCalendarLayout = styled.div<{ size: string }>` height: 100%; padding: 0.4rem 0.6rem; - color: ${(color) => color.theme.palette.GREY_08}; + color: ${(color) => color.theme.palette.Grey.Grey8}; - background-color: ${({ theme }) => theme.palette.Blue2}; - box-shadow: 2px 0 0 0 ${({ theme }) => theme.palette.primary} inset; + background-color: ${({ theme }) => theme.palette.Blue.Blue2}; + box-shadow: 2px 0 0 0 ${({ theme }) => theme.palette.Primary} inset; border: none; border-radius: 4px; ${({ theme }) => theme.fontTheme.CAPTION_03}; @@ -49,7 +49,7 @@ const FullCalendarLayout = styled.div<{ size: string }>` width: 5.7rem; height: 2.4rem; - color: ${(color) => color.theme.palette.GREY_04}; + color: ${(color) => color.theme.palette.Grey.Grey6}; border-bottom: none; } @@ -69,7 +69,7 @@ const FullCalendarLayout = styled.div<{ size: string }>` .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin: 0; - border-bottom: 1px solid ${({ theme }) => theme.palette.GREY}; + border-bottom: 1px solid ${({ theme }) => theme.palette.Grey.Grey9}; } /* 30분 줄선 지우기 */ @@ -91,11 +91,11 @@ const FullCalendarLayout = styled.div<{ size: string }>` /* 주말 색 다르게 */ .fc .fc-day-sun, .fc .fc-day-sat { - background: ${({ theme }) => theme.palette.Blue1}; + background: ${({ theme }) => theme.palette.Blue.Blue1}; } .fc .fc-button-primary:not(:disabled).fc-button-active { - background: ${({ theme }) => theme.palette.primary}; + background: ${({ theme }) => theme.palette.Primary}; } .fc .fc-button-primary:focus { @@ -108,13 +108,13 @@ const FullCalendarLayout = styled.div<{ size: string }>` height: 2.6rem; padding: 0; - background-color: ${({ theme }) => theme.palette.Blue3}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; border: none; border-radius: 8px; } .fc-toolbar-chunk .fc-button:active { - background-color: ${({ theme }) => theme.palette.Blue3}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } /* Override the button group border-radius styles */ @@ -129,13 +129,13 @@ const FullCalendarLayout = styled.div<{ size: string }>` .fc .fc-timegrid-now-indicator-line { height: 0.2rem; - background-color: ${({ theme }) => theme.palette.PRIMARY}; + background-color: ${({ theme }) => theme.palette.Primary}; border: none; } /* 시간 세로줄 테두리 없애기 */ .fc-timegrid-axis { - color: ${({ theme }) => theme.palette.GREY_06}; + color: ${({ theme }) => theme.palette.Grey.Grey6}; border: none; } @@ -163,16 +163,16 @@ const FullCalendarLayout = styled.div<{ size: string }>` height: 2.6rem; padding: 0; - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + background-color: ${({ theme }) => theme.palette.Grey.Black}; } .fc-toolbar-chunk .fc-button:hover { - background-color: ${({ theme }) => theme.palette.BLUE_HOVER}; + background-color: ${({ theme }) => theme.palette.Blue.Blue8}; } .fc-toolbar-chunk .fc-prev-button:hover, .fc-toolbar-chunk .fc-next-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + background-color: ${({ theme }) => theme.palette.Grey.Grey7}; } .fc-direction-ltr .fc-toolbar > * > :not(:first-of-type) { @@ -190,16 +190,16 @@ const FullCalendarLayout = styled.div<{ size: string }>` /* 오늘 버튼 */ .fc-toolbar-chunk .fc-today-button { - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + background-color: ${({ theme }) => theme.palette.Grey.Black}; opacity: 1; } .fc-toolbar-chunk .fc-today-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + background-color: ${({ theme }) => theme.palette.Grey.Grey7}; } .fc-toolbar-chunk .fc-today-button:active { - background-color: ${({ theme }) => theme.palette.BLACK_PASSED}; + background-color: ${({ theme }) => theme.palette.Grey.Grey8}; } .fc .fc-button-group { @@ -207,11 +207,11 @@ const FullCalendarLayout = styled.div<{ size: string }>` } .fc .fc-custom-button { - background-color: ${({ theme }) => theme.palette.BLACK_DEFAULT}; + background-color: ${({ theme }) => theme.palette.Grey.Black}; } .fc .fc-custom-button:hover { - background-color: ${({ theme }) => theme.palette.BLACK_HOVER}; + background-color: ${({ theme }) => theme.palette.Grey.Grey7}; } /* 오늘 버튼 마진 */ @@ -230,9 +230,9 @@ const FullCalendarLayout = styled.div<{ size: string }>` height: 2.1rem; padding: 0.3rem 1.2rem; - color: ${({ theme }) => theme.palette.WITHE}; + color: ${({ theme }) => theme.palette.Grey.White}; - background-color: ${({ theme }) => theme.palette.PRIMARY}; + background-color: ${({ theme }) => theme.palette.Primary}; border: none; } @@ -241,7 +241,7 @@ const FullCalendarLayout = styled.div<{ size: string }>` } .fc .fc-daygrid-day-frame .fc-daygrid-event-harness { - background-color: ${({ theme }) => theme.palette.WITHE}; + background-color: ${({ theme }) => theme.palette.Grey.White}; } .fc .fc-daygrid-event { @@ -264,14 +264,14 @@ const FullCalendarLayout = styled.div<{ size: string }>` height: 2.1rem; margin: 0.1rem; - background-color: ${({ theme }) => theme.palette.primary}; + background-color: ${({ theme }) => theme.palette.Primary}; } .fc .fc-daygrid-dot-event { padding: 0.4rem 0.6rem; - background-color: ${({ theme }) => theme.palette.Blue2}; - border-left: 2px solid ${({ theme }) => theme.palette.primary}; + background-color: ${({ theme }) => theme.palette.Blue.Blue2}; + border-left: 2px solid ${({ theme }) => theme.palette.Primary}; border-radius: 4px; } @@ -311,7 +311,7 @@ const FullCalendarLayout = styled.div<{ size: string }>` border: none; scrollbar-width: thin; - scrollbar-color: ${({ theme }) => theme.palette.grey6} transparent; + scrollbar-color: ${({ theme }) => theme.palette.Grey.Grey6} transparent; } /* 스크롤 커스텀 */ @@ -322,7 +322,7 @@ const FullCalendarLayout = styled.div<{ size: string }>` .fc-scrollgrid-liquid::-webkit-scrollbar-thumb { width: 0.6rem; - background-color: ${({ theme }) => theme.palette.grey6}; + background-color: ${({ theme }) => theme.palette.Grey.Grey6}; border-radius: 3px; } @@ -335,11 +335,11 @@ const FullCalendarLayout = styled.div<{ size: string }>` } .fc-dayGridMonth-view .fc-day-sun .fc-daygrid-day-frame { - box-shadow: 0 1px 0 0 #e0e0e0 inset; + box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.Grey.Grey9} inset; } .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body table { - border: 1px solid ${({ theme }) => theme.palette.GREY}; + border: 1px solid ${({ theme }) => theme.palette.Grey.Grey9}; } .fc .fc-timeGridDay-view .fc-col-header-cell-cushion { diff --git a/src/pages/Calendar.tsx b/src/pages/Calendar.tsx index d71f44fa..c6758831 100644 --- a/src/pages/Calendar.tsx +++ b/src/pages/Calendar.tsx @@ -1,4 +1,10 @@ +import FullCalendarBox from '@/components/common/fullCalendar/FullCalendarBox'; + function Calendar() { - return
calendar
; + return ( +
+ +
+ ); } export default Calendar; diff --git a/src/styles/palette.ts b/src/styles/palette.ts index 1f4bf7c8..f1e38f77 100644 --- a/src/styles/palette.ts +++ b/src/styles/palette.ts @@ -12,6 +12,7 @@ const palette = { Blue8: '#245CCE', Blue9: '#0D47A1', Blue10: '#173B86', + Blue11: '#B9D0FF', }, Orange: { Orange1: '#FFE7DF', @@ -34,6 +35,7 @@ const palette = { Grey6: '#626273', Grey7: '#464656', Grey8: '#34343C', + Grey9: '#E0E0E0', Black: '#212121', }, }; From a410971c0721f1fe0d70959c8301f1c3e5d1dfa5 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Tue, 9 Jul 2024 01:01:17 +0900 Subject: [PATCH 23/23] =?UTF-8?q?fix:=20fullcalendar=20util=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/fullCalendar/FullCalendarBox.tsx | 25 +++----------- .../common/fullCalendar/FullCalendarStyle.ts | 3 +- .../common/fullCalendar/SlotLabelContent.tsx | 15 --------- .../common/fullCalendar/fullCalendarUtils.ts | 33 +++++++++++++++++++ 4 files changed, 40 insertions(+), 36 deletions(-) delete mode 100644 src/components/common/fullCalendar/SlotLabelContent.tsx create mode 100644 src/components/common/fullCalendar/fullCalendarUtils.ts diff --git a/src/components/common/fullCalendar/FullCalendarBox.tsx b/src/components/common/fullCalendar/FullCalendarBox.tsx index 3b7f269d..5a5ad3d8 100644 --- a/src/components/common/fullCalendar/FullCalendarBox.tsx +++ b/src/components/common/fullCalendar/FullCalendarBox.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { ViewMountArg, DatesSetArg, DayCellContentArg } from '@fullcalendar/core'; +import { ViewMountArg, DatesSetArg } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; import FullCalendar from '@fullcalendar/react'; @@ -9,7 +9,8 @@ import { useState } from 'react'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import DayHeaderContent from '@/components/common/fullCalendar/DayHeaderContent'; import FullCalendarLayout from '@/components/common/fullCalendar/FullCalendarStyle'; -import SlotLabelContent from '@/components/common/fullCalendar/SlotLabelContent'; +import { customDayCellContent, customSlotLabelContent } from '@/components/common/fullCalendar/fullCalendarUtils'; +import { theme } from '@/styles/theme'; interface FullCalendarBoxProps { size: 'small' | 'big'; @@ -27,22 +28,6 @@ function FullCalendarBox({ size }: FullCalendarBoxProps) { setCurrentView(dateInfo.view.type); }; - const customDayCellContent = (info: DayCellContentArg) => { - const number = document.createElement('a'); - number.classList.add('fc-daygrid-day-number'); - number.innerHTML = info.dayNumberText.replace('일', ''); - - if (info.view.type === 'dayGridMonth') { - return { - html: number.outerHTML, - }; - } - - return { - domNodes: [], - }; - }; - return ( @@ -79,7 +64,7 @@ function FullCalendarBox({ size }: FullCalendarBoxProps) { { title: 'Lunch', start: '2024-07-08T12:00:00', end: '2024-07-08T12:30:00' }, { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, ]} - eventColor="#dfe9ff" + eventColor={theme.palette.Blue.Blue2} buttonText={{ today: '오늘', month: '월간', @@ -94,8 +79,8 @@ function FullCalendarBox({ size }: FullCalendarBoxProps) { meridiem: 'short', hour12: true, }} + slotLabelContent={customSlotLabelContent} /* eslint-disable */ - slotLabelContent={(arg) => } dayHeaderContent={(arg) => } viewDidMount={handleViewChange} datesSet={handleDatesSet} diff --git a/src/components/common/fullCalendar/FullCalendarStyle.ts b/src/components/common/fullCalendar/FullCalendarStyle.ts index 52b825fd..dbaef7f5 100644 --- a/src/components/common/fullCalendar/FullCalendarStyle.ts +++ b/src/components/common/fullCalendar/FullCalendarStyle.ts @@ -80,8 +80,9 @@ const FullCalendarLayout = styled.div<{ size: string }>` /* 요일 헤더 높이 조정 */ .fc .fc-col-header-cell { - /* width: 12rem; */ + box-sizing: border-box; height: 5.5rem; + padding: 0.4rem 0.8rem 0.6rem; border-right: none; border-left: none; diff --git a/src/components/common/fullCalendar/SlotLabelContent.tsx b/src/components/common/fullCalendar/SlotLabelContent.tsx deleted file mode 100644 index d5de90e1..00000000 --- a/src/components/common/fullCalendar/SlotLabelContent.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { SlotLabelContentArg } from '@fullcalendar/core'; - -interface SlotLabelContentProps { - arg: SlotLabelContentArg; -} - -function SlotLabelContent({ arg }: SlotLabelContentProps) { - const formattedTime = new Intl.DateTimeFormat('en-US', { - hour: 'numeric', - hour12: true, - }).format(arg.date); - return {formattedTime}; -} - -export default SlotLabelContent; diff --git a/src/components/common/fullCalendar/fullCalendarUtils.ts b/src/components/common/fullCalendar/fullCalendarUtils.ts new file mode 100644 index 00000000..2f516c04 --- /dev/null +++ b/src/components/common/fullCalendar/fullCalendarUtils.ts @@ -0,0 +1,33 @@ +import { DayCellContentArg, SlotLabelContentArg } from '@fullcalendar/core'; + +// 월간 달력에서 날짜 '일' 제거 +export const customDayCellContent = (info: DayCellContentArg) => { + const number = document.createElement('a'); + number.classList.add('fc-daygrid-day-number'); + number.innerHTML = info.dayNumberText.replace('일', ''); + + if (info.view.type === 'dayGridMonth') { + return { + html: number.outerHTML, + }; + } + + return { + domNodes: [], + }; +}; + +// 일간, 주간에서 왼쪽 시간형식 '12 AM' 으로 만들기 +export const customSlotLabelContent = (arg: SlotLabelContentArg) => { + const formattedTime = new Intl.DateTimeFormat('en-US', { + hour: 'numeric', + hour12: true, + }).format(arg.date); + + const span = document.createElement('span'); + span.innerText = formattedTime; + + return { + html: span.outerHTML, + }; +};