S3) Unit 2. [실습] Figma

📣  피그마로 자주 쓰는 UI 컴포넌트 구현하기

✔️ 메뉴마다 페이지를 만들어줘서 GNB 각 메뉴를 누르면 그 페이지로 가게끔 Prototype의 interection을 넣어준다.

➰ Change to는 컴포넌트의 상태를 바꾸는 이벤트이고, Navigate to는 페이지를 이동하는 이벤트이다.

1️⃣  GNB

➰ 메뉴 버튼을 컴포넌트로 구현하고, 텍스트만 바꿔준다.

➰ active 상태에서는 밑줄이 있어야 하기 때문에 컴포넌트 상태를 2개로 둔다.

2️⃣  Modal

➰ 모달 버튼을 클릭하면 옆에 컴포넌트로 만든 오버레이가 나타난다.

➰ 오버레이 이벤트를 사용해서 구현한다.

 

3️⃣  Toggle

➰ 컴포넌트의 상태를 이용한다.

➰ 토글 버튼을 누르면 컴포넌트의 상태를 active로 바꿔준다.

 

4️⃣  Tap

➰ 여기서 엄청많이 헤맸다..처음에는 위에 1, 2, 3 버튼을 따로 컴포넌트로 만들고, 밑에 탭1, 탭2, 탭3 부분도 컴포넌트로 만들었다.

➰ 이렇게 하면 배경이 없어지거나, 제대로 컴포넌트 상태가 바뀌지 않는 등 버그가 발생한다ㅠ

➰ 한 두시간 하다가 아예 싹 지우고 저렇게 버튼이랑 내용을 하나의 컴포넌트로 만들었더니 한번에 해결됬다..

 

5️⃣  Accordion

➰ 컴포넌트를 두개 만들고, + 버튼을 누르면 active 상태로 바꿔주고 - 버튼을 누르면 default 상태로 바꿔준다.

 

6️⃣  Drop Down

➰ 드롭다운은 각 메뉴를 누르면 화면에도 선택한 메뉴가 나타나야 한다.

➰ 그래서 각 메뉴를 컴포넌트 상태에 포함해주고, 누르면 컴포넌트를 그 상태로 바꿔준다.

 

7️⃣  Auto Complete 

➰ 구현 못했다!! 

➰ Tap에서 한번 꼬여서 한 두시간 하다가 싹 다 지우고 하니까 5분만에 해버려서...여기서 시간 날려서😭

➰ 내일 클론 하면서 해봐야겠다..

 

💡  시간이 없어서 기능 구현도 못하고, 디자인도 엉망으로 했지만..마치 초등학생이 그림 그려 논 것 같지만.. 페어분과 즐겁게 활동해서 하는 동안 즐거웠고, 피그마에 대해 확실히 더 배운 것 같아서 보람찼다!!

디자인은 지금 봐도 웃기네..

 

📣  구현 화면