Merge pull request #103 from mju-likelion/feature/#102-all-css-fix

[Feature/#102] 전체 CSS 크기 및 간격 수정

src/api/ApplyWrite.js

@@ -11,7 +11,6 @@ export const getApplicationData = (
       return res;
     })
     .catch((err) => {
-      console.log(err);
       const DetailStatusCode = err.response.data.statusCode;
       const statusCode = DetailStatusCode.substring(0, 3);
       if (
@@ -31,7 +30,6 @@ export const postFileData = (
   formData,
   setFileLinkFunction,
   setFilesFunction,
-  selectedPart,
 ) => {
   Axios.post('/application/file', formData, {
     headers: {
@@ -42,33 +40,12 @@ export const postFileData = (
       setFileLinkFunction(res.data.data.url);
     })
     .catch((err) => {
-      console.log(err);
-      const DetailStatusCode = err.response.data.statusCode;
-      const statusCode = DetailStatusCode.substring(0, 3);
-      if (statusCode === '500') {
-        alert(
-          '서버에 의도치 않은 에러가 발생했습니다. \n 공식 사이트 채널톡 혹은 인스타 DM으로 문의 부탁드립니다.',
-        );
-        setFilesFunction({});
-      } else if (statusCode === '900' && selectedPart === 'WEB') {
-        alert(
-          '자기소개 페이지 파일이 누락되었거나, 파일의 형식이 잘못되었습니다.',
-        );
-        setFilesFunction({});
-      } else if (statusCode === '900' && selectedPart === 'SERVER') {
-        alert(
-          'GitHub repository 링크가 누락되었거나, 링크의 형식이 잘못되었습니다.',
-        );
-      }
+      alert(err.response.data.message);
+      setFilesFunction({});
     });
 };
 
-export const postApplicationData = (
-  data,
-  navigateFunction,
-  selectedPart,
-  setIsLoading,
-) => {
+export const postApplicationData = (data, navigateFunction, setIsLoading) => {
   Axios.post('/application', data, {
     headers: {
       'Content-Type': `application/json`,
@@ -81,22 +58,6 @@ export const postApplicationData = (
     })
     .catch((err) => {
       setIsLoading(false);
-      const DetailStatusCode = err.response.data.statusCode;
-      const statusCode = DetailStatusCode.substring(0, 3);
-      if (statusCode === '400') {
-        alert('유효하지 않은 값이 있거나, 누락된 항목이 있습니다.');
-      } else if (statusCode === '500') {
-        alert(
-          '서버에 의도치 않은 에러가 발생했습니다. \n 공식 사이트 채널톡 혹은 인스타 DM으로 문의 부탁드립니다.',
-        );
-      } else if (statusCode === '900' && selectedPart === 'WEB') {
-        alert(
-          '자기소개 페이지 파일이 누락되었거나, 파일의 형식이 잘못되었습니다.',
-        );
-      } else if (statusCode === '900' && selectedPart === 'SERVER') {
-        alert(
-          'GitHub repository 링크가 누락되었거나, 링크의 형식이 잘못되었습니다.',
-        );
-      }
+      alert(err.response.data.message);
     });
 };

src/components/NotFound/ErrorInfo.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { ERROR_DATA } from '../../pages/NotFound/data/ErrorData';
+const ErrorInfo = () => {
+  return <Content>{ERROR_DATA.infoDesktop}</Content>;
+};
+const Content = styled.p`
+  white-space: pre-line;
+  font-weight: 300;
+  font-size: 18px;
+  line-height: 30px;
+  margin-bottom: 20px;
+`;
+export default ErrorInfo;

src/components/NotFound/ErrorInfoMobile.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { ERROR_DATA } from '../../pages/NotFound/data/ErrorData';
+
+const ErrorInfoMobile = () => {
+  return <Content>{ERROR_DATA.infoMobile}</Content>;
+};
+const Content = styled.p`
+  white-space: pre-line;
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 20px;
+  margin-bottom: 20px;
+`;
+export default ErrorInfoMobile;

src/components/NotFound/ErrorInfoTablet.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { ERROR_DATA } from '../../pages/NotFound/data/ErrorData';
+
+const ErrorInfoTablet = () => {
+  return <Content>{ERROR_DATA.infoTablet}</Content>;
+};
+const Content = styled.p`
+  white-space: pre-line;
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 24px;
+  margin-bottom: 16px;
+`;
+export default ErrorInfoTablet;

src/components/checkPage/CheckCard.js

@@ -47,8 +47,8 @@ const CardContainer = styled.div`
   width: 240px;
   height: 300px;
   @media ${({ theme }) => theme.devices.TABLET} {
-    width: 360px;
-    height: 490px;
+    width: 340px;
+    height: 420px;
     margin-top: 50px;
   }
 `;
@@ -74,7 +74,7 @@ const Content = styled.div`
   @media ${({ theme }) => theme.devices.TABLET} {
     font-size: 28px;
     font-weight: 700;
-    line-height: 60px;
+    line-height: 45px;
   }
 `;
 const Icon = styled.img`

src/components/checkPage/Input.js

@@ -35,7 +35,7 @@ const Caption = styled.p`
 `;
 
 const StyledInput = styled.input`
-  width: ${({ $inputSize }) => $inputSize.width};
+  width: 100%;
   height: ${({ $inputSize }) => $inputSize.height};
   background: transparent;
   border: 1px solid #d4d4d8;
@@ -55,13 +55,14 @@ const ErrorMessage = styled.p`
   height: ${({ $messageSize }) => $messageSize.height};
   color: ${({ theme }) => theme.colors.HOVER_BTN};
   ${({ theme }) => theme.typographies.SMALL_ERROR_TXT};
-  margin-top: 4px;
+  margin-top: 7px;
+  margin-left: 4px;
 
   @media ${({ theme }) => theme.devices.DESKTOP} {
     width: ${({ $messageSize }) => $messageSize.pcWidth};
     height: ${({ $messageSize }) => $messageSize.pcHeight};
     ${({ theme }) => theme.typographies.BIG_TXT};
-    margin-top: 6px;
+    margin-top: 10px;
   }
 `;
 

src/components/checkPage/SmallButton.js

@@ -10,11 +10,11 @@ const SmallButton = ({ children, type, onClick, ...rest }) => {
 
 const Wrapper = styled.button`
   border-radius: 40px;
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 300;
   padding: 9px 16px;
-  width: 74px;
-  height: 26px;
+  width: 110px;
+  height: 40px;
   color: ${({ theme }) => theme.colors.WHITE_TXT};
   background-color: ${({ theme }) => theme.colors.MAIN_PINK};
 

src/components/Button/BigButton.js → src/components/mainPage/BigButton.js

@@ -9,12 +9,14 @@ const BigButton = ({ children, disabled, onClick }) => {
 };
 
 const Wrapper = styled.button`
-  border-radius: 40px;
-  font-size: 10px;
-  font-weight: 300;
-  padding: 10px 18px;
-  width: 78px;
-  height: 30px;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 500;
+  width: 130px;
+  height: 45px;
   color: ${({ theme }) => theme.colors.WHITE_TXT};
   background-color: ${({ theme, disabled }) =>
     disabled ? theme.colors.DISABLE_BTN : theme.colors.MAIN_PINK};
@@ -25,16 +27,16 @@ const Wrapper = styled.button`
   }
 
   @media ${({ theme }) => theme.devices.TABLET} {
-    ${({ theme }) => theme.typographies.BIG_BTN_TXT};
-    width: 272px;
-    height: 100px;
-    padding: 26px 72px;
+    border-radius: 35px;
+    font-size: 22px;
+    width: 200px;
+    height: 70px;
   }
   @media ${({ theme }) => theme.devices.DESKTOP} {
-    ${({ theme }) => theme.typographies.BIG_BTN_TXT};
-    padding: 26px 72px;
-    width: 272px;
-    height: 100px;
+    font-size: 26px;
+    border-radius: 60px;
+    width: 250px;
+    height: 90px;
   }
 `;
 

src/components/writePage/HomeworkBox.js

@@ -6,6 +6,7 @@ const HomeworkBox = ({
   register,
   files,
   setFiles,
+  errors,
   setFileLink,
 }) => {
   const handleFileChange = (e) => {
@@ -48,6 +49,11 @@ const HomeworkBox = ({
       {selectedPart === 'SERVER' && (
         <ServerHomeworkInput {...register('link')} />
       )}
+      {selectedPart === 'SERVER' && (
+        <InfoHelperText $errors={errors['link']}>
+          {errors['link']?.message}
+        </InfoHelperText>
+      )}
       <HomeworkHelperText>
         {HOMEWORK_DATA[selectedPart].taskHelperText}
       </HomeworkHelperText>
@@ -153,10 +159,24 @@ const HomeworkHelperText = styled.p`
   margin-top: 5px;
   font-size: 10px;
   font-weight: 300;
+  line-height: 28px;
   color: ${({ theme }) => theme.colors.DISABLE_BTN};
   @media ${({ theme }) => theme.devices.TABLET} {
     margin-top: 10px;
     font-size: 16px;
   }
 `;
+const InfoHelperText = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  font-size: 9px;
+  font-weight: 300;
+  visibility: ${({ $errors }) => ($errors ? 'visible' : 'hidden')};
+  color: ${({ theme }) => theme.colors.HOVER_BTN};
+  @media ${({ theme }) => theme.devices.TABLET} {
+    margin-top: 15px;
+    font-size: 15px;
+  }
+`;
 export default HomeworkBox;

src/components/writePage/PersonalAgreeBox.js

@@ -5,7 +5,7 @@ const PersonalAgreeBox = ({ text, sequence, register }) => {
   return (
     <Container>
       <TitleBox>
-        <Title>{sequence === 3 ? '참고 및 주의사항' : '개인정보 동의'}</Title>
+        <Title>{sequence === 2 ? '참고 및 주의사항' : '개인정보 동의'}</Title>
         <CheckWrapper>
           <CheckLabel htmlFor={'agree' + String(sequence)}>[동의]</CheckLabel>
           <CheckBox
@@ -16,7 +16,9 @@ const PersonalAgreeBox = ({ text, sequence, register }) => {
         </CheckWrapper>
       </TitleBox>
       <AgreeContentBox>
-        <AgreeContent>{text}</AgreeContent>
+        <AgreeContent $isRefer={sequence === 2 ? true : false}>
+          {text}
+        </AgreeContent>
       </AgreeContentBox>
     </Container>
   );
@@ -118,9 +120,9 @@ const AgreeContent = styled.div`
   height: 100%;
   font-size: 10px;
   font-weight: 500;
-  color: #b6b6b6;
   line-height: 20px;
-
+  color: ${({ theme, $isRefer }) =>
+    $isRefer ? theme.colors.HOVER_BTN : '#b6b6b6'};
   white-space: pre-line;
   overflow-y: scroll;
   padding-right: 10px;

src/messages/part.js

@@ -10,7 +10,7 @@ const part = {
     tech_list: 'git, GitHub, JavaScript, Vercel, React, Zustand',
     assignment:
       'HTML + CSS만을 사용하여 간단한 자기소개 페이지를 만들어 제출해주세요.\n' +
-      'HTML, CSS 파일을 .zip 파일로 압축해서 지원서 작성 시 업로드 해주세요.',
+      'HTML, CSS 파일을 학번.zip 파일로 압축해서 지원서 작성 시 업로드 해주세요.',
   },
   server: {
     part_name: 'Server',
@@ -21,7 +21,7 @@ const part = {
       'git, GitHub, Spring Boot, JPA, Spring Security, JAVA, nginx, EC2, MySQL',
     assignment:
       'Java 언어를 사용하는 간단한 프로그래밍 과제가 GitHub를 통해 출제됩니다.\n' +
-      '지원 기간 안에 GitHub를 통해 해당 과제를 완료하고 지원서 작성 시 Fork한 레포지토리의 링크를 첨부해주세요.',
+      '지원 기간 안에 GitHub를 통해 해당 과제를 완료하고 지원서 작성 시 Fork한 레포지토리의 링크 혹은 구글 드라이브 링크를 첨부해주세요. *(액세스 권한 - 링크가 있는 모든 사용자) ',
   },
 };
 

src/pages/Apply.js

@@ -95,9 +95,9 @@ const Apply = () => {
                   messageErrors={errors}
                 />
               </InputWraaper>
-              <Button disabled={isLoading} type="submit">
+              <SmallButton disabled={isLoading} type="submit">
                 {isLoading ? '로딩중' : '지원하기'}
-              </Button>
+              </SmallButton>
             </ContentsWrapper>
           </CardLanyard>
         </form>
@@ -110,14 +110,17 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - 100px - 70px);
   width: 100%;
+  height: calc(100vh - 100px - 56px);
+  @media ${({ theme }) => theme.devices.TABLET} {
+    height: calc(100vh - 100px - 70px);
+  }
 `;
 const InputWraaper = styled.div`
-  margin: 34px 0 58px 0;
+  margin: 34px 0 60px 0;
 
   @media ${({ theme }) => theme.devices.DESKTOP} {
-    margin: 18px 0 48px 0;
+    margin: 18px 0 40px 0;
   }
 `;
 const ContentsWrapper = styled.div`
@@ -129,8 +132,5 @@ const ContentsWrapper = styled.div`
     margin: 85px 54px 24px 52px;
   }
 `;
-const Button = styled(SmallButton)`
-  /* margin-top: 28px; */
-`;
 
 export default Apply;

src/pages/ApplyWrite/data/HomeworkData.js

@@ -6,6 +6,7 @@ export const HOMEWORK_DATA = {
   SERVER: {
     title: '지원 과제 Repo 링크를 남겨주세요 (서버 파트)',
     taskHelperText: '※ 지원 기간이 지난 후의 commit 기록은 반영되지 않습니다.',
-    LinkHelperText: '※ 다른 주소가 아닌 GitHub repository 링크를 첨부해주세요.',
+    LinkHelperText:
+      '※ 다른 주소가 아닌 GitHub repository 링크 혹은 구글 드라이브 링크(액세스 권한-링크가 있는 모든 사용자)를 첨부해주세요.',
   },
 };