Feat/#219-S : 블록 선택할 수 있는 UI 구현 (#225)

* feat : 블록 선택 아이템 UI 구현

* feat : 블록 선택 UI 구현

* chore : import 순서 자동 반영

* refactor : 코드리뷰 반영

Author: juyeong-s

client/src/components/BlockSelector/BlockItem/index.tsx

@@ -0,0 +1,22 @@
+import style from './style.module.scss';
+
+interface BlockItemProps {
+  name: string;
+  desc: string;
+  thumbnail: string;
+}
+
+function BlockItem({ name, desc, thumbnail }: BlockItemProps) {
+  return (
+    <li className={style['block-item']}>
+      <img src={thumbnail} alt={name + '블록'} />
+
+      <div className={style.text}>
+        <div className={style.name}>{name}</div>
+        <span className={style.desc}>{desc}</span>
+      </div>
+    </li>
+  );
+}
+
+export default BlockItem;

client/src/components/BlockSelector/BlockItem/style.module.scss

@@ -0,0 +1,31 @@
+@import 'styles/color.module';
+
+.block-item {
+  display: flex;
+  margin: 5px;
+  padding: 5px;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $gray-300-transparent;
+  }
+
+  img {
+    width: 46px;
+    height: 46px;
+    background-color: $white;
+    box-shadow: rgb(15 15 15 / 10%) 0px 0px 0px 1px;
+  }
+
+  .text {
+    flex: 1 1 auto;
+    margin-left: 6px;
+    .name {
+      color: $black;
+    }
+    .desc {
+      color: $gray-100;
+    }
+  }
+}

client/src/components/BlockSelector/index.tsx

@@ -0,0 +1,22 @@
+import { BLOCKS_TYPE } from 'src/constants/block';
+
+import BlockItem from './BlockItem';
+import style from './style.module.scss';
+
+function BlockSelector() {
+  return (
+    <div className={style['block-selector']}>
+      <div className={style['block-displayed']}>
+        <strong>블록</strong>
+
+        <ul className={style['block-list']}>
+          {BLOCKS_TYPE.map(({ id, name, desc, thumbnail }) => (
+            <BlockItem key={id} {...{ id, name, desc, thumbnail }} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default BlockSelector;

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

@@ -0,0 +1,26 @@
+@import 'styles/color.module';
+
+.block-selector {
+  height: 100%;
+  overflow: hidden;
+
+  .block-displayed {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    max-height: 280px;
+    padding: 5px;
+    overflow: auto;
+    border-radius: 4px;
+    background-color: $white;
+    box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px,
+      $gray-300-transparent 0px 3px 6px, $gray-300-transparent 0px 9px 24px;
+
+    strong {
+      margin-bottom: 5px;
+      margin-left: 5px;
+      color: $gray-100;
+      font-size: 12px;
+    }
+  }
+}

client/src/components/Workspace/index.tsx

@@ -1,6 +1,6 @@
 import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
-import { useState, useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { getWorkspaceInfo } from 'src/apis/workspace';
 import ConfMediaBar from 'src/components/ConfMediaBar';

client/src/constants/block.ts

@@ -0,0 +1,20 @@
+export const BLOCKS_TYPE = [
+  {
+    id: 1,
+    name: '텍스트',
+    desc: '일반 텍스트',
+    thumbnail: 'https://www.notion.so/images/blocks/text/ko-KR.png',
+  },
+  {
+    id: 2,
+    name: '투표',
+    desc: '투표할 때 사용해보세요',
+    thumbnail: 'https://www.notion.so/images/blocks/embed.6a481331.png',
+  },
+  {
+    id: 3,
+    name: '질문',
+    desc: '질문할 때 사용해보세요',
+    thumbnail: 'https://www.notion.so/images/blocks/to-do.f8d20542.png',
+  },
+];