Merge pull request #35 from Strong-Potato/28-feat-create-alarm-page

feat: create alarm page #28

src/components/Alarm/Back/Back.module.scss

@@ -0,0 +1,14 @@
+@use "@/sass" as *;
+
+.container {
+  width: 100%;
+  padding: 16px 20px;
+
+  &__button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    @include typography(button);
+  }
+}

src/components/Alarm/Back/Back.tsx

@@ -0,0 +1,20 @@
+import { AiOutlineLeft } from "react-icons/ai";
+
+import styles from "./Back.module.scss";
+
+import useGoBack from "@/hooks/useGoBack";
+function Back() {
+  const goBack = useGoBack();
+  return (
+    <div className={styles.container}>
+      <button onClick={goBack} className={styles.container__button}>
+        <div>
+          <AiOutlineLeft />
+        </div>
+        <p>알림</p>
+      </button>
+    </div>
+  );
+}
+
+export default Back;

src/components/Alarm/TabCapsule/Content/Content.module.scss

@@ -0,0 +1,35 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  width: 100%;
+  border-bottom: 1px solid $neutral100;
+
+  &__thumbnail {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    &__title {
+      @include typography(tabLabel);
+      text-align: left;
+    }
+
+    &__time {
+      color: $neutral400;
+      @include typography(captionSmall);
+      letter-spacing: -0.12px;
+    }
+  }
+}

src/components/Alarm/TabCapsule/Content/Content.tsx

@@ -0,0 +1,21 @@
+import styles from "./Content.module.scss";
+
+import { ContentProps } from "@/types/alarm";
+
+function Content({ contents }: ContentProps) {
+  return (
+    <>
+      {contents.map((content, index) => (
+        <button key={index} className={styles.container}>
+          <img src={content.url} className={styles.container__thumbnail} />
+          <div className={styles.container__wrapper}>
+            <p className={styles.container__wrapper__title}>{content.title}</p>
+            <p className={styles.container__wrapper__time}>{content.time}</p>
+          </div>
+        </button>
+      ))}
+    </>
+  );
+}
+
+export default Content;

src/components/Alarm/TabCapsule/TabCapsule.module.scss

@@ -0,0 +1,10 @@
+@use "@/sass" as *;
+
+.title {
+  color: $neutral300;
+  @include typography(button);
+
+  &[aria-selected="true"] {
+    color: $neutral900;
+  }
+}

src/components/Alarm/TabCapsule/TabCapsule.tsx

@@ -0,0 +1,94 @@
+import {
+  Tab,
+  TabIndicator,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
+
+import styles from "./TabCapsule.module.scss";
+
+import Content from "./Content/Content";
+
+const AllContents = [
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
+    time: "1분전",
+  },
+  {
+    url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
+    title: "개인정보 보호정책이 변경되었습니다.",
+    time: "2분전",
+  },
+  {
+    url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
+    title: "개인정보 보호정책이 변경되었습니다.",
+    time: "2분전",
+  },
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
+    time: "4분전",
+  },
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
+    time: "5분전",
+  },
+];
+
+const SpaceTravelContents = [
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
+    time: "1분전",
+  },
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
+    time: "4분전",
+  },
+  {
+    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
+    time: "5분전",
+  },
+];
+
+function TabCapsule() {
+  return (
+    <Tabs isFitted variant="unstyled">
+      <TabList>
+        <Tab
+          className={styles.title}
+          fontSize={"button"}
+          fontWeight={"button"}
+          lineHeight={"button"}
+        >
+          전체
+        </Tab>
+        <Tab
+          className={styles.title}
+          fontSize={"button"}
+          fontWeight={"button"}
+          lineHeight={"button"}
+        >
+          여행스페이스
+        </Tab>
+      </TabList>
+      <TabIndicator mt="-1.5px" height="2px" bg="#2388FF" />
+      <TabPanels>
+        <TabPanel p={0}>
+          <Content contents={AllContents} />
+        </TabPanel>
+        <TabPanel p={0}>
+          <Content contents={SpaceTravelContents} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+}
+
+export default TabCapsule;

src/hooks/useGoBack.ts

@@ -0,0 +1,12 @@
+import { useNavigate } from "react-router-dom";
+
+function useGoBack() {
+  const navigate = useNavigate();
+
+  const useGoBack = () => {
+    navigate(-1);
+  };
+
+  return useGoBack;
+}
+export default useGoBack;

src/pages/Alarm/Alarm.module.scss

@@ -0,0 +1,8 @@
+@use "@/sass";
+
+.container {
+  width: 100%;
+  min-height: 100vh;
+
+  position: relative;
+}

src/pages/Alarm/Alarm.tsx

@@ -0,0 +1,15 @@
+import styles from "./Alarm.module.scss";
+
+import Back from "@/components/Alarm/Back/Back";
+import TabCapsule from "@/components/Alarm/TabCapsule/TabCapsule";
+
+function Alarm() {
+  return (
+    <div className={styles.container}>
+      <Back />
+      <TabCapsule />
+    </div>
+  );
+}
+
+export default Alarm;

src/routes/MainRouter/MainRouter.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 
+import Alarm from "@/pages/Alarm/Alarm";
 import Detail from "@/pages/Detail/Detail";
 import Home from "@/pages/Home/Home";
 import Dashboard from "@/routes/Dashboard/Dashboard";
@@ -16,6 +17,7 @@ function MainRouter() {
       </Route>
       <Route path="voteDetail" element={<VoteDetail />} />
       <Route path="/detail/:id" element={<Detail />} />
+      <Route path="/alarm" element={<Alarm />} />
     </Routes>
   );
 }

src/types/alarm.ts

@@ -0,0 +1,9 @@
+interface Content {
+  url: string;
+  title: string;
+  time: string;
+}
+
+export interface ContentProps {
+  contents: Content[];
+}