From 322d205c93f93ae7dedeb590a61b932a5705ba4b Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 20 Aug 2023 06:15:50 +0900 Subject: [PATCH 1/2] feat(schedule): weekly select --- package.json | 1 + .../schedule/components/WeekSelector.tsx | 30 +++++++++++++++++-- yarn.lock | 5 ++++ 3 files changed, 33 insertions(+), 3 deletions(-) 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/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/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" From 74f754b13e1532f486b3a2d2234327e5fcbfc056 Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 20 Aug 2023 06:20:16 +0900 Subject: [PATCH 2/2] feat: apply design updates --- src/features/login/style/index.scss | 1 + .../components/SubmitForm/DailyWord.tsx | 6 ++- src/features/setting/style/index.scss | 52 ++++++++++++------- 3 files changed, 39 insertions(+), 20 deletions(-) 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/setting/components/SubmitForm/DailyWord.tsx b/src/features/setting/components/SubmitForm/DailyWord.tsx index cf61dc9..51b68c8 100644 --- a/src/features/setting/components/SubmitForm/DailyWord.tsx +++ b/src/features/setting/components/SubmitForm/DailyWord.tsx @@ -13,7 +13,11 @@ const DailyWord: FunctionComponent = ({ register }) => { return (
{wordTitleText} - +
); }; diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss index 40cc527..a3cb004 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,8 +44,13 @@ align-self: stretch; border: 1px solid #191919; color: #191919; - background-color: #FFFFFF; + background-color: #ffffff; cursor: pointer; + border-radius: 4px; + } + + &-preview-btn:disabled { + opacity: 0.3; } &-word-container { @@ -57,25 +62,34 @@ 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; } + &-word-input::placeholder { + color: #b2b2c8; + font-size: 16px; + font-weight: 400; + } + &-sticker-container { display: flex; padding: 16px; @@ -84,19 +98,19 @@ 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; } - &-sticker-box { + &-sticker-box { display: flex; height: 100%; width: 100%; @@ -105,7 +119,7 @@ align-content: flex-start; gap: 8px; flex-wrap: wrap; - + input { appearance: none; -webkit-appearance: none; @@ -113,12 +127,12 @@ input:checked { outline: 1px solid #000; } - } + } - &-sticker-width { + &-sticker-width { width: 48%; img { width: 100%; } - } -} \ No newline at end of file + } +}