diff --git a/packages/user/src/components/Main/FavoriteProject.tsx b/packages/user/src/components/Main/FavoriteProject.tsx index 6649306..6a9efeb 100644 --- a/packages/user/src/components/Main/FavoriteProject.tsx +++ b/packages/user/src/components/Main/FavoriteProject.tsx @@ -2,7 +2,7 @@ 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 PickImg from '../../assets/logos/Pick.svg'; import { theme } from '@merge/design-system'; import { Link } from 'react-router-dom'; diff --git a/packages/user/src/components/Main/LatestProject.tsx b/packages/user/src/components/Main/LatestProject.tsx index 52ad864..86a1b85 100644 --- a/packages/user/src/components/Main/LatestProject.tsx +++ b/packages/user/src/components/Main/LatestProject.tsx @@ -1,15 +1,9 @@ import styled from '@emotion/styled'; import { theme } from '@merge/design-system'; import { Link } from 'react-router-dom'; +import { ProjectType } from '../../types/projectType'; -type projectsType = { - id: string; - project_name: string; - team_name_en: string; - logo: string; -}; - -export const LatestProject = ({ projects }: { projects: projectsType[] }) => { +export const LatestProject = ({ projects }: { projects: ProjectType[] }) => { return ( {projects.map((project, index) => { diff --git a/packages/user/src/pages/Main.tsx b/packages/user/src/pages/Main.tsx index fea55dd..4b1f44f 100644 --- a/packages/user/src/pages/Main.tsx +++ b/packages/user/src/pages/Main.tsx @@ -1,38 +1,33 @@ +import { useEffect, useRef, useState } from 'react'; +import styled from '@emotion/styled'; +import { toast } from 'react-toastify'; +import { theme } from '@merge/design-system'; 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 ScrollImg from '../assets/topPageButton.svg'; -import { useEffect, useRef, useState } from 'react'; import { getProjects } from '../apis/project'; - -type projectsType = { - id: string; - project_name: string; - team_name_en: string; - logo: string; -}; +import BannerImg from '../assets/banner.png'; +import TopPageButtonImg from '../assets/topPageButton.svg'; +import { ProjectType } from '../types/projectType'; export const Main = () => { - const [projects, setProjects] = useState(); + const [projects, setProjects] = useState(); - const container = useRef(null); + const wrapper = useRef(null); const scrollToTop = () => { - if (container.current) { - container.current.scroll({ top: 0, behavior: 'smooth' }); + if (wrapper.current) { + wrapper.current.scroll({ top: 0, behavior: 'smooth' }); } }; useEffect(() => { getProjects() - .then((res: any) => setProjects(res.data)) - .catch((err: any) => console.log(err)); + .then((res) => setProjects(res.data)) + .catch((err) => toast.error(err.response.data.message)); }, []); return ( - + 즐겨찾는 프로젝트 @@ -40,11 +35,21 @@ export const Main = () => { 최근 등록 된 프로젝트 {projects && } - - + + + + ); }; +const Wrapper = styled.div` + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +`; + const Banner = styled.img` width: 1128px; height: 240px; @@ -63,15 +68,6 @@ 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; @@ -79,17 +75,16 @@ const LatestProjectContainer = styled.div` `; const TopPageButton = styled.div` - background-image: url(${ScrollImg}); - position: fixed; width: 50px; height: 50px; - border-radius: 50%; - top: 85%; - left: 81%; + position: fixed; + bottom: 106px; + right: 298px; border: 1px solid ${theme.color.primary100}; - background-repeat: no-repeat; - background-position: center center; - + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; &:hover { cursor: pointer; } diff --git a/packages/user/src/types/projectType.ts b/packages/user/src/types/projectType.ts index 67a8a48..43e6c3d 100644 --- a/packages/user/src/types/projectType.ts +++ b/packages/user/src/types/projectType.ts @@ -1,4 +1,11 @@ -export type projectType = { +export interface ProjectType { + id: string; + project_name: string; + team_name_en: string; + logo: string; +} + +export interface ProjectRegisterType { project_name: string; project_name_en: string; team_name_en: string; @@ -7,13 +14,4 @@ export type projectType = { web_url: string; play_store_url: string; app_store_url: string; -}; - -export type deployType = { - container_name: string; - service_type: string; - github_url: string; - redis: boolean; - mysql: boolean; - project_id: string; -}; +}