-
- {yyyymmddTommdd(deadline)}
+
+
+ {yyyymmddTommdd(deadline)}
까지 가입 가능
-
-
- 모집인원
-
- {currentMemberCount} / {maxMemberCount}
-
-
-
-
+
+
+
+ 모집인원
+
+ {currentMemberCount} / {maxMemberCount}
+
+
+
+ 스터디장
+ {owner}
+
+
+
+
diff --git a/frontend/src/pages/main-page/MainPage.stories.tsx b/frontend/src/pages/error-page/ErrorPage.stories.tsx
similarity index 66%
rename from frontend/src/pages/main-page/MainPage.stories.tsx
rename to frontend/src/pages/error-page/ErrorPage.stories.tsx
index 7fa219224..9bf2507ef 100644
--- a/frontend/src/pages/main-page/MainPage.stories.tsx
+++ b/frontend/src/pages/error-page/ErrorPage.stories.tsx
@@ -1,17 +1,17 @@
import { Story } from '@storybook/react';
-import MainPage from '@pages/main-page/MainPage';
+import ErrorPage from '@pages/error-page/ErrorPage';
import Wrapper from '@components/wrapper/Wrapper';
export default {
- title: 'Pages/MainPage',
- component: MainPage,
+ title: 'Pages/ErrorPage',
+ component: ErrorPage,
};
const Template: Story = () => (
-
+
);
diff --git a/frontend/src/pages/error-page/ErrorPage.style.tsx b/frontend/src/pages/error-page/ErrorPage.style.tsx
new file mode 100644
index 000000000..d2e326e9f
--- /dev/null
+++ b/frontend/src/pages/error-page/ErrorPage.style.tsx
@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Page = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: 4px;
+
+ height: calc(100vh - 300px);
+`;
+
+export const HomeButton = styled.button`
+ ${({ theme }) => css`
+ padding: 8px 16px;
+
+ color: ${theme.colors.white};
+ background-color: ${theme.colors.primary.base};
+ border: none;
+ border-radius: 15px;
+ `}
+`;
diff --git a/frontend/src/pages/error-page/ErrorPage.tsx b/frontend/src/pages/error-page/ErrorPage.tsx
new file mode 100644
index 000000000..8fc24a4e0
--- /dev/null
+++ b/frontend/src/pages/error-page/ErrorPage.tsx
@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom';
+
+import sthWentWrongImage from '@assets/images/sth-went-wrong.png';
+
+import * as S from '@pages/error-page/ErrorPage.style';
+
+const ErrorPage: React.FC = () => {
+ const navigate = useNavigate();
+
+ const handleHomeButtonClick = () => {
+ navigate('/', { replace: true });
+ };
+
+ return (
+
+
+ 잘못된 접근입니다.
+
+ 홈으로 이동
+
+
+ );
+};
+
+export default ErrorPage;
diff --git a/frontend/src/pages/main-page/MainPage.style.tsx b/frontend/src/pages/main-page/MainPage.style.tsx
index 55d7a999f..d1d526589 100644
--- a/frontend/src/pages/main-page/MainPage.style.tsx
+++ b/frontend/src/pages/main-page/MainPage.style.tsx
@@ -7,7 +7,6 @@ export const CardList = styled.ul`
grid-template-columns: repeat(4, minmax(auto, 1fr));
grid-template-rows: 1fr;
gap: 32px;
- place-items: center;
& > li {
cursor: pointer;
diff --git a/frontend/src/pages/main-page/MainPage.tsx b/frontend/src/pages/main-page/MainPage.tsx
index d032fb35e..4f98fa612 100644
--- a/frontend/src/pages/main-page/MainPage.tsx
+++ b/frontend/src/pages/main-page/MainPage.tsx
@@ -75,7 +75,7 @@ const MainPage: React.FC = () => {
thumbnailAlt={`${study.title} 스터디 이미지`}
title={study.title}
excerpt={study.excerpt}
- isOpen={study.status === 'open'}
+ isOpen={study.status === 'OPEN'}
/>