UMC 영화 페이지에 반응형 디자인 적용하기

 

8주차 UMC 워크북을 진행 중이며 8주차 워크북 미션의 주제는 지금까지 만든 영화사이트에 반응형 디자인을 적용하는 것이다.  현재 영화 웹의 메인화면은 다음과 같으며 모바일 디바이스 넓이 기준 768px을 기준으로 헤더에 있는 로그인 ~ Upcoming 카테고리들을 사이드바로 랜더링 되도록 구현하고자 한다. 

 

 

<구현 내용>

 

- 카테고리 사이드바 구현 -

 

- css 기반: Styled-Component

1.  768px보다 넓이가 작아졌을 때 나오는 Sidebar 컴포넌트와 MenuIcon 컴포넌트 구현

✅ open이 true이면 right의 값이 0이 된다. 이는 사이드바가 화면의 오른쪽 가장자리에 위치하게 되고 화면에 보인다.

✅ open이 false이면 right의 값이 -100%가 된다. 이는 사이드바가 화면의 오른쪽 바깥으로 100%만큼 밀려나게 되어, 화면에서 보이지 않게 된다. 

const Sidebar = styled.div`
  display: flex;
  flex-direction: column;
  align-items: start;
  position: fixed;
  top: 0;
  right: ${({ open }) => (open ? "0" : "-100%")};
  width: 250px;
  height: 100%;
  background-color: #101021;
  transition: right 0.3s ease;
  z-index: 10; /* 사이드바가 헤더 아래에 위치하도록 z-index 설정 */
  padding: 70px 20px 20px;

  ${StyledLink} {
    margin-right: 0;
    padding: 10px;
  }

  @media (min-width: 768px) {
    display: none;
  }
`;

 

✅ Sidebar 컴포넌트 안에 있는 StyledLink 컴포넌트에 css 적용(margin-right: 0px, padding:10px)

<Sidebar open={sidebarOpen}>
        <CloseIcon onClick={toggleSidebar} />
        {user ? (
          <>
            <StyledLink onClick={handleLogout}>로그아웃</StyledLink>
            <StyledLink to="/popular" onClick={handleLinkClick}>
              Popular
            </StyledLink>
            <StyledLink to="/now-playing" onClick={handleLinkClick}>
              Now Playing
            </StyledLink>
            <StyledLink to="/top-rated" onClick={handleLinkClick}>
              Top Rated
            </StyledLink>
            <StyledLink to="/upcoming" onClick={handleLinkClick}>
              Upcoming
            </StyledLink>
          </>
        ) : (
          <>
            <StyledLink to="/login" onClick={handleLinkClick}>
              로그인
            </StyledLink>
            <StyledLink
              to="/signup"
              param={location.pathname}
              onClick={handleLinkClick}
            >
              회원가입
            </StyledLink>
            <StyledLink to="/popular" onClick={handleLinkClick}>
              Popular
            </StyledLink>
            <StyledLink to="/now-playing" onClick={handleLinkClick}>
              Now Playing
            </StyledLink>
            <StyledLink to="/top-rated" onClick={handleLinkClick}>
              Top Rated
            </StyledLink>
            <StyledLink to="/upcoming" onClick={handleLinkClick}>
              Upcoming
            </StyledLink>
          </>
        )}
      </Sidebar>

 

✅ 768px 기준으로 기존엔 모습이 보이지 않다가 display:block으로 바뀌며 화면에 보이도록 구현

const MenuIcon = styled.div`
  display: none;
  font-size: 24px;
  cursor: pointer;
  margin-right: 10px;

  @media (max-width: 768px) {
    display: block;
  }
`;

 

 

2. 사이드바의 열림/닫힘에 필요한 useState 설정, 그리고 함수를 구현한다. 

 

✅ toggleSidebar : 사이드바의 열림/닫힘 구현

✅ handleLinkClick: 사이드바 내부에 있는 링크들을 클릭하면 사이드바가 닫히도록 구현

 

