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"