Merge branch 'main' of https://github.com/KWcapstone/client

Author: gusrns48

src/views/meeting/components/SideBar.tsx

@@ -10,6 +10,7 @@ interface SideBarProps {
 
 const SideBar = ({ isSidebarOpen, setIsSidebarOpen }: SideBarProps) => {
   const [isScript, setIsScript] = useState(false);
+  const [isSummary, setIsSummary] = useState(true);
 
   return isSidebarOpen ? (
     <div className="side-bar">
@@ -40,14 +41,20 @@ const SideBar = ({ isSidebarOpen, setIsSidebarOpen }: SideBarProps) => {
       <div className="content-wrap">
         <div className="content-titles">
           <div
-            className={`content-title ${isScript ? "" : "active"}`}
-            onClick={() => setIsScript(!isScript)}
+            className={`content-title ${isSummary ? "active" : ""}`}
+            onClick={() => {
+              setIsScript(false);
+              setIsSummary(true);
+            }}
           >
             실시간 요약
           </div>
           <div
             className={`content-title ${isScript ? "active" : ""}`}
-            onClick={() => setIsScript(!isScript)}
+            onClick={() => {
+              setIsScript(true);
+              setIsSummary(false);
+            }}
           >
             스크립트
           </div>

src/views/meeting/page/MeetingPage.tsx

@@ -18,7 +18,9 @@ const MeetingPage = () => {
       />
 
       <div
-        className="project-content"
+        className={`meeting-page ${
+          isSidebarOpen ? "sidebar-open" : "sidebar-closed"
+        }`}
         style={{
           paddingLeft: isSidebarOpen ? "340px" : "56px", // 동적 패딩
         }}

src/views/meeting/style/header-bar.sass

@@ -8,6 +8,8 @@
   +flex-box(space-between, center)
   +padding(9px 16px)
   +box-sizing(border-box)
+  +size(100%, 60px)
+  position: fixed
 
   border-bottom: 1px solid $gray-100
   background-color: $white

src/views/meeting/style/meeting.sass

@@ -4,7 +4,13 @@
 @import '@/sass/uix/_button.sass'
 
 
-.project-content
-  +size(calc(100vw - 340px), calc(100vh - 60px))
+.meeting-page
   background-color: $gray-50
-  
+
+.sidebar-open
+  +size(calc(100vw - 340px), calc(100vh - 60px))
+  +padding(60px 0 0 340px)
+
+.sidebar-closed
+  +size(calc(100vw - 56px), calc(100vh - 60px))
+  +padding(60px 0 0 56px)

src/views/meeting/style/side-bar.sass

@@ -5,9 +5,11 @@
 
 .side-bar
   +size(340px, calc(100vh - 60px))
+  +margin(60px 0 0 0)
   +box-sizing(border-box)
   +flex-box(flex-start, center, 40px)
   +padding(16px 0)
+  
   flex-direction: column
   border-right: 1px solid $gray-100
   background-color: $white
@@ -140,6 +142,7 @@
   +size(56px, calc(100vh - 60px))
   +box-sizing(border-box)
   +padding(16px)
+  +margin(60px 0 0 0)
   background-color: $white
   border-right: 1px solid $gray-100
   position: fixed