SERIES
Framer로 숙박 사이트 만들기 실습
- 1. 프레이머(Framer) 강의 수강 완료
- 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 완료
- 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 완료
- 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
- 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 현재 글
- 6. 튜터 서면 피드백 완료
- 7. 버그픽스 준비중
드디어 과제 제출
스테일리 Stayly
머무르고 싶은 기억들, 스테일리
stayly.framer.website
- 컬렉션 리스트 전체에 링크 걸려서 load more 클릭 안되고 다른 곳으로 이동하던 문제 해결해드림
오늘 한 거
- 리뷰 보여주고 리뷰 없으면 별도 메시지 나오게 하기
- 리뷰 cms에 숙소 cms 레퍼런스로 물려서 리뷰 컬렉션 컴포넌트로 불러오고, 숙소명 같은 것만 필터링
- 필터링 결과가 0개인 경우를 판정하는 로직은 프레이머에서 불가능하므로, 리뷰 컬렉션 리스트 배경색을 FFF로 설정 후, 리뷰 없는 경우의 안내 메시지를 덮어서 편법으로 해결함
- 호스트 위에 hover하면 해당 호스트의 숙소 목록 보여주기 + 현재 페이지인 숙소에 표시하기
(모바일은 이미지랑 문구 빼고 dim으로 함)
- 헤더 nav bar의 메뉴들에 팝업창 오버레이
- 헤더 nav bar의 회원가입/로그인 눌렀을 시 랜딩되는 회원가입/로그인 페이지 제작
- 국내숙소/해외숙소 모아 보는 페이지 제작
- 파비콘 세팅
나중에 시간 나면 해볼 것
- 다크모드