diff --git a/.eslintrc.js b/.eslintrc.js index b58506e..52aaa7b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,5 +13,6 @@ module.exports = { plugins: ['react'], rules: { '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/semi': 'on', }, }; diff --git a/packages/user/src/apis/latestProject.ts b/packages/user/src/apis/latestProject.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/user/src/assets/banner.png b/packages/user/src/assets/banner.png new file mode 100644 index 0000000..36d9912 Binary files /dev/null and b/packages/user/src/assets/banner.png differ diff --git a/packages/user/src/assets/logos/DMS.svg b/packages/user/src/assets/logos/DMS.svg new file mode 100644 index 0000000..a2c4813 --- /dev/null +++ b/packages/user/src/assets/logos/DMS.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/user/src/assets/logos/Entry.svg b/packages/user/src/assets/logos/Entry.svg new file mode 100644 index 0000000..446b546 --- /dev/null +++ b/packages/user/src/assets/logos/Entry.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/user/src/assets/logos/OSJ.svg b/packages/user/src/assets/logos/OSJ.svg new file mode 100644 index 0000000..9105b65 --- /dev/null +++ b/packages/user/src/assets/logos/OSJ.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/user/src/assets/logos/Pick.svg b/packages/user/src/assets/logos/Pick.svg new file mode 100644 index 0000000..80c49ed --- /dev/null +++ b/packages/user/src/assets/logos/Pick.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/user/src/assets/temporary.svg b/packages/user/src/assets/temporary.svg new file mode 100644 index 0000000..4655452 --- /dev/null +++ b/packages/user/src/assets/temporary.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/user/src/assets/topPageButton.svg b/packages/user/src/assets/topPageButton.svg new file mode 100644 index 0000000..844e19d --- /dev/null +++ b/packages/user/src/assets/topPageButton.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/user/src/components/Main/FavoriteProject.tsx b/packages/user/src/components/Main/FavoriteProject.tsx new file mode 100644 index 0000000..6649306 --- /dev/null +++ b/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 ( + <> + + {projects.map((project, index) => { + return ( + + + + +
{project.name}
+ + ); + })} + + + ); +}; + +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; +`; diff --git a/packages/user/src/components/Main/LatestProject.tsx b/packages/user/src/components/Main/LatestProject.tsx new file mode 100644 index 0000000..225d612 --- /dev/null +++ b/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 ( + + {projects.map((project, index) => { + return ( + + + + {project.name} + {project.team} + + + ); + })} + + ); +}; + +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}; +`; diff --git a/packages/user/src/pages/Main.tsx b/packages/user/src/pages/Main.tsx index d2d91f8..6b3b3c3 100644 --- a/packages/user/src/pages/Main.tsx +++ b/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
; + const banner = useRef(null); + const scrollToTop = () => { + if (banner.current) { + banner.current.scrollIntoView({ behavior: 'smooth' }); + } + }; + return ( + + + 즐겨찾는 프로젝트 + + + + 최근 등록 된 프로젝트 + + + + + + ); }; + +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; + } +`;