Skip to content

Commit

Permalink
Merge pull request #201 from KKYHH/refactor/MainMobileUI
Browse files Browse the repository at this point in the history 
✨ feat: 메인 페이지 모바일 UI 구현 및 modal 추가
  • Loading branch information
@rkdcodus
rkdcodus authored Sep 15, 2024
2 parents 33635a9 + 1b4a9ad commit e122b80
Show file tree
Hide file tree
Showing 17 changed files with 536 additions and 418 deletions.
5 changes: 5 additions & 0 deletions grass-diary/src/assets/svg/edit_note.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions grass-diary/src/assets/svg/event_note.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion grass-diary/src/components/Notification/Callout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ type CalloutProps = {
const Callout = ({ message }: CalloutProps) => {
return (
<S.Container>
<Info />
<S.Space>
<Info />
</S.Space>
<S.Text>{message}</S.Text>
</S.Container>
);
Expand Down
8 changes: 8 additions & 0 deletions grass-diary/src/constants/message.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
50 changes: 0 additions & 50 deletions grass-diary/src/pages/Main/Banner.tsx
View file

This file was deleted.

246 changes: 66 additions & 180 deletions grass-diary/src/pages/Main/BottomSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Section>
<Container>
<Card>
<CardText>{MAIN_MESSAGES.bottom_section.my_reward}</CardText>
<CardSubText>
<S.Section>
<S.Container>
<S.Card>
<S.CardText>{MAIN_MESSAGES.bottom_section.my_reward}</S.CardText>
<S.CardSubText>
{MAIN_MESSAGES.bottom_section.reward_message}
</CardSubText>
<Divider></Divider>
<Wrap>
<RewardContainer>
<Avatar></Avatar>
<RewardPointBox>
</S.CardSubText>
<S.Divider />
<S.Wrap>
<S.RewardContainer>
<Avatar />
<S.RewardPointBox>
<AnimateReward n={reward?.rewardPoint ?? 0} />
</RewardPointBox>
</RewardContainer>
<ThemeMarketBtn>
<ThemeMarketText onClick={modal}>
</S.RewardPointBox>
</S.RewardContainer>
<S.ThemeMarketBtn onClick={themeModal}>
<S.ThemeMarketText>
{MAIN_MESSAGES.bottom_section.theme_store}
</ThemeMarketText>
</S.ThemeMarketText>
<Arrow
width={18}
height={18}
fill={semantic.light.accent.solid.hero}
></Arrow>
</ThemeMarketBtn>
</Wrap>
</Card>
<Card>
<CardText>
</S.ThemeMarketBtn>
</S.Wrap>
</S.Card>
<S.Card>
<S.CardText>
{MAIN_MESSAGES.bottom_section.monthly_diary_review}
</CardText>
<CardSubText>
</S.CardText>
<S.CardSubText>
{MAIN_MESSAGES.bottom_section.review_description}
</CardSubText>
<Divider></Divider>
<RetrospectContainer>
<RetrospectBtn>
<Link to="/mypage" onClick={handleClick}>
<RetrospectText>
{MAIN_MESSAGES.bottom_section.go_to_review}
</RetrospectText>
</Link>
</S.CardSubText>
<S.Divider />
<S.RetrospectContainer>
<S.RetrospectBtn onClick={reviewModal}>
<S.RetrospectText>
{MAIN_MESSAGES.bottom_section.go_to_review}
</S.RetrospectText>
<ArrowBlack></ArrowBlack>
</RetrospectBtn>
</RetrospectContainer>
</Card>
</Container>
</Section>
</S.RetrospectBtn>
</S.RetrospectContainer>
</S.Card>
</S.Container>
</S.Section>
</>
);
};

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}
`;
8 changes: 7 additions & 1 deletion grass-diary/src/pages/Main/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -46,6 +48,10 @@ const Main = () => {
<MiddleSection />
<BottomSection />
<PopularFeed />
<div style={{ padding: '4rem' }}>
<Callout message={MAIN_MESSAGES.banner.future_content_message} />
</div>
<Spacer />
</Container>
);
};
Expand Down
Loading

0 comments on commit e122b80

Please sign in to comment.