프로필 페이지 만들기 (11) - home, project css 리팩토링

 

이번 포스트에서는 수행한 다음의 작업들에 대한 과정을 작성하고자 한다.

 

• 모달 크기 및 줄 바꿈 수정
• HomePage 아래 이력 추가
• Project Item을 4개만 출력하고, 아이콘을 누르면 다음 아이템들이 출력되게끔 (1 -> 5)으로 .. (5 -> 1로)

모달 크기 및 줄 바꿈 수정

 

운동과 관련된 이야기를 하다보니 글씨의 양이 많아져서 가독성이 떨어졌다.

따라서 줄바꿈을 통해 문장을 구별하여 가독성을 높이도록 하였다.

 

export const modalItems: ModalItem[] = [
  {
    id: 1,
    img: [main2],
    title: '주석이 꼭 필요할까?',
    desc: '주석은 코드의 가독성을 높이고,<br />다른 개발자나 미래의 자신이 코드를 이해하는 데 <br />도움을 주지만 해당 언어의 문법을 이해만 하고 있으면 <br />누구든지 알아보기 쉬운 명확하고 직관적이게 코드를 <br />작성하려 노력합니다.',
  },

 

이렇게 문자열을 백틱(`) 기호를 사용해 여러줄을 하나의 문장으로 인식하도록하고, <br/> 를 입력하여 줄바꿈 처리하도록 하였다

 

하지만 실제로 UI에 출력될 때는 <br/>이 문자열로 출력되었다.

 

따라서 다음과 같이 p태그를 수정하였다.

<p dangerouslySetInnerHTML={{ __html: currentItem.desc }} />

이것을 입력하여 HTML 문자열을 직접 렌더링하도록 하였다

 

HomePage 아래 이력추가 

기존의 HomePage에서 About Me를 눌러 모달에서 이력을 확인할 수 있었는데, 이것이 사용자 입장에서 귀찮을 거라고 생각했고,

HomePage 자체에서 보여줘도 괜찮겠다라는 생각이 들어서 p태그를 통해 입력하였다

 

 

 

Project Item 4개만 우선 출력

기존에 작성한 Project Item이 증가함에 따라 각 아이템의 width, height의 값이 변경되면서 의도치 않게 출력되었다

따라서 기존처럼 한 페이지당 4개의 아이템만 보여주려고 한다

const [currentIndex, setCurrentIndex] = useState(0);

 

useState를 활용하여 값이 변경되면 리렌더링 되도록 하였고

  const handleLeftClick = () => {
    setCurrentIndex(
      currentIndex > 0
        ? currentIndex - 4
        : projectItem.length - (projectItem.length % 4 || 4)
    );
  };

  const handleRightClick = () => {
    setCurrentIndex(
      currentIndex < projectItem.length - 4 ? currentIndex + 4 : 0
    );
  };

 

모달에서와 동일하게 아이콘을 클릭하면 4개씩 아이템 index가 증가 또는 감소하도록 하였다

{projectItem.slice(currentIndex, currentIndex + 4).map((item) => (
        <S.ItemContainer key={item.id} onClick={() => handleMove(item.url)}>
          <img src={item.img} alt={item.title} />
          <h2>{item.title}</h2>
          <p>{item.stack}</p>
        </S.ItemContainer>
      ))}

 

그리고 slice를 활용하여 Project Item을 출력하는데,

이때 첫번째 매개변수는 시작값을 나타내는데 이것은 1또는 4일것이기 때문에 두 번째 매개변수는 + 4로 값을 고정시키면 된다