dusunax commented 2 years ago

styled-component 테마 적용(feat. REM 적용)

+결론(10월 3일 추가)

적용 내용
px과 rem 간단한 소개
프로젝트 적용 사례

결론

작업 마무리 - 10월 3일

모든 페이지의 컴포넌트를 테마를 적용한 커스텀 컴포넌트로 만들 필요는 없음
전체적인 테마를 적용하고 싶다면 ex) 다크모드 등 태그별, 또는 전체 body에 테마를 적용하는 것이 맞는 방법이었던 것 같습니다.
- 컴포넌트마다 각자 스타일을 지정해놓고, 모든 컴포넌트를 테마에 분리하다보니 시간이 너무 많이 들고, 한 곳을 수정했을 때, 다른 곳의 CSS가 깨지는 현상이 나타남
만약 다음에 이와 같은 테마에 관련된 CSS 작업을 한다면 태그와 바디 위주에 적용하고, 재사용할 컴포넌트를 처음부터 작성하여 사용하고, px과 혼동되지 않도록 처음부터 rem으로 작성할 것 같습니다.

적용 내용

페이지

[x] 커뮤니티
[x] 로그인
[x] 회원가입
[x] 에러
[x] 랜딩
[x] 404
[x] 비밀번호 찾기
[x] 헤더
[x] 푸터
[x] 네비게이션
[x] 마이페이지 => 테마 진행하지 않음 / REM 적용
[x] 댓글 => 테마 진행하지 않음 / REM 적용
[x] 프로필 수정
[x] 레시피 작성 => 테마 진행하지 않음 / REM 적용
[x] 레시피 상세 => 테마 진행하지 않음 / REM 적용
[x] 레시피 수정 => 테마 진행하지 않음 / REM 적용
[x] 웰컴 => 테마 진행하지 않음 / REM 적용 그 외
[x] 레이아웃
[x] 버튼 => 테마 진행하지 않음 / REM 적용
[x] 모달 => 테마 진행하지 않음 / REM 적용

REM과 EM

사용자의 모든 브라우저에는 루트 글꼴 크기 설정(root font size)이 있습니다. root font size를 적용하는 것은 시각 장애가 있는 사용자에게 매우 중요합니다.

html의 root 폰트 사이즈를 변경하고, 상대적인 사이즈를 사용하면 확대/축소 뿐만 아니라 루트 글꼴 크기 변경에도 유연하게 반응할 수 있습니다.

픽셀이란?

픽셀은 절대값을 사용하는 고정된 물리적 크기입니다.(화면 해상도에 따라 다를 수는 있음)
픽셀 단위 크기의 단점
📌 1) 접근성 문제! px를 사용하면 사용자의 글꼴 크기 설정을 무시합니다.(설정을 덮어씁니다.) 사용자가 root 폰트 사이즈를 16에서 24px로 변경하더라도 화면에 표시되는 크기는 변하지 않아 사용성에 제약이 생깁니다.
1. 비효율성! px를 사용하면 화면 크기가 변화할 때, 이에 맞춰서 px값을 변경하는 과정을 진행해야 합니다.

픽셀을 상대적 크기로 변환하기

별도의 글꼴 맞춤설정을 하지 않은 경우 HTML의 기본 폰트 사이즈는 16px입니다.
- 48px을 rem단위로 치환하면 48px/16px = 3rem입니다.
- REM을 직접 px로 변환할 수는 없지만, 루트 글꼴 크기를 기반으로 px값을 계산할 수 있습니다.
📌 rem은 고정값이 아님! 루트 글꼴 크기를 62.5%로 설정하면, 원하는 rem값을 얻기 위해, 루트 글꼴 크기를 10px로 지정하는 것과 같은 효과를 얻을 수 있습니다.
rem와 em은 모두 루트 글꼴 크기를 참조하지만 적용하는 방식에 차이점이 있습니다.
- em값은 상대적으로 계산하기 어렵기 때문에, rem을 주로 사용하는 것도 좋습니다.

REM

Font size of the root element.

브라우저 루트 글꼴 크기값의 배수로 적용

EM

