프로필 페이지 만들기 (6) - Header Item Refactoring

 

이번 포스트에서는 이전에 작성한 Header Item에 대한 내용이다.

 

메인 페이지를 구현하다보니 아래 사진과 같이 More이라는 버튼을 만들게 되었다.

 

근데 이것이 Header Item과 같이 사용할 수 있을것 같았고, 다양한 곳에서 사용할 수 있을 것 같았다

 

따라서! 다음과 같이 Button으로 컴포넌트를 분리하였다.

import { colors } from '@/styles';
import React from 'react';
import styled from 'styled-components';

type ButtonProps = {
  color?: string;
  size?: 'small' | 'medium' | 'large'; 
  active?: string;
  children: React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};

const Button = ({
  color,
  size = 'medium',
  active = 'false',
  children,
  onClick,
}: ButtonProps) => {
  return (
    <S.Button color={color} size={size} active={active} onClick={onClick}>
      {children}
    </S.Button>
  );
};

const S = {
  Button: styled.button<ButtonProps>`
    width: ${(props) => {
      switch (props.size) {
        case 'small':
          return '10%';
        case 'medium':
          return '15%';
        case 'large':
          return '20%';
        default:
          return '15%';
      }
    }};
    height: ${(props) => {
      switch (props.size) {
        case 'small':
          return '3vh';
        case 'medium':
          return '4vh';
        case 'large':
          return '5vh';
        default:
          return '4vh';
      }
    }};

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 4px;
    padding: 4px;
    background-color: ${(props) =>
      props.active === 'true' ? colors.semantic.secondary : ''};
    color: ${(props) =>
      props.active === 'true'
        ? colors.semantic.text.light
        : colors.semantic.text.dark};
    &:hover {
      color: ${colors.semantic.text.light};
    }

    p {
      cursor: pointer;
    }
  `,
};

export default Button;

 

초기값을 리터럴 또는 문자열로 작성하고, props에 따른 처리는 switch로 작성하였다.

 

크기 등의 CSS 처리는 이전 Header Item을 그대로 갖고 왔다.

 

 

+ ) 

 

정보 및 페이지 이동의 버튼과 모달창을 띄우는 More의 기능이 서로 달라서

아마 type을 props로 받아서 다르게 나타내야 할 것 같다