[리디저널 제작기] 3. 팝업 UI 디자인 만들기 (styled-components)

안녕하세요. 박기린 입니다.
본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 :  RIDI-Journals ]의 제작 과정을 적어놓은 글입니다.

 

UI 디자인 만들기

Figma에서 직접 팝업창의 UI 디자인을 만들었습니다.
다크모드에 어울리는 색상에 심플한 디자인으로 구성했습니다.
 
 
 

---

styled-componets로 스타일링하기

React의 스타일링 모듈인 styled-components를 사용했습니다.
TypeScript를 사용하기에, @types/styled-componets 모듈도 설치했습니다.
 
 
 

    <div className="Popup">
      <h1>모은 독서노트 개수 : {texts.length}개</h1>
      <button onClick={crawlButtonHandler}>독서노트 모으기</button>
      <button onClick={copyButtonHandler}>클립보드에 복사하기</button>
      <p>Made by ParkGiraffe</p>
    </div>

JSX에 기본적인 틀을 만들어줍니다.
이제 styled-components를 이용해서 새로운 컴포넌트로 만듭니다.
 
 
 
 

Popup.tsx와 그 안에 들어갈 컴포넌트를 모아놓을 popup/components 폴더를 만듭니다.

Container : 팝업의 바탕 부분을 담당합니다.
Counter :  "모은 독서노트 갯수 : n개" 텍스트를 담당합니다.
Manufacturer : "Made by ParkGiraffe" 텍스트를 담당합니다.
button :  "독서노트 모으기", "클립보드에 복사하기" 버튼 부분을 담당합니다.

 
 
 

---

styled-componets의 props 이용하기

// component/Buttons/Button.tsx
import styled, { css } from "styled-components";

const Button = styled.button<{ isCrawl: boolean }>`
  ${(props) =>
    props.isCrawl
      ? css`
          background-color: #1c84f6;
        `
      : css`
          background-color: #2C3953;
        `}

	{...}
`;

export default Button;

styled-componets로 만들어진 컴포넌트도 일종의 React Components이기 때문에 props를 이용할 수 있습니다.
이 props를 이용해서, "독서노트 모으기", "클립보드에 복사하기" 버튼의 색깔을 따로따로 지정할 수 있게 합니다.
 
 
 
 
 
 

// Popup.tsx의 jsx
    <Container>
      <Counter>모은 독서노트 갯수 : {texts.length}개</Counter>
      <Buttons onCopy={copyButtonHandler} onCrawl={crawlButtonHandler} />
      <Manufacturer>Made by ParkGiraffe</Manufacturer>
    </Container>

styled-componets의 스타일링이 적용된 모습입니다.
 
 
 

---

Made by ParkGiraffe를 누르면 사용설명서로 접속되게 하기

// componets/Manufacturer.tsx
import styled from "styled-components";

const Manufacturer = styled.a`
  color: #9a9a9a;
  font-size: 12;
`;

export default Manufacturer;

styled-components에서 <a> 태그를 사용한 컴포넌트를 만든 후,
 
 

// Popup.tsx
      <Manufacturer href="https://arnopark.tistory.com/" target="_blank">Made by ParkGiraffe</Manufacturer>

href : 접속할 링크.
target : "_blank"로 설정하면, 새 탭에서 링크를 엽니다.

기존 <a> 태그에 들어갈 props를 그대로 넣어주면, 자동으로 styled-components에서 인식해서 props를 전달받습니다.
 
 
 
 

모두 적용된 모습입니다.