From d79c0a8e11f93205f1eacae5d7b895d5aca34839 Mon Sep 17 00:00:00 2001 From: imnayoung Date: Thu, 14 Sep 2023 00:29:38 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=A7=81=EC=9B=90=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Employee/AddMemberForm.tsx | 89 +++++++++++++ src/components/Employee/AddMemberModal.tsx | 38 ++++++ src/components/Employee/CardAddMember.tsx | 28 ---- src/components/Employee/MemberControlMenu.tsx | 96 ++++++++++++++ ...{CardExportBtn.tsx => MemberExportBtn.tsx} | 2 +- .../{CardFilter.tsx => MemberFilter.tsx} | 2 +- .../{CardHeading.tsx => MemberHeading.tsx} | 18 +-- .../{CardSearch.tsx => MemberSearch.tsx} | 2 +- .../{CardTable.tsx => MemberTable.tsx} | 2 +- .../{signin => Signin}/SignInEmail.tsx | 0 .../{signin => Signin}/SignInGoogle.tsx | 0 src/components/Timer/TimerApp.tsx | 2 +- .../common/CustomForm/CustomUpload.tsx | 64 +++++++++ src/components/common/CustomForm/index.tsx | 121 ++++++++++++++++++ src/constant/member.tsx | 17 +++ src/layouts/Header.tsx | 2 +- src/pages/Employee.tsx | 20 +-- src/pages/SignIn.tsx | 4 +- src/pages/SignUp.tsx | 2 +- 19 files changed, 453 insertions(+), 56 deletions(-) create mode 100644 src/components/Employee/AddMemberForm.tsx create mode 100644 src/components/Employee/AddMemberModal.tsx delete mode 100644 src/components/Employee/CardAddMember.tsx create mode 100644 src/components/Employee/MemberControlMenu.tsx rename src/components/Employee/{CardExportBtn.tsx => MemberExportBtn.tsx} (84%) rename src/components/Employee/{CardFilter.tsx => MemberFilter.tsx} (96%) rename src/components/Employee/{CardHeading.tsx => MemberHeading.tsx} (68%) rename src/components/Employee/{CardSearch.tsx => MemberSearch.tsx} (84%) rename src/components/Employee/{CardTable.tsx => MemberTable.tsx} (99%) rename src/components/{signin => Signin}/SignInEmail.tsx (100%) rename src/components/{signin => Signin}/SignInGoogle.tsx (100%) create mode 100644 src/components/common/CustomForm/CustomUpload.tsx create mode 100644 src/components/common/CustomForm/index.tsx create mode 100644 src/constant/member.tsx diff --git a/src/components/Employee/AddMemberForm.tsx b/src/components/Employee/AddMemberForm.tsx new file mode 100644 index 00000000..6e98d713 --- /dev/null +++ b/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 ( + + 기본 정보 + + + + + + + + + + + 회사 정보 + + + + + + + + ); +} diff --git a/src/components/Employee/AddMemberModal.tsx b/src/components/Employee/AddMemberModal.tsx new file mode 100644 index 00000000..0e9c7259 --- /dev/null +++ b/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 ( +
{ + console.log(value); + handleCancel(); + }} + form={form} + > + + + + + + ); +} diff --git a/src/components/Employee/CardAddMember.tsx b/src/components/Employee/CardAddMember.tsx deleted file mode 100644 index 4b9cfd2a..00000000 --- a/src/components/Employee/CardAddMember.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { PlusOutlined } from "@ant-design/icons"; -import React from "react"; -import { Button, Dropdown } from "antd"; -import type { MenuProps } from "antd"; - -const items: MenuProps["items"] = [ - { - label: "Add Member", - key: "addMember", - }, - { - label: "Add Team", - key: "addTeam", - }, -]; - -export default function TableAddMember() { - return ( - -
  • - + 로그인
    • diff --git a/src/pages/Employee.tsx b/src/pages/Employee.tsx index f2b33125..95ba6aa1 100644 --- a/src/pages/Employee.tsx +++ b/src/pages/Employee.tsx @@ -1,10 +1,10 @@ import React from "react"; import styled from "styled-components"; -import CardTable from "../components/Employee/CardTable"; -import CardHeading from "../components/Employee/CardHeading"; +import MemberTable from "../components/Employee/MemberTable"; +import MemberHeading from "../components/Employee/MemberHeading"; -export const Container = styled.div` +const Container = styled.div` max-width: 100%; margin: 0 auto; padding: 0 1rem; @@ -30,11 +30,11 @@ const Header = styled.div` font-weight: bold; `; -const CarContainer = styled.div` +const CardContainer = styled.div` background-color: #fff; border-radius: 8px; color: #526484; - box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 5px 0px; + box-shadow: rgba(99, 99, 99, 0.2) 0 0 5px 0; word-wrap: break-word; `; @@ -42,17 +42,17 @@ const Employee = () => { return (
    -

    임직원

    +

    직원 정보

    - +
    - +
    - +
    -     +     ); }; diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index d6654575..47318de3 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -1,9 +1,9 @@ import { GoogleOutlined, MailOutlined } from "@ant-design/icons"; import React, { useState } from "react"; import { styled } from "styled-components"; -import SignInEmailModal from "../components/SignIn/SignInEmail"; +import SignInEmailModal from "../components/Signin/SignInEmail"; import { Modal } from "antd"; -import signInGoogle from "../components/SignIn/SignInGoogle"; +import signInGoogle from "../components/Signin/SignInGoogle"; import { Link } from "react-router-dom"; import { MainTitle } from "../components/SignUp/Title"; const Container = styled.div` diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 40e5143d..2f7e243f 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -2,7 +2,7 @@ import { GoogleOutlined, MailOutlined } from "@ant-design/icons"; import React, { useState } from "react"; import { styled } from "styled-components"; import { Modal } from "antd"; -import signInGoogle from "../components/SignIn/SignInGoogle"; +import signInGoogle from "../components/Signin/SignInGoogle"; import { Link } from "react-router-dom"; import SignUpEmailModal from "../components/SignUp/SignUpEmail"; import { MainTitle } from "../components/SignUp/Title";