Feat/#93-K: 워크스페이스 사이드바 UI (#94)

* feat: 사이드바 레이아웃 마크업

Resolve #93

* refactor: 컴포넌트 분리

Resolve #93

* style: reset.scss에 box-sizing: border-box 추가

* refactor: 인라인 요소 span 태그로 변경

* refactor: 리스트 요소 ul 태그로 변경

Author: se030

client/src/components/Sidebar/ConfButton.tsx

@@ -0,0 +1,7 @@
+import style from './style.module.scss';
+
+function ConfButton() {
+  return <button className={style['conf-button']}>회의시작</button>;
+}
+
+export default ConfButton;

client/src/components/Sidebar/MemberList.tsx

@@ -0,0 +1,29 @@
+import style from './style.module.scss';
+
+function MemberList() {
+  const members = [
+    {
+      id: 1,
+      name: '백도훈',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/65100540?s=60&v=4',
+    },
+    {
+      id: 2,
+      name: '백도훈',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/65100540?s=60&v=4',
+    },
+  ];
+
+  return (
+    <ul className={style['member-list']}>
+      {members.map((item) => (
+        <li key={item.id} className={style['member-item']}>
+          <img src={item.avatarUrl} />
+          <span>{item.name}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default MemberList;

client/src/components/Sidebar/MomList.tsx

@@ -0,0 +1,23 @@
+import style from './style.module.scss';
+
+function MomList() {
+  const moms = [
+    { id: 1, name: '회의록 1' },
+    { id: 2, name: '회의록 2' },
+    { id: 3, name: '회의록 3' },
+  ];
+
+  return (
+    <div className={style['mom-list-container']}>
+      <h2>회의록</h2>
+      <ul className={style['mom-list']}>
+        {moms.map((item) => (
+          <li key={item.id}>{item.name}</li>
+        ))}
+      </ul>
+      <button>+ 회의록 추가</button>
+    </div>
+  );
+}
+
+export default MomList;

client/src/components/Sidebar/SettingIcon.tsx

@@ -0,0 +1,26 @@
+import { MdSettings } from '@react-icons/all-files/md/MdSettings';
+import WorkspaceSettingModal from 'components/WorkspaceSettingModal';
+import { useState } from 'react';
+
+function SettingIcon() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <MdSettings size={15} onClick={onOpen} />
+      {isOpen && (
+        <WorkspaceSettingModal title="워크스페이스 설정" onClose={onClose} />
+      )}
+    </>
+  );
+}
+
+export default SettingIcon;

client/src/components/Sidebar/index.tsx

@@ -0,0 +1,21 @@
+import ConfButton from './ConfButton';
+import MemberList from './MemberList';
+import MomList from './MomList';
+import SettingIcon from './SettingIcon';
+import style from './style.module.scss';
+
+function Sidebar() {
+  return (
+    <div className={style['sidebar__container']}>
+      <div className={style['header']}>
+        <h1>왭^^</h1>
+        <SettingIcon />
+      </div>
+      <MemberList />
+      <MomList />
+      <ConfButton />
+    </div>
+  );
+}
+
+export default Sidebar;

client/src/components/Sidebar/style.module.scss

@@ -0,0 +1,97 @@
+@import 'styles/color.module.scss';
+
+.sidebar__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 252px;
+  height: 100vh;
+}
+
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 25px;
+}
+
+.header {
+  @include container;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 72px;
+  border-bottom: 1px solid $gray-300;
+
+  & > h1 {
+    color: $black;
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+.member-list {
+  @include container;
+  border-bottom: 1px solid $gray-300;
+}
+
+.member-item {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+
+  & > img {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+  }
+
+  & > p {
+    color: $black;
+  }
+}
+
+.mom-list-container {
+  @include container;
+
+  & > h2 {
+    font-size: 18px;
+    font-weight: 500;
+    color: $black;
+  }
+
+  & > button {
+    font-size: 16px;
+    text-align: start;
+    color: $gray-100;
+  }
+}
+
+.mom-list {
+  font-size: 16px;
+  color: $gray-100;
+
+  & > li {
+    margin-top: 15px;
+  }
+
+  & > li:first-child {
+    margin-top: 0px;
+  }
+}
+
+.conf-button {
+  position: absolute;
+  bottom: 20px;
+  width: 80px;
+  height: 25px;
+  border-radius: 13px;
+  background-color: $green;
+  color: $white;
+}

client/src/components/Workspace/index.tsx

@@ -0,0 +1,16 @@
+import Sidebar from 'components/Sidebar';
+
+function Workspace() {
+  return (
+    <>
+      <Sidebar />
+      <div>
+        {
+          // 회의록과 화상회의 관련 컴포넌트
+        }
+      </div>
+    </>
+  );
+}
+
+export default Workspace;

client/src/components/WorkspaceSetting/index.tsx

@@ -1,17 +1,16 @@
 import { BiCodeBlock } from '@react-icons/all-files/bi/BiCodeBlock';
 import { BiCopy } from '@react-icons/all-files/bi/BiCopy';
-import React from 'react';
 
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import style from './style.module.scss';
 
-interface SettingModalProps {
+interface WorkspaceSettingModalProps {
   title: string;
   onClose: () => void;
 }
 
-function SettingModal({ title, onClose }: SettingModalProps) {
+function WorkspaceSettingModal({ title, onClose }: WorkspaceSettingModalProps) {
   const code = '1234';
 
   const onClick = () => {
@@ -45,4 +44,4 @@ function SettingModal({ title, onClose }: SettingModalProps) {
   );
 }
 
-export default SettingModal;
+export default WorkspaceSettingModal;