diff --git a/src/api/ApplyWrite.js b/src/api/ApplyWrite.js
index 509c9a9..555ca77 100644
--- a/src/api/ApplyWrite.js
+++ b/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);
});
};
diff --git a/src/assets/imgs/error_lion.svg b/src/assets/imgs/error_lion.svg
new file mode 100644
index 0000000..105a3e5
--- /dev/null
+++ b/src/assets/imgs/error_lion.svg
@@ -0,0 +1,74 @@
+
diff --git a/src/components/NotFound/ErrorInfo.js b/src/components/NotFound/ErrorInfo.js
new file mode 100644
index 0000000..47fdb32
--- /dev/null
+++ b/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 {ERROR_DATA.infoDesktop};
+};
+const Content = styled.p`
+ white-space: pre-line;
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 30px;
+ margin-bottom: 20px;
+`;
+export default ErrorInfo;
diff --git a/src/components/NotFound/ErrorInfoMobile.js b/src/components/NotFound/ErrorInfoMobile.js
new file mode 100644
index 0000000..7b4cb0f
--- /dev/null
+++ b/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 {ERROR_DATA.infoMobile};
+};
+const Content = styled.p`
+ white-space: pre-line;
+ font-size: 15px;
+ font-weight: 300;
+ line-height: 20px;
+ margin-bottom: 20px;
+`;
+export default ErrorInfoMobile;
diff --git a/src/components/NotFound/ErrorInfoTablet.js b/src/components/NotFound/ErrorInfoTablet.js
new file mode 100644
index 0000000..5fa08bf
--- /dev/null
+++ b/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 {ERROR_DATA.infoTablet};
+};
+const Content = styled.p`
+ white-space: pre-line;
+ font-size: 15px;
+ font-weight: 300;
+ line-height: 24px;
+ margin-bottom: 16px;
+`;
+export default ErrorInfoTablet;
diff --git a/src/components/checkPage/CheckCard.js b/src/components/checkPage/CheckCard.js
index e66853a..f021d50 100644
--- a/src/components/checkPage/CheckCard.js
+++ b/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`
diff --git a/src/components/checkPage/Input.js b/src/components/checkPage/Input.js
index 48093a1..ee2c380 100644
--- a/src/components/checkPage/Input.js
+++ b/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;
}
`;
diff --git a/src/components/checkPage/SmallButton.js b/src/components/checkPage/SmallButton.js
index eb12309..20f55d8 100644
--- a/src/components/checkPage/SmallButton.js
+++ b/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};
diff --git a/src/components/Button/BigButton.js b/src/components/mainPage/BigButton.js
similarity index 66%
rename from src/components/Button/BigButton.js
rename to src/components/mainPage/BigButton.js
index b2c1ddd..74178f1 100644
--- a/src/components/Button/BigButton.js
+++ b/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;
}
`;
diff --git a/src/components/writePage/HomeworkBox.js b/src/components/writePage/HomeworkBox.js
index 0bca769..7ff4c4b 100644
--- a/src/components/writePage/HomeworkBox.js
+++ b/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' && (
)}
+ {selectedPart === 'SERVER' && (
+
+ {errors['link']?.message}
+
+ )}
{HOMEWORK_DATA[selectedPart].taskHelperText}
@@ -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;
diff --git a/src/components/writePage/PersonalAgreeBox.js b/src/components/writePage/PersonalAgreeBox.js
index 813289c..d854233 100644
--- a/src/components/writePage/PersonalAgreeBox.js
+++ b/src/components/writePage/PersonalAgreeBox.js
@@ -5,7 +5,7 @@ const PersonalAgreeBox = ({ text, sequence, register }) => {
return (
- {sequence === 3 ? '참고 및 주의사항' : '개인정보 동의'}
+ {sequence === 2 ? '참고 및 주의사항' : '개인정보 동의'}
[동의]
{
- {text}
+
+ {text}
+
);
@@ -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;
diff --git a/src/messages/part.js b/src/messages/part.js
index 5fae1bb..2ffbf95 100644
--- a/src/messages/part.js
+++ b/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한 레포지토리의 링크 혹은 구글 드라이브 링크를 첨부해주세요. *(액세스 권한 - 링크가 있는 모든 사용자) ',
},
};
diff --git a/src/pages/Apply.js b/src/pages/Apply.js
index 246b338..76e8354 100644
--- a/src/pages/Apply.js
+++ b/src/pages/Apply.js
@@ -95,9 +95,9 @@ const Apply = () => {
messageErrors={errors}
/>
-
+
@@ -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;
diff --git a/src/pages/ApplyWrite/data/HomeworkData.js b/src/pages/ApplyWrite/data/HomeworkData.js
index 58389f0..ddb4233 100644
--- a/src/pages/ApplyWrite/data/HomeworkData.js
+++ b/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 링크 혹은 구글 드라이브 링크(액세스 권한-링크가 있는 모든 사용자)를 첨부해주세요.',
},
};
diff --git a/src/pages/ApplyWrite/index.js b/src/pages/ApplyWrite/index.js
index c153501..552bfb0 100644
--- a/src/pages/ApplyWrite/index.js
+++ b/src/pages/ApplyWrite/index.js
@@ -85,7 +85,7 @@ const ApplyWrite = () => {
introduces: introducesObject,
agreements: agreementObject,
};
- postApplicationData(submitFormData, navigate, selectedPart, setIsLoading);
+ postApplicationData(submitFormData, navigate, setIsLoading);
// } else {
// alert(
// '지원 기간이 아닙니다\n지원 기간: 2024-03-01 00:00:00 ~ 2024-03-07 23:59:59',
@@ -101,7 +101,7 @@ const ApplyWrite = () => {
if (Object.keys(files).length > 0) {
const formData = new FormData();
formData.append('file', files[0]);
- postFileData(formData, setFileLink, setFiles, selectedPart);
+ postFileData(formData, setFileLink, setFiles);
}
}, [files[0]]);
@@ -159,6 +159,7 @@ const ApplyWrite = () => {
files={files}
setFiles={setFiles}
setFileLink={setFileLink}
+ errors={errors}
/>
@@ -176,7 +177,10 @@ const ApplyWrite = () => {
※ 작성이 완료되지 않았거나, 형식에 맞지 않는 값이 있습니다.
- {value.agree1 && value.agree2 && value.agree3 && !isLoading ? (
+ {value.agree1 &&
+ value.agree2 &&
+ !isLoading &&
+ (files[0] || value.link) ? (
제출하기
) : (
제출하기
diff --git a/src/pages/Check.js b/src/pages/Check.js
index 6703a64..ad4146c 100644
--- a/src/pages/Check.js
+++ b/src/pages/Check.js
@@ -9,7 +9,6 @@ import Input from '../components/checkPage/Input';
import SmallButton from '../components/checkPage/SmallButton';
import CheckCard from '../components/checkPage/CheckCard';
import { idValidationSchema } from '../validation/idValidationSchema';
-
const Check = () => {
const [isChecked, setIsChecked] = useState(undefined);
const [value, setValue] = useState('');
@@ -24,7 +23,6 @@ const Check = () => {
setIsChecked(isExist);
} catch (error) {
setIsLoading(false);
- console.log(error);
}
};
@@ -73,9 +71,9 @@ const Check = () => {
messageErrors={errors}
/>
-
+
@@ -92,14 +90,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`
@@ -111,8 +112,5 @@ const ContentsWrapper = styled.div`
margin: 85px 54px 24px 52px;
}
`;
-const Button = styled(SmallButton)`
- /* margin-top: 28px; */
-`;
export default Check;
diff --git a/src/pages/Main.js b/src/pages/Main.js
index 2ccd50b..30c4bc9 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import PartCard from '../components/mainPage/PartCard';
import AssignmentBox from '../components/mainPage/AssignmentBox';
-import BigButton from '../components/Button/BigButton';
+import BigButton from '../components/mainPage/BigButton';
import OpenChat from '../components/mainPage/OpenChat';
import ScrollBar from '../components/mainPage/ScrollBar';
import part_message from '../messages/part';
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
deleted file mode 100644
index 1907c7a..0000000
--- a/src/pages/NotFound.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import styled from 'styled-components';
-import LION from '../assets/imgs/hi_lion.svg';
-import TAIL from '../assets/imgs/tail.svg';
-
-const NotFound = () => {
- return (
-
-
- 404
-
-
-
-
- );
-};
-const PageContainer = styled.div`
- height: calc(100vh - 56px - 100px - 40px);
- position: relative;
- @media ${({ theme }) => theme.devices.TABLET} {
- height: calc(100vh - 70px - 100px - 80px);
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- height: calc(100vh - 70px - 100px - 100px);
- }
-`;
-const SignBoard = styled.div`
- width: 200px;
- height: 150px;
- margin: 40px auto 0;
- padding-top: 40px;
- border-radius: 25px;
- background-color: white;
- @media ${({ theme }) => theme.devices.TABLET} {
- width: 330px;
- height: 180px;
- margin: 80px auto 0;
- padding-top: 40px;
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- width: 480px;
- height: 280px;
- margin: 100px auto 0;
- padding-top: 70px;
- }
-`;
-const Text = styled.p`
- color: ${({ theme }) => theme.colors.MAIN_PINK};
- text-align: center;
- font-size: 80px;
- font-weight: 700;
- @media ${({ theme }) => theme.devices.TABLET} {
- font-size: 100px;
- font-weight: 700;
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- font-size: 160px;
- font-weight: 700;
- }
-`;
-const Tail = styled.img`
- display: block;
- width: 100px;
- @media ${({ theme }) => theme.devices.TABLET} {
- width: 143px;
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- width: 165px;
- }
- margin: -20px 40% 0 auto;
- @media ${({ theme }) => theme.devices.TABLET} {
- margin: -20px 40% 0 auto;
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- margin: -20px 40% 0 auto;
- }
-`;
-const Lion = styled.img`
- position: absolute;
- right: 0;
- bottom: 0;
- width: 230px;
- height: 160px;
- @media ${({ theme }) => theme.devices.TABLET} {
- width: 330px;
- height: 260px;
- }
- @media ${({ theme }) => theme.devices.DESKTOP} {
- width: 500px;
- height: 400px;
- }
-`;
-
-export default NotFound;
diff --git a/src/pages/NotFound/data/ErrorData.js b/src/pages/NotFound/data/ErrorData.js
new file mode 100644
index 0000000..bfb05b5
--- /dev/null
+++ b/src/pages/NotFound/data/ErrorData.js
@@ -0,0 +1,5 @@
+export const ERROR_DATA = {
+ infoDesktop: `존재하지 않는 주소를 입력하셨거나, \n요청 페이지의 주소가 변경, 삭제되어 찾을 수 없습니다.`,
+ infoTablet: `존재하지 않는 주소를 입력하셨거나, \n요청 페이지의 주소가 변경, 삭제되어 \n찾을 수 없습니다.`,
+ infoMobile: `존재하지 않는 주소를 입력하셨거나, \n요청 페이지의 주소가 변경, 삭제되어 \n찾을 수 없습니다.`,
+};
diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js
new file mode 100644
index 0000000..7805db8
--- /dev/null
+++ b/src/pages/NotFound/index.js
@@ -0,0 +1,151 @@
+import styled from 'styled-components';
+import errorLionImg from '../../assets/imgs/error_lion.svg';
+import { useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import ErrorInfo from '../../components/NotFound/ErrorInfo';
+import ErrorInfoTablet from '../../components/NotFound/ErrorInfoTablet';
+import ErrorInfoMobile from '../../components/NotFound/ErrorInfoMobile';
+const NotFound = () => {
+ const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+ const DESKTOP_WIDTH = 1199;
+ const TABLET_WIDTH = 599;
+
+ const navigate = useNavigate();
+
+ const changeWidth = () => {
+ if (innerWidth > DESKTOP_WIDTH) {
+ return ;
+ } else if (innerWidth > TABLET_WIDTH) {
+ return ;
+ } else {
+ return ;
+ }
+ };
+
+ useEffect(() => {
+ const resizeListener = () => {
+ setInnerWidth(window.innerWidth);
+ };
+ window.addEventListener('resize', resizeListener);
+ return () => {
+ window.removeEventListener('resize', resizeListener);
+ };
+ });
+
+ return (
+
+
+
+
+ '404' 에러
+ 현재 페이지를 찾을 수 없습니다.
+ {changeWidth()}
+
+ navigate('/')}>메인으로
+
+
+
+ );
+};
+const PageContainer = styled.div`
+ height: calc(100vh - 56px - 100px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ @media ${({ theme }) => theme.devices.TABLET} {
+ height: calc(100vh - 70px - 100px);
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ height: calc(100vh - 70px - 100px);
+ }
+`;
+const ErrorContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ width: 300px;
+ @media ${({ theme }) => theme.devices.TABLET} {
+ flex-direction: row;
+ gap: 20px;
+ width: 500px;
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ gap: 20px;
+ width: 760px;
+ }
+`;
+const ErrorImg = styled.img`
+ /* 이미지 드래그 방지 */
+ -webkit-user-drag: none;
+ -khtml-user-drag: none;
+ -moz-user-drag: none;
+ -o-user-drag: none;
+ width: 100px;
+ height: auto;
+ margin-bottom: 20px;
+ @media ${({ theme }) => theme.devices.TABLET} {
+ width: 180px;
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ width: 260px;
+ }
+`;
+const DetailContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ @media ${({ theme }) => theme.devices.TABLET} {
+ align-items: flex-start;
+ }
+`;
+const Title = styled.p`
+ font-size: 30px;
+ font-weight: 700;
+ margin-bottom: 35px;
+ color: ${({ theme }) => theme.colors.MAIN_PINK};
+ @media ${({ theme }) => theme.devices.TABLET} {
+ font-size: 30px;
+ margin-bottom: 30px;
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ font-size: 50px;
+ margin-bottom: 40px;
+ }
+`;
+const Subtitle = styled.p`
+ font-size: 17px;
+ margin-bottom: 15px;
+ @media ${({ theme }) => theme.devices.TABLET} {
+ font-size: 18px;
+ margin-bottom: 15px;
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ font-size: 22px;
+ margin-bottom: 20px;
+ }
+`;
+
+const MainButton = styled.button`
+ width: 120px;
+ height: 50px;
+ background-color: #282828;
+ border-radius: 30px;
+ font-size: 14px;
+ color: #939393;
+ &:hover {
+ background-color: #3d3d3d;
+ }
+ @media ${({ theme }) => theme.devices.TABLET} {
+ width: 130px;
+ height: 50px;
+ border-radius: 30px;
+ font-size: 14px;
+ }
+ @media ${({ theme }) => theme.devices.DESKTOP} {
+ width: 150px;
+ height: 60px;
+ font-size: 18px;
+ }
+`;
+export default NotFound;
diff --git a/src/styles/Theme.js b/src/styles/Theme.js
index 826b1ff..e39c45e 100644
--- a/src/styles/Theme.js
+++ b/src/styles/Theme.js
@@ -42,7 +42,7 @@ export const Theme = {
`,
SMALL_ERROR_TXT: css`
- font-size: 8px;
+ font-size: 10px;
`,
M_DEFAULT_TXT: css`
font-size: 12px;
diff --git a/src/validation/writeValidationSchema.js b/src/validation/writeValidationSchema.js
index 62cca8f..a9da25c 100644
--- a/src/validation/writeValidationSchema.js
+++ b/src/validation/writeValidationSchema.js
@@ -13,7 +13,10 @@ export const writeValidationSchema = yup.object().shape({
email: yup
.string()
.required('이메일은 필수로 작성해주세요.')
- .email('이메일 형식으로 작성해주세요.'),
+ .matches(
+ /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
+ '이메일 형식으로 작성해주세요.',
+ ),
phoneNumber: yup
.string()
.required('전화번호는 필수로 작성해주세요.')
@@ -30,5 +33,4 @@ export const writeValidationSchema = yup.object().shape({
agree1: yup.boolean().required(),
agree2: yup.boolean().required(),
- agree3: yup.boolean().required(),
});