Merge pull request #44 from boostcampwm-2022/feat/#43-S

Feat/#43-S : 생성완료 모달 기능 구현

Author: juyeong-s

client/src/components/WorkspaceModal/index.tsx

@@ -1,23 +1,30 @@
+import { BiCopy } from '@react-icons/all-files/bi/BiCopy';
+import cx from 'classnames';
+
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import style from './style.module.scss';
 
 interface WorkspaceModalProps {
   title: string;
-  text: string;
+  texts: string[];
   btnText: string;
   inputValue: string;
   onChange?: (value: string) => void;
   onClose: () => void;
+  onClick: () => void;
+  isInputDisabled: boolean;
 }
 
 function WorkspaceModal({
   title,
-  text,
+  texts,
   btnText,
   inputValue,
   onChange,
   onClose,
+  onClick,
+  isInputDisabled,
 }: WorkspaceModalProps) {
   const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange) onChange(e.target.value);
@@ -26,9 +33,28 @@ function WorkspaceModal({
   return (
     <Modal title={title} onClose={onClose}>
       <>
-        <span className={style.text}>{text}</span>
-        <input className={style.input} type="text" onChange={onInput} />
-        <Button text={btnText} isDisabled={!inputValue.length} />
+        {texts.map((text) => (
+          <p key={text} className={style.text}>
+            {text}
+          </p>
+        ))}
+
+        <div className={style['input-section']}>
+          {isInputDisabled && <BiCopy className={style['copy-icon']} />}
+          <input
+            className={cx(style.input, { [style.disabled]: isInputDisabled })}
+            type="text"
+            value={inputValue}
+            onChange={onInput}
+            disabled={isInputDisabled}
+          />
+        </div>
+
+        <Button
+          text={btnText}
+          isDisabled={!inputValue.length}
+          onClick={onClick}
+        />
       </>
     </Modal>
   );

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

@@ -3,11 +3,29 @@
 .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;
+
+.input-section {
+  position: relative;
+  width: 100%;
+  text-align: center;
+
+  .copy-icon {
+    position: absolute;
+    top: 20px;
+    right: 42px;
+    cursor: pointer;
+  }
+
+  .input {
+    width: calc(100% - 6rem);
+    border: 1px solid $gray-100;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 14px;
+    margin: 15px 0;
+  }
+}
+
+.disabled {
+  text-align: center;
 }

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

@@ -11,6 +11,7 @@ interface ButtonProps {
   className?: string;
   isDisabled?: boolean;
   color?: string;
+  onClick?: () => void;
 }
 
 function Button({
@@ -20,16 +21,22 @@ function Button({
   className,
   isDisabled = false,
   color,
+  onClick,
 }: ButtonProps) {
+  const onClickBtn = () => {
+    if (onClick) onClick();
+  };
+
   return href ? (
     <a href={href} className={cx(style.button, className)}>
       {icon}
       <span>{text}</span>
     </a>
   ) : (
     <button
-      className={cx(style.button, className)}
+      className={cx(style.button, className, { disable: isDisabled })}
       disabled={isDisabled}
+      onClick={onClickBtn}
       style={{ backgroundColor: color }}
     >
       {icon}

client/src/constants/workspace.ts

@@ -1,23 +1,43 @@
+export const MENU = {
+  CREATE_ID: 1,
+  JOIN_ID: 2,
+  JOIN_SUCCESS_ID: 3,
+};
+Object.freeze(MENU);
+
 export const MENUS = [
   { id: 1, text: '생성하기' },
   { id: 2, text: '참여하기' },
 ];
+Object.freeze(MENUS);
 
 export const MODAL_MENUS = [
   {
     id: 1,
     props: {
       title: '워크스페이스 생성',
-      text: '워크스페이스 이름을 입력해주세요.',
+      texts: ['워크스페이스 이름을 입력해주세요.'],
       btnText: '생성하기',
     },
   },
   {
     id: 2,
     props: {
       title: '워크스페이스 참여',
-      text: '워크스페이스 코드를 입력해주세요.',
+      texts: ['워크스페이스 코드를 입력해주세요.'],
       btnText: '참여하기',
     },
   },
+  {
+    id: 3,
+    props: {
+      title: '워크스페이스 생성 완료',
+      texts: [
+        '워크스페이스가 생성되었습니다.',
+        ' 멤버들에게 참여 코드를 공유해보세요.',
+      ],
+      btnText: '확인',
+    },
+  },
 ];
+Object.freeze(MODAL_MENUS);

client/src/pages/Workspace/index.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import SelcetModal from 'src/components/SelectModal';
 import WorkspaceList from 'src/components/WorkspaceList';
 import WorkspaceModal from 'src/components/WorkspaceModal';
-import { MENUS, MODAL_MENUS } from 'src/constants/workspace';
+import { MENU, MENUS, MODAL_MENUS } from 'src/constants/workspace';
 
 import style from './style.module.scss';
 
@@ -19,6 +19,20 @@ function WorkspacePage() {
     setClickedMenuId(id);
   };
 
+  const onClickBtn = () => {
+    if (clickedMenuId === MENU.CREATE_ID) {
+      // 생성 완료 후 로직
+      setClickedMenuId(MENU.JOIN_SUCCESS_ID);
+      setInputValue('WAB123456'); // TODO: 받아온 참여코드 넣어줄 것
+    } else if (clickedMenuId === MENU.JOIN_ID) {
+      // 참여 완료 후 로직
+    }
+  };
+
+  useEffect(() => {
+    if (clickedMenuId !== 3) setInputValue('');
+  }, [clickedMenuId]);
+
   return (
     <div className={style.container}>
       <WorkspaceList onSelectModalOpen={() => setIsOpenSelectModal(true)} />
@@ -37,15 +51,17 @@ function WorkspacePage() {
         </SelcetModal>
       )}
 
-      {MODAL_MENUS.map(({ id, props: { title, text, btnText } }) => {
+      {MODAL_MENUS.map(({ id, props: { title, texts, btnText } }) => {
         if (id === clickedMenuId)
           return (
             <WorkspaceModal
               key={id}
-              {...{ title, text, btnText }}
+              {...{ title, texts, btnText }}
               inputValue={inputValue}
               onChange={onInput}
               onClose={() => setClickedMenuId(0)}
+              onClick={onClickBtn}
+              isInputDisabled={clickedMenuId === MENU.JOIN_SUCCESS_ID}
             />
           );
       })}