⚙️반응형 사이즈 설정

[Legitgoons]

작업 이유

• 반응형 사이즈 설정

작업 사항

1️⃣ responsive demensions 구현

• 출시되어있는 iPhone 사이즈에 알맞게 사이즈 설정

@mixin responsive-dimensions($default-width, $default-height) {
  width: $default-width;
  height: $default-height;

  @media (min-height: 1px) and (max-height: 480px) {
    // iPhone 3, 4S
    width: $default-width * 0.95;
    height: $default-height * 0.95;
  }
  @media (min-height: 481px) and (max-height: 568px) {
    // iPhone 5, SE 1
    width: $default-width;
    height: $default-height;
  }
// 이 외 아이폰 사이즈들...

2️⃣ 공용 style의 쉬운 사용을 위해 _index.scss 생성

• @forward로 모든 공용 style 파일들 공유

//_index.scss
@forward 'colors.scss';
@forward 'fonts.scss';
@forward 'responsive.scss';

• 아래와 같이 사용하면 반응형 사이즈 사용 가능

// 사용할파일.scss
@use '경로/_index.scss' as *;

// mixin에 사용할 경우 
@mixin FollowButton($isActive: false) {
  @include responsive-dimensions(48px, 24px);
}

// class에 사용할 경우
.button {
  @include responsive-dimensions(48px, 24px);
}

리뷰어가 중점적으로 확인해야 하는 부분

• 모든 iPhone 사이즈에 대응할 수 있는지
• '_index.scss'로 공통 스타일을 모두 사용할 수 있다는 것을 인지했는지

발견한 이슈

없음

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-14.d37mn03xh3qyyz.amplifyapp.com

[BangDori]

희진님이 저번에 업로드하신 iPhone 사이즈를 기준으로 확인했는데, 이상 없습니다! 바로 승인하시면 될 것 같아요!