Merge pull request #22 from im-na0/feature/#9

Feat: 직원 리스트 페이지 모달 마크업

src/components/Employee/AddMemberForm.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Divider } from "antd";
+import CustomForm from "../common/CustomForm";
+import CustomUpload from "../common/CustomForm/CustomUpload";
+import { FormInstance } from "antd/es/form/Form";
+import { SELECT_OPTIONS } from "../../constant/member";
+import styled from "styled-components";
+
+const FormContainer = styled.div`
+  padding: 1.2rem;
+`;
+const FormRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+const FormColProfile = styled.div`
+  flex: 0 1;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+const FormColInfo = styled.div`
+  flex: 1;
+`;
+const FormColSelect = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+
+export default function AddMemberForm({ form }: { form: FormInstance }) {
+  const { required, max, pattern } = CustomForm.useValidate();
+
+  return (
+    <FormContainer>
+      <Divider orientation="left">기본 정보</Divider>
+      <FormRow>
+        <FormColProfile>
+          <CustomUpload name="image_url" />
+        </FormColProfile>
+        <FormColInfo>
+          <CustomForm.Input
+            label="이름"
+            name="name"
+            rules={[required(), max(20)]}
+          />
+          <CustomForm.Input label="이메일" name="email" disabled />
+          <CustomForm.Input
+            label="전화"
+            name="phone"
+            rules={[
+              required(),
+              pattern(
+                /^(\d{11}|\d{3}-\d{4}-\d{4})$/,
+                "전화번호는 '-'를 포함해야 합니다.",
+              ),
+            ]}
+          />
+        </FormColInfo>
+
+        <Divider orientation="left">회사 정보</Divider>
+        <FormColSelect>
+          <CustomForm.Select
+            label="부서"
+            name="department"
+            options={SELECT_OPTIONS.department}
+            defaultValue="option"
+            rules={[required()]}
+          />
+          <CustomForm.Select
+            label="직책"
+            name="position"
+            options={SELECT_OPTIONS.position}
+            defaultValue="option"
+            rules={[required()]}
+          />
+          <CustomForm.Select
+            label="권한"
+            name="access"
+            defaultValue="option"
+            options={SELECT_OPTIONS.access}
+          />
+        </FormColSelect>
+      </FormRow>
+    </FormContainer>
+  );
+}

src/components/Employee/AddMemberModal.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Button } from "antd";
+import { UserAddOutlined } from "@ant-design/icons";
+import CustomForm from "../common/CustomForm";
+import AddMemberForm from "./AddMemberForm";
+import styled from "styled-components";
+
+const SumbitBtn = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export default function AddMemberModal({ onCancel }: { onCancel: () => void }) {
+  const Form = CustomForm.Form;
+  const [form] = Form.useForm();
+
+  const handleCancel = () => {
+    onCancel();
+    form.resetFields();
+  };
+
+  return (
+    <Form
+      onFinish={(value) => {
+        console.log(value);
+        handleCancel();
+      }}
+      form={form}
+    >
+      <AddMemberForm form={form} />
+      <SumbitBtn>
+        <Button icon={<UserAddOutlined />} htmlType="submit" type="primary">
+          Add
+        </Button>
+      </SumbitBtn>
+    </Form>
+  );
+}

src/components/Employee/MemberControlMenu.tsx

@@ -0,0 +1,96 @@
+import {
+  ExclamationCircleFilled,
+  PlusOutlined,
+  UserAddOutlined,
+  UserDeleteOutlined,
+} from "@ant-design/icons";
+import React, { ReactNode, useState } from "react";
+import { Button, Dropdown, Modal } from "antd";
+import styled from "styled-components";
+import CustomForm from "../common/CustomForm";
+import AddMemberModal from "./AddMemberModal";
+
+const AddMemberSpan = styled.div`
+  width: 100%;
+`;
+
+const { confirm } = Modal;
+
+const showConfirm = () => {
+  confirm({
+    title: "선택한 멤버를 삭제하시겠습니까?",
+    icon: <ExclamationCircleFilled />,
+    content: "삭제하신 항목은 복구 할 수 없습니다. 😨",
+    centered: true,
+    onOk() {
+      console.log("OK");
+    },
+    onCancel() {
+      console.log("Cancel");
+    },
+  });
+};
+
+export default function MemberControlMenu() {
+  const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태 추가
+  const [modalContent, setModalContent] = useState(null); // 모달 컨텐츠 상태 추가
+
+  const showModal = (content: any) => {
+    setIsModalOpen(true);
+    setModalContent(content);
+  };
+
+  const handleModalCancel = () => {
+    setIsModalOpen(false);
+    setModalContent(null);
+  };
+
+  const items = [
+    {
+      label: (
+        <AddMemberSpan
+          onClick={() =>
+            showModal(<AddMemberModal onCancel={handleModalCancel} />)
+          }
+        >
+          <UserAddOutlined /> Add Member
+        </AddMemberSpan>
+      ),
+      key: "addMember",
+    },
+    {
+      label: (
+        <AddMemberSpan onClick={showConfirm}>
+          <UserDeleteOutlined /> Delete Member
+        </AddMemberSpan>
+      ),
+      key: "addTeam",
+      danger: true,
+    },
+  ];
+
+  return (
+    <>
+      <Dropdown
+        menu={{ items }}
+        autoAdjustOverflow={true}
+        placement="bottomRight"
+        trigger={["click"]}
+      >
+        <Button type="primary" icon={<PlusOutlined />} size="large" />
+      </Dropdown>
+
+      {modalContent && (
+        <CustomForm.Modal
+          title="멤버 등록"
+          width={700}
+          footer={null}
+          open={isModalOpen}
+          onCancel={handleModalCancel}
+        >
+          {modalContent}
+        </CustomForm.Modal>
+      )}
+    </>
+  );
+}

src/components/Employee/CardExportBtn.tsx → src/components/Employee/MemberExportBtn.tsx

@@ -2,7 +2,7 @@ import { CloudDownloadOutlined } from "@ant-design/icons";
 import React from "react";
 import { Button } from "antd";
 
-export default function TableExportBtn() {
+export default function MemberExportBtn() {
   return (
     <Button size="large">
       <CloudDownloadOutlined />

src/components/Employee/CardFilter.tsx → src/components/Employee/MemberFilter.tsx

@@ -42,7 +42,7 @@ const items: MenuProps["items"] = [
   },
 ];
 
-export default function TableFilter() {
+export default function MemberFilter() {
   return (
     <Dropdown
       menu={{ items }}

src/components/Employee/CardHeading.tsx → src/components/Employee/MemberHeading.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Button, Space } from "antd";
+import { Space } from "antd";
 import styled from "styled-components";
-import TableFilter from "./CardFilter";
-import TableSearch from "./CardSearch";
-import TableAddMember from "./CardAddMember";
-import TableExportBtn from "./CardExportBtn";
+import MemberFilter from "./MemberFilter";
+import MemberSearch from "./MemberSearch";
+import MemberControlMenu from "./MemberControlMenu";
+import MemberExportBtn from "./MemberExportBtn";
 
 const CardHeader = styled.div`
   display: flex;
