diff --git a/src/pages/my/my.css.ts b/src/pages/my/my.css.ts index dbe7b1d..61dc840 100644 --- a/src/pages/my/my.css.ts +++ b/src/pages/my/my.css.ts @@ -7,12 +7,17 @@ export const container = style({ height: '100%', background: 'linear-gradient(355deg, #FFF 48.23%, #BFD9FE 97.05%), #FFF', backgroundRepeat: 'no-repeat', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', }); export const title = style({ display: 'flex', flexDirection: 'row', paddingLeft: '3.6rem', + width: '100%', + maxWidth: '66.8rem', }); export const name = style({ @@ -37,7 +42,8 @@ export const hello = style({ export const noteDiv = style({ padding: '1.2rem 2.6rem 2.6rem', borderRadius: '12px', - margin: 'auto 0', + width: '100%', + maxWidth: '66.8rem', }); export const noteTitle = style({ @@ -183,7 +189,8 @@ export const buttonContainer = style({ flexDirection: 'column', gap: '1.6rem', padding: '3.6rem 3.6rem 10rem', - maxWidth: '55rem', + maxWidth: '66.8rem', + width: '100%', }); export const button = style({ diff --git a/src/pages/reviewNoteDetail/reviewNoteDetail.css.ts b/src/pages/reviewNoteDetail/reviewNoteDetail.css.ts index 70e8b6f..ca60c98 100644 --- a/src/pages/reviewNoteDetail/reviewNoteDetail.css.ts +++ b/src/pages/reviewNoteDetail/reviewNoteDetail.css.ts @@ -8,6 +8,8 @@ export const mainContainer = style({ padding: '9.6rem 2.4rem 10rem', gap: '1.6rem', + alignItems: 'center', + backgroundColor: themeVars.color.gray100, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', @@ -17,6 +19,8 @@ export const topContent = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', + width: '100%', + maxWidth: '66.8rem', }); export const date = style({ @@ -27,6 +31,10 @@ export const date = style({ export const noteContent = style({ paddingTop: '1.6rem', + width: '100%', + maxWidth: '66.8rem', + margin: '0 auto', + color: themeVars.color.gray600, whiteSpace: 'pre-wrap', ...themeVars.font.bodySmall, @@ -34,5 +42,6 @@ export const noteContent = style({ export const img = style({ width: '100%', - maxWidth: '50rem', + maxWidth: '66.8rem', + margin: '0 auto', }); diff --git a/src/pages/reviewNotes/ReviewNotes.tsx b/src/pages/reviewNotes/ReviewNotes.tsx index b5440a9..a668ac7 100644 --- a/src/pages/reviewNotes/ReviewNotes.tsx +++ b/src/pages/reviewNotes/ReviewNotes.tsx @@ -108,38 +108,40 @@ const ReviewNotes = () => { return (
- {toasts.map((msg, i) => ( - - setToasts((prev) => prev.filter((_, index) => index !== i)) - } - /> - ))} -

오답노트

- -

- 복습하고 싶은 문제를 선택해 풀어보세요! -

- -
- {data.map((card) => ( - toggleSelectCard(card.questionId)} - onCardClick={() => handleClick(card.questionId)} +
+ {toasts.map((msg, i) => ( + + setToasts((prev) => prev.filter((_, index) => index !== i)) + } /> ))} +

오답노트

+ +

+ 복습하고 싶은 문제를 선택해 풀어보세요! +

+ +
+ {data.map((card) => ( + toggleSelectCard(card.questionId)} + onCardClick={() => handleClick(card.questionId)} + /> + ))} +
+ +
- -
); }; diff --git a/src/pages/reviewNotes/reviewNotes.css.ts b/src/pages/reviewNotes/reviewNotes.css.ts index 22d24f9..ff888cf 100644 --- a/src/pages/reviewNotes/reviewNotes.css.ts +++ b/src/pages/reviewNotes/reviewNotes.css.ts @@ -46,3 +46,11 @@ export const cardContainer = style({ rowGap: '24px', columnGap: '12px', }); + +export const content = style({ + display: 'flex', + flexDirection: 'column', + width: '100%', + maxWidth: '66.8rem', + margin: '0 auto', +}); diff --git a/src/pages/solve/solve.css.ts b/src/pages/solve/solve.css.ts index 9e166f0..b1a3eb2 100644 --- a/src/pages/solve/solve.css.ts +++ b/src/pages/solve/solve.css.ts @@ -6,7 +6,6 @@ const wrapper = style({ minHeight: '100dvh', height: '100%', paddingTop: '7.95rem', - // paddingTop: '10.8rem', paddingBottom: '8.95rem', backgroundColor: themeVars.color.gray100,