Merge pull request #16 from TEAM-Hearus/fix/design-system

Fix: 바뀐 디자인 적용

src/components/HomeLayout/HomeLayout.module.scss

@@ -3,6 +3,7 @@
 
 .mainContainer {
   display: flex;
-  margin-top: 80px;
   width: 100dvw;
+  min-height: 100dvh;
+  background-color: $light-bg_F9;
 }

src/components/HomeLayout/HomeLayout.tsx

@@ -1,17 +1,13 @@
 import { Outlet } from 'react-router-dom';
-import MainHeader from '../headers/MainHeader/MainHeader';
 import styles from './HomeLayout.module.scss';
 import MainNav from '../navigators/MainNav/MainNav';
 
 const HomeLayout = () => {
   return (
-    <>
-      <MainHeader />
-      <main className={styles.mainContainer}>
-        <MainNav />
-        <Outlet />
-      </main>
-    </>
+    <main className={styles.mainContainer}>
+      <MainNav />
+      <Outlet />
+    </main>
   );
 };
 

src/components/common/TimeTableItem/TimeTableItem.module.scss

@@ -22,11 +22,11 @@
   gap: 4px;
 }
 .name {
-  @include Medium-Body-18;
+  @include Medium_Body_18;
 }
 .location {
-  @include Medium-Sub-14;
+  @include Medium_Sub_14;
 }
 .time {
-  @include Medium-Sub-14;
+  @include Medium_Sub_14;
 }

src/components/common/buttons/TabLink/TabLink.module.scss

@@ -5,11 +5,11 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  @include Medium-Body-16;
+  @include Medium_Body_16;
   color: $light-gray_81;
   text-decoration: none;
   &.active {
-    @include SemiBold-Body-16;
+    @include SemiBold_Body_16;
     color: $dark-orange_E5;
   }
 }

src/components/headers/MainHeader/MainHeader.module.scss

@@ -29,5 +29,5 @@
   background-color: white;
   border: none;
   cursor: pointer;
-  @include Medium-Sub-14;
+  @include Medium_Sub_14;
 }

src/components/modals/SignupModal/SignupModal.module.scss

@@ -43,7 +43,7 @@
   align-items: center;
   gap: 6px;
   padding: 20px 0 35px 0;
