랜딩 페이지 구현

[sykang013]

자동으로 좌측으로 흘러감. 데이터 받아와서랜덤 뿌리기.링크 GSAP 스크롤 트리거 링크 버튼 로그인 이동 링크

Description

• 랜딩 페이지 구현 작업
• 일단은 마크업과 스타일링을 생각
• 이미지는 더미로 가져온다 (map 사용)

Todo

• [x] 페이지 분석
• [x] 컴포넌트 계획 스케치
• [x] 브랜치 생성
• [x] react slick 라이브러리 css import 설치

Linked Issue

• [x] #36
• [x] #47
• [x] #55
• [x] #60
  • [x] 스토리북 에러 : 컴포넌트 또는 스토리 레벨에서 withRouter 데코레이터가 필요한 경우만 설정해 사용
  • [x] GSAP 에러 : 사이드이펙트 처리
• [x] #77
• [x] #65
• [x] #62
• [x] #64
• [ ] 🔥 challenge - 동영상 컨테이너 구현(티빙홈페이지 참고)
• [x] 전체 반응형 동작 확인

ETC

[sykang013]

버튼 컴포넌트 제작

• <button> 으로 해야할지<a> 로 해야할지 고민했으나, 클릭시 '로그인 페이지'로 넘어가기에 MDN 문서를 참고하여 로 진행하기로 하였다.

• MDN 문서 button태그

• MDN 문서 a태그

• a태그 target 사용시 주의 target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면 웹사이트가 window.opener API 악용 공격에 취약해집니다. (취약점 설명) 다만, 최근 브라우저(Firefox 79+ 등)는 target="_blank"를 지정하면 임의로 rel="noopener" 설정과 동일한 보호 수준을 적용합니다.

수정

• 리액트에서는 Link 사용(import form react router DOM) 참고

[sykang013]

Layout.jsx 로인해 배경이미지/캐러셀이 꽉 차게 구현하는것이 어려움. -> Layout.jsx 을 수정해 랜딩페이지 전용 레이아웃을 사용할 수 있지만, 이럴 경우 불필요한 렌더링을 줄인다는것이 무의미해지는것이 아닌건가(헤더, 푸터) 하는 의문이 듬. 좀 더 작업해본 후 디스커션 또는 이슈에서 올리기.