Merge branch 'refoctoring'

team-xquare · Feb 28, 2024 · d9008d1 · d9008d1
2 parents 14175a7 + c5841db
commit d9008d1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 58 deletions.
diff --git 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
@@ -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 (
     <LatestProjectContainer>
       {projects.map((project, index) => {

diff --git a/packages/user/src/pages/Main.tsx b/packages/user/src/pages/Main.tsx
@@ -1,50 +1,55 @@
+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<projectsType[]>();
+  const [projects, setProjects] = useState<ProjectType[]>();
 
-  const container = useRef<HTMLImageElement>(null);
+  const wrapper = useRef<HTMLImageElement>(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 (
-    <Container ref={container}>
+    <Wrapper ref={wrapper}>
       <Banner src={BannerImg} />
       <Title marginTop="">즐겨찾는 프로젝트</Title>
       <FavoriteProjectContainer>
         <FavoriteProjects />
       </FavoriteProjectContainer>
       <Title marginTop="56px">최근 등록 된 프로젝트</Title>
       <LatestProjectContainer>{projects && <LatestProject projects={projects} />}</LatestProjectContainer>
-      <TopPageButton onClick={scrollToTop} />
-    </Container>
+      <TopPageButton onClick={scrollToTop}>
+        <img src={TopPageButtonImg} />
+      </TopPageButton>
+    </Wrapper>
   );
 };
 
+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,33 +68,23 @@ 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`
-  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
@@ -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;
-};
+}