Merge pull request #40 from boostcampwm-2022/feat/#26-S

Feat/#26-S : 생성/참여 모달 UI 구현 & 모달 Open/Close 기능 구현

Author: juyeong-s

client/src/components/SelectModal/index.tsx

@@ -0,0 +1,36 @@
+import cx from 'classnames';
+import Portal from 'src/components/Portal';
+
+import style from './style.module.scss';
+
+interface SelcetModalProps {
+  children: JSX.Element;
+  className?: string;
+  onClose: () => void;
+}
+
+function SelcetModal({ children, className, onClose }: SelcetModalProps) {
+  const onClickCloseBtn = () => {
+    onClose();
+  };
+
+  return (
+    <Portal>
+      <div
+        className={style.modal}
+        role="alertdialog"
+        aria-modal
+        aria-labelledby="modal"
+      >
+        <div className={cx(style.container, className)}>{children}</div>
+        <div
+          className={style.dimmer}
+          onClick={onClickCloseBtn}
+          tabIndex={0}
+        ></div>
+      </div>
+    </Portal>
+  );
+}
+
+export default SelcetModal;

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

@@ -0,0 +1,37 @@
+@import 'style/color.scss';
+
+.modal {
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: fit-content;
+    height: fit-content;
+
+    border-radius: 10px;
+    background-color: $primary-100;
+    padding: 20px;
+    color: $white;
+    font-size: 14px;
+    margin: auto;
+  }
+  .dimmer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: $modalBackground;
+  }
+}

client/src/components/WorkspaceList/AddButton.tsx

@@ -1,13 +1,21 @@
-import { MdAdd } from "@react-icons/all-files/md/MdAdd";
-import React from "react";
+import { MdAdd } from '@react-icons/all-files/md/MdAdd';
+import React from 'react';
 
-import style from "./style.module.scss";
+import style from './style.module.scss';
+
+interface AddButtonProps {
+  onClick: () => void;
+}
+
+function AddButton({ onClick }: AddButtonProps) {
+  const onClickBtn = () => {
+    onClick();
+  };
 
-function AddButton() {
   return (
-    <div className={style.button}>
+    <button className={style.button} onClick={onClickBtn}>
       <MdAdd color="white" size={20} />
-    </div>
+    </button>
   );
 }
 

client/src/components/WorkspaceList/WorkspaceThumbnailItem.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { memo } from 'react';
 
-import style from "./style.module.scss";
+import style from './style.module.scss';
 
 interface WorkspaceThumbnailItemProps {
   name: string;
@@ -21,4 +21,4 @@ function WorkspaceThumbnailItem({ name }: WorkspaceThumbnailItemProps) {
   );
 }
 
-export default WorkspaceThumbnailItem;
+export default memo(WorkspaceThumbnailItem);

client/src/components/WorkspaceList/WorkspaceThumbnailList.tsx

@@ -1,13 +1,11 @@
-import React from "react";
-
-import style from "./style.module.scss";
-import WorkspaceThumbnailItem from "./WorkspaceThumbnailItem";
+import style from './style.module.scss';
+import WorkspaceThumbnailItem from './WorkspaceThumbnailItem';
 
 const workspaces = [
-  { id: 1, name: "왭" },
-  { id: 2, name: "네이버" },
-  { id: 3, name: "카카오" },
-  { id: 4, name: "토스" },
+  { id: 1, name: '왭' },
+  { id: 2, name: '네이버' },
+  { id: 3, name: '카카오' },
+  { id: 4, name: '토스' },
 ];
 
 function WorkspaceThumbnailList() {

client/src/components/WorkspaceList/index.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import { memo } from 'react';
 
-import AddButton from "./AddButton";
-import style from "./style.module.scss";
-import WorkspaceThumbnaliList from "./WorkspaceThumbnailList";
+import AddButton from './AddButton';
+import style from './style.module.scss';
+import WorkspaceThumbnaliList from './WorkspaceThumbnailList';
 
-function WorkspaceList() {
+interface WorkspaceListProps {
+  onSelectModalOpen: () => void;
+}
+
+function WorkspaceList({ onSelectModalOpen }: WorkspaceListProps) {
   return (
     <div className={style.workspace__container}>
       <WorkspaceThumbnaliList />
-      <AddButton />
+      <AddButton onClick={onSelectModalOpen} />
     </div>
   );
 }
 
-export default WorkspaceList;
+export default memo(WorkspaceList);

client/src/components/WorkspaceModal/index.tsx

@@ -0,0 +1,37 @@
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import style from './style.module.scss';
+
+interface WorkspaceModalProps {
+  title: string;
+  text: string;
+  btnText: string;
+  inputValue: string;
+  onChange?: (value: string) => void;
+  onClose: () => void;
+}
+
+function WorkspaceModal({
+  title,
+  text,
+  btnText,
+  inputValue,
+  onChange,
+  onClose,
+}: WorkspaceModalProps) {
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) onChange(e.target.value);
+  };
+
+  return (
+    <Modal title={title} onClose={onClose}>
+      <>
+        <span className={style.text}>{text}</span>
+        <input className={style.input} type="text" onChange={onInput} />
+        <Button text={btnText} isDisable={!inputValue.length} />
+      </>
+    </Modal>
+  );
+}
+
+export default WorkspaceModal;

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

@@ -0,0 +1,13 @@
+@import 'style/color.scss';
+
+.text {
+  font-size: 14px;
+}
+.input {
+  width: calc(100% - 6rem);
+  border: 1px solid $gray-100;
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 14px;
+  margin: 15px 0;
+}

client/src/components/common/Button/index.tsx

@@ -1,18 +1,31 @@
-import cx from "classnames";
+import classNames from 'classnames/bind';
 
-import style from "./style.module.scss";
+import style from './style.module.scss';
+
+const cx = classNames.bind(style);
 
 interface ButtonProps {
   text: string;
   icon?: JSX.Element;
   className?: string;
+  isDisable?: boolean;
+  color?: string;
 }
 
-function Button({ text, icon, className }: ButtonProps) {
+function Button({
+  text,
+  icon,
+  className,
+  isDisable = false,
+  color,
+}: ButtonProps) {
   return (
-    <div className={cx(style.button, className)}>
+    <div
+      className={cx(style.button, className, { disable: isDisable })}
+      style={{ backgroundColor: color }}
+    >
       {icon}
-      <button>{text}</button>
+      <button disabled={isDisable}>{text}</button>
     </div>
   );
 }

client/src/components/common/Button/style.module.scss

@@ -1,4 +1,4 @@
-@import "style/color.scss";
+@import 'style/color.scss';
 
 .button {
   width: fit-content;
@@ -15,3 +15,7 @@
     font-weight: 700;
   }
 }
+
+.disable {
+  background-color: $gray-300;
+}