diff --git a/package.json b/package.json index 408792c..b8073d4 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@tanstack/react-query": "^4.32.6", "axios": "^1.4.0", + "dayjs": "^1.11.9", "html2canvas": "^1.4.1", "jotai": "^2.3.1", "react": "^18.2.0", diff --git a/src/features/login/style/index.scss b/src/features/login/style/index.scss index 8b5b6ee..583f01f 100644 --- a/src/features/login/style/index.scss +++ b/src/features/login/style/index.scss @@ -49,6 +49,7 @@ width: 100%; height: 48px; margin: 40px 0 26px; + border-radius: 4px; } input[type='submit']:hover { cursor: pointer; diff --git a/src/features/schedule/components/WeekSelector.tsx b/src/features/schedule/components/WeekSelector.tsx index 59b34b7..3fdb4b7 100644 --- a/src/features/schedule/components/WeekSelector.tsx +++ b/src/features/schedule/components/WeekSelector.tsx @@ -1,15 +1,39 @@ +import dayjs from 'dayjs'; + import calendar from '/svg/Calendar.svg'; import arrow from '/svg/Arrow.svg'; +import { useState } from 'react'; + const WeekSelector = ({ onClick }: { onClick: () => void }) => { + const [startDate, setStartDate] = useState(dayjs(new Date())); + + const handleLeftArrowClick = () => { + setStartDate(startDate.add(-8, 'day')); + onClick(); + }; + const handleRightArrowClick = () => { + setStartDate(startDate.add(8, 'day')); + onClick(); + }; + return (
- +

- 00.00  ~  00.00 + {startDate.format('MM.DD')}  ~   + {startDate.add(7, 'day').format('MM.DD')}

- +
); }; diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss index 8d185c7..5585d1f 100644 --- a/src/features/setting/style/index.scss +++ b/src/features/setting/style/index.scss @@ -2,7 +2,7 @@ &-container { width: 100%; height: calc(100% - 159px); - background: #F7F7F7; + background: #f7f7f7; } &-preview-container { @@ -11,7 +11,7 @@ flex-direction: column; align-items: center; align-self: stretch; - background-color: #FFFFFF; + background-color: #ffffff; } &-preview-title-text { @@ -27,7 +27,7 @@ &-preview-sub-text { margin-bottom: 16px; - color: #9797AE; + color: #9797ae; font-size: 14px; font-style: normal; font-weight: 400; @@ -44,7 +44,7 @@ align-self: stretch; border: 1px solid #191919; color: #191919; - background-color: #FFFFFF; + background-color: #ffffff; cursor: pointer; &:disabled { opacity: 0.3; @@ -61,26 +61,35 @@ flex-direction: column; align-items: flex-start; align-self: stretch; - background: #FFFFFF; + background: #ffffff; } &-word-title { - color: #000; - font-size: 14px; + color: #191919; + font-size: 16px; font-style: normal; - font-weight: 500; - line-height: 24px; /* 171.429% */ + font-weight: 700; + line-height: 24px; /* 150% */ } &-word-input { display: flex; align-items: center; align-self: stretch; - border: 1px solid #191919; + border-radius: 4px; + border: 1px solid #e3e3e3; + background: #f7f7f7; + padding: 8px 14px; height: 40px; padding: 0 14px; } + &-word-input::placeholder { + color: #b2b2c8; + font-size: 16px; + font-weight: 400; + } + &-sticker-container { display: flex; padding: 16px; @@ -89,14 +98,14 @@ gap: 8px; flex: 1 0 0; align-self: stretch; - background: #FFF; + background: #fff; } &-sticker-title { - color: #000; + color: #191919; font-size: 16px; font-style: normal; - font-weight: 500; + font-weight: 700; line-height: 24px; /* 150% */ margin-bottom: 8px; } @@ -110,7 +119,7 @@ align-content: flex-start; gap: 8px; flex-wrap: wrap; - + input { appearance: none; -webkit-appearance: none; @@ -144,4 +153,4 @@ font-weight: 700; line-height: 100%; /* 34px */ } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 4488cbe..a0b1fb0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -914,6 +914,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +dayjs@^1.11.9: + version "1.11.9" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a" + integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA== + debug@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"