From b9831d027e705b9e98e2b04778f6a29e987f99d7 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:07:46 +0900 Subject: [PATCH 01/15] =?UTF-8?q?[=20etc=20]=20=ED=8C=A8=ED=82=A4=EC=A7=80?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- yarn.lock | 38 +++++++++++++++++++------------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 7d48988..a9bedcd 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.3", - "react-router-dom": "^6.14.0", + "react-router-dom": "^6.14.1", "recoil": "^0.7.7", - "styled-components": "^6.0.0", + "styled-components": "^6.0.1", "vite-plugin-svgr": "^3.2.0", "vite-tsconfig-paths": "^4.2.0" }, diff --git a/yarn.lock b/yarn.lock index 3c5a3f2..0da97b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1329,10 +1329,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@remix-run/router@1.7.0": - version "1.7.0" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.0.tgz#550a8d5760b78efc5d60f62b5829b0f74c1fde81" - integrity sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw== +"@remix-run/router@1.7.1": + version "1.7.1" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.1.tgz#fea7ac35ae4014637c130011f59428f618730498" + integrity sha512-bgVQM4ZJ2u2CM8k1ey70o1ePFXsEzYVZoWghh6WjM8p59jQ7HxzbHW4SbnWFG7V9ig9chLawQxDTZ3xzOF8MkQ== "@rollup/pluginutils@^5.0.2": version "5.0.2" @@ -3491,20 +3491,20 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== -react-router-dom@^6.14.0: - version "6.14.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.0.tgz#7ce6c3f73549e4d40216ba150253d3bf30812b33" - integrity sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ== +react-router-dom@^6.14.1: + version "6.14.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.1.tgz#0ad7ba7abdf75baa61169d49f096f0494907a36f" + integrity sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw== dependencies: - "@remix-run/router" "1.7.0" - react-router "6.14.0" + "@remix-run/router" "1.7.1" + react-router "6.14.1" -react-router@6.14.0: - version "6.14.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.14.0.tgz#1c3e8e922d934d43a253fd862c72c82167c0a7f1" - integrity sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA== +react-router@6.14.1: + version "6.14.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.14.1.tgz#5e82bcdabf21add859dc04b1859f91066b3a5810" + integrity sha512-U4PfgvG55LdvbQjg5Y9QRWyVxIdO1LlpYT7x+tMAxd9/vmiPuJhIwdxZuIQLN/9e3O4KFDHYfR9gzGeYMasW8g== dependencies: - "@remix-run/router" "1.7.0" + "@remix-run/router" "1.7.1" react@^18.2.0: version "18.2.0" @@ -3851,10 +3851,10 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== -styled-components@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.0.tgz#f42abb6bd8a9cfc21f16ddfe00513da939e054b6" - integrity sha512-OPraU50BgQ+cqiXmO9JnJiDP8N7gTB7Pzx9Yk6M+koZuzOvFf+Fd8ff6Qp57OnE65KAYO058IIWj+RWng3Cmiw== +styled-components@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.1.tgz#f4db3195e5e510ff3cd0909b1a7b103f4440cbbc" + integrity sha512-6VAlf5A9KZJOnX54becRCLnBFSfeqP+q3raTCdPDPFg4HOy7MNlnWFqAq3sHlQVDdZh5jcsDwK06vTU3NMO6yQ== dependencies: "@babel/cli" "^7.21.0" "@babel/core" "^7.21.0" From ae8aeead0b3885a835f4c740cf8466e6c29755d0 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:43:27 +0900 Subject: [PATCH 02/15] =?UTF-8?q?[=20etc=20]=20=ED=8C=A8=ED=82=A4=EC=A7=80?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a9bedcd..e32988f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "format": "prettier --write --cache ." }, "dependencies": { + "date-fns": "^2.30.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jsx-a11y": "^6.7.1", diff --git a/yarn.lock b/yarn.lock index 0da97b2..3705f88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1047,7 +1047,7 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA== @@ -2011,6 +2011,13 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== +date-fns@^2.30.0: + version "2.30.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0" + integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw== + dependencies: + "@babel/runtime" "^7.21.0" + debug@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" From 1a1e8d633647456b70ff28c42566c6b5636e6d81 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:44:02 +0900 Subject: [PATCH 03/15] =?UTF-8?q?[=20etc=20]=20.keep=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/.keep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/hyein/.keep diff --git a/src/components/hyein/.keep b/src/components/hyein/.keep deleted file mode 100644 index e69de29..0000000 From 8e64cee2d97d178c22b713a8f0f4dc0187a24857 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:44:24 +0900 Subject: [PATCH 04/15] =?UTF-8?q?[=20feat=20]=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=ED=97=A4=EB=8D=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/CalendarHeader.tsx | 42 +++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/hyein/CalendarHeader.tsx diff --git a/src/components/hyein/CalendarHeader.tsx b/src/components/hyein/CalendarHeader.tsx new file mode 100644 index 0000000..964d0ad --- /dev/null +++ b/src/components/hyein/CalendarHeader.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import styled from "styled-components"; +import { format, add, subMonths } from "date-fns"; + +export default function CalendarHeader({ currentMonth, prevMonth, nextMonth }) { + return ( + + {"<"} + + {format(currentMonth, "yyyy")}년 {format(currentMonth, "MM")}월 + + {">"} + + ); +} + +const HeaderWrapper = styled.header` + display: flex; + justify-content: center; + align-items: center; + font-size: 1.1rem; + gap: 1.6rem; +`; + +const YearMonthWrapper = styled.span` + display: flex; + justify-content: center; + align-items: center; + font-size: 1.1rem; +`; + +const PrevMonthButton = styled.button` + display: flex; + justify-content: center; + align-items: center; +`; + +const NextMonthButton = styled.button` + display: flex; + justify-content: center; + align-items: center; +`; From 6f319672cb60ff1f20d6e307e95af89c22c21a38 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:44:51 +0900 Subject: [PATCH 05/15] =?UTF-8?q?[=20feat=20]=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Hyein.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Hyein.tsx b/src/pages/Hyein.tsx index 4b97a8f..c00b324 100644 --- a/src/pages/Hyein.tsx +++ b/src/pages/Hyein.tsx @@ -1,3 +1,5 @@ +import Calendar from "../components/hyein/Calendar"; + export default function Hyein() { - return
Hyein
; + return ; } From 6286a5cdaea08ba73dd9ad1deb5eef7d1c37aa6a Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 20:45:17 +0900 Subject: [PATCH 06/15] =?UTF-8?q?[=20feat=20]=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=ED=97=A4=EB=8D=94=20month=20=EC=99=94=EB=8B=A4?= =?UTF-8?q?=EA=B0=94=EB=8B=A4=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Calendar.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/components/hyein/Calendar.tsx diff --git a/src/components/hyein/Calendar.tsx b/src/components/hyein/Calendar.tsx new file mode 100644 index 0000000..ddaabe4 --- /dev/null +++ b/src/components/hyein/Calendar.tsx @@ -0,0 +1,16 @@ +import React, { useState } from "react"; +import CalendarHeader from "./CalendarHeader"; +import { format, subMonths, addMonths } from "date-fns"; + +export default function Calendar() { + const [currentMonth, setCurrentMonth] = useState(new Date()); + + function prevMonth() { + setCurrentMonth(subMonths(currentMonth, 1)); + } + function nextMonth() { + setCurrentMonth(addMonths(currentMonth, 1)); + } + + return ; +} From 33b529231cea2ab625a86327d5f0049f2abf473c Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 21:06:49 +0900 Subject: [PATCH 07/15] =?UTF-8?q?[=20feat=20]=20week=EB=B6=80=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Calendar.tsx | 8 +++++++- src/components/hyein/Week.tsx | 26 ++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/components/hyein/Week.tsx diff --git a/src/components/hyein/Calendar.tsx b/src/components/hyein/Calendar.tsx index ddaabe4..7f4456b 100644 --- a/src/components/hyein/Calendar.tsx +++ b/src/components/hyein/Calendar.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import CalendarHeader from "./CalendarHeader"; import { format, subMonths, addMonths } from "date-fns"; +import Week from "./Week"; export default function Calendar() { const [currentMonth, setCurrentMonth] = useState(new Date()); @@ -12,5 +13,10 @@ export default function Calendar() { setCurrentMonth(addMonths(currentMonth, 1)); } - return ; + return ( +
+ + +
+ ); } diff --git a/src/components/hyein/Week.tsx b/src/components/hyein/Week.tsx new file mode 100644 index 0000000..a3a63ad --- /dev/null +++ b/src/components/hyein/Week.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import styled from "styled-components"; + +export default function Week() { + const DATE: string[] = ["일", "월", "화", "수", "목", "금", "토", "일"]; + + const dateList: JSX.Element[] = DATE.map((day, index) => {day}); + return {dateList}; +} + +const WeekWrapper = styled.section` + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + gap: 3.2rem; + font-weight: 400; + margin-top: 1.8rem; +`; + +const DayWrapper = styled.span` + display: flex; + justify-content: center; + align-items: center; + height: auto; +`; From a8b12b303650ce41868a400df6a3773a8c177017 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sat, 1 Jul 2023 22:07:26 +0900 Subject: [PATCH 08/15] =?UTF-8?q?[=20feat=20]=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=EB=A9=94=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Calendar.tsx | 7 ++++ src/components/hyein/Days.tsx | 64 +++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/components/hyein/Days.tsx diff --git a/src/components/hyein/Calendar.tsx b/src/components/hyein/Calendar.tsx index 7f4456b..cf62759 100644 --- a/src/components/hyein/Calendar.tsx +++ b/src/components/hyein/Calendar.tsx @@ -2,9 +2,11 @@ import React, { useState } from "react"; import CalendarHeader from "./CalendarHeader"; import { format, subMonths, addMonths } from "date-fns"; import Week from "./Week"; +import Days from "./Days"; export default function Calendar() { const [currentMonth, setCurrentMonth] = useState(new Date()); + const [selectedDate, setSelectedDate] = useState(new Date()); function prevMonth() { setCurrentMonth(subMonths(currentMonth, 1)); @@ -13,10 +15,15 @@ export default function Calendar() { setCurrentMonth(addMonths(currentMonth, 1)); } + function onClickDate(day) { + setSelectedDate(day); + } + return (
+
); } diff --git a/src/components/hyein/Days.tsx b/src/components/hyein/Days.tsx new file mode 100644 index 0000000..008d72a --- /dev/null +++ b/src/components/hyein/Days.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import styled from "styled-components"; +import { format, endOfMonth, endOfWeek, startOfMonth, startOfWeek, addDays, isSameDay, isSameMonth } from "date-fns"; + +export default function Days({ currentMonth, selectedDate, onClickDate }) { + const monthStart = startOfMonth(currentMonth); + const monthEnd = endOfMonth(monthStart); + const startDate = startOfWeek(monthStart); + const endDate = endOfWeek(monthEnd); + + const rows = []; + let days = []; + let day = startDate; + let formattedDate = ""; + + while (day <= endDate) { + for (let i = 0; i < 7; i++) { + formattedDate = format(day, "d"); + const cloneDay = day; + days.push( +
onClickDate(parse(cloneDay))}> + + {formattedDate} + +
, + ); + day = addDays(day, 1); + } + rows.push({days}); + days = []; + } + + return {rows}; +} + +const Wrapper = styled.section` + display: flex; + align-items: center; + justify-content: center; + margin-top: 3.2rem; + gap: 30px; + flex-direction: column; +`; + +const DaysWrapper = styled.span` + display: flex; + align-items: center; + justify-content: space-between; + gap: 3.2rem; + width: 30.5rem; + + cursor: pointer; +`; From 81f70884c38f8079e07b7ae84cfd515689304ee8 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 15:58:16 +0900 Subject: [PATCH 09/15] =?UTF-8?q?[=20feat=20]=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=ED=84=B0=20style-component=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Days.tsx | 47 +++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/hyein/Days.tsx b/src/components/hyein/Days.tsx index 008d72a..225f3e3 100644 --- a/src/components/hyein/Days.tsx +++ b/src/components/hyein/Days.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { format, endOfMonth, endOfWeek, startOfMonth, startOfWeek, addDays, isSameDay, isSameMonth } from "date-fns"; +import { format, endOfMonth, endOfWeek, startOfMonth, startOfWeek, addDays, isSameDay, isSunday } from "date-fns"; export default function Days({ currentMonth, selectedDate, onClickDate }) { const monthStart = startOfMonth(currentMonth); @@ -17,23 +17,15 @@ export default function Days({ currentMonth, selectedDate, onClickDate }) { for (let i = 0; i < 7; i++) { formattedDate = format(day, "d"); const cloneDay = day; + const sunDay = isSunday(day); days.push( -
onClickDate(parse(cloneDay))}> - - {formattedDate} - -
, + onClick={() => onClickDate(parse(cloneDay))} + issameday={isSameDay(day, selectedDate)} + issunday={sunDay}> + {formattedDate} + , ); day = addDays(day, 1); } @@ -53,12 +45,31 @@ const Wrapper = styled.section` flex-direction: column; `; -const DaysWrapper = styled.span` +const DaysWrapper = styled.article` display: flex; align-items: center; justify-content: space-between; gap: 3.2rem; width: 30.5rem; - cursor: pointer; `; + +const Day = styled.article` + display: flex; + align-items: center; + justify-content: center; + + width: 1.6rem; + height: 1.6rem; + + ${({ issameday, issunday }) => ` + ${issameday ? "color: white; background-color: #0DA98E; border-radius: 50% " : ""} + ${issunday ? "color: #FCB3A6" : ""} + `} +`; + +const DayText = styled.p` + ${({ isnotvalid }) => ` + ${isnotvalid ? "color: #CED4DA" : ""} + `} +`; From ecee33ce72f92cc2d22d3421449a4094cb3b0195 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 16:23:12 +0900 Subject: [PATCH 10/15] =?UTF-8?q?[=20style=20]=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=ED=8F=AC=EB=A7=B7=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Days.tsx | 51 ++++++++++++++++++++++------------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/src/components/hyein/Days.tsx b/src/components/hyein/Days.tsx index 225f3e3..d392248 100644 --- a/src/components/hyein/Days.tsx +++ b/src/components/hyein/Days.tsx @@ -2,15 +2,21 @@ import React from "react"; import styled from "styled-components"; import { format, endOfMonth, endOfWeek, startOfMonth, startOfWeek, addDays, isSameDay, isSunday } from "date-fns"; -export default function Days({ currentMonth, selectedDate, onClickDate }) { +interface DaysProps { + currentMonth: Date; + selectedDate: Date; + onClickDate: (date: Date) => void; +} + +export default function Days({ currentMonth, selectedDate, onClickDate }: DaysProps) { const monthStart = startOfMonth(currentMonth); const monthEnd = endOfMonth(monthStart); const startDate = startOfWeek(monthStart); - const endDate = endOfWeek(monthEnd); + const endDate: Date = endOfWeek(monthEnd); - const rows = []; - let days = []; - let day = startDate; + const rows: React.ReactNode[] = []; + let days: React.ReactNode[] = []; + let day: Date = startDate; let formattedDate = ""; while (day <= endDate) { @@ -20,16 +26,16 @@ export default function Days({ currentMonth, selectedDate, onClickDate }) { const sunDay = isSunday(day); days.push( onClickDate(parse(cloneDay))} - issameday={isSameDay(day, selectedDate)} - issunday={sunDay}> - {formattedDate} + key={day.toString()} + onClick={() => onClickDate(cloneDay)} + $issameday={isSameDay(day, selectedDate)} + $issunday={sunDay}> + {formattedDate} , ); day = addDays(day, 1); } - rows.push({days}); + rows.push({days}); days = []; } @@ -54,7 +60,12 @@ const DaysWrapper = styled.article` cursor: pointer; `; -const Day = styled.article` +interface DayProps { + $issameday: boolean; + $issunday: boolean; +} + +const Day = styled.article` display: flex; align-items: center; justify-content: center; @@ -62,14 +73,18 @@ const Day = styled.article` width: 1.6rem; height: 1.6rem; - ${({ issameday, issunday }) => ` - ${issameday ? "color: white; background-color: #0DA98E; border-radius: 50% " : ""} - ${issunday ? "color: #FCB3A6" : ""} + ${({ $issameday, $issunday }) => ` + ${$issameday ? "color: white; background-color: #0DA98E; border-radius: 50% " : ""} + ${$issunday ? "color: #FCB3A6" : undefined} `} `; -const DayText = styled.p` - ${({ isnotvalid }) => ` - ${isnotvalid ? "color: #CED4DA" : ""} +interface DayTextProp { + $isnotvalid: boolean; +} + +const DayText = styled.p` + ${({ $isnotvalid }) => ` + ${$isnotvalid ? "color: #CED4DA" : ""} `} `; From 8af48e5a1bb2afe634cc9b167974160042f72166 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 18:47:10 +0900 Subject: [PATCH 11/15] =?UTF-8?q?[=20etc=20]=20=ED=95=99=EC=83=9D=20data?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/data.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/mocks/data.ts diff --git a/src/mocks/data.ts b/src/mocks/data.ts new file mode 100644 index 0000000..8c236f8 --- /dev/null +++ b/src/mocks/data.ts @@ -0,0 +1,15 @@ +interface ScheduleData { + id: number; + student: string; + time: string; + date: string[]; +} +[]; + +export const SCHEDULE_DATA: ScheduleData[] = [ + { id: 1, student: "지수", time: "13:00~14:00", date: ["2023.07.06", "2023.07.13", "2023.07.20", "2023.07.27"] }, + { id: 2, student: "희정", time: "19:00~20:00", date: ["2023.07.06", "2023.07.16"] }, + { id: 3, student: "혜인", time: "10:00~12:00", date: ["2023.07.06", "2023.07.16"] }, + { id: 4, student: "은빈", time: "22:00~23:00", date: ["2023.07.03", "2023.07.27"] }, + { id: 5, student: "성경", time: "21:00~22:30", date: ["2023.07.15"] }, +]; From d55b036b6ee725f55862500fa78d53158284c845 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 18:47:24 +0900 Subject: [PATCH 12/15] =?UTF-8?q?[=20etc=20]=20.keep=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/.keep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/mocks/.keep diff --git a/src/mocks/.keep b/src/mocks/.keep deleted file mode 100644 index e69de29..0000000 From 5803b78d44bb0a52df4237442af1b93e6305aa86 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 18:47:59 +0900 Subject: [PATCH 13/15] =?UTF-8?q?[=20design=20]=20ui=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Week.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hyein/Week.tsx b/src/components/hyein/Week.tsx index a3a63ad..a215c4f 100644 --- a/src/components/hyein/Week.tsx +++ b/src/components/hyein/Week.tsx @@ -13,7 +13,6 @@ const WeekWrapper = styled.section` justify-content: center; align-items: center; font-size: 1rem; - gap: 3.2rem; font-weight: 400; margin-top: 1.8rem; `; @@ -23,4 +22,5 @@ const DayWrapper = styled.span` justify-content: center; align-items: center; height: auto; + width: 6rem; `; From 7d0b0f874345f9ebc33152f266745ee32b7d228a Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Mon, 3 Jul 2023 18:48:17 +0900 Subject: [PATCH 14/15] =?UTF-8?q?[=20feat=20]=20=ED=95=99=EC=83=9D?= =?UTF-8?q?=EB=93=A4=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=83=89=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B4=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hyein/Days.tsx | 133 +++++++++++++++++++++++++++------- 1 file changed, 105 insertions(+), 28 deletions(-) diff --git a/src/components/hyein/Days.tsx b/src/components/hyein/Days.tsx index d392248..4d6fe89 100644 --- a/src/components/hyein/Days.tsx +++ b/src/components/hyein/Days.tsx @@ -1,18 +1,36 @@ import React from "react"; import styled from "styled-components"; -import { format, endOfMonth, endOfWeek, startOfMonth, startOfWeek, addDays, isSameDay, isSunday } from "date-fns"; +import { + parse, + format, + endOfMonth, + endOfWeek, + startOfMonth, + startOfWeek, + addDays, + isSameDay, + isSunday, +} from "date-fns"; + +import { SCHEDULE_DATA, COLOR_DATA } from "../../mocks/data"; interface DaysProps { currentMonth: Date; selectedDate: Date; - onClickDate: (date: Date) => void; + // onClickDate: (date: Date) => void; } -export default function Days({ currentMonth, selectedDate, onClickDate }: DaysProps) { +export default function Days({ currentMonth, selectedDate }: DaysProps) { const monthStart = startOfMonth(currentMonth); const monthEnd = endOfMonth(monthStart); const startDate = startOfWeek(monthStart); const endDate: Date = endOfWeek(monthEnd); + const scheduleData = SCHEDULE_DATA.map((item) => ({ + ...item, + date: item.date.map((data) => parse(data, "yyyy.MM.dd", new Date())), + })); + + const sortedScheduleData = scheduleData.sort((a, b) => a.time.localeCompare(b.time)); const rows: React.ReactNode[] = []; let days: React.ReactNode[] = []; @@ -22,15 +40,21 @@ export default function Days({ currentMonth, selectedDate, onClickDate }: DaysPr while (day <= endDate) { for (let i = 0; i < 7; i++) { formattedDate = format(day, "d"); - const cloneDay = day; const sunDay = isSunday(day); + const daySchedule = sortedScheduleData.filter((item) => item.date.some((date) => isSameDay(date, day))); + days.push( - onClickDate(cloneDay)} - $issameday={isSameDay(day, selectedDate)} - $issunday={sunDay}> - {formattedDate} + + + {formattedDate} + + {daySchedule.map((schedule) => ( + + {schedule.student} {schedule.time.slice(0, 5)} + + ))} , ); day = addDays(day, 1); @@ -46,8 +70,8 @@ const Wrapper = styled.section` display: flex; align-items: center; justify-content: center; - margin-top: 3.2rem; - gap: 30px; + margin-top: 5rem; + gap: 2rem; flex-direction: column; `; @@ -55,36 +79,89 @@ const DaysWrapper = styled.article` display: flex; align-items: center; justify-content: space-between; - gap: 3.2rem; - width: 30.5rem; + gap: 2rem; + width: 48rem; cursor: pointer; `; -interface DayProps { - $issameday: boolean; +interface DayProp { $issunday: boolean; } -const Day = styled.article` +const Day = styled.article` display: flex; align-items: center; - justify-content: center; - - width: 1.6rem; - height: 1.6rem; + flex-direction: column; + height: 5rem; + width: 30rem; - ${({ $issameday, $issunday }) => ` - ${$issameday ? "color: white; background-color: #0DA98E; border-radius: 50% " : ""} + ${({ $issunday }) => ` ${$issunday ? "color: #FCB3A6" : undefined} - `} + `}; `; -interface DayTextProp { +interface DayTextProps { $isnotvalid: boolean; + $issameday: boolean; } -const DayText = styled.p` - ${({ $isnotvalid }) => ` +const DayText = styled.p` + display: flex; + align-items: center; + justify-content: center; + width: 1.2rem; + height: 1.2rem; + + ${({ $isnotvalid, $issameday }) => ` ${$isnotvalid ? "color: #CED4DA" : ""} - `} + ${$issameday ? "color: white; background-color: #0DA98E; border-radius: 50%; " : ""} + `}; +`; + +interface ScheduleWrapper { + $student: string; +} + +const ScheduleWrapper = styled.p` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 0.5rem; + + padding: 0.2rem 0; + + ${({ $student }) => { + switch ($student) { + case "지수": + return ` + background-color: #FFD9F2 + `; + break; + + case "희정": + return ` + background-color:#E3D2FA`; + break; + + case "혜인": + return ` + background-color:#D3F1C1`; + break; + + case "성경": + return ` + background-color: #CCF5ED + `; + break; + + case "은빈": + return ` + background-color:#EBDDD5 `; + break; + + default: + return undefined; + } + }} `; From 52a4107b03c8beda7a6035f2c2c38091dd252bd1 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Tue, 4 Jul 2023 14:18:01 +0900 Subject: [PATCH 15/15] =?UTF-8?q?[=20style=20]=20interface=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/hyein/CalendarHeader.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/hyein/CalendarHeader.tsx b/src/components/hyein/CalendarHeader.tsx index 964d0ad..515ad71 100644 --- a/src/components/hyein/CalendarHeader.tsx +++ b/src/components/hyein/CalendarHeader.tsx @@ -2,7 +2,13 @@ import React from "react"; import styled from "styled-components"; import { format, add, subMonths } from "date-fns"; -export default function CalendarHeader({ currentMonth, prevMonth, nextMonth }) { +interface CalendarHeaderProps { + currentMonth: Date; + prevMonth: Date; + nextMonth: Date; +} + +export default function CalendarHeader({ currentMonth, prevMonth, nextMonth }: CalendarHeaderProps) { return ( {"<"}