const [sidebarOpen, setSidebarOpen] = useState(false);

const toggleSidebar = () => {
  setSidebarOpen(!sidebarOpen);
};

const handleLinkClick = () => {
  setSidebarOpen(false);
};

 

<구현화면>

 

 

 

 

- 전체적인 웹 사이트 반응형 디자인 적용 -

적용 할 페이지 :  메인 페이지, 영화상세 페이지, 회원가입 페이지, 로그인 페이지, 영화리스트 페이지

-> 여기서 하는데 애를 먹었던 영화리스트 페이지, 그리고 회원가입 페이지 반응형 디자인 적용 과정에 대해서 정리하고자 한다. 

 

그전에  반응형 디자인에 필요한 개념에 대해서 추가 정리하고자 한다. 

 

- 추가 개념: vw, vh, dvw, lvw, dvh, lvh, svw, svh -

vw, vh

-> 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다.

->  스크롤바를 포함한 길이를 반환한다. 

-> %와의 차이점: %는 무조건 본인 부모요소의 넓이, 높이 기준

 

lvw, lvh (large)

1. 브라우저의 UI가 가장 작고, 컨텐츠가 가장 클때를 가정한다.
2. 예를 들어, 모바일 브라우저에서 주소창이 없는 경우를 기준으로 한다.
3. 정적인 값으로 브라우저의 UI가 변한다고 값이 늘어나거나 줄지 않는다.

dvw, dvh (dynamic)

1. 브라우저 UI 크기에 따라 동적으로 변한다.

svw, svw (short)

1. 브라우저의 UI가 가장 크고, 컨텐츠가 가장 작을때를 가정한다.
2. 예를 들어, 모바일 브라우저에서 주소창이 보이는 경우를 기준으로 한다.
3. 정적인 값으로 브라우저의 UI가 변한다고 값이 늘어나거나 줄지 않는다.

width: auto

-> width: auto라 설정한 div 태그 내에 있는 inline-block 크기에 맞춰 자동으로 정해진다.

- 반응형 디자인 적용 -

 

1. 영화 리스트 페이지

 

✅ Grid Column의 크기를 auto-fit으로 하고 최소 넓이는 200px부터 비율에 맞도록 설정한다.

-> 기존엔 auto-fit대신 화면갯수를 4개로 설정했으나 반응형을 위해 auto-fit으로 구성

const MovieGrid = styled.div`
  min-width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* 자동 맞춤 */ // 각 컬럼의 최소 너비를 200px로 설정
  gap: 1rem;
  padding: 20px 60px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #202142;
  color: white;
`;

 

✅ 계속 줄다가 결국엔 column방향으로 한 줄로 리스트 랜더링 

 

 

 

 

2. 회원가입 페이지

 

✅ SignUpPage 에서 Form 컴포넌트를 width: 100% 주되 최대 넓이는 510px을 넘지않도록 한다.

(Form 컴포넌트 내부에 input 컴포넌트 크기 조절을 위해)

const Form = styled.form`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 510px;
`;

 

✅ Input, ErrorMessage 컴포넌트를 부모 요소 Form 컴포넌트 넓이의 95%로 설정

-> 부모 요소의 넓이 변화에 따라 유동적으로 넓이 조절

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  padding: 10px;
  margin: 10px 0;
  border-radius: 20px;
  border: none;
  width: 95%;
  height: 50px;
  box-sizing: border-box;
`;

const ErrorMessage = styled.div`
  display: flex;
  justify-content: flex-start;
  width: 95%;
  color: red;
  margin-top: 5px;
`;

const SignUpInputField = ({ type, placeholder, value, onChange, error }) => {
  return (
    <>
      <Input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
      />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </>
  );
};

export default SignUpInputField;

 

 

<깃허브>

 

https://github.com/6th-UMC-TUK/6th-UMC-Web

GitHub - 6th-UMC-TUK/6th-UMC-Web