From a8db2bb05ded2c61de9e869115f29dccfe6b5339 Mon Sep 17 00:00:00 2001 From: imnayoung Date: Tue, 12 Sep 2023 12:17:45 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20=EC=A7=81=EC=9B=90=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 5 + .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/jsLinters/eslint.xml | 7 + .idea/modules.xml | 8 + .idea/prettier.xml | 7 + .idea/vcs.xml | 6 + .idea/wiki.iml | 12 ++ package-lock.json | 13 ++ package.json | 2 + src/components/Employee/CardAddMember.tsx | 28 +++ src/components/Employee/CardExportBtn.tsx | 12 ++ src/components/Employee/CardFilter.tsx | 59 ++++++ src/components/Employee/CardHeading.tsx | 45 +++++ src/components/Employee/CardSearch.tsx | 16 ++ src/components/Employee/CardTable.tsx | 186 +++++++++++++++++++ src/pages/Employee.tsx | 55 +++++- 16 files changed, 466 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/jsLinters/eslint.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/prettier.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/wiki.iml create mode 100644 src/components/Employee/CardAddMember.tsx create mode 100644 src/components/Employee/CardExportBtn.tsx create mode 100644 src/components/Employee/CardFilter.tsx create mode 100644 src/components/Employee/CardHeading.tsx create mode 100644 src/components/Employee/CardSearch.tsx create mode 100644 src/components/Employee/CardTable.tsx diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..a6d42278 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# 디폴트 무시된 파일 +/shelf/ +/workspace.xml +# 에디터 기반 HTTP 클라이언트 요청 +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 00000000..03d9549e --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml new file mode 100644 index 00000000..66d9454f --- /dev/null +++ b/.idea/jsLinters/eslint.xml @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..90a5036a --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 00000000..5968543a --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/wiki.iml b/.idea/wiki.iml new file mode 100644 index 00000000..24643cc3 --- /dev/null +++ b/.idea/wiki.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2dab3ba0..8db8942c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "wiki", "version": "0.1.0", "dependencies": { + "@ant-design/icons": "^5.2.6", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -31,6 +32,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/styled-components": "^5.1.27", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", @@ -5272,6 +5274,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.27", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.27.tgz", + "integrity": "sha512-oY9c1SdztRRF0QDQdwXEenfAjGN4WGUkaMpx5hvdTbYYqw01qoY2GrHi+kAR6SVofynzD6KbGoF5ITP0zh5pvg==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", diff --git a/package.json b/package.json index 1b50b898..1e093835 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@ant-design/icons": "^5.2.6", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -50,6 +51,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/styled-components": "^5.1.27", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", diff --git a/src/components/Employee/CardAddMember.tsx b/src/components/Employee/CardAddMember.tsx new file mode 100644 index 00000000..4b9cfd2a --- /dev/null +++ b/src/components/Employee/CardAddMember.tsx @@ -0,0 +1,28 @@ +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/components/Employee/CardFilter.tsx b/src/components/Employee/CardFilter.tsx new file mode 100644 index 00000000..01cf7356 --- /dev/null +++ b/src/components/Employee/CardFilter.tsx @@ -0,0 +1,59 @@ +import { FilterFilled } from "@ant-design/icons"; +import React from "react"; +import { Button, Dropdown } from "antd"; +import type { MenuProps } from "antd"; + +const items: MenuProps["items"] = [ + { + type: "group", + label: "SORT BY:", + children: [ + { + label: "default", + key: "sortDefault", + }, + { + label: "Name", + key: "sortName", + }, + { + label: "Team", + key: "sortTeam", + }, + ], + }, + { + type: "group", + label: "MEMBERS:", + children: [ + { + label: "All", + key: "membersAll", + }, + { + label: "Manager", + key: "membersManager", + }, + { + label: "Member", + key: "membersMember", + }, + ], + }, +]; + +export default function TableFilter() { + return ( + + + + ); +} diff --git a/src/components/Employee/CardHeading.tsx b/src/components/Employee/CardHeading.tsx new file mode 100644 index 00000000..afedbcba --- /dev/null +++ b/src/components/Employee/CardHeading.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { Button, Space } from "antd"; +import styled from "styled-components"; +import TableFilter from "./CardFilter"; +import TableSearch from "./CardSearch"; +import TableAddMember from "./CardAddMember"; +import TableExportBtn from "./CardExportBtn"; + +const CardHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding: 1.5rem; +`; + +const ToggleWrap = styled.div` + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: center; +`; + +export default function CardHeading() { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/Employee/CardSearch.tsx b/src/components/Employee/CardSearch.tsx new file mode 100644 index 00000000..7786882d --- /dev/null +++ b/src/components/Employee/CardSearch.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +import { Input } from "antd"; + +const { Search } = Input; + +export default function TableSearch() { + return ( + + ); +} diff --git a/src/components/Employee/CardTable.tsx b/src/components/Employee/CardTable.tsx new file mode 100644 index 00000000..46546a6f --- /dev/null +++ b/src/components/Employee/CardTable.tsx @@ -0,0 +1,186 @@ +import { EllipsisOutlined } from "@ant-design/icons"; +import React, { useState } from "react"; +import { Col, Row, Table, Dropdown } from "antd"; +import type { ColumnsType } from "antd/es/table"; +import type { MenuProps } from "antd"; + +import styled from "styled-components"; + +interface DataType { + key: React.Key; + name: string; + department: string; + position: string; + phone: string; + address: string; + team: string; + profile: string; + accessLevel: string; +} + +const Image = styled.span` + display: block; + width: 50px; + height: 50px; + border-radius: 50%; + overflow: hidden; + & > img { + width: 100%; + } +`; +const Btn = styled.a` + display: block; + padding: 0.3rem; +`; + +const items: MenuProps["items"] = [ + { + key: "1", + label: ( + + Edit + + ), + }, + { + key: "2", + label: ( + + View Profile + + ), + }, + { + key: "3", + label: ( + + Delete + + ), + danger: true, + }, +]; + +export default function CardTable() { + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + + const columns: ColumnsType = [ + { + title: "Name", + render: (record) => ( + + + {" "} + + {record.name} + {" "} + + + {" "} +
{record.name}
+
{record.address}
+ + + ), + }, + { + title: "Department", + render: (record) => ( + + +
{record.department}
+
{record.position}
+ + + ), + }, + { + title: "Team", + dataIndex: "team", + }, + { + title: "Phone", + dataIndex: "phone", + }, + { + title: "AccessLevel", + dataIndex: "accessLevel", + }, + { + title: , + dataIndex: "", + render: () => ( + + + e.preventDefault()}> + + + + + ), + }, + ]; + + const dataSource: DataType[] = [ + { + key: "1", + name: "박나영", + department: "Information Technology", + position: "Front-end Developer", + phone: "010-5555-5555", + address: "myemail@example.com", + team: "이정도면 껌이조", + profile: + "https://deploy-preview-66--effulgent-axolotl-ab38e8.netlify.app/asset/member1.png", + accessLevel: "Member", + }, + { + key: "2", + name: "김땡땡", + department: "Information Technology", + position: "Back-end Developer", + phone: "010-5555-5555", + address: "myemail@example.com", + team: "가보자고", + profile: + "https://deploy-preview-66--effulgent-axolotl-ab38e8.netlify.app/asset/member2.png", + accessLevel: "Member", + }, + { + key: "3", + name: "이땡땡", + department: "Information Technology", + position: "Front-end Developer", + phone: "010-5555-5555", + address: "myemail@example.com", + team: "가보자고", + profile: + "https://deploy-preview-66--effulgent-axolotl-ab38e8.netlify.app/asset/member3.png", + accessLevel: "Manager", + }, + ]; + const rowSelection = { + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + console.log( + `selectedRowKeys: ${selectedRowKeys}`, + "selectedRows: ", + selectedRows, + ); + }, + }; + + return ( + <> + + + ); +} diff --git a/src/pages/Employee.tsx b/src/pages/Employee.tsx index 71d0e905..f2b33125 100644 --- a/src/pages/Employee.tsx +++ b/src/pages/Employee.tsx @@ -1,7 +1,60 @@ import React from "react"; +import styled from "styled-components"; + +import CardTable from "../components/Employee/CardTable"; +import CardHeading from "../components/Employee/CardHeading"; + +export const Container = styled.div` + max-width: 100%; + margin: 0 auto; + padding: 0 1rem; + + @media (min-width: 576px) { + max-width: 576px; + } + + @media (min-width: 768px) { + max-width: 768px; + } + + @media (min-width: 992px) { + max-width: 992px; + } + + @media (min-width: 1200px) { + max-width: 1200px; + } +`; +const Header = styled.div` + font-size: 1.5rem; + font-weight: bold; +`; + +const CarContainer = styled.div` + background-color: #fff; + border-radius: 8px; + color: #526484; + box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 5px 0px; + word-wrap: break-word; +`; const Employee = () => { - return
Employee
; + return ( + +
+

임직원

+
+ +
+ +
+
+ +
+
+ + + ); }; export default Employee; From bc2bc5d8754c0332556b775bbc6f010de722b0c9 Mon Sep 17 00:00:00 2001 From: skyeome Date: Tue, 12 Sep 2023 14:14:17 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=ED=91=B8?= =?UTF-8?q?=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/fe3-wiki-logo.png | Bin 0 -> 4852 bytes src/layouts/Footer.tsx | 18 +++++++++++- src/layouts/Header.tsx | 60 ++++++++++++++++++++++++++++++++++++++- src/styles/Footer.css | 9 ++++++ src/styles/Header.css | 56 ++++++++++++++++++++++++++++++++++++ 5 files changed, 141 insertions(+), 2 deletions(-) create mode 100755 public/fe3-wiki-logo.png create mode 100644 src/styles/Footer.css create mode 100644 src/styles/Header.css diff --git a/public/fe3-wiki-logo.png b/public/fe3-wiki-logo.png new file mode 100755 index 0000000000000000000000000000000000000000..c721e2b91ea8fab6e24c94a7ee82fe619a37201e GIT binary patch literal 4852 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 literal 0 HcmV?d00001 diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx index 51e6b2ed..f3d7b7e0 100644 --- a/src/layouts/Footer.tsx +++ b/src/layouts/Footer.tsx @@ -1,12 +1,28 @@ import React from "react"; +import "../styles/Footer.css"; import { Layout } from "antd"; +import { Link } from "react-router-dom"; const { Footer } = Layout; const MainFooter = () => { return (
-
© wiki
+

+ Logo +

+
+ 이정도면껌이조 | 팀장: 박나영, 팀원: 김미정, 김성겸, 노욱진, 진종수 | + 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 토이프로젝트 +
+
+ fe3.wiki@gmail.com | © {new Date().getFullYear()} fe3.wiki{" "} +
+
+ 서비스 이용약관 + {" | "} + 개인정보 처리방침 +
); }; diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 7f259ccd..e36b9c6d 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -1,13 +1,71 @@ import React from "react"; +import "../styles/Header.css"; import { Layout, theme } from "antd"; +import { Link } from "react-router-dom"; + +interface MenuListItem { + key: number; + to: string; + text: string; +} + const { Header } = Layout; const MainHeader = () => { const { token: { colorBgContainer }, } = theme.useToken(); + const menuList: MenuListItem[] = [ + { + key: 1, + to: "/wiki", + text: "위키", + }, + { + key: 2, + to: "/project", + text: "프로젝트", + }, + { + key: 3, + to: "/employee", + text: "직원정보", + }, + // { + // key: 4, + // to: "/wiki", + // text: "위키", + // }, + ]; return (
-
Logo
+
+

+ Logo +

+
+ +
+
+
    +
  • + +
    • +
  • + + 로그인 + +
    • +
+
+
); }; diff --git a/src/styles/Footer.css b/src/styles/Footer.css new file mode 100644 index 00000000..c61f2329 --- /dev/null +++ b/src/styles/Footer.css @@ -0,0 +1,9 @@ +.footer-infos { + line-height: 1.6; + padding:5px 0; +} +.footer-logo{ + width:120px; + margin:0; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/src/styles/Header.css b/src/styles/Header.css new file mode 100644 index 00000000..7488c573 --- /dev/null +++ b/src/styles/Header.css @@ -0,0 +1,56 @@ +.header-wrap { + display:flex; +} +.header-logo{ + flex: 1; + margin:0; +} +.fe3-wiki-logo a{ + display: block; + background: url(../../public/fe3-wiki-logo.png)0 50% /120px no-repeat; + text-indent: -9999em; +} +.header-nav{ + flex: 4; +} +.header-nav ul,.header-user ul { + display:flex; + /* justify-content: center; */ + align-items: center; + list-style-type: none; + margin:0; +} +.header-nav ul li:hover{ + background-color: #f5f5f5; +} +.header-nav ul li:hover a{ + color: #00b96b; +} +.header-nav ul li a{ + color: inherit; + display: block; + padding: 0 10px; +} +.header-user{ + flex: 2; +} +.header-user ul { + justify-content: flex-end; + padding:0; +} +.header-user .user-link{ + display:inline-block; + padding: 10px; + line-height: 1.3; + border-radius:5px; +} +.header-user .timer-btn{ + border: 1px solid #dfdfdf; + background-color: transparent; + margin-right:10px; + cursor:pointer; +} +.header-user .signin-link{ + background-color: #00b96b; + color: #fff; +} \ No newline at end of file