Font size of the parent, in the case of typographical properties like [font-size](<https://developer.mozilla.org/en-US/docs/Web/CSS/font-size>) and font size of the element itself, in the case of other properties like [width](<https://developer.mozilla.org/en-US/docs/Web/CSS/width>)

텍스트를 포함하는 엘리먼트의 font-size 속성값에 배수로 적용
브라우저 설정을 참조하지만, 항상 부모 엘리먼트를 참조합니다.

종류	영어	내용
REM	root em unit	루트 글꼴 크기의 배수
EM	em unit	글꼴 크기의 배수
px	pixel	고정된 절대값

브레이크 포인트

브라우저 화면 크기는 픽셀 단위이며, 글꼴 크기에 따라 변경되지 않기 때문에 px또는 em을 사용합니다.

dusunax commented 2 years ago

App, Main.jsx 정리

Main에서
현재 최상단에서 import하고 있는 내용
- RouteChangeTracker : google analytics 연동
- ThemeProvider, createGlobalStyle : styled component 글로벌 스타일, 테마
- BrowserRouter : react-router-dom 리액트 라우트

Main : react-route-dom

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

App : tracker, Provider(+GlobalStyle)

import RouteChangeTracker from "./shared/RouteChangeTracker";

import { ThemeProvider } from "styled-components";

import * as theme from "./styles/theme.js";
import GlobalStyle from "./styles/GlobalStyle";
import "./util/windowInnerHeightSet";

const App = () => {
  RouteChangeTracker();

  return (
    <ThemeProvider theme={theme}>
      <Layout />
      <GlobalStyle />
    </ThemeProvider>
  );
};

export default App;

styles/theme.js

기존 root에서 사용하던 코드를 theme.js에 정리할 예정입니다.

기존 root 코드

:root {
--button-color: #393939;
--button-borderColor: #393939;
--button-backgroundColor: #ffffff;
--button-activeColor: #ddd;
--button-activeBorderColor: #393939;
--button-activeBackgroundColor: #393939;

--input-border-bottom: 2px solid #cdcdcd;
--input-activeBorder-bottom: 2px solid#9e9e9e;
--input-font-color: #cdcdcd;
--input-font-size: 17px;
--input-padding: 14px 0 11px;

--font-color-dark: #393939;
--font-color-middle: #9e9e9e;
--font-color-light: #cdcdcd;
--font-color-alert: #E64A3A;
...
}

기존 코드를 theme.js로 변경


const button = {
color: {
base: "#393939",
active: "#ddd",
},
borderColor: {
base: "#393939",
active: "#393939",
},
backgroundColor: {
base: "#ffffff",
active: "#393939",
},
};

const input = { borderBottom: { base: "2px solid #cdcdcd", active: "2px solid #9e9e9e", }, fontSize: { base: "17px", }, padding: { base: "14px 0 11px", }, fontColor: { base: "#cdcdcd", }, };

const fonts = { size: { sm: "1rem", base: "1.6rem", lg: "2rem", xl: "2.5rem", title: "6rem", }, weight: { light: 100, normal: 400, bold: 700, }, color: { dark: "#393939", middle: "#9e9e9e", light: "#cdcdcd", alert: "#E64A3A", }, };

## Reset.css 적용하기

import { createGlobalStyle } from "styled-components"; import reset from "./customReset.css";

const GlobalStyle = createGlobalStyle` ${reset}; ...


## theme 적용하기
```jsx
import { createGlobalStyle, css } from "styled-components";
import reset from "./customReset.css";
import animations from "./animations.css";

const GlobalStyle = createGlobalStyle`
  ${reset};
  ${animations};

  ${({ theme }) => {
    return css`
      body {
        font-size: ${theme.fonts.size.base};
      }
    `;
  }}
`;

export default GlobalStyle;

dusunax commented 2 years ago

컴포넌트 단에서 GlobalStyle Theme 사용하기

style.js만들기 + custom스타일 만들기

const Custom = styled.div`
${({ theme }) => {
return css``;
}}
`;

input 기존 코드

const StInput = styled.input`
all: unset;
width: 100%;
/* margin-bottom: 25px; */
padding: 10px 0;

border-bottom: 2px solid #cdcdcd;

font-weight: 400;
font-size: 17px;
line-height: 150%;

transition: all 0.3s;

:hover,
:focus,
:active {
border-bottom-color: #9e9e9e;
}
::placeholder {
color: #cdcdcd;
}
`;

custom스타일

// StInput
const CustomInput = styled.input`
${({ theme }) => {
return css`
  width: 100%;
  padding: ${theme.inputs.padding.base};
  /* margin-bottom: 25px; */

  border-bottom: ${theme.inputs.borderBottom.base};

  font-size: ${theme.fonts.size.base};
  line-height: 1.5;

  transition: all 0.3s;

  :hover,
  :focus,
  :active {
    border-bottom: ${theme.inputs.borderBottom.active};
  }
  ::placeholder {
    color: ${theme.colors.light};
  }
`;
}}
`;

컴포넌트 내 import

import styledComponents from "../styles/customFormStyle";
const { CustomInput } = styledComponents;
...
<CustomInput />

import한 custom 스타일 컴포넌트를 확장해서, 상황에 맞게 사용

import styledComponents from "../styles/customFormStyle";
const { CustomInput } = styledComponents;
...
<StLoginInput />
...
const StLoginInput = styled(CustomInput)`
//현재 페이지에서 추가해서 사용할 스타일
margin-bottom: 1rem
`

dusunax commented 2 years ago

Custom Styled Component로 변환

만든 파일
- src\styles\customElementStyle.js
- src\styles\customFormStyle.js
- src\styles\customReset.css
- src\styles\animations.css
- src\styles\theme.js

로그인 페이지부터 진행!✍

버튼

// 버튼 button
const CustomButton = styled.button`
${({ theme }) => {
return css`
  padding: 1.5rem;
  border-radius: 1rem;

  border: ${theme.buttons.border.base};
  background: ${theme.buttons.backgroundColor.base};
  color: ${theme.buttons.color.base};

  font-weight: ${theme.fonts.weight.bold};
  font-size: ${theme.fonts.size.lg};
  text-align: center;

  transition: all 0.3s;
  cursor: pointer;

  :hover {
    border: ${theme.buttons.border.active};
    background: ${theme.buttons.backgroundColor.active};
    color: ${theme.buttons.color.active};
  }
  :disabled {
    border: ${theme.buttons.border.disable};
    background: ${theme.buttons.backgroundColor.disable};
    color: ${theme.buttons.color.disable};

    pointer-events: none;
  }
`;
}}
`;

제목

const CustomTitle = styled.div`
${({ theme }) => {
return css`
  margin-top: 5.5rem;

  h1 {
    font-weight: ${theme.fonts.weight.bold};
    font-size: ${theme.fonts.weight.title};
  }
`;
}}
`;

// 확장
const StLoginTitle = styled(CustomTitle)`
max-width: 30rem
`;

전체 높이 wrapper

const CustomWrapFullVH = styled.div`
${({ theme }) => {
return css`
  height: 100vh;
  padding: 0 2rem;

  display: flex;
  flex-flow: column;

  overflow-y: scroll;
`;
}}
`;

폼

const CustomForm = styled.form`
${({ theme }) => {
return css`
  margin-top: 3.5rem;

  display: flex;
  flex-direction: column;

  & p {
    color: ${theme.colors.alert};
  }

  & label {
    font-weight: ${theme.fonts.weight.bold};
    font-size: ${theme.fonts.size.label};
    color: ${theme.colors.middle};
  }

  .input_label_icon {
    width: 2.4rem;
    height: 2.4rem;

    position: absolute;
    right: 0;
    bottom: 0;

    transform: translateY(-30%);

    cursor: pointer;
  }
`;
}}
`;

//확장
const StLoginForm = styled(CustomForm)`
.register_input_box {
position: relative;
}
`;

에러 박스 (div with min-height)

const CustomErrorBox = styled.div`
${({ theme }) => {
return css`
  min-height: 3rem;
  line-height: 2.5rem;
  margin-bottom: 0.5rem;

  font-size: ${theme.fonts.size.label};
`;
}}
`;

클릭 가능한 작은 굵은 텍스트

const CustomSmallBoldTextLink = styled.p`
${({ theme }) => {
return css`
  font-weight: ${theme.fonts.weight.bold};
  font-size: ${theme.fonts.weight.label};
  color: ${theme.colors.middle};

  cursor: pointer;
  transition: all 0.2s;

  :hover {
    color: ${theme.colors.dark};
  }
`;
}}
`;

//확장
const StResetPassword = styled(CustomSmallBoldTextLink)`
margin-top: 1rem;

align-self: flex-end;
text-align: right;
`;
...
const StLink = styled(CustomSmallBoldTextLink)`
margin-top: 3.5rem;
margin-bottom: 4rem;

text-align: center;
`;

1px 얇은 선 중간에 글씨 (div 안에 span)

const CustomLineBox = styled.div`
${({ theme }) => {
return css`
  width: 100%;
  position: relative;

  ::before {
    content: "";
    width: 100%;
    height: 0.1rem;

    position: absolute;
    background-color: ${theme.colors.wg};
  }

  span {
    font-size: ${theme.fonts.weight.label};

    padding: 0 1rem;

    background-color: #fff;
    color: ${theme.colors.light};

    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;
}}
`;

dusunax commented 2 years ago

회원가입 페이지 진행✍

교체 완료....

버튼 관련 위치 조정이 필요하면 꼭 rem 사용해주세요!

import styledFormComponents from "../styles/customFormStyle";
import styledComponents from "../styles/customElementStyle";
const { CustomWrapFullVH } = styledComponents;
const { CustomForm, CustomButton } = styledFormComponents;

styledComponents는 함수 바깥에서 import 해야 합니다.
styledComponents의 컴포넌트는 함수 바깥에서 선언되어야 합니다.
styledComponents는 props로 하위 컴포넌트로 전달되지 않습니다.

dusunax commented 2 years ago

비밀번호 찾기 페이지 완료

src\pages\ResetPassword.jsx

src\components\resetPassword\CheckEmail.jsx

CustomWrapFullVH
└─StForm = styled(CustomForm)
├─RecipeCreateNavigation
│  ├─Navigation (props로 children넘김)
│  │     └─StArrowBack
│  ├─CheckEmail
│  │    ├─ToastMessage
│  │    ├─CustomTitle
│  │    ├─CustomInputBox
│  │    ├─CustomInput
│  │    └─CustomErrorBox
│  └─StButton = styled(CustomButton)
└─ToastMessage

원석님 onSubmit관련 코드 백업: 안 쓰는 코드인데 너무 길어서 지웠습니다.

const onSubmit = async (data) => {
  console.log(data);
  // try {
  //   const res = await api(contentType).get(
  //     `/auth/send-password?email=${getValues("email")}`,
  //   );
  //   console.log(res);
  //   // alert(res.data.message);
  //   navigate("/sign-in");
  // } catch (err) {
  //   // console.log(err);
  //   // alert(err.response.data.message);
  //   setError("emailError", { message: err.response.data.message });
  //   setEmailError(true);
  //   setTimeout(() => {
  //     setEmailError(false);
  //   }, 1000);
  // }
};

// setCheck(true);
// setTimeout(() => {
//   setCheck(false);
// }, 1000);

dusunax commented 2 years ago

네비게이션, 헤더, 푸터 작업 => 완료!

src\styles\customLayoutStyle.js 추가

import styledLayoutComponents from "../styles/customLayoutStyle";
const {} = styledLayoutComponents

CustomHeader
CustomFooter
CustomFooterButton
CustomGoToCreateButton

const CustomHeader = styled.header`
  ${({ theme }) => {
    return css`
      height: 5rem;
      padding: 0 2.2rem;

      display: flex;
      background-color: ${theme.colors.background};

      .cupick_logo {
        width: 12rem;
        height: 100%;

        background: url(${(props) => props.src}) no-repeat center / contain;
        transition: all 0.4s;

        cursor: pointer;

        &:hover {
          transform: scale(1.05);
        }
      }
    `;
  }}
