Merge branch 'main' into feat/active

junction-asia-2023 · Aug 19, 2023 · 4ebca3c · 4ebca3c
2 parents 6fa952d + 7865c7b
commit 4ebca3c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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 (
     <div className="week-selector">
-      <img className="arrow arrow-left" src={arrow} onClick={onClick} />
+      <img
+        className="arrow arrow-left"
+        src={arrow}
+        onClick={handleLeftArrowClick}
+      />
       <h1>
         <img src={calendar} />
-        00.00&nbsp;&nbsp;~&nbsp;&nbsp;00.00
+        {startDate.format('MM.DD')}&nbsp;&nbsp;~&nbsp;&nbsp;
+        {startDate.add(7, 'day').format('MM.DD')}
       </h1>
-      <img className="arrow arrow-right" src={arrow} onClick={onClick} />
+      <img
+        className="arrow arrow-right"
+        src={arrow}
+        onClick={handleRightArrowClick}
+      />
     </div>
   );
 };

diff --git 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 */
   }
-}
+}
diff --git 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"