[#141] Fix: 필요하지 않은 재료이면 cursor 허용안함 (#142)

Co-authored-by: minsour <[email protected]>
tteokguk-please · Feb 9, 2024 · 23ac6c0 · 23ac6c0
1 parent 3e2cd37
commit 23ac6c0
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 90 deletions.
diff --git a/src/components/TteokgukCookingPage/Ingredient.tsx b/src/components/TteokgukCookingPage/Ingredient.tsx
@@ -59,7 +59,7 @@ const styles = {
       height: "5.6rem",
       borderRadius: "50%",
       backgroundColor,
-      cursor: `${backgroundColor === "white" ? "default" : "pointer"}`,
+      cursor: `${backgroundColor === "white" ? "not-allowed" : "pointer"}`,
     }),
   ingredientNumber: css({
     position: "absolute",

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -39,16 +39,18 @@ const Header = ({
 
   return (
     <header className={classNames(styles.header, className)}>
-      {showSearchIcon && (
-        <Link to="/user/search" className={styles.icon}>
-          <SearchIcon aria-label="검색" />
-        </Link>
-      )}
-      {showBackButton && (
-        <div onClick={handleClickBefore} className={styles.icon} aria-label="뒤로 가기">
-          <BeforeIcon />
-        </div>
-      )}
+      <div className={styles.leftSection}>
+        {showSearchIcon && (
+          <Link to="/user/search" className={styles.icon}>
+            <SearchIcon aria-label="검색" />
+          </Link>
+        )}
+        {showBackButton && (
+          <button onClick={handleClickBefore} className={styles.icon} aria-label="뒤로 가기">
+            <BeforeIcon />
+          </button>
+        )}
+      </div>
       <div className={styles.title}>
         <h1>{children}</h1>
       </div>
@@ -102,13 +104,18 @@ const styles = {
     height: "4.8rem",
     padding: "0 1.6rem",
   }),
-  icon: css({
+  leftSection: css({
+    display: "flex",
     flex: 1,
+    alignItems: "center",
+  }),
+  icon: css({
     cursor: "pointer",
   }),
   title: css({
     fontSize: "1.6rem",
     fontWeight: 700,
+    userSelect: "none",
   }),
   actionIcon: css({
     display: "flex",

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -11,9 +11,7 @@ const HomePage = () => {
   return (
     <div className={styles.container}>
       <h1 className={styles.logo}>
-        <Link to="/">
-          <img src={homeLogo} alt="로고" />
-        </Link>
+        <img src={homeLogo} alt="로고" />
       </h1>
       <div className={styles.dragon}>
         <img src={tryDragon} alt="떡국 권하는 용용이" />

diff --git a/src/pages/MainPage.fallback.tsx b/src/pages/MainPage.fallback.tsx
@@ -6,56 +6,43 @@ import Header from "@/components/common/Header";
 import Loading from "@/components/common/Loading";
 import { Link } from "@/routes/Link";
 import HeaderLogo from "@/assets/svg/header-logo.svg";
+import classNames from "classnames";
 
 const MainPageFallback = () => {
   return (
-    <div className={styles.container}>
-      <main className={styles.main}>
-        <Header showSearchIcon actionIcon="profile">
-          <Link to="/tteokguks">
-            <HeaderLogo aria-label="용용이" />
-          </Link>
-        </Header>
-        <div className={styles.tabContainer}>
-          <Tabs selectedIndex={0} onSelect={() => {}}>
-            <TabList className={styles.tabList}>
-              <Tab className={styles.selectedTab}>새로운 떡국</Tab>
-              <Tab>완성된 떡국</Tab>
-            </TabList>
-            <TabPanel className={styles.tabPanel}>
-              <Loading />
-            </TabPanel>
-            <TabPanel className={styles.tabPanel}>
-              <Loading />
-            </TabPanel>
-          </Tabs>
-        </div>
-      </main>
-    </div>
+    <>
+      <Header showSearchIcon actionIcon="profile">
+        <Link to="/tteokguks">
+          <HeaderLogo aria-label="용용이" />
+        </Link>
+      </Header>
+      <div className={styles.tabContainer}>
+        <Tabs selectedIndex={0} onSelect={() => {}}>
+          <TabList className={styles.tabList}>
+            <Tab className={classNames(styles.tab, styles.selectedTab)}>새로운 떡국</Tab>
+            <Tab className={styles.tab}>완성된 떡국</Tab>
+          </TabList>
+          <TabPanel className={styles.tabPanel}>
+            <Loading />
+          </TabPanel>
+          <TabPanel className={styles.tabPanel}>
+            <Loading />
+          </TabPanel>
+        </Tabs>
+      </div>
+    </>
   );
 };
 
 export default MainPageFallback;
 
 const styles = {
-  container: css({
-    maxWidth: "50rem",
-    width: "100%",
-    height: "100vh",
-    margin: "0 auto",
-  }),
-
-  main: css({
-    width: "100%",
-    minHeight: "100vh",
-    flexGrow: 1,
-    backgroundColor: "back",
-  }),
-
   tabContainer: css({
     position: "relative",
+    width: "100%",
     height: "calc(100% - 4.8rem)",
     overflow: "auto",
+    paddingBottom: "2rem",
   }),
 
   tabList: css({
@@ -70,6 +57,12 @@ const styles = {
     cursor: "pointer",
   }),
 
+  tab: css({
+    width: "50%",
+    textAlign: "center",
+    outline: "none",
+  }),
+
   selectedTab: css({
     position: "relative",
     _after: {

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -60,9 +60,7 @@ const MainPage = () => {
   return (
     <>
       <Header showSearchIcon actionIcon="profile">
-        <Link to="/tteokguks">
-          <HeaderLogo aria-label="용용이" />
-        </Link>
+        <HeaderLogo aria-label="용용이" />
       </Header>
       <div className={styles.container}>
         <>
@@ -138,6 +136,7 @@ const styles = {
   tab: css({
     width: "50%",
     textAlign: "center",
+    outline: "none",
   }),
   tabPanel: css({
     display: "flex",

diff --git a/src/pages/MyActivityPage.fallback.tsx b/src/pages/MyActivityPage.fallback.tsx
@@ -4,52 +4,35 @@ import { css } from "@styled-system/css";
 
 import Header from "@/components/common/Header";
 import Loading from "@/components/common/Loading";
+import classNames from "classnames";
 
 const MyActivityPageFallback = () => {
   return (
-    <div className={styles.container}>
-      <main className={styles.main}>
-        <Header showBackButton>활동 내역</Header>
-        <div className={styles.tabContainer}>
-          <Tabs selectedIndex={0} onSelect={() => {}}>
-            <TabList className={styles.tabList}>
-              <Tab className={styles.selectedTab}>받은 떡국 재료</Tab>
-              <Tab>내가 응원한 떡국</Tab>
-            </TabList>
-            <TabPanel className={styles.tabPanel}>
-              <Loading />
-            </TabPanel>
-            <TabPanel className={styles.tabPanel}>
-              <Loading />
-            </TabPanel>
-          </Tabs>
-        </div>
-      </main>
-    </div>
+    <>
+      <Header showBackButton>활동 내역</Header>
+      <div className={styles.tabContainer}>
+        <Tabs selectedIndex={0} onSelect={() => {}}>
+          <TabList className={styles.tabList}>
+            <Tab className={classNames(styles.tab, styles.selectedTab)}>받은 떡국 재료</Tab>
+            <Tab className={styles.tab}>내가 응원한 떡국</Tab>
+          </TabList>
+          <TabPanel className={styles.tabPanel}>
+            <Loading />
+          </TabPanel>
+          <TabPanel className={styles.tabPanel}>
+            <Loading />
+          </TabPanel>
+        </Tabs>
+      </div>
+    </>
   );
 };
 
 export default MyActivityPageFallback;
 
 const styles = {
-  container: css({
-    maxWidth: "50rem",
-    width: "100%",
-    height: "100vh",
-    margin: "0 auto",
-  }),
-
-  main: css({
-    width: "100%",
-    minHeight: "100vh",
-    flexGrow: 1,
-    backgroundColor: "back",
-  }),
-
   tabContainer: css({
-    position: "relative",
     height: "calc(100% - 4.8rem)",
-    overflow: "auto",
   }),
 
   tabList: css({
@@ -64,6 +47,11 @@ const styles = {
     cursor: "pointer",
   }),
 
+  tab: css({
+    width: "50%",
+    textAlign: "center",
+  }),
+
   selectedTab: css({
     position: "relative",
     _after: {