`;

const CustomFooter = styled.footer`
  ${({ theme }) => {
    return css`
      height: 9rem;

      display: flex;
      position: relative;

      .svg_box {
        transition: all 0.2s;
        fill: ${theme.colors.middle};
      }

      .svg_box.on {
        fill: ${theme.colors.dark};
      }
    `;
  }}
`;

const CustomFooterButton = styled.button`
  ${({ theme }) => {
    return css`
      flex: 1 1 auto;

      padding-top: 1.2rem;

      display: flex;
      justify-content: center;

      background-color: ${theme.colors.wg};

      cursor: pointer;

      &:hover svg {
        opacity: 0.7;
      }
    `;
  }}
`;

const CustomGoToCreateButton = styled.button`
  ${({ theme }) => {
    return css`
      width: 6.5rem;
      height: 6.5rem;
      border-radius: 50%;

      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);

      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);

      cursor: pointer;
      overflow: hidden;

      img {
        width: 11rem;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        transition: all 0.5s;
        opacity: 0.9;
      }

      img:hover {
        opacity: 1;
      }
    `;
  }}
`;

dusunax commented 2 years ago

회원가입 페이지 버튼박스 오류 수정 후 재배포 예정입니다.

CustomTitle > h1
CustomInputBox > input_label_icon + CustomInput

=> 구조 수정 및 재배포 완료

dusunax commented 2 years ago

반응형 작업

contents area 패딩

src\styles\customLayoutStyle.js

const CustomWrapFullVH = styled.div`
${({ theme }) => {
return css`
  height: 100vh;
  padding: ${theme.paddings.lg};

  display: flex;
  flex-flow: column;

  overflow-y: scroll;

  ${theme.devices.tablet} {
    padding: ${theme.paddings.md};
  }

  ${theme.devices.mobile} {
    padding: ${theme.paddings.base};
  }
`;
}}
`;

전체 폰트 사이즈

src\styles\GlobalStyle.jsx

const GlobalStyle = createGlobalStyle`
${reset};
${animations};

