[#134] Feat: 데이터 없는 경우 UI 구현 (#135)

tteokguk-please · Feb 9, 2024 · 2ff1056 · 2ff1056
1 parent ced1436
commit 2ff1056
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 5 deletions.
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -61,9 +61,21 @@ const MainPage = () => {
               </Tab>
             </TabList>
             <TabPanel className={styles.tabPanel}>
+              {!isPending && tteokguks.length === 0 && (
+                <div className={styles.noTteokguk}>
+                  <div className={styles.noTteokgukTitle}>현재 응원을 요청하는 떡국이 없어요.</div>
+                  <div>나만의 떡국을 만들고, 다른 사람들과 재료를 나눠보세요.</div>
+                </div>
+              )}
               <TteokgukWithCaptionList tteokguks={tteokguks} />
             </TabPanel>
             <TabPanel className={styles.tabPanel}>
+              {!isPending && tteokguks.length === 0 && (
+                <div className={styles.noTteokguk}>
+                  <div className={styles.noTteokgukTitle}>아직 만들어진 떡국이 없어요.</div>
+                  <div>도움이 필요한 떡국들에게 재료를 나눠주세요. </div>
+                </div>
+              )}
               <TteokgukWithCaptionList tteokguks={tteokguks} />
             </TabPanel>
           </Tabs>
@@ -148,4 +160,14 @@ const styles = {
   isFetchingLoading: css({
     width: "50%",
   }),
+  noTteokguk: css({
+    textAlign: "center",
+    marginTop: "1.6rem",
+    fontSize: "1.4rem",
+  }),
+  noTteokgukTitle: css({
+    fontSize: "1.6rem",
+    fontWeight: 700,
+    marginBottom: "0.8rem",
+  }),
 };
diff --git a/src/pages/MyActivityPage.tsx b/src/pages/MyActivityPage.tsx
@@ -58,11 +58,29 @@ const MyActivityPage = () => {
             </Tab>
           </TabList>
           <TabPanel className={styles.receivedTab}>
+            {!isPending && receivedIngredientList?.length === 0 && (
+              <div className={styles.noTteokguk}>
+                <div className={styles.noTteokgukTitle}>친구들에게 떡국 재료를 요청해보세요.</div>
+                <div>
+                  <div>내 떡국 주소를 친구들에게 공유하고,</div>
+                  친구들에게 도움을 요청해보세요!
+                </div>
+              </div>
+            )}
             {receivedIngredientList && (
               <ReceivedIngredientsList receivedIngredientList={receivedIngredientList} />
             )}
           </TabPanel>
           <TabPanel className={styles.mySupportedTab}>
+            {!isPending && mySupportedTteokguks?.length === 0 && (
+              <div className={styles.noTteokguk}>
+                <div className={styles.noTteokgukTitle}>아직 응원하신 떡국이 없어요.</div>
+                <div>
+                  <div>메인페이지나 랜덤방문을 통해 다른 사람들에게</div> 응원의 재료를
+                  전달해보세요!
+                </div>
+              </div>
+            )}
             {mySupportedTteokguks && (
               <MySupportedTteokgukCardList tteokguks={mySupportedTteokguks} />
             )}
@@ -130,4 +148,14 @@ const styles = {
     gap: "1.6rem",
     width: "100%",
   }),
+  noTteokguk: css({
+    textAlign: "center",
+    marginTop: "1.6rem",
+    fontSize: "1.4rem",
+  }),
+  noTteokgukTitle: css({
+    fontSize: "1.6rem",
+    fontWeight: 700,
+    marginBottom: "0.8rem",
+  }),
 };
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -12,11 +12,7 @@ import ErrorFallbackPage from "./ErrorFallbackPage";
 
 import { Link } from "@/routes/Link";
 import useRouter from "@/routes/useRouter";
-import {
-  $getMyDetails,
-  $getRandomUserDetails,
-  $deleteLoggedInUser,
-} from "@/store/user";
+import { $getMyDetails, $getRandomUserDetails, $deleteLoggedInUser } from "@/store/user";
 import { INGREDIENT_ICON_BY_KEY } from "@/constants/ingredient";
 import Header from "@/components/common/Header";
 import IconButton from "@/components/common/IconButton";
@@ -178,6 +174,12 @@ const MyPage = () => {
               <button>소원 떡국 만들기</button>
             </Link>
           </div>
+          {!isPending && tteokguks.length === 0 && (
+            <div className={styles.noTteokguk}>
+              <div className={styles.noTteokgukTitle}>아직 만든 떡국이 없어요.</div>
+              <div>소원 떡국 만들기 버튼을 클릭하여 새 떡국을 만들어보세요.</div>
+            </div>
+          )}
           <TteokgukList tteokguks={tteokguks} />
         </div>
         <div>
@@ -284,4 +286,14 @@ const styles = {
     fontSize: "1.4rem",
     marginY: "1.6rem",
   }),
+  noTteokguk: css({
+    textAlign: "center",
+    marginTop: "1.6rem",
+    fontSize: "1.4rem",
+  }),
+  noTteokgukTitle: css({
+    fontSize: "1.6rem",
+    fontWeight: 700,
+    marginBottom: "0.8rem",
+  }),
 };
diff --git a/src/pages/UserPage.tsx b/src/pages/UserPage.tsx
@@ -15,6 +15,7 @@ import UserProfileSection from "@/components/common/UserProfileSection";
 import TteokgukList from "@/components/common/TteokgukList";
 import { $getRandomUserDetails, $getUserDetail } from "@/store/user";
 import VisitIcon from "@/assets/svg/visit.svg";
+import notFound from "@/assets/images/not-found.png";
 
 const UserPage = () => {
   const { id } = useParams();
@@ -81,6 +82,13 @@ const UserPage = () => {
           <div className={styles.wishTteokgukTitle}>
             <div>사용자님의 소원 떡국 리스트</div>
           </div>
+          {!isPending && tteokguks.length === 0 && (
+            <div className={styles.noTteokguk}>
+              <div className={styles.noTteokgukTitle}>아직 만든 떡국이 없어요.</div>
+              <div>랜덤 방문을 통해 떡국을 만든 사용자를 찾아보세요.</div>
+              <img className={styles.notFound} src={notFound} alt="데이터 없음" />
+            </div>
+          )}
           <TteokgukList tteokguks={tteokguks} className={styles.tteokgukList} />
         </div>
       </div>
@@ -114,4 +122,21 @@ const styles = {
     rowGap: "1.2rem",
     marginTop: "1.2rem",
   }),
+  noTteokguk: css({
+    display: "flex",
+    flexFlow: "column wrap",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    marginTop: "1.6rem",
+    fontSize: "1.4rem",
+  }),
+  noTteokgukTitle: css({
+    fontSize: "1.6rem",
+    fontWeight: 700,
+    marginBottom: "0.8rem",
+  }),
+  notFound: css({
+    marginTop: "1.6rem",
+  }),
 };