@@ -26,17 +26,17 @@ export default function CardHeading() {
     <CardHeader className="card-header">
       <ToggleWrap>
         <Space direction="vertical">
-          <TableFilter />
+          <MemberFilter />
         </Space>
         <Space direction="vertical">
-          <TableSearch />
+          <MemberSearch />
         </Space>
       </ToggleWrap>
       <ToggleWrap>
-        <TableExportBtn />
+        <MemberExportBtn />
         <Space direction="vertical">
           <Space wrap>
-            <TableAddMember />
+            <MemberControlMenu />
           </Space>
         </Space>
       </ToggleWrap>

src/components/Employee/CardSearch.tsx → src/components/Employee/MemberSearch.tsx

@@ -4,7 +4,7 @@ import { Input } from "antd";
 
 const { Search } = Input;
 
-export default function TableSearch() {
+export default function MemberSearch() {
   return (
     <Search
       placeholder="input search text"

src/components/Employee/CardTable.tsx → src/components/Employee/MemberTable.tsx

@@ -61,7 +61,7 @@ const items: MenuProps["items"] = [
   },
 ];
 
-export default function CardTable() {
+export default function MemberTable() {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
 
   const columns: ColumnsType<DataType> = [

src/components/Timer/TimerApp.tsx

@@ -49,7 +49,7 @@ const TimerApp = () => {
   const [userName, setUserName] = useState<string | null>("");
 
   const UpdateTime = () => {
-    let nowTime = new Date().toLocaleTimeString();
+    const nowTime = new Date().toLocaleTimeString();
     setNowTime(nowTime);
   };