New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/FE-054 : breakpoints 추가 #78

Merged

naro-Kim merged 1 commit into dev from feature/FE-054

Jul 4, 2023

Contributor

naro-Kim commented Jul 4, 2023

체크 리스트

적절한 제목으로 수정했나요?
관련된 이슈와 연결 시켰나요?
Target Branch를 올바르게 설정했나요?
Label을 알맞게 설정했나요?

작업 내역

791px 이하 화면에 적용되도록 theme.css.ts파일 내에 screenMQ를 추가했습니다.
style.css.ts 파일에서 아래와 같이 variants나 style내에서 '@media':{[screenMQ.m]:{... 미디어쿼리 적용할 스타일}의 형태로 사용할 수 있습니다.

export const section = recipe({
  base: {
    display: 'grid',
  },
  variants: {
    direction: { 
      row: {
        gridAutoFlow: 'column', 
        '@media': {
          [screenMQ.m]: {
            gridAutoFlow: 'row', 
             ...
          },
        },
      },
    },
  }, 
});

import { screenMQ, themeTokens } from '@/styles/theme.css';
const { space } = themeTokens;

export const wrapper = style({
...
  '@media': {
    [screenMQ.m]: {
      padding: `${space.lg} ${space.xl}`,
    },
  },
});

문제 상황과 해결

비고

참고 : calculator CodeSandbox


          style: breakpoints 추가

9e32f1b

naro-Kim added the ✨ feature label

sonarcloud bot commented Jul 4, 2023

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

jieunpark247 approved these changes

View reviewed changes

Contributor

jieunpark247 left a comment

👍🏼 수고하셨습니다~

sxungchxn approved these changes

View reviewed changes

Member

sxungchxn left a comment

👍

naro-Kim merged commit 82c31b2 into dev

3 checks passed

naro-Kim deleted the feature/FE-054 branch

July 4, 2023 10:26

naro-Kim self-assigned this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels