Merge pull request #7 from team-xquare/myPage

배포될까?
team-xquare · Feb 13, 2024 · 6bcd3d8 · 6bcd3d8
2 parents 21b1cbe + 165b91f
commit 6bcd3d8
Show file tree

Hide file tree

Showing 16 changed files with 472 additions and 81 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,5 +11,4 @@
 
 #!.yarn/cache
 .pnp.*
-node_modules
-.env
+node_modules
diff --git a/packages/design-system/src/style/GlobalStyle.tsx b/packages/design-system/src/style/GlobalStyle.tsx
@@ -19,7 +19,7 @@ const style = css`
     font-family: 'Pretendard';
     font-weight: 500;
     font-style: normal;
-    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medeum.woff') format('woff');
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff') format('woff');
   }
 
   @font-face {

diff --git a/packages/user/.env b/packages/user/.env
@@ -0,0 +1 @@
+VITE_SERVER_BASE_URL='https://prod-server.xquare.app/merge'
diff --git a/packages/user/src/apis/axios.ts b/packages/user/src/apis/axios.ts
@@ -30,6 +30,9 @@ instance.interceptors.response.use(
     } = err;
     if (status === 403) {
       //const token = Cookie.get('refreshToken');
+      Cookie.remove('accessToken');
+      Cookie.remove('refreshToken');
+      window.location.href = '/login';
     } else {
       toast.error('오류가 발생헀습니다');
       return Promise.reject(err);

diff --git a/packages/user/src/apis/project.ts b/packages/user/src/apis/project.ts
@@ -0,0 +1,16 @@
+import { instance } from './axios';
+import { projectType } from '../types/projectType';
+
+type createProjectType = {
+  project: projectType;
+  logo: File;
+  projectImage: File[];
+};
+
+export const getMyProject = async (email: string) => {
+  return await instance.get(`/project/user?email=${email}`);
+};
+
+export const createProject = async (data: createProjectType) => {
+  return await instance.post('/project', data);
+};
diff --git a/packages/user/src/components/Header/Menu.tsx b/packages/user/src/components/Header/Menu.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Button } from '@merge/design-system';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 type menuProps = {
   isLogin: boolean;
@@ -13,18 +13,16 @@ export const Menu = ({ isLogin }: menuProps) => {
     link('/signin');
   };
 
+  const onRegister = () => {
+    link('/register');
+  };
+
   return (
     <Wrapper>
       {isLogin ? (
         <>
-          <Profile />
-          <Button
-            buttonStyle="solid"
-            size="extraSmall"
-            onClick={() => {
-              console.log(123);
-            }}
-          >
+          <Profile to={'/my'} />
+          <Button buttonStyle="solid" size="extraSmall" onClick={onRegister}>
             프로젝트 등록하기
           </Button>
         </>
@@ -41,11 +39,13 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 24px;
+  height: 32px;
 `;
 