${({ theme }) => {
return css`
  body {
    font-size: ${theme.fonts.size.lg};
    background-color: ${theme.colors.light};
  }

  ${theme.devices.tablet} {
    body {
      font-size: ${theme.fonts.size.base};
    }
  }

  ${theme.devices.mobile} {
    body {
      font-size: ${theme.fonts.size.md};
      background-color: ${theme.colors.background};
    }
  }
`;
}}
`;

dusunax commented 2 years ago

커뮤니티 페이지 => 완료!

src\styles\customLayoutStyle.js
```
CustomWrapBody
```

프로필 사진 + 기본 사진


import emptyProfilePic from "../assets/svg/profile.svg";

const CustomProfilePic = styled.div ${({ theme }) => { return css width: 1.5rem; height: 1.5rem; border-radius: 50%;

  border: 1px solid #b6b6b6;
  background: #eee
    url(${(props) =>
      props.profileImage ? props.profileImage : emptyProfilePic})
    no-repeat center / cover;
`;

}} `;

- flex 리스트
```jsx

const CustomFlexListWrap = styled.div`
  ${({ theme }) => {
    return css`
      padding: 0 2rem;

      display: flex;
      flex-flow: wrap;

      gap: ${theme.gaps.md};

      ${theme.devices.tablet} {
        gap: ${theme.gaps.base};
      }

      ${theme.devices.mobile} {
        gap: ${theme.gaps.sm};
      }

      ${theme.devices.mobileXS} {
        gap: ${theme.gaps.xs};
      }
    `;
  }}
`;

const CustomFlexList = styled.div`
  ${({ theme }) => {
    return css`
      flex: ${theme.flexItems.md};
      height: 26vh;
      max-height: 50rem;
      border-radius: 1rem;

      box-shadow: ${theme.boxShadows.base};

      transition: all 0.3s;
      overflow: hidden;

      cursor: pointer;

      ${theme.devices.tablet} {
        flex: ${theme.flexItems.base};
      }

      ${theme.devices.mobile} {
        flex: ${theme.flexItems.sm};
      }

      ${theme.devices.mobileXS} {
        flex: ${theme.flexItems.xs};
      }

      :hover {
        transform: translateY(-0.4rem);
        box-shadow: ${theme.boxShadows.hover};
      }

      & > .flex_box {
        height: 100%;

        display: flex;
        flex-flow: column;
      }
    `;
  }}
`;

아이콘 박스

const CustomIconBox = styled.div` display: flex;

gap: 0.5rem;

.icon { transition: all 0.3s; }

.icon:hover { cursor: pointer; transform: scale(1.3); } `;

dusunax commented 2 years ago

삭제한 CustomStyle

푸터 UI변경으로 인해 삭제한 코드입니다.
기존 UI
변경 UI

CustomGoToCreateButton 삭제 하였습니다.

<CustomGoToCreateButton onClick={goToCreate}>
<img src={createIcon} />
</CustomGoToCreateButton>
...
const CustomGoToCreateButton = styled.button`
${({ theme }) => {
return css`
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;

  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);

  cursor: pointer;
  overflow: hidden;

  img {
    height: 100%;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.5s;
    opacity: 0.9;
  }

  img:hover {
    opacity: 1;
  }
