[Pre-Project] Main page 만들기

팀원들과 페이지에 기본적으로 들어갈 컴포넌트들을 나눠서 만든 뒤 각자 맡아서 하고싶은 페이지를 가져가서 작업을 하는 시간을 가졌다. 기본 페이지 컴포넌트 다음으로 만들어야하는 페이지는 Log in, Sign up페이지, 메인 페이지, ask question페이지가 있었다. OAuth를 이용한 로그인페이지를 구현해보고 싶었지만 내가 하게되면 너무 오래걸릴꺼같기도하고 다른 팀원분께서도 마침 하고싶으시다 하셔서 흔쾌히(?) 양보를 하고 그 다음으로 구현 해보고 싶었던 페이지네이션이 있는 메인페이지를 맡아서 하게 되었다.

homeStyled.tsx

이번 팀 프로젝트에서 css 스타일은 styled컴포넌트를 이용해 만들기로 했다. 학습은 했었지만 저번 솔로프로젝트 했을때는 css로만 만들어서 적응하기가 힘들었다. 하지만 styled컴포넌트의 경우 props를 이용한 컴포넌트의 재활용성이 높이지기도 하고 css네이밍에 관해서도 여유로워 지기 때문에 이번기회에 많이 연습하는 시간이 되었다. 꼭 styled컴포넌트를 사용해야지만 css네이밍이 편해지는건 아니고 css파일을 모듈화를 시켜서 한 파일에 한css만 적용시키는것도 네이밍을 편하게하는 방법중에 하나 이다.

import { styled } from 'styled-components';

interface ColorProp {
  color?: string;
}

export const Main = styled.div`
  padding-top: 100px;
  display: flex;
  justify-content: center;
`;

export const BlueButton = styled.button`
  padding: 8px 10px 8px 10px;
  background-color: ${({ theme }) => theme.colors.blue};
  color: ${({ theme }) => theme.colors.white};
  border: 1px solid ${({ theme }) => theme.colors.darkBlue};
  border-radius: 2px;
  cursor: pointer;
  &:hover {
    background-color: ${({ theme }) => theme.colors.darkBlue};
  }
`;

export const HomeBox1 = styled.div`
  margin-left: 70px;
  width: 50vw;
  min-width: 555px;
  /* height: 100px; */
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
`;

export const TitleBox = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: ${({ theme }) => theme.font.title};
`;

//ButtonBox
export const ButtonBox = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid black; */
`;

export const ButtonBoxTitle = styled.div`
  width: 30%;
  /* max-width: 160px; */
  word-break: normal;
  font-size: ${({ theme }) => theme.font.large};
`;

export const ButtonBoxIcon = styled.div`
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid red; */
`;

export const ButtonIcons = styled.div`
  display: flex;
  /* border: 1px solid black; */
  border-radius: 3px;
`;

export const ButtonIcon = styled.div<ColorProp>`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  font-size: ${({ theme }) => theme.font.medium};
  border: 1px solid black;
  padding: 9px;
  margin-right: -1px;
  background-color: ${props => (props.color === 'gray' ? '#E3E6E8' : 'white')};
`;

// FilterIcon
export const ButtonFilterIcon = styled.div`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px;
  font-size: ${({ theme }) => theme.font.medium};
  border-radius: 3px;
  border: 1px solid ${props => props.theme.colors.darkBlue};
  background-color: ${props => props.theme.colors.backgroundBlue};

  &:hover {
    background-color: #add2ef;
  }
`;

export const FilterImg = styled.img`
  width: 13px;
  height: 13px;
  margin-right: 4px;
`;

전에 styled컴포넌트를 사용 했을때는 코드가 길지 않아서 사용될 컴포넌트 내부에서 바로 styled컴포넌트를 만들어 사용 했지만 이번에는 그 페이지에서 사용될 styled컴포넌트만 모아서 import해오는 방식으로 사용 했다. 사실 이렇게 사용하고 있으니 일반 css를 사용하는거와 크게 다르지 않다는 느낌을 받았다. props를 이용한 재사용성에 초점을 맞춰 사용하는 연습 위주로 해야겠다.