05. AboutMe.jsx — 소개 섹션

이번 단계에서 할 일

학력, 자격사항, 인적사항을 보여주는 소개 섹션을 만듭니다. 재사용 컴포넌트를 만드는 방법을 배웁니다.

---

피그마 디자인 분석

│ ─── ABOUT ME ──────────────────────────────────── │
│  끈기와 열정으로 성장하는 오성의입니다.              │
│                                                   │
│  ┌──────────────────────┬──────────────────────┐  │
│  │ 학력 및 교육사항       │ 인적사항              │  │
│  │ 22.10-22.10 | 수료   │ 이름  : 오성의        │  │
│  │ 20.02-22.10 | 졸업   │ 나이  : 1996.05.     │  │
│  │                      │ 거주지 : 서울시 서초구 │  │
│  │ 자격사항              │ 휴대폰 : 010.xxxx     │  │
│  │ 21.07 | 컴활 2급      │ 이메일 : xxx@xxx      │  │
│  └──────────────────────┴──────────────────────┘  │

---

새로운 개념: props (속성)

컴포넌트에 데이터를 전달하는 방법입니다. HTML 태그의 속성처럼 씁니다.

// 데이터 전달 (부모)
<SectionTitle title="ABOUT ME" subtitle="끈기와 열정으로..." />

// 데이터 받기 (자식)
const SectionTitle = ({ title, subtitle }) => {
  return <h2>{title}</h2>  // "ABOUT ME"
}

---

STEP 1 — SectionTitle 컴포넌트 만들기

섹션 제목은 About Me, Projects, Contacts 에서 반복 사용됩니다. 한 번 만들어두면 어디서든 가져다 쓸 수 있습니다.

// src/components/SectionTitle.jsx

const SectionTitle = ({ title, subtitle }) => {
  return (
    <div className="section-title">
      {/* 세로 라인 + 큰 제목 */}
      <div className="section-title__row">
        <div className="section-title__line" />
        <h2 className="section-title__text">{title}</h2>
      </div>
      {/* 작은 부제목 */}
      <p className="section-title__sub">{subtitle}</p>
    </div>
  )
}

export default SectionTitle

사용 예시:

// AboutMe 섹션 제목
<SectionTitle title="ABOUT ME" subtitle="끈기와 열정으로 성장하는 오성의입니다." />

// Projects 섹션 제목
<SectionTitle title="Projects" subtitle="끈기와 열정으로 성장하는 오성의입니다." />

---

STEP 2 — AboutMe.jsx 작성

// src/components/AboutMe.jsx
import SectionTitle from './SectionTitle'

/* ─── 인적사항 한 줄 컴포넌트 ─── */
// label과 value를 받아서 "이름 : 오성의" 형태로 출력
const InfoRow = ({ label, value }) => {
  return (
    <div className="info-row">
      <span className="info-row__label">{label} :</span>
      <span className="info-row__value">{value}</span>
    </div>
  )
}

/* ─── AboutMe 메인 컴포넌트 ─── */
const AboutMe = () => {
  return (
    <section className="about" id="aboutme">

      {/* 섹션 제목 */}
      <SectionTitle
        title="ABOUT ME"
        subtitle="끈기와 열정으로 성장하는 오성의입니다."
      />

      {/* 2단 그리드 레이아웃 */}
      <div className="about-grid">

        {/* 왼쪽: 학력 + 자격사항 */}
        <div className="about-left">

          {/* 학력 블록 */}
          <div className="about-block">
            <h3 className="about-block__title">학력 및 교육사항</h3>
            <div className="about-block__item">
              <span className="about-block__date">22.10 - 22.10</span>
              <span>UI/UX 반응형 웹디자인 & 웹퍼블리셔 양성과정 수료</span>
            </div>
            <div className="about-block__item">
              <span className="about-block__date">20.02 - 22.10</span>
              <span>경기대학교 식품생물공학과 졸업</span>
            </div>
          </div>

          {/* 자격사항 블록 */}
          <div className="about-block">
            <h3 className="about-block__title">자격사항</h3>
            <div className="about-block__item">
              <span className="about-block__date">21.07</span>
              <span>컴퓨터 활용능력 2급</span>
            </div>
          </div>

        </div>

        {/* 오른쪽: 인적사항 */}
        <div className="about-right">
          <h3 className="about-block__title">인적사항</h3>

          {/* InfoRow 컴포넌트 반복 사용 */}
          <InfoRow label="이름"   value="오성의" />
          <InfoRow label="나이"   value="1996.05." />
          <InfoRow label="거주지" value="서울시 서초구" />
          <InfoRow label="휴대폰" value="010.9589.5603" />
          <InfoRow label="이메일" value="34715603@naver.com" />
        </div>

      </div>
    </section>
  )
}

export default AboutMe

---

코드 설명

InfoRow 컴포넌트를 따로 만드는 이유

인적사항 항목이 5개나 됩니다. 패턴이 반복됩니다.

// 컴포넌트 없이 작성하면 (반복이 많음)
<div className="info-row">
  <span className="info-row__label">이름 :</span>
  <span className="info-row__value">오성의</span>
</div>
<div className="info-row">
  <span className="info-row__label">나이 :</span>
  <span className="info-row__value">1996.05.</span>
</div>
// ... 5번 반복

// 컴포넌트로 만들면 (간결함)
<InfoRow label="이름" value="오성의" />
<InfoRow label="나이" value="1996.05." />
// ... 훨씬 짧고 읽기 쉬움

JSX 주석 {/* */}

JSX 안에서 주석을 쓸 때는 {/* */} 를 사용합니다.

// JavaScript 주석 (JSX 밖에서)
const x = 1

return (
  <div>
    {/* JSX 주석 (JSX 안에서) */}
    <p>내용</p>
  </div>
)

---

STEP 3 — CSS 추가

/* src/index.css 에 추가 */

/* ── 섹션 공통 제목 ──────────────────────── */

.section-title {
  margin-bottom: 48px;
}

.section-title__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

/* 세로 검정 라인 */
.section-title__line {
  width: 2px;
  height: 36px;
  background-color: #000;
}

.section-title__text {
  font-size: 48px;
  font-weight: 700;
  color: #000;
}

.section-title__sub {
  font-size: 16px;
  color: #555555;
  padding-left: 18px;  /* 세로 라인 너비만큼 들여쓰기 */
}

/* ── About Me ────────────────────────────── */

.about {
  padding: 80px 24px;
}

/* 2단 그리드 */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 왼쪽 50% : 오른쪽 50% */
  gap: 40px;
}

.about-block {
  margin-bottom: 32px;
}

/* 블록 소제목 */
.about-block__title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eeeeee;
}

/* 항목 한 줄 */
.about-block__item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  font-size: 16px;
  color: #747474;
  border-bottom: 1px solid #f5f5f5;
}

/* 날짜 부분 */
.about-block__date {
  color: #555555;
  white-space: nowrap;  /* 날짜가 줄바꿈되지 않게 */
  min-width: 100px;
}

/* ── 인적사항 행 ──────────────────────────── */

.info-row {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.info-row__label {
  width: 70px;
  color: #3a3a3a;
}

.info-row__value {
  color: #727272;
}

---

브라우저 확인

저장 후 브라우저에서:

• "ABOUT ME" 큰 제목 옆에 세로 라인이 있습니다
• 학력/자격사항이 왼쪽, 인적사항이 오른쪽에 2단으로 배치됩니다
• 각 항목마다 얇은 구분선이 있습니다

---

정리

---