[✨Feature] 세미나 반응형, 스타일 수정, 오픈 세미나 페이지 생성 #42
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- px, py, pt, mt 등 여백 피그마와 동일하게 변경 - 글자 크기 H1 ~ H6, Cap 등으로 변경 - 폰트 굵기 tail-wind로 피그마에 맞게 변경 - hr, text, border 등 색상 mono로 변경 - 필요없는 css 구문 삭제
- 세미나 썸네일 svg -> png 이미지로 변경 - 피그마에 맞춰 폰트 굵기, 크기, 색상 등 스타일 양식으로 수정 - 세미나 interface, 더미 데이터 수정 - desktop, tablet, mobile에 따른 페이지네이션, 무한 스크롤 반응형 처리
- 피그마에 맞춰 폰트 굵기, 크기, 색상 등 스타일 양식에 맞춰 수정 - 세미나 배너 이미지 svg->png로 변경 - desktop, tablet, mobile에 따른 banner 섹션 반응형 처리 - banner 섹션 오른쪽 여백을 위한 translate_img 파일 추가
bianbbc87
requested review from
seochan99,
bunju20,
naarang,
puretension and
shimseohyun
bianbbc87
changed the title
- title 속성 제거 - seminar_opening_date와 seminar_month_date로 변경
bunju20
approved these changes
May 3, 2024
| @@ -9,7 +9,9 @@ import React, { useState } from 'react'; | |||
| const SeminarPage = () => { | |||
| const [selectedCategory, setSelectedCategory] = useState<string>('all'); | |||
|
|
|||
| return <div className="w-4/5 px-10 my-20 mx-auto"> | |||
| return <section className="flex justify-center"> | |||
| <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black"> | |||
naarang
approved these changes
May 4, 2024
|
흠._. 고민해봐야할게 몇몇개 있네요! 조금만 더 보고 리뷰남기도록 하겠습니다~! |
오픈세미나가 많이 없어서 우선 더미데이터로 생각했어요..! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )
개요
세미나, 세미나 디테일 페이지 피그마 지정 스타일로 변경
오픈 세미나 페이지 생성
전체 페이지 desktop, tablet, mobile 반응형 적용
이전 디자인 피드백 반영
변경 사항
1. 글자 크기, 굵기, 색상 등 스타일 변경
일반 세미나 페이지
세미나 디테일 페이지
2. 오픈 세미나 페이지 생성
3. 반응형 적용
세미나 썸네일
grid - desktop 3:4, tablet 2:inf, mobile 1:inf
이외에 정렬 방식 수정
desktop
tablet
mobile
세미나 디테일 banner 정렬
flex desktop flex-row, tablet, mobile flex-col로 수정
desktop
tablet, mobile
오픈 세미나 디테일 banner, seminars 정렬
flex desktop flex-row, tablet, mobile flex-col로 수정
seminars desktop grid 2:2, tablet, desktop grid 1:4로 정렬
desktop
tablet, mobile
4. 세미나 -> 디테일, 세미나 -> 오픈 페이지 이동 시 id 값에 따른 데이터 부여 - 쿼리 데이터 추적 추가
코드 리뷰시 참고 사항
1. Btn 글자 사용 시 텍스트 중앙 정렬을 했을 때 위쪽 여백이 짧고, 아래쪽 여백이 긴 문제가 있었음.
=> Btn 사이즈의 글자는 text-[0.75rem]으로 적용 (14px)
2. 오픈 세미나 디테일의 information 부분
=> font-size: 16px, font-weight: 400이라서 우선 text-[1rem] font-normal로 적용함.
=> 여기 사용해야하는 글자 css가 있나요? 그리고 weight-400으로 하면 디자인에 비해 글자가 굵어보이는데 font-thin으로 하면 어떨까요?
3. information 데이터 < b r > 적용 방법
=> 우선 중간에 "< b r >"을 넣고 split으로 나누는 방법을 사용 중인데, 더 좋은 방법이 있을까요?
4. 이외에 기타 오류/디자인 수정 필요한 부분들 확인 부탁드립니다!
#40 #41