12/28 TIL | 쉼표 작업 일지 #13. 카테고리 페이지 스타일링 & props로 넘겨받은 문자열 개행하는 방법!

🔙 이전 시리즈

12/27 TIL | 쉼표 작업 일지 #12. 심기일전✊

---

작업 회고

1. 카테고리 페이지 UI 마크업 및 스타일링

카테고리 페이지 UI 디자인 시안

오늘은 이번 주 스프린트 우선순위 1순위로 꼽힌 카테고리 페이지 프론트 작업을 했다. 사실 언니(a.k.a 쉼표 UI/UX 디자이너)가 만들어놓은 디자인이 너무나도 방대하여 우선 핵심 가치를 기준으로 중요한 기능 순으로 개발하기로 결심하였고(위 사진의 '당일 예약 가능한 프로그램'과 같은 기능은 후순위 작업), 그렇다고 해도 그 핵심 가치 기준으로 개발해야 하는 페이지 중에 공통적으로 사용할 수 있는 디자인들이 많아서 그걸 재사용성 있는 컴포넌트로 만드는 것이 이번 작업의 관건이었다.

카테고리 페이지 작업 현황

그래서 MainTitle, SectionTitle, SubTitle 등 Title 컴포넌트를 만들고, Button 컴포넌트도 만들었다. 해당 항목에 필요한 정보만 넣으면 똑같은 스타일로 출력되게끔 작성하였다.

생각보다 순항 중인 나의 스타일링 작업! 생각보다 레이아웃이 잘 빠진 거 같아서 중간에 언니한테도 공유했더니 디자이너랑 싸울 일 없는 프론트엔드 개발자라는 칭호를 얻을 수 있었다..ㅋㅋㅋ

2. props로 넘겨받은 문자열 개행하는 방법

줄바꿈이 필요한 컴포넌트

SubTitle 컴포넌트의 경우, props로 '전체 프로그램', '힐링이 필요한 {닉네임}님을 위해서'라는 텍스트를 입력받아 보여줘야 하는데, 디자인이 '힐링이 필요한'에서 개행을 해야 해서 어떻게 props를 내려줘야 하나 고민했다. 생각보다 손쉽게 해결할 수 있었다!

해결한 방법은 개행이 필요한 곳에서 이스케이프 \n 개행 문자를 같이 작성해 props로 내려주고, 해당 내용을 보여주는 태그의 스타일에 white-space: pre-line;을 설정해주면 된다.

// 사용하는 곳
export default function Category() {
  return (
    <SubTitle
      section="전체 프로그램"
      sub={'힐링이 필요한\n보니님을 위해서'}
    />
  );
}

// SubTitle.jsx
export default function SubTitle({ section, sub }) {
  return (
    <TitleWrapper>
      <Section>{section}</Section>
      <Sub>{sub}</Sub>
    </TitleWrapper>
  );
}

// 해당 태그 스타일링
const Sub = styled.h2`
  white-space: pre-line;
`;

💡 white-space: pre-line;이란?
white-space 속성은 요소가 공백 문자를 처리하는 법을 지정하는 속성이다. white space는 말 그대로 '여백'을 의미하는데, html에서는 공백으로 생각하면 된다. 이때 지정할 수 있는 속성 중에 pre-line은 연속 공백을 하나로 합치고, 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.