Merge pull request #8 from team-xquare/mainPage

mainPage 구현

.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
   plugins: ['react'],
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/semi': 'on',
   },
 };

packages/user/src/components/Main/FavoriteProject.tsx

@@ -0,0 +1,94 @@
+import styled from '@emotion/styled';
+import dmsLogoImg from '../../assets/logos/DMS.svg';
+import entryLogoImg from '../../assets/logos/Entry.svg';
+import OSJLogoImg from '../../assets/logos/OSJ.svg';
+import PickImg from "../../assets/logos/Pick.svg";
+import { theme } from '@merge/design-system';
+import { Link } from 'react-router-dom';
+
+type projectsType = {
+  name: string;
+  logo: string;
+  address: string;
+};
+
+const projects: projectsType[] = [
+  {
+    name: 'Entry',
+    logo: entryLogoImg,
+    address: '',
+  },
+  {
+    name: 'DMS',
+    logo: dmsLogoImg,
+    address: '',
+  },
+  {
+    name: 'pick',
+    logo: PickImg,
+    address: '',
+  },
+  {
+    name: 'Repo',
+    logo: dmsLogoImg,
+    address: '',
+  },
+  {
+    name: 'Jobis',
+    logo: entryLogoImg,
+    address: '',
+  },
+  {
+    name: 'OSJ',
+    logo: OSJLogoImg,
+    address: '',
+  },
+];
+
+export const FavoriteProjects = () => {
+  return (
+    <>
+      <FlexContainer>
+        {projects.map((project, index) => {
+          return (
+            <ProjectContainer to={project.address} key={index}>
+              <BorderLine>
+                <Project src={project.logo}></Project>
+              </BorderLine>
+              <div>{project.name}</div>
+            </ProjectContainer>
+          );
+        })}
+      </FlexContainer>
+    </>
+  );
+};
+
+const FlexContainer = styled.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  gap: 52px;
+`;
+
+const Project = styled.img`
+  width: 80px;
+  height: 80px;
+`;
+
+const ProjectContainer = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: ${theme.color.gray800};
+  ${theme.font.subTitle2};
+  text-decoration: none;
+`;
+
+const BorderLine = styled.div`
+  width: 80px;
+  height: 80px;
+  border: 1px solid ${theme.color.gray100};
+  border-radius: 28px;
+  overflow: hidden;
+`;

packages/user/src/components/Main/LatestProject.tsx

@@ -0,0 +1,149 @@
+import styled from '@emotion/styled';
+import { theme } from '@merge/design-system';
+import temporaryImg from '../../assets/temporary.svg';
+import { Link } from 'react-router-dom';
+import dmsLogoImg from '../../assets/logos/DMS.svg';
+import OSJLogoImg from '../../assets/logos/OSJ.svg';
+
+type projectsType = {
+  name: string;
+  team: string;
+  picture: string;
+  link: string;
+};
+
+const projects: projectsType[] = [
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: dmsLogoImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: OSJLogoImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+  {
+    name: '정이라고 하자',
+    team: '정민',
+    picture: temporaryImg,
+    link: '',
+  },
+];
+
+export const LatestProject = () => {
+  return (
+    <LatestProjectContainer>
+      {projects.map((project, index) => {
+        return (
+          <FlexContainer key={index} to={project.link}>
+            <ProjectImg src={project.picture} />
+            <NameContainer>
+              <ProjectName>{project.name}</ProjectName>
+              <TeamName>{project.team}</TeamName>
+            </NameContainer>
+          </FlexContainer>
+        );
+      })}
+    </LatestProjectContainer>
+  );
+};
+
+const FlexContainer = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+`;
+
+const LatestProjectContainer = styled.div`
+  display: flex;
+  margin-top: 20px;
+  justify-content: start;
+  gap: 32px;
+  flex-wrap: wrap;
+  margin-bottom: 52px;
+`;
+
+const ProjectImg = styled.img`
+  width: 200;
+  height: 170px;
+  margin-bottom: 4px;
+  border: 1px solid ${theme.color.gray100};
+  border-radius: 10px;
+`;
+
+const NameContainer = styled.div`
+  width: 200px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ProjectName = styled.div`
+  ${theme.font.subTitle2};
+`;
+
+const TeamName = styled.div`
+  ${theme.font.body1};
+`;

packages/user/src/pages/Main.tsx

@@ -1,3 +1,80 @@
+import { FavoriteProjects } from '../components/Main/FavoriteProject';
+import { LatestProject } from '../components/Main/LatestProject';
+import { theme } from '@merge/design-system';
+import styled from '@emotion/styled';
+import BannerImg from '../assets/banner.png';
+import TopPageButtonImg from '../assets/topPageButton.svg';
+import { useRef } from 'react';
+
 export const Main = () => {
-  return <div></div>;
+  const banner = useRef<HTMLImageElement>(null);
+  const scrollToTop = () => {
+    if (banner.current) {
+      banner.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  return (
+    <Container>
+      <Banner src={BannerImg} ref={banner} />
+      <Title marginTop="">즐겨찾는 프로젝트</Title>
+      <FavoriteProjectContainer>
+        <FavoriteProjects />
+      </FavoriteProjectContainer>
+      <Title marginTop="56px">최근 등록 된 프로젝트</Title>
+      <LatestProjectContainer>
+        <LatestProject />
+      </LatestProjectContainer>
+      <TopPageButton onClick={scrollToTop} />
+    </Container>
+  );
 };
+
+const Banner = styled.img`
+  width: 1128px;
+  height: 240px;
+  margin: 65px 0px 36px 0px;
+`;
+
+const Title = styled.div<{ marginTop: string }>`
+  display: flex;
+  margin-top: ${(props) => props.marginTop || '0px'};
+  ${theme.font.subTitle2};
+  width: 1128px;
+  justify-content: flex-start;
+`;
+
+const FavoriteProjectContainer = styled.div`
+  width: 740px;
+`;
+
+const Container = styled.div`
+  /* width: 100vw; */
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+`;
+
+const LatestProjectContainer = styled.div`
+  width: 1128px;
+  display: flex;
+  margin-bottom: 100px;
+`;
+
+const TopPageButton = styled.div`
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  top: 85%;
+  left: 81%;
+  border: 1px solid ${theme.color.primary100};
+  background-image: url(${TopPageButtonImg});
+  background-repeat: no-repeat;
+  background-position: center center;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;