-  @include Medium-Title-24;
+  @include Medium_Title_24;
 }
 .loginBtnsContainer {
   display: flex;
@@ -58,7 +58,7 @@
   padding: 20px;
   border: none;
   border-radius: 12px;
-  @include Medium-Body-16;
+  @include Medium_Body_16;
   img {
     position: absolute;
     left: 20px;
@@ -95,7 +95,7 @@
   margin-top: 50px;
   margin-bottom: 20px;
   p {
-    @include Medium-Sub-14;
+    @include Medium_Sub_14;
     color: $light-bg_89;
   }
   .signupLink {
@@ -106,6 +106,6 @@
     background: none;
     border: none;
     color: $brand-point;
-    @include SemiBold-Sub-14;
+    @include SemiBold_Sub_14;
   }
 }

src/components/navigators/MainNav/MainNav.module.scss

@@ -6,15 +6,34 @@
   flex-direction: column;
   gap: 20px;
   width: 240px;
-  padding: 50px 20px 20px 20px;
+  padding: 30px;
+  background-color: white;
+  border: 1px solid $light-bg_E5;
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+.userProfile {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 5px 0px 5px;
+}
+.profileImage {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #e7e7e7;
+}
+.userName {
+  @include Medium_Body_16;
 }
 .searchBar {
   display: flex;
   height: 40px;
   padding: 20px 20px 20px 35px;
-  border: solid 3px $light-bg_E5;
+  border: solid 1px $light-bg_E5;
   border-radius: 10px;
-  @include Medium-Sub-14;
+  @include Regular_Sub_14;
   &::placeholder {
     color: $light-gray_81;
   }

src/components/navigators/MainNav/MainNav.tsx

@@ -1,37 +1,42 @@
 import styles from './MainNav.module.scss';
 import Search from '../../../assets/images/search.svg?react';
-import MyBoardActive from '../../../assets/images/nav/my-board-active.svg?react';
-import MyBoardInactive from '../../../assets/images/nav/my-board-inactive.svg?react';
-import RecordScriptActive from '../../../assets/images/nav/record-script-active.svg?react';
-import RecordScriptInactive from '../../../assets/images/nav/record-script-inactive.svg?react';
-import TestMakeActive from '../../../assets/images/nav/test-make-active.svg?react';
-import TestMakeInactive from '../../../assets/images/nav/test-make-inactive.svg?react';
+import MyScriptActive from '../../../assets/images/nav/my-script-active.svg?react';
+import MyScriptInactive from '../../../assets/images/nav/my-script-inactive.svg?react';
 import TimeTableActive from '../../../assets/images/nav/time-table-active.svg?react';
 import TimeTableInactive from '../../../assets/images/nav/time-table-inactive.svg?react';
+import TestMakeActive from '../../../assets/images/nav/test-make-active.svg?react';
+import TestMakeInactive from '../../../assets/images/nav/test-make-inactive.svg?react';
+import TrashCanActive from '../../../assets/images/nav/trash-can-active.svg?react';
+import TrashCanInactive from '../../../assets/images/nav/trash-can-inactive.svg?react';
 import TabLink from '../../common/buttons/TabLink/TabLink';
 
 const MainNav = () => {
+  const USERNAME = 'UserName'; // 임시 지정
   return (
     <nav className={styles.container}>
+      <div className={styles.userProfile}>
+        <div className={styles.profileImage}></div>
+        <p className={styles.useName}>{USERNAME}</p>
+      </div>
       <span className={styles.searchIcon}>
         <Search />
       </span>
       <input className={styles.searchBar} type="text" placeholder="파일 검색" />
       <section className={styles.linksContainer}>
         <TabLink
           to="/home"
-          activeIcon={<MyBoardActive />}
-          inactiveIcon={<MyBoardInactive />}
+          activeIcon={<MyScriptActive />}
+          inactiveIcon={<MyScriptInactive />}
           exact={true}
         >
-          내 보드
+          내 스크립트
         </TabLink>
         <TabLink
-          to="/home/record-note"
-          activeIcon={<RecordScriptActive />}
-          inactiveIcon={<RecordScriptInactive />}
+          to="/home/time-table"
+          activeIcon={<TimeTableActive />}
+          inactiveIcon={<TimeTableInactive />}
         >
-          녹음 스크립트
+          시간표
         </TabLink>
         <TabLink
           to="/home/test-make"
@@ -41,11 +46,11 @@ const MainNav = () => {
           테스트 생성
         </TabLink>
         <TabLink
-          to="/home/time-table"
-          activeIcon={<TimeTableActive />}
-          inactiveIcon={<TimeTableInactive />}
+          to="/home/trash-can"
+          activeIcon={<TrashCanActive />}
+          inactiveIcon={<TrashCanInactive />}
         >
-          시간표
+          휴지통
         </TabLink>
       </section>
     </nav>

src/pages/Landing/Landing.module.scss

@@ -16,7 +16,7 @@
   padding: 20px 30px;
   background-color: #6d6d6d;
   color: white;
-  @include SemiBold-Body-16;
+  @include SemiBold_Body_16;
   border: none;
   border-radius: 12px;
   cursor: pointer;

src/pages/Main/MyScript/MyScript.tsx

@@ -0,0 +1,5 @@
+const MyScript = () => {
+  return <div>MyScript</div>;
+};
+
+export default MyScript;

src/pages/Main/TimeTable/TimeTable.module.scss

@@ -19,13 +19,13 @@
   gap: 20px;
 }
 .today {
-  @include SemiBold-Title-32;
+  @include SemiBold_Title_28;
 }
 .toggleMode {
   display: flex;
   align-items: flex-end;
   gap: 8px;
-  @include SemiBold-Body-18;
+  @include SemiBold_Body_18;
   a {
     text-decoration: none;
   }
@@ -34,14 +34,14 @@
   color: black;
 }
 .inactiveMode {
-  color: $light-gray_9E;
+  color: $light-font_9E;
 }
 .addScheduleBtn {
   padding: 10px 15px;
   background-color: $dark-font_5A;
   border: none;
   border-radius: 8px;
   color: white;
-  @include SemiBold-Body-16;
+  @include SemiBold_Body_16;
   cursor: pointer;
 }

src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.module.scss

@@ -13,7 +13,7 @@
   width: 100%;
   height: 50px;
   padding: 0px 30px 0px 0px;
-  @include Medium-Sub-14;
+  @include Medium_Sub_14;
 }
 .dayOfWeekCell {
   display: flex;
@@ -37,7 +37,7 @@
   justify-content: center;
   align-items: center;
   width: 20px;
-  @include Medium-Sub-14;
+  @include Medium_Sub_14;
 }
 .temp {
   position: absolute;

src/pages/Main/TrashCan/TrashCan.tsx

@@ -0,0 +1,5 @@
+const TrashCan = () => {
+  return <div>TrashCan</div>;
+};
+
+export default TrashCan;