Merge pull request #3 from team-xquare/dev

Develop
team-xquare · Mar 18, 2024 · 479166d · 479166d
2 parents 937bac6 + 1cd2c30
commit 479166d
Show file tree

Hide file tree

Showing 20 changed files with 730 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>xquare infra</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@iconify/react": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

diff --git a/src/assets/Eye.svg b/src/assets/Eye.svg
diff --git a/src/assets/EyeClose.svg b/src/assets/EyeClose.svg
diff --git a/src/components/Main/firstContainer.tsx b/src/components/Main/firstContainer.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import MainImg from '@/assets/Main.svg';
-import { Button } from '../common/button';
+import { Button } from '../common/Button';
 
 export const FirstContainer = () => {
   return (

diff --git a/src/components/Team/Tag.tsx b/src/components/Team/Tag.tsx
@@ -0,0 +1,56 @@
+import { theme } from '@/style/theme';
+import styled from '@emotion/styled';
+
+type TagType = 'club' | 'team' | 'alone' | 'etc';
+
+export const Tag = ({ tag }: { tag: TagType }) => {
+  const tagText = (): string => {
+    switch (tag) {
+      case 'club':
+        return '동아리';
+      case 'team':
+        return '팀 프로젝트';
+      case 'alone':
+        return '개인 프로젝트';
+      default:
+        return '기타';
+    }
+  };
+
+  return <Wrapper tag={tag}>{tagText()}</Wrapper>;
+};
+
+const Wrapper = styled.div<{ tag: TagType }>`
+  padding: 0 10px;
+  height: 24px;
+  font-size: 12px;
+  background-color: purple;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50px;
+  color: ${({ tag }) => {
+    switch (tag) {
+      case 'club':
+        return `${theme.color.mainDark2} !important`;
+      case 'team':
+        return `#0C288A !important`;
+      case 'alone':
+        return `#876900 !important`;
+      default:
+        return `${theme.color.gray6} !important`;
+    }
+  }};
+  background-color: ${({ tag }) => {
+    switch (tag) {
+      case 'club':
+        return `${theme.color.mainLight2} !important`;
+      case 'team':
+        return `#ECF5FF !important`;
+      case 'alone':
+        return `#FFFBDB !important`;
+      default:
+        return `${theme.color.gray2} !important`;
+    }
+  }};
+`;
diff --git a/src/components/Team/TeamContainer.tsx b/src/components/Team/TeamContainer.tsx
@@ -0,0 +1,65 @@
+import { theme } from '@/style/theme';
+import styled from '@emotion/styled';
+import { Tag } from './Tag';
+
+type TagType = 'club' | 'team' | 'alone' | 'etc';
+
+type TeamType = {
+  name: string;
+  admin: string;
+  deploy: string[];
+  tag: TagType;
+};
+
+export const TeamContainer = ({ name, admin, deploy, tag }: TeamType) => {
+  return (
+    <Wrapper>
+      <div>
+        {name}
+        <Tag tag={tag} />
+      </div>
+      <div>관리자: {admin}</div>
+      <div>
+        배포:&nbsp;
+        {deploy.map((element, index) => {
+          switch (index) {
+            case 0:
+              return (
+                <>
+                  {element}
+                  {deploy.length > 1 && ', '}
+                </>
+              );
+            case 1:
+              return <>{element} </>;
+            case 2:
+              return <>{deploy.length > 2 ? <>등 {deploy.length - 2}개</> : <></>}</>;
+            default:
+              return null;
+          }
+        })}
+      </div>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 1120px;
+  height: 134px;
+  padding: 20px 40px;
+  border-radius: 6px;
+  border: 1px ${theme.color.gray5} solid;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 20px;
+  font-weight: 400;
+  color: ${theme.color.gray6};
+  & :nth-child(1) {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    color: ${theme.color.gray8};
+    font-weight: 500;
+  }
+`;
diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx
@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import { theme } from '@/style/theme';
+import { css } from '@emotion/react';
+
+export const AutoComplete = ({ props }: { props?: string[] }) => {
+  return (
+    <>
+      {props && props.length >= 1 && (
+        <Wrapper>
+          {props.map((element, index) => {
+            return (
+              <Box key={index} isLast={(props.length - 1 === index).toString()}>
+                {element}
+              </Box>
+            );
+          })}
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 134px;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px ${theme.color.gray5} solid;
+  background-color: ${theme.color.gray1};
+`;
+
+const Box = styled.div<{ isLast: string }>`
+  width: 100%;
+  font-size: 12px;
+  font-weight: 400;
+  color: ${theme.color.gray7};
+  height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ isLast }) => {
+    return (
+      isLast === 'false' &&
+      css`
+        border-bottom: 1px ${theme.color.gray5} solid;
+      `
+    );
+  }};
+`;
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
@@ -0,0 +1,81 @@
+import React, { InputHTMLAttributes, useState } from 'react';
+import styled from '@emotion/styled';
+import EyeImg from '@/assets/Eye.svg';
+import EyeCloseImg from '@/assets/EyeClose.svg';
+import { theme } from '@/style/theme';
+
+interface InputType extends InputHTMLAttributes<HTMLInputElement> {
+  width: number;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+}
+
+export const Input = ({
+  width,
+  label,
+  onChange = () => {
+    console.log('change!');
+  },
+  ...props
+}: InputType) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <Wrapper width={width} label={label}>
+      {label && <Label>{label}</Label>}
+      <InputBox {...props} onChange={onChange} type={props.type === 'password' && isOpen ? 'text' : props.type} />
+      {props.type === 'password' && (
+        <ViewInput
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+        >
+          <img src={isOpen ? EyeImg : EyeCloseImg} />
+        </ViewInput>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ width: number; label?: string }>`
+  width: ${({ width }) => `${width}px`};
+  height: ${({ label }) => (!!label ? '74px' : '46px')};
+  position: relative;
+`;
+
+const Label = styled.label`
+  width: 100%;
+  height: 22px;
+  cursor: default;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${theme.color.gray6};
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  margin-left: 6px;
+`;
+
+const InputBox = styled.input`
+  border-radius: 4px;
+  width: 100%;
+  padding: 0 16px;
+  height: 46px;
+  background-color: ${theme.color.gray1};
+  border: 1px solid ${theme.color.gray5};
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+  &::placeholder {
+    color: ${theme.color.gray5};
+  }
+`;
+
+const ViewInput = styled.div`
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  right: 40px;
+  bottom: 34px;
+  cursor: pointer;
+`;
diff --git a/src/components/common/XButton.tsx b/src/components/common/XButton.tsx
@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { theme } from '@/style/theme';
+import { css } from '@emotion/react';
+
+type ButtonStyleType = 'solid' | 'ghost';
+
+type ButtonPropsType = {
+  buttonStyle: ButtonStyleType;
+  width: number;
+  height: number;
+  children: ReactNode;
+  onClick: () => void;
+};
+
+export const XButton = ({ buttonStyle, width, height, children, onClick }: ButtonPropsType) => {
+  return (
+    <Wrapper
+      width={width}
+      height={height}
+      buttonStyle={buttonStyle}
+      onClick={() => {
+        onClick();
+      }}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<Omit<ButtonPropsType, 'children' | 'onClick'>>`
+  width: ${({ width }) => width + 'px'};
+  height: ${({ height }) => height + 'px'};
+  background-color: ${({ buttonStyle }) => (buttonStyle === 'solid' ? theme.color.main : theme.color.gray1)};
+  color: ${({ buttonStyle }) => (buttonStyle === 'solid' ? theme.color.gray1 : theme.color.mainDark1)};
+  ${({ buttonStyle }) =>
+    buttonStyle === 'ghost' &&
+    css`
+      border: 1px solid ${theme.color.mainDark1};
+    `};
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.2s linear;
+  &:hover {
+    ${({ buttonStyle }) =>
+      buttonStyle === 'ghost' &&
+      css`
+        color: ${theme.color.gray1};
+      `};
+    background-color: ${({ buttonStyle }) =>
+      buttonStyle === 'solid' ? theme.color.mainLight1 : theme.color.mainDark1};
+  }
+  &:active {
+    transition: 0.05s ease-in-out;
+    background-color: ${({ buttonStyle }) => (buttonStyle === 'solid' ? theme.color.mainDark1 : theme.color.mainDark2)};
+  }
+`;
diff --git a/src/components/common/button.tsx b/src/components/common/button.tsx
@@ -40,7 +40,7 @@ export const Button = ({
   );
 };
 
-const Wrapper = styled.div<Omit<ButtonPropsType, 'children, onClick'>>`
+const Wrapper = styled.div<Omit<ButtonPropsType, 'children' | 'onClick'>>`
   cursor: pointer;
   width: ${({ width }) => width + 'px'};
   height: ${({ height }) => height + 'px'};