diff --git a/src/components/Alarm/Back/Back.module.scss b/src/components/Alarm/Back/Back.module.scss
new file mode 100644
index 00000000..8ec77793
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/Alarm/Back/Back.tsx b/src/components/Alarm/Back/Back.tsx
new file mode 100644
index 00000000..cd4eae4f
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default Back;
diff --git a/src/components/Alarm/TabCapsule/Content/Content.module.scss b/src/components/Alarm/TabCapsule/Content/Content.module.scss
new file mode 100644
index 00000000..75c997b1
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/components/Alarm/TabCapsule/Content/Content.tsx b/src/components/Alarm/TabCapsule/Content/Content.tsx
new file mode 100644
index 00000000..c53efea7
--- /dev/null
+++ b/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) => (
+
+ ))}
+ >
+ );
+}
+
+export default Content;
diff --git a/src/components/Alarm/TabCapsule/TabCapsule.module.scss b/src/components/Alarm/TabCapsule/TabCapsule.module.scss
new file mode 100644
index 00000000..d84a0378
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/components/Alarm/TabCapsule/TabCapsule.tsx b/src/components/Alarm/TabCapsule/TabCapsule.tsx
new file mode 100644
index 00000000..1920e07c
--- /dev/null
+++ b/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 (
+
+
+
+ 전체
+
+
+ 여행스페이스
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default TabCapsule;
diff --git a/src/components/test.tsx b/src/components/test.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/hooks/useGoBack.ts b/src/hooks/useGoBack.ts
new file mode 100644
index 00000000..65d41c9d
--- /dev/null
+++ b/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;
diff --git a/src/pages/Alarm/Alarm.module.scss b/src/pages/Alarm/Alarm.module.scss
new file mode 100644
index 00000000..4833697d
--- /dev/null
+++ b/src/pages/Alarm/Alarm.module.scss
@@ -0,0 +1,8 @@
+@use "@/sass";
+
+.container {
+ width: 100%;
+ min-height: 100vh;
+
+ position: relative;
+}
diff --git a/src/pages/Alarm/Alarm.tsx b/src/pages/Alarm/Alarm.tsx
new file mode 100644
index 00000000..38ee05a0
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+}
+
+export default Alarm;
diff --git a/src/routes/MainRouter/MainRouter.tsx b/src/routes/MainRouter/MainRouter.tsx
index 43cc9187..5494a07f 100644
--- a/src/routes/MainRouter/MainRouter.tsx
+++ b/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() {
} />
} />
+ } />
);
}
diff --git a/src/types/alarm.ts b/src/types/alarm.ts
new file mode 100644
index 00000000..7bd769a2
--- /dev/null
+++ b/src/types/alarm.ts
@@ -0,0 +1,9 @@
+interface Content {
+ url: string;
+ title: string;
+ time: string;
+}
+
+export interface ContentProps {
+ contents: Content[];
+}