Figma 클론

앱 넷플릭스 Figma로 구현하기!

 

일단 로딩화면, 로그인 연결 페이지, 로그인 페이지, 비밀번호 재설정, 메인화면으로 구분해줬다.

아이디와 비밀번호 입력하게 로그인 페이지 컴포넌트를 만들어줬다. 

공용 컴포넌트로 넷플릭스 로고를 줬고

 

 로그인 연결 페이지 컴포넌트로 hover 효과를 줘서 로그인 버튼을 눌렀을 때 색이 변하게끔 만들어줬다

 

로그인 페이지 컴포넌트에는 아이디와 비밀번호를 입력하여 로그인 버튼을 눌렀을 때 hover 효과를 줬고 비밀번호 재설정 버튼을 눌렀을 때 비밀번호의 폼과 비밀번호 재설정 버튼을 마찬가지로 hover 효과를 줬다.

 

 

실제 아이폰처럼 구현하기 위해 하단에 바를 만들어 주고 바를 위로 밀게되면 화면이 전환되는 것을 볼 수 있다

메인화면은 콘텐츠를 나열한 뒤 가로 스크롤을 해줬고 밑으로도 스크롤 이벤트를 줬다

화면 기록 2023-06-15 오후 4.09.56.mov

6.54MB