Merge pull request #116 from DevKor-github/feat/#106/no-results

Author: halionaz

src/common/components/NoResult/index.tsx

@@ -0,0 +1,26 @@
+import { cx } from '@styled-system/css';
+
+import * as s from './style.css';
+
+interface Props {
+  type: 'search' | '404';
+}
+const NoResult = ({ type }: Props) => {
+  const icon = type === 'search' ? 'mgc_alert_fill' : 'mgc_puzzled_fill';
+  const title = type === 'search' ? '검색 결과가 없어요!' : '앗, 잘못된 접근이에요!';
+  const description = type === 'search' ? '다른 키워드로 다시 검색해 주세요.' : '다른 경로로 접속해 주세요.';
+  return (
+    <div className={s.Container}>
+      <div
+        className={cx(icon, s.Icon)}
+        role="img"
+        aria-label={type === 'search' ? '알림 아이콘' : '당황 아이콘'}
+      />
+      <div className={s.Text}>
+        <p>{title}</p>
+        <p className={s.Description}>{description}</p>
+      </div>
+    </div>
+  );
+};
+export default NoResult;

src/common/components/NoResult/style.css.ts

@@ -0,0 +1,32 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+});
+
+export const Icon = css({
+  fontSize: '3rem',
+  color: 'main',
+});
+
+export const Text = css({
+  display: 'flex',
+  flexDir: 'column',
+  alignItems: 'center',
+  gap: '0.375rem',
+  color: '100',
+  fontSize: '1.25rem',
+  fontWeight: 600,
+  lineHeight: 1.4,
+  letterSpacing: '-0.05rem',
+});
+
+export const Description = css({
+  color: '80',
+  fontSize: '1rem',
+  fontWeight: 400,
+  letterSpacing: '-0.04rem',
+});

src/features/home/components/ItemList/index.tsx

@@ -1,3 +1,4 @@
+import NoResult from '@/common/components/NoResult';
 import ItemCard from '@/features/home/components/ItemCard';
 import type { ItemInterface } from '@/features/home/types';
 
@@ -7,11 +8,10 @@ interface Props {
   itemList: ItemInterface[];
 }
 const ItemList = ({ itemList }: Props) => {
+  const isEmpty = itemList.length === 0;
   return (
-    <div className={s.Container}>
-      {itemList.map(item => (
-        <ItemCard key={item.itemId} data={item} />
-      ))}
+    <div className={s.Container({ isEmpty })}>
+      {isEmpty ? <NoResult type="search" /> : itemList.map(item => <ItemCard key={item.itemId} data={item} />)}
     </div>
   );
 };

src/features/home/components/ItemList/style.css.ts

@@ -1,7 +1,18 @@
-import { css } from '@styled-system/css';
+import { cva } from '@styled-system/css';
 
-export const Container = css({
-  display: 'flex',
-  flexDir: 'column',
-  gap: '1rem',
+export const Container = cva({
+  base: {
+    display: 'flex',
+    flexDir: 'column',
+    gap: '1rem',
+  },
+  variants: {
+    isEmpty: {
+      true: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+      },
+    },
+  },
 });

src/pages/NotFoundPage/index.tsx

@@ -1,15 +1,21 @@
 import { useNavigate } from 'react-router';
 
-import Chip from '@/common/components/Chip';
 import SafeArea from '@/common/components/SafeArea';
+import NoResult from '@/common/components/NoResult';
+import Btn from '@/common/components/Button';
+import * as s from './style.css';
 
 const NotFoundPage = () => {
   const navigate = useNavigate();
 
   return (
     <SafeArea>
-      <Chip onClick={() => navigate('/')}>홈으로 가기</Chip>
-      <h1>페이지를 찾을 수 없어요 . . .</h1>
+      <div className={s.Container}>
+        <NoResult type="404" />
+        <Btn mode="main" className={s.Button} onClick={() => navigate('/')}>
+          홈으로 돌아가기
+        </Btn>
+      </div>
     </SafeArea>
   );
 };

src/pages/NotFoundPage/style.css.ts

@@ -0,0 +1,15 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  display: 'flex',
+  width: 'full',
+  height: 'full',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDir: 'column',
+  gap: '2.25rem',
+});
+
+export const Button = css({
+  width: '17rem',
+});