⚙️ 스타일 설정

[Legitgoons]

작업 이유

Webview의 font, color등 style 설정
Layout을 위한 FNB 구현

작업 사항

1️⃣ font설정

• 디자인팀에서 정의해준 font에 알맞게 font를 설정하였습니다.
  
• mixin을 사용하여 통일된 형식의 class로 사용할 수 있도록 했습니다.

@mixin font-style($weight, $size, $line-height){
/...
}
.h1bold { @include font-style(bold, 1.5, 130%); }

• font 사이즈 이름 + weight의 첫 글자를 따서 className으로 설정했습니다.

<h1 className='h1bold '>이렇게 하면 h1bold 설정이 적용됩니다.</h1>

• 용량을 줄이고 빠르게 폰트를 가져올 수 있도록 subset font를 사용했습니다.
• 용량이 50%가량 더 적은 woff2를 기본 폰트로 하고, woff를 fallback font로 지정했습니다.

2️⃣ color 설정

• 디자인팀에서 정의해준 color에 알맞게 color를 설정하였습니다.
  
• 위의 색상 중, feed에서 사용되는 Gray1(가장 밝은 색)~7(가장 어두운 색)을 g1부터 g7로 설정했습니다.
• Mint1(가장 밝은 색)~3(가장 어두운 색)은 m1부터 m3로 설정했습니다.
• 이 외의 색은 feed에서 사용되지 않기에, 설정하지 않았습니다.

3️⃣ Layout 설정

• iOS에서 Navbar를 만들 것을 고려해 임시로 Navbar를 만들어 하단 공간을 점유하도록 했습니다.
• user-scalable=no를 viewport meta태그에 추가해, 의도치 않은 확대가 일어나지 않게했습니다.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

기타

• 전처리기인 sass의 특성을 고려하여 devDependencies로 재설치하였습니다.

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

• fonts의 class들이 제대로 구현되어 있나요?
• colors 변수들이 제대로 설정되어 있나요?
• Layout이 제대로 설정되어 있나요?

발견한 이슈

iOS의 경우 폰트 사이즈가 16px 이하인 상태에서 input태그를 누르면 자동으로 화면이 확대되게 됩니다. 이를 방지하고자 'user-scalable=no'를 설정했습니다. 좀 더 자세한 사항은 https://im-designloper.tistory.com/49 이 링크를 참조해주세요.

[aws-amplify-ap-northeast-2]

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

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

[BangDori]

Navbar 컴포넌트와 스타일 시트의 위치가 FSD Architecture가 지향하는 구조와 조금 맞지 않다고 생각하여 Request Changes 하였습니다! 확인 부탁드립니다 ㅎㅎ

[BangDori]

마지막으로 하나만 확인 부탁드립니다!

[BangDori]

고생하셨습니다! 승인하면 될 것 같아요.