-const Profile = styled.div`
+const Profile = styled(Link)`
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background-color: gray;
+  cursor: pointer;
 `;
diff --git a/packages/user/src/components/Header/index.tsx b/packages/user/src/components/Header/index.tsx
@@ -3,13 +3,16 @@ import { theme } from '@merge/design-system';
 import { Logo } from './Logo';
 import { Menu } from './Menu';
 import { Outlet } from 'react-router-dom';
+import { Cookie } from '../../utils/cookie';
 
 export const Header = () => {
+  const token = Cookie.get('accessToken');
+
   return (
     <>
       <Wrapper>
         <Logo />
-        <Menu isLogin={false} />
+        <Menu isLogin={!!token} />
       </Wrapper>
       <Outlet />
     </>

diff --git a/packages/user/src/components/Registration/Form.tsx b/packages/user/src/components/Registration/Form.tsx
@@ -5,21 +5,27 @@ import RegisterLogoImg from '../../assets/registerLogo.svg';
 import CheckBoxTrueImg from '../../assets/checkBoxTrue.svg';
 import CheckBoxFalseImg from '../../assets/checkBoxFalse.svg';
 import ScreenshotLabelImg from '../../assets/screenshotLabel.svg';
+import { projectType } from 'src/types/projectType';
 
-export const RegisterFormFirst = () => {
-  const [logo, setLogo] = useState<string | null>(null);
+type RegisterFormFirstPropsType = {
+  logo: File | null;
+  func: (event: ChangeEvent<HTMLInputElement>) => void;
+};
 
-  const handleLogoChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;
-    if (!file) return;
+type RegisterFormSecondPropsType = {
+  value: projectType;
+  projectImage: File[] | null;
+  func1: (e: ChangeEvent<HTMLInputElement>) => void;
+  func2: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  func3: (event: ChangeEvent<HTMLInputElement>) => void;
+};
 
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setLogo(reader.result as string);
-    };
-    reader.readAsDataURL(file);
-  };
+type RegisterFormThirdPropsType = {
+  value: projectType;
+  func: (e: ChangeEvent<HTMLInputElement>) => void;
+};
 
+export const RegisterFormFirst = ({ logo, func }: RegisterFormFirstPropsType) => {
   return (
     <Wrapper height={472}>
       <TipTextContainer>
@@ -30,79 +36,147 @@ export const RegisterFormFirst = () => {
         <Important />
         <InputText>프로젝트 로고 등록하기</InputText>
       </TextContainer>
-      <FileInput type="file" id="logo" onChange={handleLogoChange} />
+      <FileInput type="file" id="logo" onChange={func} />
       <LabelLogoInput htmlFor="logo">
         {logo === null ? (
           <img src={RegisterLogoImg} />
         ) : (
-          <img src={logo} style={{ width: '100%', height: '100%', borderRadius: '8px' }} />
+          <img src={URL.createObjectURL(logo)} style={{ width: '100%', height: '100%', borderRadius: '8px' }} />
         )}
       </LabelLogoInput>
     </Wrapper>
   );
 };
 
-export const RegisterFormSecond = () => {
+export const RegisterFormSecond = ({ value, projectImage, func1, func2, func3 }: RegisterFormSecondPropsType) => {
   return (
     <Wrapper height={1184}>
       <TipTextContainer>
         <Important />
         <TipText>가 있는 필드는 필수 입력란 입니다.</TipText>
       </TipTextContainer>
-      <Input width={668} important={true} label="프로젝트 명(한글)" placeholder="한글" />
-      <Input width={668} important={true} label="프로젝트 명(영어)" placeholder="영어" margin={['top', 52]} />
-      <Input width={668} important={true} label="팀 명(영어)" placeholder="영어" margin={['top', 52]} />
+      <Input
+        width={668}
+        important={true}
+        label="프로젝트 명(한글)"
+        placeholder="한글"
+        value={value.project_name_ko}
+        name="project_name_ko"
+        onChange={func1}
+      />
+      <Input
+        width={668}
+        important={true}
+        label="프로젝트 명(영어)"
+        placeholder="영어"
+        margin={['top', 52]}
+        value={value.project_name_en}
+        name="project_name_en"
+        onChange={func1}
+      />
+      <Input
+        width={668}
+        important={true}
+        label="팀 명(영어)"
+        placeholder="영어"
+        margin={['top', 52]}
+        value={value.team_name_en}
+        name="team_name_en"
+        onChange={func1}
+      />
       <AreaTextContainer>
         <TextContainer>
           <Important />
-          <InputText>프로젝트 로고 등록하기</InputText>
+          <InputText>프로젝트 개요 혹은 프로젝트 설명을 작성하기</InputText>
         </TextContainer>
         <AreaTextLength>
           <span>100</span>/500
         </AreaTextLength>
       </AreaTextContainer>
-      <Area placeholder="프로젝트 설명을 작성해주세요." maxLength={500} />
+      <Area
+        placeholder="프로젝트 설명을 작성해주세요."
+        maxLength={500}
+        value={value.description}
+        name="description"
+        onChange={func2}
+      />
       <TextContainer style={{ marginTop: '52px' }}>
         <InputText>프로젝트 스크린샷 또는 사진 등록하기</InputText>
       </TextContainer>
-      <FileInput type="file" id="screenshot" />
+      <FileInput type="file" id="screenshot" onChange={func3} />
       <LabelScreenshotInput htmlFor="screenshot">
         <img src={ScreenshotLabelImg} />
       </LabelScreenshotInput>
+      {projectImage &&
+        projectImage.map((element, index) => {
+          return <img src={URL.createObjectURL(element)} key={index} />;
+        })}
     </Wrapper>
   );
 };
 
-export const RegisterFormThird = () => {
+export const RegisterFormThird = ({ value, func }: RegisterFormThirdPropsType) => {
   return (
     <Wrapper height={560}>
-      <Input width={668} label="깃허브 주소" placeholder="링크" margin={['top', 0]} />
-      <Input width={668} label="웹 주소" placeholder="링크" margin={['top', 52]} />
-      <Input width={668} label="플레이 스토어 주소" placeholder="링크" margin={['top', 52]} />
-      <Input width={668} label="앱 스토어 주소" placeholder="링크" margin={['top', 52]} />
+      <Input
+        width={668}
+        label="깃허브 주소"
+        placeholder="링크"
+        margin={['top', 0]}
+        value={value.github_url}
+        name="github_url"
+        onChange={func}
+      />
+      <Input
+        width={668}
+        label="웹 주소"
+        placeholder="링크"
+        margin={['top', 52]}
+        value={value.web_url}
+        name="web_url"
+        onChange={func}
+      />
+      <Input
+        width={668}
+        label="플레이 스토어 주소"
+        placeholder="링크"
+        margin={['top', 52]}
+        value={value.play_store_url}
+        name="play_store_url"
+        onChange={func}
+      />
+      <Input
+        width={668}
+        label="앱 스토어 주소"
+        placeholder="링크"
+        margin={['top', 52]}
+        value={value.app_store_url}
+        name="app_store_url"
+        onChange={func}
+      />
     </Wrapper>
   );
 };
 
-export const RegisterFormForth = () => {
-  const [check, setCheck] = useState<boolean>(false);
+// export const RegisterFormForth = ({ value }: RegisterFormPropsType) => {
+//   const [check, setCheck] = useState<boolean>(false);
 
-  return (
-    <Wrapper height={560}>
-      <TipTextContainer>
-        <TipText>ouath 사용을 원하는 경우에만 작성해주세요.</TipText>
-      </TipTextContainer>
-      <TextContainer>
-        <InputText>oauth 사용 여부</InputText>
-      </TextContainer>
-      <CheckBox onClick={() => setCheck(!check)} check={check}>
-        <span>oauth 사용 여부</span>
-        <img src={check ? CheckBoxTrueImg : CheckBoxFalseImg} />
-      </CheckBox>
-      <Input width={668} label="redirect_url" placeholder="redirect_url" margin={['top', 52]} />
-    </Wrapper>
-  );
-};
+//   return (
+//     <Wrapper height={560}>
+//       <TipTextContainer>
+//         <TipText>ouath 사용을 원하는 경우에만 작성해주세요.</TipText>
+//       </TipTextContainer>
+//       <TextContainer>
+//         <InputText>oauth 사용 여부</InputText>
+//       </TextContainer>
+//       <CheckBox onClick={() => setCheck(!check)} check={check}>
+//         <span>oauth 사용 여부</span>
+//         <img src={check ? CheckBoxTrueImg : CheckBoxFalseImg} />
+//       </CheckBox>
+//       <Input width={668} label="redirect_url" placeholder="redirect_url" margin={['top', 52]} />
+//     </Wrapper>
+//   );
+// };
 
 const Wrapper = styled.div<{ height: number }>`
   width: 832px;

