[FE] 디자인 디테일 세부 수정

[kimyouknow]

About

디자인 디테일 세부 수정

Description

• : Figma 하단 부분에 정리된 theme과 실제 상단 디자인 된 요소들 중 일치하지 않는 부분 정리. #269
• : [Board] - 한 열 당 현재 3개의 Card. => 4개의 Card로 수정. #270
• : [User Post] - 뒤로 가기 버튼 위치 수정. 좀 더 상단 왼쪽으로 붙일 필요 있음. #275
• : [User Post] - 슬로건 위치 처음으로 바꾸기. #274
• : [User Post] - '자기소개' text 내려가 있음. #273
• : [Team Post] - 뒤로 가기 버튼 위치 수정. 좀 더 상단 왼쪽으로. #276
• : [Team Post] - post 가로 비율 좀 더 늘리기. Figma속 비율값과 다르기 때문에 육안으로 확인해야함. #272
• : [Team Post] - 작성 날짜 나와야함. 기술스택 우측 부분에. #271
• : [LogIn] - 세로 비율 전체적으로 줄일 필요 있음. component 간 간격이 현재 조금 멀음.

Result

2023-03-05.4.55.59.mov

Ref

#269 #270 #271 #272 #273 #274 #275 #276

[hoeun0723]

branch를 pull 해온 후 몇가지 궁금한 점이 있어 댓글로 구분하여 질문 사항 남깁니다.

[hoeun0723]

Q1. pr 내부 첨가된 동영상에서 보여지는 웹페이지는 비율이 100%인가요?

제 노트북 상에는 이 화면이 100%로 보여서 동일하게 맞추기 위해 질문 남깁니다.

[hoeun0723]

Q. Main 화면에서 Text 크기가 적절하게 되어 있나요??

Figma에서 디자인 되어 있는 Text size와 다른 거 같아 질문 드립니다!

[hoeun0723]

나머진 모두 확인 완료 했습니다 ! 고생 많으셨습니다. 남은 부분도 실행해보도록 하겠습니다.

[kimyouknow]

Q1 답변

Q1. pr 내부 첨가된 동영상에서 보여지는 웹페이지는 비율이 100%인가요?

저도 이 부분에 대해서 고민을 했는데요, 우선 피그마에 나와 있는 수치 그대로 적용했습니다😓 저도 호은님이 말씀해주신 것처럼 사용자 기기마다 화면의 크기가 다르기 때문에 애매한 부분있다고 생각해요.

해당 PR은 합치기 전에 디자이너분과 함께 얘기할 시간을 가져볼까요??

Q2. 답변

Main 화면에서 Text 크기가 적절하게 되어 있나요??

src/styles/theme.js에서 fonts 객체 구성을 typography 피그마 구성과 동일하게 변경했습니다. Main화면에서 맞지 않은 부분은 이전에 피그마 하단에 정리된 폰트와 메인 페이지 폰트가 다르기 때문이라고 생각해요. 추후 메인페이지 CSS 구성을 하면서 따로 맞춰야할 것 같아요

[hoeun0723]

그렇군요 알겠습니다. 윤호님 말씀대로 디자이너님과 함께 확인이 필요할 거 같네요!!

그럼 궁금한게 있습니다 !!
다른 웹페이지를 들어갈 때 사용자 기기마다 화면크기가 다른 경우가 있을텐데, 다른 웹페이지에선 깨지는 경우를 발견하지 못했어서요. 이런 경우엔 반응형웹을 적용해서 그런건가요??
@kimyouknow

[kimyouknow]

넵 그렇게 생각해요. 모든 기종에 맞는 화면을 하나하나 만들긴 어렵지만 크게 Desktop, Tablet, mobile 정도로 나눠서 각각에 맞는 최소 너비로 적용하면 될 것 같아요!
해당 PR에서 깨져보이는 이유는 Board의 경우 피그마에는 1580px이라고 되어 있어서 거기에 맞춰서 작업한게 원인인 것 같아요.
webapp/src/components/CardsGrid/CardsGrid.style.js

- width: 100%;
+ width: 1580px;

(크롬 개발자도구에서 Demensions: responsive를 적용하면 원하는 사이즈의 크기로 확인할 수 있어요!) @hoeun0723

[kimyouknow]

유저보드 및 팀보드에서 표시되는 카드 수 수정했습니다! 확인부탁드려요 @hoeun0723

[hoeun0723]

확인이 늦었습니다 ! 바로 merge 하셔도 좋을 거 같습니다 ! @kimyouknow