diff --git a/grass-diary/src/assets/svg/edit_note.svg b/grass-diary/src/assets/svg/edit_note.svg new file mode 100755 index 00000000..4f50de70 --- /dev/null +++ b/grass-diary/src/assets/svg/edit_note.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/grass-diary/src/assets/svg/event_note.svg b/grass-diary/src/assets/svg/event_note.svg new file mode 100755 index 00000000..8961de6b --- /dev/null +++ b/grass-diary/src/assets/svg/event_note.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/grass-diary/src/components/Notification/Callout.tsx b/grass-diary/src/components/Notification/Callout.tsx index ccc0694f..1363e0af 100644 --- a/grass-diary/src/components/Notification/Callout.tsx +++ b/grass-diary/src/components/Notification/Callout.tsx @@ -8,7 +8,9 @@ type CalloutProps = { const Callout = ({ message }: CalloutProps) => { return ( - + + + {message} ); diff --git a/grass-diary/src/constants/message.ts b/grass-diary/src/constants/message.ts index ae54eb74..c4972652 100644 --- a/grass-diary/src/constants/message.ts +++ b/grass-diary/src/constants/message.ts @@ -215,6 +215,14 @@ export const MODAL = { content: '일기를 삭제하시겠어요?\n삭제된 일기는 다시 되돌릴 수 없어요.', button: '삭제하기', }, + main: { + modal: { + preparation_notice: '준비 중인 서비스', + modal_notice: (type: string) => + `${type} 아직 준비 중이에요.\n빠르게 선보일 수 있도록 할게요!`, + confirm_button: '확인', + }, + }, } as const; export const TOAST = { diff --git a/grass-diary/src/pages/Main/Banner.tsx b/grass-diary/src/pages/Main/Banner.tsx deleted file mode 100644 index c0a5396f..00000000 --- a/grass-diary/src/pages/Main/Banner.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components'; -import { MAIN_MESSAGES } from '@constants/message'; -import { semantic } from '@styles/semantic'; -import { ReactComponent as Info } from '@svg/info.svg'; -import { TYPO } from '@styles/typo'; - -const Banner = () => { - return ( - <> -
- - - {MAIN_MESSAGES.banner.future_content_message} - -
- - ); -}; - -export default Banner; - -const Section = styled.div` - display: flex; - max-width: var(--vw-desktop-min, 60rem); - padding: var(--gap-4xl, 3rem) var(--gap-xl, 1.5rem); - justify-content: center; - align-items: center; -`; - -const Container = styled.div` - display: flex; - width: 26.25rem; - padding: var(--gap-3xs, 0.375rem) var(--gap-sm, 0.75rem); - align-items: flex-start; - gap: var(--gap-2xs, 0.5rem); - - border-radius: var(--radius-xs, 0.5rem); - border: var(--stroke-thin, 0.0625rem) solid - ${semantic.light.border.transparent.alternative}; - - background: ${semantic.light.fill.transparent.assistive}; -`; - -const Text = styled.p` - flex: 1 0 0; - - color: ${semantic.light.object.transparent.alternative}; - - ${TYPO.caption2} -`; diff --git a/grass-diary/src/pages/Main/BottomSection.tsx b/grass-diary/src/pages/Main/BottomSection.tsx index 980ad01d..fa1f8198 100644 --- a/grass-diary/src/pages/Main/BottomSection.tsx +++ b/grass-diary/src/pages/Main/BottomSection.tsx @@ -1,210 +1,96 @@ +import * as S from '@styles/Main/BottomSection.style'; import AnimateReward from './AnimateReward'; -import styled from 'styled-components'; -import subCharacter from '@icon/subCharacter.png'; -import Swal from 'sweetalert2'; + import { semantic } from '@styles/semantic'; import { useReward } from '@hooks/api/useReward'; -import { Link } from 'react-router-dom'; -import { MAIN_MESSAGES } from '@constants/message'; +import { useModal } from '@state/modal/useModal'; +import { MAIN_MESSAGES, MODAL } from '@constants/message'; import { ReactComponent as Avatar } from '@svg/avatarBg.svg'; import { ReactComponent as Arrow } from '@svg/chevron_right.svg'; import { ReactComponent as ArrowBlack } from '@svg/chevron_right_black.svg'; -import { TYPO } from '@styles/typo'; const BottomSection = () => { const { reward } = useReward(); + const { modal } = useModal(); + + const themeModal = () => { + const setting = { + title: MODAL.main.modal.preparation_notice, + content: MODAL.main.modal.modal_notice('테마 상점은'), + }; + + const button1 = { + active: true, + text: MODAL.main.modal.confirm_button, + color: semantic.light.accent.solid.alternative, + }; + modal(setting, button1); + }; - const modal = () => { - Swal.fire({ - title: '테마 상점', - text: '테마 상점 준비중이에요', - imageUrl: subCharacter, - imageWidth: 300, - imageHeight: 300, - imageAlt: 'Custom image', - confirmButtonColor: '#28CA3B', - confirmButtonText: '확인', - }); + const reviewModal = () => { + const setting = { + title: MODAL.main.modal.preparation_notice, + content: MODAL.main.modal.modal_notice('한 달 일기 회고는'), + }; + + const button1 = { + active: true, + text: MODAL.main.modal.confirm_button, + color: semantic.light.accent.solid.alternative, + }; + modal(setting, button1); }; - const handleClick = () => window.scrollTo(0, 0); return ( <> -
- - - {MAIN_MESSAGES.bottom_section.my_reward} - + + + + {MAIN_MESSAGES.bottom_section.my_reward} + {MAIN_MESSAGES.bottom_section.reward_message} - - - - - - + + + + + + - - - - + + + + {MAIN_MESSAGES.bottom_section.theme_store} - + - - - - - + + + + + {MAIN_MESSAGES.bottom_section.monthly_diary_review} - - + + {MAIN_MESSAGES.bottom_section.review_description} - - - - - - - {MAIN_MESSAGES.bottom_section.go_to_review} - - + + + + + + {MAIN_MESSAGES.bottom_section.go_to_review} + - - - - -
+ + + + + ); }; export default BottomSection; - -const Section = styled.div` - display: flex; - padding: var(--gap-lg, 1.25rem) var(--gap-xl, 1.5rem); - justify-content: center; - align-items: center; - gap: var(--gap-xl, 1.5rem); - align-self: stretch; -`; - -const Container = styled.div` - display: flex; - max-width: var(--vw-desktop-min, 60rem); - justify-content: center; - align-items: center; - gap: var(--gap-xl, 1.5rem); - flex: 1 0 0; -`; - -const Card = styled.div` - display: flex; - padding: var(--gap-lg, 1.25rem); - flex-direction: column; - align-items: flex-start; - gap: var(--gap-md, 1rem); - flex: 1 0 0; - - border-radius: var(--radius-md, 1rem); - border: var(--stroke-thin, 0.0625rem) solid - ${semantic.light.border.transparent.assistive}; - - background: ${semantic.light.bg.solid.normal}; - - box-shadow: 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.04), - 0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.08); -`; - -const Divider = styled.div` - width: 26.75rem; - height: 0.0625rem; - - background: ${semantic.light.border.transparent.alternative}; -`; - -const CardText = styled.p` - align-self: stretch; - - color: ${semantic.light.object.transparent.neutral}; - - ${TYPO.label3} -`; - -const CardSubText = styled.p` - align-self: stretch; - - color: ${semantic.light.object.transparent.neutral}; - - ${TYPO.caption2} -`; - -const Wrap = styled.div` - display: flex; - align-items: center; - gap: var(--gap-md, 1rem); - align-self: stretch; -`; - -const RewardContainer = styled.div` - display: flex; - align-items: center; - gap: var(--gap-2xs, 0.5rem); - flex: 1 0 0; -`; - -const RewardPointBox = styled.div` - flex: 1 0 0; - - color: ${semantic.light.accent.solid.normal}; -`; - -const ThemeMarketBtn = styled.button` - display: flex; - padding: var(--gap-xs, 0.625rem) var(--gap-md, 1rem); - justify-content: center; - align-items: center; - gap: var(--gap-2xs, 0.5rem); - - border-radius: var(--radius-xs, 0.5rem); - border: var(--stroke-thin, 0.0625rem) solid - ${semantic.light.accent.solid.normal}; - - background: ${semantic.light.accent.transparent.normal}; - - cursor: pointer; -`; - -const ThemeMarketText = styled.p` - color: ${semantic.light.accent.solid.hero}; - text-align: center; - - ${TYPO.label2} -`; - -const RetrospectContainer = styled.div` - display: flex; - justify-content: flex-end; - align-items: center; - align-self: stretch; -`; - -const RetrospectBtn = styled.button` - display: flex; - padding: var(--gap-xs, 0.625rem) var(--gap-md, 1rem); - justify-content: center; - align-items: center; - gap: var(--gap-2xs, 0.5rem); - - border-radius: var(--radius-xs, 0.5rem); -`; - -const RetrospectText = styled.p` - text-align: center; - - ${TYPO.label2} -`; diff --git a/grass-diary/src/pages/Main/Main.tsx b/grass-diary/src/pages/Main/Main.tsx index 96ad4114..c70573f7 100644 --- a/grass-diary/src/pages/Main/Main.tsx +++ b/grass-diary/src/pages/Main/Main.tsx @@ -1,12 +1,14 @@ import { useNavigate } from 'react-router-dom'; import { useEffect } from 'react'; import { checkAuth } from '@utils/authUtils'; -import { PopularFeed, Container } from '@components/index'; +import { PopularFeed, Container, Callout } from '@components/index'; import TopSection from './TopSection'; import MiddleSection from './MiddleSection'; import BottomSection from './BottomSection'; +import Spacer from './Spacer'; import { useAuthActions } from '@state/auth/authStore'; +import { MAIN_MESSAGES } from '@constants/message'; const Main = () => { const navigate = useNavigate(); @@ -46,6 +48,10 @@ const Main = () => { +
+ +
+ ); }; diff --git a/grass-diary/src/pages/Main/MiddleSection.tsx b/grass-diary/src/pages/Main/MiddleSection.tsx index 9a9801d8..7b3b5fe1 100644 --- a/grass-diary/src/pages/Main/MiddleSection.tsx +++ b/grass-diary/src/pages/Main/MiddleSection.tsx @@ -1,10 +1,8 @@ +import * as S from '@styles/Main/MiddleSection.style'; import dayjs from 'dayjs'; -import styled from 'styled-components'; import { useCallback } from 'react'; -import { semantic } from '@styles/semantic'; import { useGrassRecord } from '@hooks/api/useGrassRecord'; import { MAIN_MESSAGES } from '@constants/message'; -import { TYPO } from '@styles/typo'; const MiddleSection = () => { // 잔디 날짜 계산 @@ -49,115 +47,37 @@ const MiddleSection = () => { return ( <> - - - + + + {MAIN_MESSAGES.middle_section.status_label} - - + + - - + + {currentMonth} {MAIN_MESSAGES.middle_section.monthly_grass_summary} - + {grassQuery?.thisMonthCount ? grassQuery?.thisMonthCount : 0} - + {MAIN_MESSAGES.middle_section.planted_grass_count} - - + + {MAIN_MESSAGES.middle_section.grass_prompt} - - + + - + {daysInMonth.map(day => (
- +
))} - - + + ); }; export default MiddleSection; - -const Container = styled.div` - display: flex; - max-width: var(--vw-desktop-min, 60rem); - padding: var(--gap-2xl, 2rem) var(--gap-xl, 1.5rem); - flex-direction: column; - align-items: center; - gap: var(--gap-2xl, 2rem); -`; - -const GrassLabel = styled.div` - display: flex; - padding: var(--gap-2xs, 0.5rem) var(--gap-md, 1rem); - justify-content: center; - align-items: center; - gap: var(--gap-3xs, 0.375rem); - - border-radius: var(--radius-sm, 0.75rem); - border: var(--stroke-thin, 0.0625rem) solid - ${semantic.light.border.transparent.alternative}; - - background: ${semantic.light.bg.solid.normal}; -`; - -const GrassLabelText = styled.p` - color: ${semantic.light.object.transparent.alternative}; - text-align: center; - - ${TYPO.label2} -`; - -const GrassBanner = styled.div` - display: flex; - flex-direction: column; - align-items: center; - gap: var(--gap-2xs, 0.5rem); - align-self: stretch; -`; - -const GrassBannerText = styled.p` - align-self: stretch; - color: ${semantic.light.object.transparent.alternative}; - text-align: center; - - ${TYPO.title1} -`; - -const GrassBannerTextSecond = styled.p` - align-self: stretch; - - color: ${semantic.light.object.transparent.alternative}; - text-align: center; - - ${TYPO.label2} -`; - -const HighlightedText = styled.span` - color: ${semantic.light.accent.solid.normal}; -`; - -const GrassTableBox = styled.div` - display: grid; - grid-template-columns: repeat(7, 3.5rem); - grid-gap: var(--gap-xs, 0.625rem); - margin-bottom: 0.625rem; -`; - -const DayBox = styled.div` - width: 3.5rem; - height: 3.5rem; - - border-radius: var(--radius-sm, 0.75rem); - - background: ${semantic.light.fill.transparent.assistive}; - - box-shadow: 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.04), - 0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.08); -`; diff --git a/grass-diary/src/pages/Main/Spacer.tsx b/grass-diary/src/pages/Main/Spacer.tsx new file mode 100644 index 00000000..d7e1e18d --- /dev/null +++ b/grass-diary/src/pages/Main/Spacer.tsx @@ -0,0 +1,11 @@ +import * as S from '@styles/Main/Spacer.style'; + +const Spacer = () => { + return ( + <> + + + ); +}; + +export default Spacer; diff --git a/grass-diary/src/pages/Main/TopSection.tsx b/grass-diary/src/pages/Main/TopSection.tsx index 7462fa34..e5d027a2 100644 --- a/grass-diary/src/pages/Main/TopSection.tsx +++ b/grass-diary/src/pages/Main/TopSection.tsx @@ -1,10 +1,11 @@ -import styled from 'styled-components'; +import * as S from '@styles/Main/TopSection.style'; import { Link } from 'react-router-dom'; import { useTodayDate } from '@hooks/api/useTodayDate'; import { useTodayQuestion } from '@hooks/api/useTodayQuestion'; -import { semantic } from '@styles/semantic'; import { MAIN_MESSAGES } from '@constants/message'; -import { TYPO } from '@styles/typo'; + +import { ReactComponent as EditNote } from '@svg/edit_note.svg'; +import { ReactComponent as EventNote } from '@svg/event_note.svg'; const TopSection = () => { // 질문 데이터를 가져오는 쿼리 @@ -14,8 +15,8 @@ const TopSection = () => { return ( <> - - + + {date ? (

{date.year}년 {date.month}월 {date.date}일 {date.day}요일 @@ -23,99 +24,36 @@ const TopSection = () => { ) : (

Loading...

)} - + - - {question?.question ? <>"{question.question}" : <>Loading...} - + + {question?.question ? ( + <>"{question.question}" + ) : ( + <>"Question is Loading..." + )} + - - + + - + {MAIN_MESSAGES.top_section.write_diary} - + - + + - + - {MAIN_MESSAGES.top_section.my_diary} + {MAIN_MESSAGES.top_section.my_diary} - - - + + + + ); }; export default TopSection; - -const Container = styled.div` - display: flex; - max-width: 60rem; - padding: 4.5rem 1.5rem; - flex-direction: column; - align-items: center; - gap: 2rem; -`; - -const TodayDateBox = styled.div` - color: ${semantic.light.object.transparent.neutral}; - text-align: center; - - ${TYPO.label3} -`; - -const DailyQuestionText = styled.p` - color: ${semantic.light.object.solid.hero}; - text-align: center; - - ${TYPO.display1} -`; - -const ButtonContainer = styled.div` - display: flex; - align-items: flex-start; - gap: 1rem; -`; - -const CreateDiaryBtn = styled.button` - display: flex; - padding: 0.75rem 1rem; - justify-content: center; - align-items: center; - gap: 0.5rem; - - border-radius: 0.75rem; - - background: ${semantic.light.accent.solid.normal}; - border: none; -`; - -const CreateDiaryText = styled.p` - color: ${semantic.light.base.solid.white}; - text-align: center; - - ${TYPO.label3} -`; - -const MydiaryBtn = styled.button` - display: flex; - padding: 0.75rem 1rem; - justify-content: center; - align-items: center; - gap: 0.5rem; - - border-radius: 0.75rem; - border: 0.0625rem solid ${semantic.light.border.transparent.alternative}; - - background: ${semantic.light.bg.solid.normal}; -`; - -const MydiaryTxt = styled.p` - color: ${semantic.light.object.transparent.alternative}; - text-align: center; - - ${TYPO.label3} -`; diff --git a/grass-diary/src/styles/Main/Banner.style.tsx b/grass-diary/src/styles/Main/Banner.style.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/grass-diary/src/styles/Main/BottomSection.style.tsx b/grass-diary/src/styles/Main/BottomSection.style.tsx index e69de29b..07d5ed07 100644 --- a/grass-diary/src/styles/Main/BottomSection.style.tsx +++ b/grass-diary/src/styles/Main/BottomSection.style.tsx @@ -0,0 +1,153 @@ +import styled from 'styled-components'; +import { semantic } from '@styles/semantic'; +import { TYPO } from '@styles/typo'; + +export const Section = styled.div` + display: flex; + padding: var(--gap-lg, 1.25rem) var(--gap-xl, 1.5rem); + justify-content: center; + align-items: center; + gap: var(--gap-xl, 1.5rem); + align-self: stretch; +`; + +export const Container = styled.div` + display: flex; + max-width: var(--vw-desktop-min, 60rem); + justify-content: center; + align-items: center; + gap: var(--gap-xl, 1.5rem); + flex: 1 0 0; + + @media screen and (max-width: 60em) { + display: flex; + max-width: var(--vw-desktop-min, 60rem); + flex-direction: column; + justify-content: center; + align-items: center; + gap: var(--gap-xl, 1.5rem); + flex: 1 0 0; + } +`; + +export const Card = styled.div` + display: flex; + padding: var(--gap-lg, 1.25rem); + flex-direction: column; + align-items: flex-start; + gap: var(--gap-md, 1rem); + flex: 1 0 0; + + border-radius: var(--radius-md, 1rem); + border: var(--stroke-thin, 0.0625rem) solid + ${semantic.light.border.transparent.assistive}; + + background: ${semantic.light.bg.solid.normal}; + + box-shadow: 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.04), + 0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.08); + + @media screen and (max-width: 60em) { + display: flex; + padding: var(--gap-lg, 1.25rem); + width: 19em; + flex-direction: column; + align-items: flex-start; + gap: var(--gap-md, 1rem); + } +`; + +export const Divider = styled.div` + width: 26.75rem; + height: 0.0625rem; + + background: ${semantic.light.border.transparent.alternative}; + + @media screen and (max-width: 60em) { + width: 16em; + } +`; + +export const CardText = styled.p` + align-self: stretch; + + color: ${semantic.light.object.transparent.neutral}; + + ${TYPO.label3} +`; + +export const CardSubText = styled.p` + align-self: stretch; + + color: ${semantic.light.object.transparent.neutral}; + + ${TYPO.caption2} +`; + +export const Wrap = styled.div` + display: flex; + align-items: center; + gap: var(--gap-md, 1rem); + align-self: stretch; +`; + +export const RewardContainer = styled.div` + display: flex; + align-items: center; + gap: var(--gap-2xs, 0.5rem); + flex: 1 0 0; +`; + +export const RewardPointBox = styled.div` + flex: 1 0 0; + + color: ${semantic.light.accent.solid.normal}; +`; + +export const ThemeMarketBtn = styled.button` + display: flex; + padding: var(--gap-xs, 0.625rem) var(--gap-md, 1rem); + justify-content: center; + align-items: center; + gap: var(--gap-2xs, 0.5rem); + + border-radius: var(--radius-xs, 0.5rem); + border: var(--stroke-thin, 0.0625rem) solid + ${semantic.light.accent.solid.normal}; + + background: ${semantic.light.accent.transparent.normal}; + + cursor: pointer; +`; + +export const ThemeMarketText = styled.p` + color: ${semantic.light.accent.solid.hero}; + text-align: center; + + ${TYPO.label2} +`; + +export const RetrospectContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + align-self: stretch; +`; + +export const RetrospectBtn = styled.button` + display: flex; + padding: var(--gap-xs, 0.625rem) var(--gap-md, 1rem); + justify-content: center; + align-items: center; + gap: var(--gap-2xs, 0.5rem); + + border-radius: var(--radius-xs, 0.5rem); + background: ${semantic.light.fill.transparent.alternative}; +`; + +export const RetrospectText = styled.p` + color: ${semantic.light.object.transparent.alternative}; + text-align: center; + + ${TYPO.label2} +`; diff --git a/grass-diary/src/styles/Main/MiddleSection.style.tsx b/grass-diary/src/styles/Main/MiddleSection.style.tsx index e69de29b..2a39ac15 100644 --- a/grass-diary/src/styles/Main/MiddleSection.style.tsx +++ b/grass-diary/src/styles/Main/MiddleSection.style.tsx @@ -0,0 +1,104 @@ +import styled from 'styled-components'; +import { semantic } from '@styles/semantic'; +import { TYPO } from '@styles/typo'; + +export const Container = styled.div` + display: flex; + max-width: var(--vw-desktop-min, 60rem); + padding: var(--gap-2xl, 2rem) var(--gap-xl, 1.5rem); + flex-direction: column; + align-items: center; + gap: var(--gap-2xl, 2rem); + + @media screen and (max-width: 60em) { + width: 22rem; + } +`; + +export const GrassLabel = styled.div` + display: flex; + padding: var(--gap-2xs, 0.5rem) var(--gap-md, 1rem); + justify-content: center; + align-items: center; + gap: var(--gap-3xs, 0.375rem); + + border-radius: var(--radius-sm, 0.75rem); + border: var(--stroke-thin, 0.0625rem) solid + ${semantic.light.border.transparent.alternative}; + + background: ${semantic.light.fill.transparent.alternative}; +`; + +export const GrassLabelText = styled.p` + color: ${semantic.light.object.transparent.alternative}; + text-align: center; + + ${TYPO.label2} +`; + +export const GrassBanner = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: var(--gap-2xs, 0.5rem); + align-self: stretch; +`; + +export const GrassBannerText = styled.p` + align-self: stretch; + color: ${semantic.light.object.transparent.alternative}; + text-align: center; + + ${TYPO.title1} +`; + +export const GrassBannerTextSecond = styled.p` + align-self: stretch; + + color: ${semantic.light.object.transparent.alternative}; + text-align: center; + + ${TYPO.label2} +`; + +export const HighlightedText = styled.span` + color: ${semantic.light.accent.solid.normal}; +`; + +export const GrassTableBox = styled.div` + display: grid; + grid-template-columns: repeat(7, 3.5rem); + grid-gap: var(--gap-xs, 0.625rem); + margin-bottom: 0.625rem; + + @media screen and (max-width: 60em) { + display: grid; + grid-template-columns: repeat(7, 2em); + grid-gap: var(--gap-xs, 0.525rem); + margin-bottom: 0.525rem; + } +`; + +export const DayBox = styled.div` + width: 3.5rem; + height: 3.5rem; + + border-radius: var(--radius-sm, 0.75rem); + + background: ${semantic.light.fill.transparent.assistive}; + + box-shadow: 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.04), + 0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.08); + + @media screen and (max-width: 60em) { + width: 2em; + height: 2em; + + border-radius: var(--radius-sm, 0.75rem); + + background: ${semantic.light.fill.transparent.assistive}; + + box-shadow: 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.04), + 0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.08); + } +`; diff --git a/grass-diary/src/styles/Main/Spacer.style.tsx b/grass-diary/src/styles/Main/Spacer.style.tsx new file mode 100644 index 00000000..2b9eb915 --- /dev/null +++ b/grass-diary/src/styles/Main/Spacer.style.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Section = styled.div` + height: 7.5rem; + max-width: var(--vw-desktop-min, 60rem); + align-self: stretch; +`; diff --git a/grass-diary/src/styles/Main/TopSection.style.tsx b/grass-diary/src/styles/Main/TopSection.style.tsx index e69de29b..246ad690 100644 --- a/grass-diary/src/styles/Main/TopSection.style.tsx +++ b/grass-diary/src/styles/Main/TopSection.style.tsx @@ -0,0 +1,80 @@ +import styled from 'styled-components'; +import { semantic } from '@styles/semantic'; +import { TYPO } from '@styles/typo'; + +export const Container = styled.div` + display: flex; + max-width: 60rem; + padding: 4.5rem 1.5rem; + flex-direction: column; + align-items: center; + gap: 2rem; + + @media screen and (max-width: 60em) { + width: 22rem; + } +`; + +export const TodayDateBox = styled.div` + color: ${semantic.light.object.transparent.neutral}; + text-align: center; + + ${TYPO.label3} +`; + +export const DailyQuestionText = styled.p` + color: ${semantic.light.object.solid.hero}; + text-align: center; + + ${TYPO.display1} + + @media screen and (max-width: 60em) { + ${TYPO.title3} + } +`; + +export const ButtonContainer = styled.div` + display: flex; + align-items: flex-start; + gap: 1rem; +`; + +export const CreateDiaryBtn = styled.button` + display: flex; + padding: 0.75rem 1rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + + border-radius: 0.75rem; + + background: ${semantic.light.accent.solid.normal}; + border: none; +`; + +export const CreateDiaryText = styled.p` + color: ${semantic.light.base.solid.white}; + text-align: center; + + ${TYPO.label3} +`; + +export const MydiaryBtn = styled.button` + display: flex; + padding: 0.75rem 1rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + + border-radius: 0.75rem; + border: 0.0625rem solid ${semantic.light.border.transparent.alternative}; + + background: ${semantic.light.bg.solid.normal}; +`; + +export const MydiaryTxt = styled.p` + color: ${semantic.light.object.transparent.alternative}; + text-align: center; + + ${TYPO.label3} +`; diff --git a/grass-diary/src/styles/component/Notification/Callout.style.tsx b/grass-diary/src/styles/component/Notification/Callout.style.tsx index a9218769..dc525fd5 100644 --- a/grass-diary/src/styles/component/Notification/Callout.style.tsx +++ b/grass-diary/src/styles/component/Notification/Callout.style.tsx @@ -20,4 +20,14 @@ export const Text = styled.p` color: ${semantic.light.object.transparent.alternative}; ${TYPO.caption2} + + @media screen and (max-width: 60em) { + ${TYPO.caption1} + } +`; + +export const Space = styled.div` + @media screen and (max-width: 60em) { + font-size: 1em; + } `; diff --git a/grass-diary/src/styles/components/callout/Callout.style.tsx b/grass-diary/src/styles/components/callout/Callout.style.tsx new file mode 100644 index 00000000..dc525fd5 --- /dev/null +++ b/grass-diary/src/styles/components/callout/Callout.style.tsx @@ -0,0 +1,33 @@ +import styled from 'styled-components'; +import { semantic } from '@styles/semantic'; +import { TYPO } from '@styles/typo'; + +export const Container = styled.div` + display: flex; + align-self: center; + padding: var(--gap-3xs, 0.375rem) var(--gap-sm, 0.75rem); + align-items: flex-start; + gap: var(--gap-2xs, 0.5rem); + + border-radius: var(--radius-xs, 0.5rem); + border: var(--stroke-thin, 0.0625rem) solid + ${semantic.light.border.transparent.alternative}; + + background: ${semantic.light.fill.transparent.assistive}; +`; + +export const Text = styled.p` + color: ${semantic.light.object.transparent.alternative}; + + ${TYPO.caption2} + + @media screen and (max-width: 60em) { + ${TYPO.caption1} + } +`; + +export const Space = styled.div` + @media screen and (max-width: 60em) { + font-size: 1em; + } +`;