S3) Unit 2. [실습] Figma 클론(인스타그램)

📣  피그마로 인스타그램 클론하기

✔️ 기본적인 화면, 기능을 위주로 구현했다.

➰ 다음에 만들 땐 컴포넌트와 오토레이아웃 기능을 더 잘 활용하고 싶다.

 

1️⃣ main

✔️ 피드를 볼 수 있고, 좋아요를 누를 수 있다.

✔️ 스토리를 누르면 스토리가 오버레이로 나온다.

✔️ 하단 메뉴에서 돋보기나 내 프로필을 누르면 해당 페이지로 이동한다.

➰ 피드 하나를 컴포넌트로 만들어서 추가하는 형식으로 구현했는데, 이렇게 했더니 한 피드에 좋아요를 누르면 다른 피드의 좋아요도 같이 눌린다.. 시간이 없어 일단 다른 피드의 하트는 이미 눌러놓은 상태로 바꿔줬는데 피드를 컴포넌트로 만드려면 다른 방법으로 구현해야 할 것같다.

 

2️⃣ myProfile

✔️ 프로필을 누르면 스토리를 볼 수 있고, 오른쪽 상단 메뉴를 누르면 프로필 메뉴가 오버레이로 나온다.

✔️ main 처럼 돋보기, 집 버튼을 누르면 각 페이지로 이동한다.

✔️ 태그된 게시물을 보여주는 버튼을 누르면 밑에 화면이 피드가 아니라 태그된 게시물 피드로 바뀐다.

 

3️⃣ story

✔️ 하트를 누를 수 있고, 화면을 한번 더 누르면 사라진다.

 

4️⃣ myProfileMenu

✔️ 한 메뉴를 컴포넌트로 두고 인스턴스들을 생성해서 구현했다.

➰ 하나하나 기능 구현은 안됨 ㅎㅎ..

 

5️⃣ search

✔️ 검색창에 j를 입력하면 jieuny0314의 게정이 자동완성으로 나오고, 클릭하면 프로필 화면으로 갈 수 있다.

➰ 검색 탭이 깜빡이는 것도 구현하고 싶었는데 실패ㅠ



---

📣  시연 화면