[Framer] 제출

SERIES

Framer로 숙박 사이트 만들기 실습

• 1. 프레이머(Framer) 강의 수강 완료
• 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 완료
• 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 완료
• 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
• 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 현재 글
• 6. 튜터 서면 피드백 완료
• 7. 버그픽스 준비중

드디어 과제 제출

스테일리 Stayly

 

• 컬렉션 리스트 전체에 링크 걸려서 load more 클릭 안되고 다른 곳으로 이동하던 문제 해결해드림

오늘 한 거

• 리뷰 보여주고 리뷰 없으면 별도 메시지 나오게 하기
  • 리뷰 cms에 숙소 cms 레퍼런스로 물려서 리뷰 컬렉션 컴포넌트로 불러오고, 숙소명 같은 것만 필터링  
  • 필터링 결과가 0개인 경우를 판정하는 로직은 프레이머에서 불가능하므로, 리뷰 컬렉션 리스트 배경색을 FFF로 설정 후, 리뷰 없는 경우의 안내 메시지를 덮어서 편법으로 해결함

• 호스트 위에 hover하면 해당 호스트의 숙소 목록 보여주기 + 현재 페이지인 숙소에 표시하기
  (모바일은 이미지랑 문구 빼고 dim으로 함)

좌: 데스크탑&태블릿, 우:모바일

• 헤더 nav bar의 메뉴들에 팝업창 오버레이
• 헤더 nav bar의 회원가입/로그인 눌렀을 시 랜딩되는 회원가입/로그인 페이지 제작
• 국내숙소/해외숙소 모아 보는 페이지 제작
• 파비콘 세팅

나중에 시간 나면 해볼 것

• 다크모드