diff --git a/packages/user/src/components/Registration/Progress.tsx b/packages/user/src/components/Registration/Progress.tsx
@@ -7,8 +7,8 @@ import LineImg from '../../assets/line.svg';
 const nullFunc = () => {
   return null;
 };
-
-const projectLevels: string[] = ['로고 등록', '상세 설명', '링크 입력', 'oauth 사용'];
+// 'oauth 사용'
+const projectLevels: string[] = ['로고 등록', '상세 설명', '링크 입력'];
 
 const containerLevels: string[] = ['상세 설명', '타입, 사용 여부 선택', '환경 변수 입력'];
 
@@ -39,10 +39,12 @@ export const Progress = ({
   progress,
   kind,
   onClick,
+  func,
 }: {
   progress: number;
   kind: pageKindType;
   onClick: (index: number) => void;
+  func: () => void;
 }) => {
   const levels = kind === 'deploy' ? containerLevels : projectLevels;
 
@@ -72,14 +74,7 @@ export const Progress = ({
         </Container>
       </div>
       <ButtonContainer>
-        <Button
-          buttonStyle="solid"
-          size="medium"
-          onClick={() => {
-            console.log(123);
-          }}
-          isDisable={true}
-        >
+        <Button buttonStyle="solid" size="medium" onClick={func} isDisable={false}>
           등록하기
         </Button>
       </ButtonContainer>

diff --git a/packages/user/src/components/Registration/SubHeader.tsx b/packages/user/src/components/Registration/SubHeader.tsx
@@ -5,7 +5,7 @@ export const SubHeader = () => {
   return (
     <Wrapper>
       <Heading>프로젝트 등록하기</Heading>
-      <Button>임시 저장하기</Button>
+      {/* <Button>임시 저장하기</Button> */}
     </Wrapper>
   );
 };

diff --git a/packages/user/src/pages/HideProjects.tsx b/packages/user/src/pages/HideProjects.tsx
@@ -0,0 +1,3 @@
+export const HideProjects = () => {
+  return <div></div>;
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_SERVER_BASE_URL='https://prod-server.xquare.app/merge'