Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨Feat: 이달의 컴포넌트 UI 구현 #41

Merged
merged 15 commits into from
May 8, 2024
Merged
Prev Previous commit
✨ Feat: 메인 가져와서 List 페이지 디자인 작업
  • Loading branch information
JayChae committed May 8, 2024
commit 60ad5008bba0032be7fb3e395c9a6f6f46115e1f
10 changes: 8 additions & 2 deletions src/pages/ListPage/Credit/styles.module.scss
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ $color-credit-border: #f1eef9;

height: 131px;
max-width: 1200px;
margin: 0 auto 48px;
margin: 0 auto 50px;
padding-inline: 64px;
}

@@ -60,11 +60,17 @@ $color-credit-border: #f1eef9;
}
}

@media (max-width: $width-tablet) {
.container {
margin: 0 auto 64px;
}
}

@media (max-width: $width-mobile) {
.container {
height: 87px;
padding-inline: 20px;
margin-top: 8px;
margin: 16px auto 40px;
}

.credit {
12 changes: 10 additions & 2 deletions src/pages/ListPage/MonthlyChart/styles.module.scss
Original file line number Diff line number Diff line change
@@ -5,16 +5,24 @@
flex-direction: column;
max-width: 1200px;
min-height: 633px;
margin: 80px auto 0;

/* 태블릿 */
@media (min-width: ($width-mobile + 1)) and (max-width: $width-tablet) {
width: 700px;
max-width: 700px;
min-height: 609px;
margin: 60px auto 0;
}
/* 모바일 */
@media (max-width: $width-mobile) {
width: 327px;
max-width: 327px;
min-height: 599px;
margin: 40px auto 0;
}
}
@media (max-width: 1250px) {
.container {
margin-inline: 24px;
}
}

18 changes: 8 additions & 10 deletions src/pages/ListPage/index.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import Donation from './Donation';
import Header from '@/components/Header';
import style from './styles.module.scss';
import Credit from './Credit';
import MonthlyChart from './MonthlyChart';

const ListPage = () => {
return (
<div>
<div className={style.container}>
<Header />
<div
style={{
display: 'flex',
justifyContent: 'center',
padding: '24px',
backgroundColor: 'black',
}}
>
<main className={style.main}>
<Credit />
<Donation />
<MonthlyChart />
</div>
</main>
</div>
);
};
11 changes: 10 additions & 1 deletion src/pages/ListPage/styles.module.scss
Original file line number Diff line number Diff line change
@@ -2,10 +2,19 @@

.container {
background-color: $color-black-200;
height: 100vh;
}

.main {
max-width: 1360px;
margin: 0 auto;
padding-bottom: 243px;


@media (max-width: $width-tablet) {
padding-bottom: 330px;
}

@media (max-width: $width-mobile) {
padding-bottom: 59px;
}
}
4 changes: 0 additions & 4 deletions src/pages/TestPage/index.jsx
Original file line number Diff line number Diff line change
@@ -9,9 +9,6 @@ import Modal from '@/components/Modal';
import ModalHeader from '@/components/Modal/components/ModalHeader';
// import ModalMobileHeader from '@/components/Modal/components/ModalMobileHeader';
import Profile from '@/components/Profile';
import MonthlyChart from '@/pages/ListPage/MonthlyChart';
import Sample from '@/components/Sample/Sample';
import CustomButton from '@/components/CustomButton';

const TestPage = () => {
const [isOpen, openModal, closeModal] = useModal();
@@ -22,7 +19,6 @@ const TestPage = () => {
<div
style={{ display: 'flex', justifyContent: 'center', padding: '24px' }}
>
<MonthlyChart />
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Profile
You are viewing a condensed version of this merge commit. You can view the full changes here.