Feat: MainPage.tsx 디자인을 적용한다 - Githubissues

Kim-DaHam / Portfolly

Portfolly 프로젝트 리팩토링

1 stars 0 forks source link

Feat: MainPage.tsx 디자인을 적용한다 #78

Closed Kim-DaHam closed 9 months ago

Kim-DaHam commented 9 months ago

개요

MainPage.tsx 페이지에 디자인을 적용합니다.

작업사항

CategorySlider.tsx 디자인을 적용한다.
- 브라우저 사이즈를 늘였다 줄여도 슬라이더가 정상 작동하게 한다.
- 브라우저 사이즈를 줄인 상태로 슬라이더 끝부분 까지 갔다가, 다시 브라우저를 확장했을 때 빈 여백이 생기지 않게 한다.
PortfolioList.tsx, PortfolioSlider.tsx, PortfolioCard.tsx에 디자인을 적용한다.
Popper, Modal.tsx에 애니메이션을 추가한다.
글로벌 폰트를 적용한다.

변경로직

Popper.tsx, Modal.tsx를 부모 컴포넌트에서 조건부 렌더링으로 호출하는 방식 -> 애니메이션 적용을 위해 Popper.tsx, Modal.tsx 자체에서 관리하는 상태값으로 열고닫음(애니메이션 실행 시킬 타이머 등록을 위해)

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/eeca7a07-b65c-4e06-84ed-09bae6bc53c7