From a6d0c3736b14b8b0f7db78a6cfbe71b80d800637 Mon Sep 17 00:00:00 2001 From: CWCTBOY Date: Fri, 7 Oct 2022 23:34:21 +0900 Subject: [PATCH 01/13] feat: activity category selector --- src/components/activity/body/index.tsx | 14 ++++ src/components/activity/category/category.tsx | 60 +++++++++++++++++ src/components/activity/category/index.tsx | 36 ++++++++++ src/components/activity/head/index.tsx | 22 ++++++ src/components/common/Image.tsx | 28 ++++---- src/components/layout/Footer.tsx | 29 +++++--- src/components/layout/Header.tsx | 67 +++++++++++++------ src/components/layout/index.tsx | 8 +-- src/pages/about.tsx | 7 ++ src/pages/activity.tsx | 28 ++++++++ src/pages/board.tsx | 7 ++ src/pages/calender.tsx | 7 ++ src/pages/signin/index.tsx | 1 - src/router.tsx | 14 +++- src/styles/layout/footer.ts | 13 ++-- src/styles/layout/layout.ts | 11 +++ 16 files changed, 295 insertions(+), 57 deletions(-) create mode 100644 src/components/activity/body/index.tsx create mode 100644 src/components/activity/category/category.tsx create mode 100644 src/components/activity/category/index.tsx create mode 100644 src/components/activity/head/index.tsx create mode 100644 src/pages/about.tsx create mode 100644 src/pages/activity.tsx create mode 100644 src/pages/board.tsx create mode 100644 src/pages/calender.tsx delete mode 100644 src/pages/signin/index.tsx diff --git a/src/components/activity/body/index.tsx b/src/components/activity/body/index.tsx new file mode 100644 index 0000000..61cfde8 --- /dev/null +++ b/src/components/activity/body/index.tsx @@ -0,0 +1,14 @@ +import styled from "@emotion/styled"; + +const BodyContainer = styled.div` + width: 1017px; + height: 1028px; + margin: 0 0 205px 0; + background-color: rgba(0, 0, 0, 0.05); +`; + +const Body = () => { + return ; +}; + +export default Body; diff --git a/src/components/activity/category/category.tsx b/src/components/activity/category/category.tsx new file mode 100644 index 0000000..25305df --- /dev/null +++ b/src/components/activity/category/category.tsx @@ -0,0 +1,60 @@ +import styled from "@emotion/styled"; +import React from "react"; +import { CategotyProps } from "../../../pages/activity"; +import { Text } from "../../common"; + +const TagContainer = styled.div<{ selected: boolean }>` + height: 22px; + display: flex; + align-items: center; + margin: 0 10px 0 0; + cursor: pointer; + .selected { + width: 8px; + height: 8px; + border-radius: 50%; + margin: 0 8px 0 0; + background-color: ${({ selected }) => (selected ? "#000000" : "#868686")}; + } +`; + +const Category = ({ + category, + setCategory, + index, + selected, + children, +}: { + category: CategotyProps[]; + setCategory: (arg: CategotyProps[]) => void; + index: number; + selected: boolean; + children: React.ReactNode; +}) => { + const onClick = (index: number) => { + const newCategory = [...category]; + for (let i = 0; i < newCategory.length; i++) { + if (i !== index) { + newCategory[i].selected = false; + } else { + newCategory[i].selected = true; + } + } + setCategory(newCategory); + }; + return ( + { + onClick(index); + }} + selected={selected} + > +
+ + {children} + + + ); +}; + +export default Category; diff --git a/src/components/activity/category/index.tsx b/src/components/activity/category/index.tsx new file mode 100644 index 0000000..2e3f631 --- /dev/null +++ b/src/components/activity/category/index.tsx @@ -0,0 +1,36 @@ +import styled from "@emotion/styled"; +import { CategotyProps } from "../../../pages/activity"; +import Category from "./category"; + +const CategoryContainer = styled.div` + width: 1017px; + display: flex; + align-items: center; + margin: 0 0 25px 0; +`; + +const Categories = ({ + category, + setCategory, +}: { + category: CategotyProps[]; + setCategory: (arg: CategotyProps[]) => void; +}) => { + return ( + + {category.map(({ name, selected }, index) => ( + + {name} + + ))} + + ); +}; + +export default Categories; diff --git a/src/components/activity/head/index.tsx b/src/components/activity/head/index.tsx new file mode 100644 index 0000000..4b82946 --- /dev/null +++ b/src/components/activity/head/index.tsx @@ -0,0 +1,22 @@ +import styled from "@emotion/styled"; +import { Text } from "../../common"; + +const HeadContainer = styled.div` + width: 1017px; + height: 40px; + display: flex; + align-items: center; + margin: 0 0 40px 0; +`; + +const Head = () => { + return ( + + + 활동 현황 + + + ); +}; + +export default Head; diff --git a/src/components/common/Image.tsx b/src/components/common/Image.tsx index d98f95c..0bcd767 100644 --- a/src/components/common/Image.tsx +++ b/src/components/common/Image.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import styled from "@emotion/styled"; interface ImageProps { src: string; @@ -17,35 +17,37 @@ interface ImageProps { /** * @default 'square' */ - shape?: 'circle' | 'rounded' | 'square'; + shape?: "circle" | "rounded" | "square"; /** * @default 'inline' */ - display?: 'block' | 'inline' | 'inline-block'; + display?: "block" | "inline" | "inline-block"; /** * @default 'block' */ - float?: 'left' | 'right' | 'block'; + float?: "left" | "right" | "block"; /** * @default 'cover' */ - fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'; + fit?: "fill" | "contain" | "cover" | "none" | "scale-down"; children?: React.ReactNode; } function Image(props: ImageProps) { const Component = styled.img` - width: ${props.width ?? 'auto'}; - height: ${props.height ?? 'auto'}; - borderradius: ${props.shape === 'circle'} ? '50%' : ${ - props.shape === 'rounded' - } ? '10px' : '0'; - display: ${props.display ?? 'inline'}; - float: ${props.float ?? 'block'}; - object-fit: ${props.fit ?? 'cover'}; + width: ${props.width ?? "auto"}; + height: ${props.height ?? "auto"}; + border-radius: ${props.shape === "circle" + ? "50%" + : props.shape === "rounded" + ? "10px" + : "0"}; + display: ${props.display ?? "inline"}; + float: ${props.float ?? "block"}; + object-fit: ${props.fit ?? "cover"}; `; return ; } diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 81d62df..f00094b 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,20 +1,33 @@ -import React from "react"; -import { FooterBox, FooterContents, FooterIconBox } from "../../styles/layout/footer"; -import { ReactComponent as NLslogo } from '../../assets/NL_logo-white.svg' +import { + FooterBox, + FooterContents, + FooterIconBox, +} from "../../styles/layout/footer"; +import { ReactComponent as NLslogo } from "../../assets/NL_logo-white.svg"; import { Text } from "../common"; function Footer() { return ( - + - - + + - ) + ); } -export default Footer \ No newline at end of file +export default Footer; diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 32da8e4..1dd7491 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,42 +1,69 @@ -import React from "react"; -import { HeaderBox, HeaderContents, HeaderMenuItem, LogoBox } from "../../styles/layout/header"; -import { ReactComponent as NLlogo } from '../../assets/NL_LOGO.svg' +import { + HeaderBox, + HeaderContents, + HeaderMenuItem, + LogoBox, +} from "../../styles/layout/header"; +import { ReactComponent as NLlogo } from "../../assets/NL_LOGO.svg"; import { Nav } from "../common"; import { Link } from "react-router-dom"; -type User = {name: string;} +type User = { name: string }; -type Props = -{ +type Props = { authenticated: boolean; profile: User | null; -} +}; const menuList = [ - '소개', '활동', '팀 블로그', '지원' -] + { + name: "소개", + link: "/", + }, + { + name: "활동", + link: "activity", + }, + { + name: "팀 블로그", + link: "/", + }, + { + name: "지원", + link: "/", + }, +]; function Header(props: Props) { return ( - + - {menuList.map((item, index) => ( - -