feat :: 메인페이지 완

team-xquare · Feb 28, 2024 · ba34433 · ba34433
1 parent b121bf1
commit ba34433
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git a/packages/user/src/components/Main/LatestProject.tsx b/packages/user/src/components/Main/LatestProject.tsx
@@ -3,18 +3,18 @@ import { theme } from '@merge/design-system';
 import { Link } from 'react-router-dom';
 
 type projectsType = {
-  project_id: string,
-  project_name: string,
-  team_name_en: string,
-  logo: string
-}
+  id: string;
+  project_name: string;
+  team_name_en: string;
+  logo: string;
+};
 
 export const LatestProject = ({ projects }: { projects: projectsType[] }) => {
   return (
     <LatestProjectContainer>
       {projects.map((project, index) => {
         return (
-          <FlexContainer key={index} to={`project/${project.project_id}`}>
+          <FlexContainer key={index} to={`project/${project.id}`}>
             <ProjectImg src={project.logo} />
             <NameContainer>
               <ProjectName>{project.project_name}</ProjectName>
@@ -43,8 +43,8 @@ const LatestProjectContainer = styled.div`
 `;
 
 const ProjectImg = styled.img`
-  width: 200;
-  height: 170px;
+  width: 200px;
+  height: 200px;
   margin-bottom: 4px;
   border: 1px solid ${theme.color.gray100};
   border-radius: 10px;
@@ -58,8 +58,10 @@ const NameContainer = styled.div`
 
 const ProjectName = styled.div`
   ${theme.font.subTitle2};
+  color: ${theme.color.gray800};
 `;
 
 const TeamName = styled.div`
   ${theme.font.body1};
+  color: ${theme.color.primary400};
 `;
diff --git a/packages/user/src/pages/Main.tsx b/packages/user/src/pages/Main.tsx
@@ -3,16 +3,16 @@ 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 ScrollImg from '../assets/topPageButton.svg';
 import { useEffect, useRef, useState } from 'react';
-import { getProjects } from '../apis/main'
+import { getProjects } from '../apis/main';
 
 type projectsType = {
-  project_id: string,
-  project_name: string,
-  team_name_en: string,
-  logo: string
-}
+  id: string;
+  project_name: string;
+  team_name_en: string;
+  logo: string;
+};
 
 export const Main = () => {
   const [projects, setProjects] = useState<projectsType[]>();
@@ -27,9 +27,9 @@ export const Main = () => {
 
   useEffect(() => {
     getProjects()
-      .then((res) => console.log(res))
-      .catch((err) => console.log(err))
-  }, [])
+      .then((res) => setProjects(res.data))
+      .catch((err) => console.log(err));
+  }, []);
 
   return (
     <Container ref={container}>
@@ -39,9 +39,7 @@ export const Main = () => {
         <FavoriteProjects />
       </FavoriteProjectContainer>
       <Title marginTop="56px">최근 등록 된 프로젝트</Title>
-      <LatestProjectContainer>
-        {projects && <LatestProject projects={projects} />}
-      </LatestProjectContainer>
+      <LatestProjectContainer>{projects && <LatestProject projects={projects} />}</LatestProjectContainer>
       <TopPageButton onClick={scrollToTop} />
     </Container>
   );
@@ -95,4 +93,4 @@ const TopPageButton = styled.div`
   &:hover {
     cursor: pointer;
   }
-`;
+`;