<aside> 🎨 1. 시안 : 모바일 퍼스트 ⇒ 웹사이트 반응형 확장

2. 웹사이트 컨텐츠는 max-width: 1240px (또는 1024px) 로 설정하여 반응형 디자인하기

3. 메인 페이지에 렌더링되는 인기 / 리뷰 컨텐츠는 flex 설정해서 배치하기 ( 2 → 4 확장) 인기, 리뷰 페이지 내부 컨텐츠 렌더링 구조 동일하게 가져가기

</aside>

전체 기능

• 우선순위 정하기 (따로 형식 정해서 쓰기) -> 프로젝트 백로그 만들기

[LandingPage]

1. 핵심기능
   • framer-motion > transition 활용한 opacity, scale 변화
   • 로그인 버튼 및 회원가입 관련 버튼 기능 구현
     • 로그인버튼 - 로그인 페이지 이동
     • 회원가입버튼 - 회원가입 페이지 이동
     • event 시 props={point} color 변환
   • SNS 버튼 클릭시 → 현재 랜딩 페이지
2. 후순위기능
   • framer-motion > 스크롤 효과
   • SNS 연동 로그인 구현 : Kakao, 구글

[SignIn / SignUp, SearchId, SearchPassword Page]

1. 핵심기능

   • PB 활용
     • 테스트용 계정 생성하기 → 로그인 일치 여부 테스트
     • 회원가입 기능 구현 → PB에 입력되는지 테스트
   • 로그인 및 아이디/비밀번호 찾기 관련 버튼 기능 구현
   • 회원가입 창 핸드폰타자 입력시 접근성 보완하기 → 입력한 정보는 위로 이동 (스크롤 보완)
   • 회원가입 완료시 ‘가입이 되었습니다’ 안내창 + 로그인 화면으로 이동
   • 경고 문구창 안내 : 보안상 자세한 정보 제공하지 않음
     • 로그인 시 회원정보 불일치시
     • 회원가입 시 이메일 형식, 비밀번호 형식, 비밀번호 불일치시
     • 아이디 찾기, 비밀번호 찾기 시 휴대폰 형식 불일치시
   • 아이디 / 비밀번호 찾기 후 ‘회원 정보가 없습니다.’ 경고 문구창출력
   • 뒤로 가기 버튼 : 전페이지 이동 기능 구현

   <aside> ✨ [인증번호 받아오기 - by 규민님]

   1. 휴대폰이나 이메일 input 태그 정규식 확인 후 일치하는지 확인해서 버튼 활성화/비활성화
   2. 인증번호 받기 버튼 눌렀을 때 6자리 랜덤 난수 생성 -> 변수를 따로 저장한 후 클라이언트한테 전달 (지난번에는 alert 로 6자리 표시)
   3. 인증번호 다시 받기 누르면 6자리 난수 다시 생성하여 변수 저장 및 사용자한테 재전달
   4. 저장된 변수와 사용자가 입력한 값이 맞는지 확인해서 맞으면 고유번호(uniqueID) 생성하여 유저 정보에 같이 저장 -> 다른 페이지로 이동
   • 참고코드 </aside>

2. 후순위기능

   • 불일치 시 좌우로 흔들리는 animation

[MainPage]

1. 핵심기능
   • [TOP 10 여행지] 더보기 버튼 클릭시 → 리스트 펼쳐지기 (learn/16)
   • [BEST여행기] 는 자연스럽게 내려오기 - [TOP 10 여행지] 영역 absolute(?), block..
   • [버튼]
     • Header : 로고([MainPage] 이동), 돋보기 [Search], 북마크 [BookMarkPage], 내정보 [MyPage] 기능 구현
     • • 버튼 클릭시 → 여행 선택 [SelectTripPage] 버튼 기능 구현
     • [TOP10]
       • 컨텐츠 네모 상자 → [Top10Page] 상세페이지 이동
       • 컨텐츠 네모 상자 내부 북마크 → 클릭시 색 변경
       • • 더보기 클릭시 → 아래로 펼쳐지기 (수업 learn - 16)
       • 반다방향 더보기 → 맨 상단으로 보내기
     • [Best여행기]
       • 컨텐츠 네모 상자 → [TravelsPage] 페이지로 이동
   • 푸터 (Memo) - 랜딩 페이지와 동일

[Top10Page]

• 사진 버튼 눌렀을 때 → 양옆으로 슬라이드 !최대 6장
• 사진 누르면 확대창 → 슬라이드 기능 구현 동일