[Framer] Override + Workshop으로 기능 고도화하기

SERIES

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

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

으아니
오버라이드가 그 오버라이드였다니...?

정보처리기사 공부할 때 배웠던 오버라이드가 프레이머에서 말하는 오버라이드일 줄 몰랐다.

이런 게 된다... 재밌다!!!

맛들이니 이런 것도 만들어봄

머릿속에 있던 지식이 연결되는 느낌 너무 좋아

---

주말에 한 것

• override 기능 이용해서 사용자가 선택한 데이터를 화면에 즉각 표시하기
• overlap 속성 이용해서 팝업창 만들기

---

오늘 한 것

• 날짜 선택 팝업창 어차피 배경을 클릭하면 닫히지만 UX를 위해서 '확인'버튼 추가하고 오버랩 팝업창 닫게 해주기
• override 기능 이용해서 게스트 선택 팝업창 띄우고 사용자가 선택하면 합산하여 바로 반영하기
• 호스트 cms 추가하고 슈퍼호스트, 호스팅 경력, 프로필 사진 넣고 숙소와 연결해서 보여주기

• 리뷰어 cms 추가하고 프로필 사진 넣기
• 리뷰 cms 추가하고 숙소 cms와 연결하기
  • 양방향 관계형은 불가능한 것 같아서 고민...
  • 숙소 cms에서 리뷰 cms를 추가해야 해당 숙소에 리뷰가 있는지 없는지 검증이 가능한데,
  • 리뷰 cms에서 숙소 cms를 추가해야 필터링이 원활하게 된다. (해당 숙소의 리뷰만 보여주기)
  • -> 파훼법이 없을까? 내가 하고싶은 것: 리뷰가 없으면 '예약을 해서 첫 리뷰의 주인공이 되세요!' 메시지 노출하기
• 리뷰 컴포넌트 제작
  • 별점 배리언트 5가지 만들고 평점에 따라 convert로 변경 (평점은 정수가 아닌 옵션으로 처리했어야했음)

• 에어비앤비 참고해서 태블릿 화면 최적화

과제 제출 링크가 아직 안 나와서 자꾸 욕심내게 된다...

내일 해볼 것

• 헤더 navbar의 햄버거 버튼에 국가별 추가
• 국가별 숙소 리스트를 볼 수 있는 별도 페이지...