Skip to content

Commit 65f80bd

Browse files
hansoojeongsjhansoojeongsj
authored
Merge pull request #65 from ds-TopHat/feat/#64/solve
[Feat/#64] 마이페이지 중앙 정렬 요청 및 solve 이미지 배열
2 parents b3acc8d + 3007689 commit 65f80bd

5 files changed

Lines changed: 58 additions & 33 deletions

File tree

‎src/pages/my/my.css.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,17 @@ export const container = style({
77
height: '100%',
88
background: 'linear-gradient(355deg, #FFF 48.23%, #BFD9FE 97.05%), #FFF',
99
backgroundRepeat: 'no-repeat',
10+
display: 'flex',
11+
flexDirection: 'column',
12+
alignItems: 'center',
1013
});
1114

1215
export const title = style({
1316
display: 'flex',
1417
flexDirection: 'row',
1518
paddingLeft: '3.6rem',
19+
width: '100%',
20+
maxWidth: '66.8rem',
1621
});
1722

1823
export const name = style({
@@ -37,7 +42,8 @@ export const hello = style({
3742
export const noteDiv = style({
3843
padding: '1.2rem 2.6rem 2.6rem',
3944
borderRadius: '12px',
40-
margin: 'auto 0',
45+
width: '100%',
46+
maxWidth: '66.8rem',
4147
});
4248

4349
export const noteTitle = style({
@@ -183,7 +189,8 @@ export const buttonContainer = style({
183189
flexDirection: 'column',
184190
gap: '1.6rem',
185191
padding: '3.6rem 3.6rem 10rem',
186-
maxWidth: '55rem',
192+
maxWidth: '66.8rem',
193+
width: '100%',
187194
});
188195

189196
export const button = style({

‎src/pages/reviewNoteDetail/reviewNoteDetail.css.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export const mainContainer = style({
88
padding: '9.6rem 2.4rem 10rem',
99
gap: '1.6rem',
1010

11+
alignItems: 'center',
12+
1113
backgroundColor: themeVars.color.gray100,
1214
backgroundRepeat: 'no-repeat',
1315
backgroundSize: 'cover',
@@ -17,6 +19,8 @@ export const topContent = style({
1719
display: 'flex',
1820
alignItems: 'center',
1921
justifyContent: 'space-between',
22+
width: '100%',
23+
maxWidth: '66.8rem',
2024
});
2125

2226
export const date = style({
@@ -27,12 +31,17 @@ export const date = style({
2731

2832
export const noteContent = style({
2933
paddingTop: '1.6rem',
34+
width: '100%',
35+
maxWidth: '66.8rem',
36+
margin: '0 auto',
37+
3038
color: themeVars.color.gray600,
3139
whiteSpace: 'pre-wrap',
3240
...themeVars.font.bodySmall,
3341
});
3442

3543
export const img = style({
3644
width: '100%',
37-
maxWidth: '50rem',
45+
maxWidth: '66.8rem',
46+
margin: '0 auto',
3847
});

‎src/pages/reviewNotes/ReviewNotes.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -108,38 +108,40 @@ const ReviewNotes = () => {
108108

109109
return (
110110
<div className={styles.reviewContainer}>
111-
{toasts.map((msg, i) => (
112-
<Toast
113-
key={i}
114-
message={msg}
115-
onClose={() =>
116-
setToasts((prev) => prev.filter((_, index) => index !== i))
117-
}
118-
/>
119-
))}
120-
<h1 className={styles.title}>오답노트</h1>
121-
<button className={styles.pdfButton} onClick={downloadPdf}>
122-
<IcExtract width={20} height={20} />
123-
오답노트 PDF로 추출하기
124-
</button>
125-
<p className={styles.pdfComment}>
126-
복습하고 싶은 문제를 선택해 풀어보세요!
127-
</p>
128-
129-
<div className={styles.cardContainer}>
130-
{data.map((card) => (
131-
<ReviewCard
132-
key={card.questionId}
133-
imageSrc={card.problemImageUrl}
134-
text={card.unitType}
135-
selected={selectedCards.includes(card.questionId)}
136-
onClick={() => toggleSelectCard(card.questionId)}
137-
onCardClick={() => handleClick(card.questionId)}
111+
<div className={styles.content}>
112+
{toasts.map((msg, i) => (
113+
<Toast
114+
key={i}
115+
message={msg}
116+
onClose={() =>
117+
setToasts((prev) => prev.filter((_, index) => index !== i))
118+
}
138119
/>
139120
))}
121+
<h1 className={styles.title}>오답노트</h1>
122+
<button className={styles.pdfButton} onClick={downloadPdf}>
123+
<IcExtract width={20} height={20} />
124+
오답노트 PDF로 추출하기
125+
</button>
126+
<p className={styles.pdfComment}>
127+
복습하고 싶은 문제를 선택해 풀어보세요!
128+
</p>
129+
130+
<div className={styles.cardContainer}>
131+
{data.map((card) => (
132+
<ReviewCard
133+
key={card.questionId}
134+
imageSrc={card.problemImageUrl}
135+
text={card.unitType}
136+
selected={selectedCards.includes(card.questionId)}
137+
onClick={() => toggleSelectCard(card.questionId)}
138+
onCardClick={() => handleClick(card.questionId)}
139+
/>
140+
))}
141+
</div>
142+
143+
<div ref={loaderRef} />
140144
</div>
141-
142-
<div ref={loaderRef} />
143145
</div>
144146
);
145147
};

‎src/pages/reviewNotes/reviewNotes.css.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,11 @@ export const cardContainer = style({
4646
rowGap: '24px',
4747
columnGap: '12px',
4848
});
49+
50+
export const content = style({
51+
display: 'flex',
52+
flexDirection: 'column',
53+
width: '100%',
54+
maxWidth: '66.8rem',
55+
margin: '0 auto',
56+
});

‎src/pages/solve/solve.css.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const wrapper = style({
66
minHeight: '100dvh',
77
height: '100%',
88
paddingTop: '7.95rem',
9-
// paddingTop: '10.8rem',
109

1110
paddingBottom: '8.95rem',
1211
backgroundColor: themeVars.color.gray100,

0 commit comments

Comments
 (0)