[Feat/#64] 마이페이지 중앙 정렬 요청 및 solve 이미지 배열

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({

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,12 +31,17 @@ 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,
 });
 
 export const img = style({
   width: '100%',
-  maxWidth: '50rem',
+  maxWidth: '66.8rem',
+  margin: '0 auto',
 });

src/pages/reviewNotes/ReviewNotes.tsx

@@ -108,38 +108,40 @@ const ReviewNotes = () => {
 
   return (
     <div className={styles.reviewContainer}>
-      {toasts.map((msg, i) => (
-        <Toast
-          key={i}
-          message={msg}
-          onClose={() =>
-            setToasts((prev) => prev.filter((_, index) => index !== i))
-          }
-        />
-      ))}
-      <h1 className={styles.title}>오답노트</h1>
-      <button className={styles.pdfButton} onClick={downloadPdf}>
-        <IcExtract width={20} height={20} />
-        오답노트 PDF로 추출하기
-      </button>
-      <p className={styles.pdfComment}>
-        복습하고 싶은 문제를 선택해 풀어보세요!
-      </p>
-
-      <div className={styles.cardContainer}>
-        {data.map((card) => (
-          <ReviewCard
-            key={card.questionId}
-            imageSrc={card.problemImageUrl}
-            text={card.unitType}
-            selected={selectedCards.includes(card.questionId)}
-            onClick={() => toggleSelectCard(card.questionId)}
-            onCardClick={() => handleClick(card.questionId)}
+      <div className={styles.content}>
+        {toasts.map((msg, i) => (
+          <Toast
+            key={i}
+            message={msg}
+            onClose={() =>
+              setToasts((prev) => prev.filter((_, index) => index !== i))
+            }
           />
         ))}
+        <h1 className={styles.title}>오답노트</h1>
+        <button className={styles.pdfButton} onClick={downloadPdf}>
+          <IcExtract width={20} height={20} />
+          오답노트 PDF로 추출하기
+        </button>
+        <p className={styles.pdfComment}>
+          복습하고 싶은 문제를 선택해 풀어보세요!
+        </p>
+
+        <div className={styles.cardContainer}>
+          {data.map((card) => (
+            <ReviewCard
+              key={card.questionId}
+              imageSrc={card.problemImageUrl}
+              text={card.unitType}
+              selected={selectedCards.includes(card.questionId)}
+              onClick={() => toggleSelectCard(card.questionId)}
+              onCardClick={() => handleClick(card.questionId)}
+            />
+          ))}
+        </div>
+
+        <div ref={loaderRef} />
       </div>
-
-      <div ref={loaderRef} />
     </div>
   );
 };

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',
+});

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,