`;
}}
`;

dusunax commented 2 years ago

Layout.jsx 수정

CustomWrapFullVH 사용
handlePathname 함수 추가
- 추후 가능하면 헤더푸터와 푸터 기능 분리

import React from "react";
import { useLocation } from "react-router-dom";

import styled from "styled-components";
import styledLayoutComponents from "../styles/customLayoutStyle";
const { CustomWrapFullVH } = styledLayoutComponents;

import Router from "../shared/Router";
import Header from "../partial/Header";
import Footer from "../partial/Footer";

const Layout = () => {
  const pathname = useLocation().pathname;

  let layoutType = { headerFooter: false, footer: false, header: false };
  let { header, footer, headerFooter } = layoutType;

  const caseHeaderFooter = ["/recipe/create/guest", "/mypage", "/profile"];
  const caseFooter = ["/recipe"];

  function handlePathname() {
    caseHeaderFooter.map((path) => {
      if (pathname.indexOf(path) > -1) {
        headerFooter = true;
        return;
      }
    });

    caseFooter.map((path) => {
      if (pathname === path) {
        footer = true;
      }
    });
  }
  handlePathname();

  return (
    <StLayout>
      {headerFooter && <Header />}

      <Router />

      {(headerFooter || footer) && <Footer pathname={pathname} />}
    </StLayout>
  );
};

export default Layout;

const StLayout = styled(CustomWrapFullVH)`
  max-width: 60rem;
  padding: 0;
  overflow: hidden;
`;

dusunax commented 2 years ago

vh관련 wrapper CustomComponent로 수정한 위치

import styledLayoutComponents from "../../styles/customLayoutStyle";
const { CustomWrapBody } = styledLayoutComponents;

CustomWrapBody : height: calc((var(--vh, 1vh) * 100) - 5rem - 9rem);
- [x] 댓글 페이지 중간 영역
- [x] 마이 페이지 중간 영역

cupicks / cupicks-fe

Update : styled-component 테마 적용(feat. REM) #182

styled-component 테마 적용(feat. REM 적용)

결론

적용 내용

REM과 EM

픽셀이란?

픽셀을 상대적 크기로 변환하기

REM

EM

브레이크 포인트

App, Main.jsx 정리

styles/theme.js

컴포넌트 단에서 GlobalStyle Theme 사용하기

Custom Styled Component로 변환

로그인 페이지부터 진행!✍

회원가입 페이지 진행✍

비밀번호 찾기 페이지 완료

네비게이션, 헤더, 푸터 작업 => 완료!

회원가입 페이지 버튼박스 오류 수정 후 재배포 예정입니다.

반응형 작업

contents area 패딩

전체 폰트 사이즈

커뮤니티 페이지 => 완료!

삭제한 CustomStyle

Layout.jsx 수정

vh관련 wrapper CustomComponent로 수정한 위치