-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
240 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
35 changes: 35 additions & 0 deletions
35
src/components/Alarm/TabCapsule/Content/Content.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
@use "@/sass" as *; | ||
|
||
.title { | ||
color: $neutral300; | ||
@include typography(button); | ||
|
||
&[aria-selected="true"] { | ||
color: $neutral900; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
function useGoBack() { | ||
const navigate = useNavigate(); | ||
|
||
const useGoBack = () => { | ||
navigate(-1); | ||
}; | ||
|
||
return useGoBack; | ||
} | ||
export default useGoBack; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
@use "@/sass"; | ||
|
||
.container { | ||
width: 100%; | ||
min-height: 100vh; | ||
|
||
position: relative; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
interface Content { | ||
url: string; | ||
title: string; | ||
time: string; | ||
} | ||
|
||
export interface ContentProps { | ||
contents: Content[]; | ||
} |