Merge pull request #22 from ananjaemin/17-404오류-page-제작

feat: NotFound Page 디자인
tempfiles-team · Nov 2, 2022 · 8660a8b · 8660a8b
2 parents 8253d8a + 41e7ec5
commit 8660a8b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/pages/notfound/index.tsx b/src/pages/notfound/index.tsx
@@ -2,4 +2,9 @@ import React from 'react';
 
 import * as S from './styled';
 
-export const NotFoundPage: React.FC = () => <S.NotFoundPage>404</S.NotFoundPage>;
+export const NotFoundPage: React.FC = () => (
+  <S.NotFoundPageContainer>
+    <S.NotFoundText>404</S.NotFoundText>
+    <S.NotFoundSubText>Error 404 Not Found</S.NotFoundSubText>
+  </S.NotFoundPageContainer>
+);
diff --git a/src/pages/notfound/styled.ts b/src/pages/notfound/styled.ts
@@ -1,3 +1,19 @@
 import styled from '@emotion/styled';
 
-export const NotFoundPage = styled.div``;
+export const NotFoundPageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const NotFoundText = styled.div`
+  font-size: 18rem;
+  font-weight: 700;
+  margin: 0.5rem;
+`;
+
+export const NotFoundSubText = styled.div`
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0.5rem;
+`;