Feat/#95-K: 회의록 UI (#96)

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

Resolve #93

* refactor: 컴포넌트 분리

Resolve #93

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

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

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

* feat: 회의록 컴포넌트 마크업

- contentEditable 속성의 변경은 input 이벤트로 감지
- 레이아웃 잡기위해 Confbar 컴포넌트도 추가

Resolve #95

* refactor: 태그 시맨틱 수정

회의록 헤더 컨테이너를 div로, 제목을 h1, 인라인 생성시간은 span으로 변경

* refactor: 셀렉터 네이밍 컨벤션에 맞춰 수정

* fix: suppressContentEditableWarning 옵션 추가

- WARNING 띄우는 이유는 리액트에서 컨트롤하지 못하는 변화이기 때문
- e.target.innerText로 값에 접근할 수 있지만 더 React-ish하게 사용하려면 ref를 활용
- state 사용해 controlled로 만들기 위해서는 렌더링 최적화, 제목 부분만 컴포넌트 분리 필요

Author: se030

client/src/components/Confbar/index.tsx

@@ -0,0 +1,5 @@
+function Confbar() {
+  return <div></div>;
+}
+
+export default Confbar;

client/src/components/Mom/index.tsx

@@ -0,0 +1,45 @@
+import style from './style.module.scss';
+
+function Mom() {
+  // context나 props로 가져오기
+  const selectedMom = {
+    id: 1,
+    name: '회의록 1',
+    createdAt: new Date(),
+  };
+
+  /*
+    contentEditable 내용을 컨트롤하고 싶다면 ref 활용해볼 수 있음
+    const titleRef = useRef<HTMLHeadingElement>(null);
+  */
+
+  const onTitleChange: React.FormEventHandler<HTMLHeadingElement> = (e) => {
+    /*
+      제목 변경하는 요청
+      const title = e.target as HTMLHeadingElement;
+      title.innerText
+      OR
+      titleRef.current.innerText
+    */
+  };
+
+  return (
+    <div className={style['mom-container']}>
+      <div className={style['mom']}>
+        <div className={style['mom-header']}>
+          <h1
+            contentEditable={true}
+            suppressContentEditableWarning={true}
+            onInput={onTitleChange}
+          >
+            {selectedMom.name}
+          </h1>
+          <span>{selectedMom.createdAt.toLocaleString()}</span>
+        </div>
+        <div className={style['editor-container']}>회의록 내용</div>
+      </div>
+    </div>
+  );
+}
+
+export default Mom;

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

@@ -0,0 +1,44 @@
+@import 'styles/color.module.scss';
+
+.mom-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100vh;
+  background-color: $off-white;
+}
+
+.mom {
+  position: relative;
+  width: 90%;
+  height: calc(100% - 30px);
+}
+
+.mom-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  height: 70px;
+  padding: 0px 15px 20px 15px;
+  box-sizing: border-box;
+  color: $gray-100;
+
+  & > h1 {
+    font-size: 32px;
+    font-weight: 500;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.editor-container {
+  height: calc(100% - 70px);
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: white;
+}

client/src/components/Sidebar/index.tsx

@@ -6,7 +6,7 @@ import style from './style.module.scss';
 
 function Sidebar() {
   return (
-    <div className={style['sidebar__container']}>
+    <div className={style['sidebar-container']}>
       <div className={style['header']}>
         <h1>왭^^</h1>
         <SettingIcon />

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

@@ -1,6 +1,6 @@
 @import 'styles/color.module.scss';
 
-.sidebar__container {
+.sidebar-container {
   display: flex;
   flex-direction: column;
   align-items: center;

client/src/components/Workspace/index.tsx

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

client/src/components/WorkspaceList/index.tsx

@@ -43,7 +43,7 @@ function WorkspaceList() {
 
   return (
     <SetWorkspacesContext.Provider value={setWorkspaces}>
-      <div className={style.workspace__container}>
+      <div className={style['workspace-list-container']}>
         <WorkspaceThumbnaliList workspaces={workspaces} />
         <Selector
           TriggerElement={AddButton}

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

@@ -1,6 +1,6 @@
 @import 'styles/color.module.scss';
 
-.workspace__container {
+.workspace-list-container {
   position: relative;
 
   background-color: $primary-100;

client/src/styles/color.module.scss

@@ -1,5 +1,6 @@
 $primary-100: #323845;
 $white: #fff;
+$off-white: #f5f5f5;
 $black: #474747;
 $gray-100: #5c5c5c;
 $gray-200: #bbbbbb;