refactor/#26: 공통된 padding 설정 컴포넌트화

CLAUDE.md

@@ -12,12 +12,12 @@ StartPage (활성 스프린트 여부 분기)
   └─ NoticePage (안내)
        └─ SprintCodePage (인증 코드 입력)
             └─ SprintIntroPage (스프린트 소개)
-                 └─ UserInfoPage (사용자 정보 입력, step 1/7)
-                      └─ StopCommentPage (step 2/7)
-                           └─ StartCommentPage (step 3/7)
-                                └─ ContinueCommentPage (step 4/7)
-                                     └─ MvpPage (step 6/7)
-                                          └─ ClosingPage (step 7/7)
+                 └─ UserInfoPage (사용자 정보 입력, step 1/6)
+                      └─ StopCommentPage (step 2/6)
+                           └─ StartCommentPage (step 3/6)
+                                └─ ContinueCommentPage (step 4/6)
+                                     └─ MvpPage (step 5/6)
+                                          └─ ClosingPage (step 6/6)
 ```
 
 ---
@@ -85,7 +85,7 @@ src/
 │   ├── common/                  → 도메인 무관한 범용 컴포넌트
 │   │   ├── layout/              (PageLayout, StepLayout)
 │   │   ├── form/                (SelectField, InputField)
-│   │   └── ui/                  (ContentHeading, ImageSection, ProgressBar, MemberChip)
+│   │   └── ui/                  (ContentHeading, ImageSection, ProgressBar, MemberChip, FieldSection)
 │   ├── sprint-code/             → 스프린트 코드 도메인
 │   │   └── SprintCodeInput
 │   ├── peer-comment/            → 피어 코멘트 도메인
@@ -139,7 +139,7 @@ src/
 | `Picker` | 목록에서 항목을 선택하는 UI | `PeerMemberPicker` |
 | `Chip` | 선택된 항목을 표시하는 태그 UI | `MemberChip` |
 | `Repeater` | 동일한 입력 블록을 반복·관리 | `PeerCommentRepeater` |
-| `Block` / `Section` | 여러 요소를 묶은 영역 단위 | `PeerCommentRecipientBlock` |
+| `Block` / `Section` | 여러 요소를 묶은 영역 단위 | `PeerCommentRecipientBlock`, `FieldSection` |
 
 ## 🗂️ Import Aliases
 
@@ -175,6 +175,13 @@ src/
 - 인라인 스타일 또는 CSS 모듈(`.module.css`) 혼용 금지
 - 새 컴포넌트/페이지 추가 시 같은 경로에 `*.css.ts` 파일 함께 생성
 
+### 레이아웃 기준선
+
+- `StepLayout` 콘텐츠 영역 좌우 padding: `0 28px` (모든 페이지 공통 기준)
+- `FieldSection`: 논리 블록 하나를 감싸는 padding wrapper (`paddingTop: 24, paddingBottom: 12`)
+  - **하나의 FieldSection = 하나의 논리 블록** (ContentHeading, 개별 폼 필드 등)
+  - `gap` 없음 — 여러 요소의 간격은 각 FieldSection이 담당
+
 ---
 
 
@@ -219,6 +226,10 @@ src/
 - 서비스 오류 → `ServiceError` → `/error` 페이지로 이동
 - `useErrorHandler` 훅 활용
 
+### push 전 체크리스트
+
+- CLAUDE.md가 현재 코드 상태를 반영하고 있는지 확인 후 업데이트
+
 ### 하지 말아야 할 것
 
 - 요청 범위를 벗어난 리팩토링, 기능 추가, 코드 정리

src/components/common/layout/StepLayout.css.ts

@@ -30,7 +30,8 @@ export const contentSection = style({
   overflowY: 'auto',
   msOverflowStyle: 'none',
   scrollbarWidth: 'none',
-  padding: '0 20px',
+  padding: '0 28px',
+  textAlign: 'left',
 });
 
 export const contentSectionWithProgress = style({

src/components/common/ui/FieldSection.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingTop: 24,
+  paddingBottom: 12,
+});

src/components/common/ui/FieldSection.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import * as styles from './FieldSection.css';
+
+interface FieldSectionProps {
+  children: ReactNode;
+}
+
+function FieldSection({ children }: FieldSectionProps) {
+  return <div className={styles.container}>{children}</div>;
+}
+
+export default FieldSection;

src/components/common/ui/ProgressBar.css.ts

@@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors';
 
 export const container = style({
   width: '100%',
-  padding: '10px 20px 36px',
+  padding: '16px 20px',
 });
 
 export const track = style({

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as StepLayout } from './common/layout/StepLayout';
 export { default as ProgressBar } from './common/ui/ProgressBar';
 export { default as MemberChip } from './common/ui/MemberChip';
 export { default as ContentHeading } from './common/ui/ContentHeading';
+export { default as FieldSection } from './common/ui/FieldSection';
 export { default as ImageSection } from './common/ui/ImageSection';
 export { default as SelectField } from './common/form/SelectField';
 export { default as InputField } from './common/form/InputField';

src/components/peer-comment/PeerCommentStepTemplate.css.ts

@@ -1,30 +1,16 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { colors } from '@sopt-makers/colors';
 import { fontsObject } from '@sopt-makers/fonts';
 
-/** 제목 블록 ↔ 이미지 ↔ 코멘트 반복 영역 사이 16px */
 export const stepContent = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 16,
   width: '100%',
 });
 
-/**
- * ContentHeading + 페이지별 안내 문단( children )
- * 제목/설명과 그 아래 문단 사이 간격 없음
- */
-export const headingBlock = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 0,
-  width: '100%',
-});
-
-globalStyle(`${headingBlock} p`, {
+export const noticeText = style({
   margin: 0,
-  marginTop: 0,
-  textAlign: 'left',
   color: colors.white,
   ...fontsObject.BODY_3_14_M,
 });

src/components/peer-comment/PeerCommentStepTemplate.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ContentHeading from '../common/ui/ContentHeading';
+import FieldSection from '../common/ui/FieldSection';
 import ImageSection from '../common/ui/ImageSection';
 import StepLayout from '../common/layout/StepLayout';
 import PeerCommentRepeater from './PeerCommentRepeater';
@@ -59,10 +60,10 @@ function PeerCommentStepTemplate({
       totalSteps={totalSteps}
     >
       <div className={styles.stepContent}>
-        <div className={styles.headingBlock}>
+        <FieldSection>
           <ContentHeading title={title} description={description} />
-          <p>해당 코멘트는 무기명으로 전달되어요.</p>
-        </div>
+          <p className={styles.noticeText}>해당 코멘트는 무기명으로 전달되어요.</p>
+        </FieldSection>
         {guideImages ? (
           <ImageSection>
             <ImageSection.Image src={guideImages[0]} alt="comment 작성 설명 이미지" />

src/components/sprint-code/SprintCodeInput.css.ts

@@ -6,7 +6,6 @@ export const root = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 12,
-  padding: '24px 0 12px',
   maxWidth: 320,
   textAlign: 'left',
 });

src/components/sprint-code/SprintCodeInput.tsx

@@ -28,9 +28,7 @@ function CodeInput({
     onChange(sanitized);
   };
 
-  const activeBoxIndex = isInputFocused
-    ? Math.min(value.length, SPRINT_CODE_LENGTH - 1)
-    : -1;
+  const activeBoxIndex = isInputFocused ? Math.min(value.length, SPRINT_CODE_LENGTH - 1) : -1;
 
   return (
     <div className={styles.root}>
@@ -75,21 +73,15 @@ function CodeInput({
                 data-filled={isFilled}
                 data-error={showError}
               >
-                <span className={styles.codeDigit}>
-                  {digit ?? ''}
-                </span>
+                <span className={styles.codeDigit}>{digit ?? ''}</span>
               </div>
             );
           })}
         </div>
       </div>
 
       {showError && (
-        <p
-          id={errorId}
-          className={styles.errorText}
-          role="alert"
-        >
+        <p id={errorId} className={styles.errorText} role="alert">
           {errorMessage}
         </p>
       )}

src/pages/MvpPage.css.ts

@@ -2,19 +2,6 @@ import { style } from '@vanilla-extract/css';
 import { colors } from '@sopt-makers/colors';
 import { fontsObject } from '@sopt-makers/fonts';
 
-export const body = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 32,
-  color: colors.white,
-});
-
-export const fields = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 28,
-});
-
 export const fieldGroup = style({
   display: 'flex',
   flexDirection: 'column',

src/pages/MvpPage.tsx

@@ -3,7 +3,7 @@ import type { ChangeEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FieldBox } from '@sopt-makers/ui';
 import { IconUser, IconXCircle } from '@sopt-makers/icons';
-import { StepLayout, ContentHeading, MemberChip, InputField } from '@components';
+import { StepLayout, ContentHeading, FieldSection, MemberChip, InputField } from '@components';
 import { usePeerMembers, useCommentForm } from '@hooks';
 import type { PeerMember } from '@types';
 import * as styles from './MvpPage.css';
@@ -44,7 +44,7 @@ function MvpPage() {
       onNext={handleSubmit}
       isNextDisabled={!isAllFilled}
     >
-      <div className={styles.body}>
+      <FieldSection>
         <ContentHeading
           title="MVP 선정"
           description={
@@ -57,71 +57,75 @@ function MvpPage() {
             </>
           }
         />
+      </FieldSection>
 
-        <div className={styles.fields}>
-          <div className={styles.fieldGroup}>
-            <FieldBox.Label
-              label="MVP로 선정하고 싶은 동료"
-              description="MVP는 한 명만 선택할 수 있어요."
-              required
-            />
-
-            <div className={styles.searchContainer}>
-              <div className={styles.inputWrapper}>
-                <input
-                  className={styles.searchInput}
-                  placeholder="멤버 검색"
-                  value={searchQuery}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
-                />
-                {searchQuery && (
-                  <button
-                    type="button"
-                    className={styles.clearButton}
-                    onClick={() => setSearchQuery('')}
-                    aria-label="검색어 지우기"
-                  >
-                    <IconXCircle className={styles.clearIcon} />
-                  </button>
-                )}
-              </div>
+      <FieldSection>
+        <div className={styles.fieldGroup}>
+          <FieldBox.Label
+            label="MVP로 선정하고 싶은 동료"
+            description="MVP는 한 명만 선택할 수 있어요."
+            required
+          />
 
-              {searchQuery && filteredMembers.length > 0 && (
-                <ul className={styles.dropdown}>
-                  {filteredMembers.map((member) => (
-                    <li key={member.userId}>
-                      <button
-                        type="button"
-                        className={styles.dropdownItem}
-                        onClick={() => handleSelectMember(member)}
-                      >
-                        <span className={styles.avatarIcon} aria-hidden>
-                          <IconUser className={styles.avatarIconSvg} />
-                        </span>
-                        <span>{member.name}</span>
-                      </button>
-                    </li>
-                  ))}
-                </ul>
+          <div className={styles.searchContainer}>
+            <div className={styles.inputWrapper}>
+              <input
+                className={styles.searchInput}
+                placeholder="멤버 검색"
+                value={searchQuery}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setSearchQuery(e.target.value)
+                }
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  className={styles.clearButton}
+                  onClick={() => setSearchQuery('')}
+                  aria-label="검색어 지우기"
+                >
+                  <IconXCircle className={styles.clearIcon} />
+                </button>
               )}
             </div>
 
-            {selectedMember && (
-              <div className={styles.chipWrapper}>
-                <MemberChip label={selectedMember.name} showRemoveButton={false} />
-              </div>
+            {searchQuery && filteredMembers.length > 0 && (
+              <ul className={styles.dropdown}>
+                {filteredMembers.map((member) => (
+                  <li key={member.userId}>
+                    <button
+                      type="button"
+                      className={styles.dropdownItem}
+                      onClick={() => handleSelectMember(member)}
+                    >
+                      <span className={styles.avatarIcon} aria-hidden>
+                        <IconUser className={styles.avatarIconSvg} />
+                      </span>
+                      <span>{member.name}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
             )}
           </div>
 
-          <InputField
-            labelText="MVP 선정 이유를 작성해주세요."
-            required
-            placeholder="선정하는 이유"
-            value={reason}
-            onChange={setReason}
-          />
+          {selectedMember && (
+            <div className={styles.chipWrapper}>
+              <MemberChip label={selectedMember.name} showRemoveButton={false} />
+            </div>
+          )}
         </div>
-      </div>
+      </FieldSection>
+
+      <FieldSection>
+        <InputField
+          labelText="MVP 선정 이유를 작성해주세요."
+          required
+          placeholder="선정하는 이유"
+          value={reason}
+          onChange={setReason}
+        />
+      </FieldSection>
     </StepLayout>
   );
 }