Merge pull request #363 from js43o/add-no-contents

[Refactor] 모각코 게시글 데이터 페칭 에러 및 등록된 게시글이 0개일 때 UI 표시

app/frontend/src/pages/Mogaco/ErrorPage.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular16 } from '@/styles/font.css';
+
+const { morakRed } = vars.color;
+
+export const text = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '0.8rem',
+    textAlign: 'center',
+    color: morakRed,
+  },
+]);

app/frontend/src/pages/Mogaco/ErrorPage.tsx

@@ -0,0 +1,25 @@
+import { Button, MessageWrapper } from '@/components';
+
+import * as styles from './ErrorPage.css';
+
+export function ErrorPage() {
+  const onClickRefresh = () => {
+    window.location.href = '/mogaco';
+  };
+
+  return (
+    <MessageWrapper>
+      <p className={styles.text}>
+        정보를 불러오는 데에 실패했습니다.
+        <Button
+          theme="primary"
+          shape="line"
+          size="large"
+          onClick={onClickRefresh}
+        >
+          새로고침
+        </Button>
+      </p>
+    </MessageWrapper>
+  );
+}

app/frontend/src/pages/Mogaco/MogacoList.tsx

@@ -4,6 +4,7 @@ import { Loading, MogacoItem } from '@/components';
 import { queryKeys } from '@/queries';
 
 import { EmptyPage } from './EmptyPage';
+import { ErrorPage } from './ErrorPage';
 import * as styles from './MogacoList.css';
 
 type MogacoListProp = {
@@ -23,6 +24,14 @@ export function MogacoList({ currentPage }: MogacoListProp) {
     );
   }
 
+  if (!mogacoList) {
+    return (
+      <div className={styles.container}>
+        <ErrorPage />
+      </div>
+    );
+  }
+
   return (
     <div className={styles.container}>
       {mogacoList && mogacoList.length > 0 ? (

app/frontend/src/pages/Mogaco/NoContents.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular18 } from '@/styles/font.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '0.4rem',
+  height: '32rem',
+  filter: 'grayscale(80%)',
+});
+
+export const text = style([
+  sansRegular18,
+  {
+    textAlign: 'center',
+    lineHeight: 1.4,
+    color: vars.color.grayscale400,
+  },
+]);

app/frontend/src/pages/Mogaco/NoContents.tsx

@@ -0,0 +1,15 @@
+import { ReactComponent as Morak } from '@/assets/icons/morak.svg';
+
+import * as styles from './NoContents.css';
+
+export function NoContents() {
+  return (
+    <div className={styles.container}>
+      <Morak width={128} height={128} />
+      <p className={styles.text}>
+        아직 속한 그룹에 등록된 모각코가 없습니다.
+        <br />첫 모각코를 열어보세요.
+      </p>
+    </div>
+  );
+}