밋업 섹션만 설명이 좌우로 나뉘어 있음

[DaleSeo]

DaleStudy/daleui#1214에 취합된 피드백에서 옮긴 이슈입니다.
원 댓글: @RiaOh (6번 항목)

현상

커뮤니티 페이지의 "밋업" 섹션만 설명이 좌우 두 덩어리로 나뉘어 있습니다. 제목 아래에 한 문단, 오른쪽에 또 한 문단이 놓이는 구조인데, 두 문단을 위에서 아래로 이어서 읽는 편이 자연스럽겠다는 의견입니다.

원인

의도된 레이아웃입니다. 밋업 섹션만 .community-section-inner 2단 그리드를 씁니다.

src/pages/CommunityPage.tsx:58-67

<div className="container community-section-inner">
  <div>
    <SectionHead section={meetup} />
    <p className="community-desc">{meetup.desc}</p>
  </div>
  <p className="community-detail" style={{ alignSelf: "center", margin: 0 }}>
    {meetup.detail}
  </p>
</div>

src/styles/site.css:965-971

.community-section-inner {
  padding: 56px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: start;
}

바로 위 커피챗·모각코 블록은 .community-inline 안에서 제목 → 설명 → 갤러리를 세로로 쌓는데, 밋업만 desc와 detail을 좌우로 나눕니다. 오른쪽 문단에 alignSelf: "center"가 붙어 있어 왼쪽 제목 라인과 정렬되지도 않습니다.

제안

밋업도 다른 섹션처럼 세로로 쌓아 일관성을 맞춥니다.

<div className="container community-inline">
  <SectionHead section={meetup} />
  <p className="community-desc">{meetup.desc}</p>
  <p className="community-detail">{meetup.detail}</p>
</div>

이 경우 .community-section-inner는 다른 사용처가 없으므로 함께 삭제 대상입니다.

다만 2단 구성은 밋업 섹션에 시각적 강조를 주려는 의도일 수 있어 디자인 결정이 먼저 필요합니다. 유지하기로 한다면 최소한 오른쪽 문단의 alignSelf: "center"를 없애 왼쪽 제목과 윗줄을 맞추는 것만으로도 개선됩니다.