main-project 18~20일차 (22.09.25 ~ 27. 반응형 구현)

✅ 오늘 한 일

반응형 전역 설정

• 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 react-responsive 라이브러리를 사용하여 컴포넌트를 바꾸는 형식으로 진행할 수 있었지만 단순히 크기만 변동하는 것이라면 미디어 쿼리로 크기만 바꿔주면 되기 때문에 아래와 같은 라이브러리를 찾게 되었다. (react-responsive를 전역적으로 사용하는 방법도 있을 것이다.)
• styled-media-query를 사용한 반응형
  • 위의 라이브러리를 사용해 보려했다. 하지만, 스타일드 컴포넌트에 전역으로 설정할 수 있어서 사용하지 않았다.
• Styled-Component를 사용한 반응형 구현
  • 아래와 같은 코드로 Theme.js 파일에 사이즈를 지정했다.
  • 사용시 미디어 쿼리에 프롭으로 내려주어 지정된 크기를 숫자대신 변수로 사용할 수 있다.

// Theme.js
// 사이즈 지정
const size = {
  desktop: "1141px",
  tabletL: "1140px",
  tabletS: "860px",
  mobile: "786px",
};

// 테마 프로바이드
export const Theme = {
  desktop: `(min-width: ${size.desktop})`,
  tabletL: `(max-width: ${size.tabletL})`,
  tabletS: `(max-width: ${size.tabletS})`,
  mobile: `(max-width: ${size.mobile})`,
};

// 미디어쿼리 사용 파일
  @media ${(props) => props.theme.tabletL} {
    width: 53.5rem;
  }
  
  @media ${(props) => props.theme.tabletS} {
    width: 36rem;
  }
  
  @media ${(props) => props.theme.mobile} {
    width: 26.75rem;
  }

• 파비콘 / 탭 이름 수정
  • public -> index.html에서 파비콘과 탭에 나올 페이지 이름을 수정했다.
• 게시글 카드에 대여가능 여부에 따른 동그라미의 색상을 변경해주는 것을 구현했다.

메인페이지 반응형 구현

• 모바일용 Nav Dropdown 구현
• 모바일용 Footer 구현
• 모바일용 게시글 카드 구현

공유장터 목록 페이지 반응형 구현

• 게시글 카드 크기변경
• 모바일용 카테고리, 검색, 대여상태 구현

🥲 어려웠던 일

• 미디어 쿼리를 전역으로 설정해서 처음 사용하다보니 적응하는데 시간이 걸렸지만 적응되니 하나하나 크기를 기억하지 않고 프롭스로 변수명을 작성하면 되니 편해졌다.

📌 해야할 일

• 레저용품 판매점 등록 구현
• 레저용품 판매점 수정 구현
• 백엔드 API와 프론트 연결