feat: DefaultMom 컴포넌트 구현 (#210)

Author: dohun31

client/src/components/Mom/DefaultMom.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import GuideIcon from 'src/components/common/GuideIcon';
+import AmazedWabIcon from 'src/components/common/Icon/Wab/AmazedWabIcon';
+
+import style from './style.module.scss';
+
+function DefaultMom() {
+  return (
+    <div className={style['default-container']}>
+      <AmazedWabIcon />
+      <h1 className={style.message}>회의록이 텅텅 비었어요.</h1>
+      <GuideIcon>
+        <p>
+          사이드바에서 <span className={style.highlight}>+ 회의록 추가</span>{' '}
+          버튼을 클릭해 회의록을 추가해 보세요!
+        </p>
+      </GuideIcon>
+    </div>
+  );
+}
+
+export default DefaultMom;

client/src/components/Mom/index.tsx

@@ -7,6 +7,7 @@ import useSocketContext from 'src/hooks/useSocketContext';
 import { v4 as uuid } from 'uuid';
 
 import Block from './Block';
+import DefaultMom from './DefaultMom';
 import ee from './EventEmitter';
 import style from './style.module.scss';
 
@@ -126,33 +127,29 @@ function Mom() {
     };
   }, []);
 
-  return (
+  return selectedMom ? (
     <div className={style['mom-container']}>
       <div className={style['mom']}>
-        {selectedMom ? (
-          <>
-            <div className={style['mom-header']}>
-              <h1
-                ref={titleRef}
-                contentEditable={true}
-                suppressContentEditableWarning={true}
-                onInput={onTitleUpdate}
-              >
-                {selectedMom.title}
-              </h1>
-              <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
-            </div>
-            <div className={style['mom-body']}>
-              {blocks.map((id, index) => (
-                <Block key={id} id={id} index={index} onKeyDown={onKeyDown} />
-              ))}
-            </div>
-          </>
-        ) : (
-          <h1>아직 회의록이 없어요. 만들어 보세요^^</h1>
-        )}
+        <div className={style['mom-header']}>
+          <h1
+            ref={titleRef}
+            contentEditable={true}
+            suppressContentEditableWarning={true}
+            onInput={onTitleUpdate}
+          >
+            {selectedMom.title}
+          </h1>
+          <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
+        </div>
+        <div className={style['mom-body']}>
+          {blocks.map((id, index) => (
+            <Block key={id} id={id} index={index} onKeyDown={onKeyDown} />
+          ))}
+        </div>
       </div>
     </div>
+  ) : (
+    <DefaultMom />
   );
 }
 

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

@@ -47,3 +47,31 @@
     outline: none;
   }
 }
+
+.default-container {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: $off-white;
+
+  .message {
+    margin: 20px;
+    color: $primary-100;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .highlight {
+    margin: 0px 2px;
+
+    padding: 0px 5px;
+    border-radius: 12px;
+    background-color: $off-white;
+
+    color: $primary-100;
+    font-weight: 700;
+  }
+}

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

@@ -1,7 +1,6 @@
 @import 'styles/color.module';
 
 .container {
-
   display: flex;
   position: relative;
   flex-direction: column;
@@ -11,7 +10,6 @@
   width: 100%;
 
   .message {
-
     margin: 20px;
     color: $primary-100;
     font-size: 20px;