pre-project 11일차 (22.09.01. 로그아웃 드롭다운 구현)

✅ 오늘한 일

로그아웃 드롭다운 메뉴 틀 구현

한동안 너무 힘을 많이 썻는지 살짝 피곤한 날이었다. 그래서 간단하지만 생각을 조금 해야하는 작업을 진행하기로 했다. ;ㅅ;b

로그인 시 나타나는 navbar 옵션버튼을 클릭할 경우 드롭다운이 출력되며 log out을 할 수 있는 버튼이 생긴다. 이것을 구현하기로 했다.

이전에 컴포넌트 만들기를 해보면서 드롭다운을 한번 작업해 본적이 있어서 비슷하게 진행했다. 그 당시에는 div 태그로만 작성했지만 이번에는 ul, li 태크를 사용하여 리스트 형으로 작업을 해주었다.

그렇게 완성된 드롭다운이 아래와 같은 화면이다. 하지만, 여기서 문제인점은 log out을 누르거나 외부 배경을 누를 경우 드롭다운이 닫혀야 하는 것을 구현하지 못했다. ;-; 여러가지 시도(useRef 사용 등)를 해보았지만 먼가 로직이 꼬였는가 잘 되지 않았다. 

이에 따른 코드를 조금 더 찾아봐야 겠다..... ㅠㅠ

드롭다운 메뉴 틀 구현

📌 해야할 일

• 드롭다운 버튼클릭, 외부 배경 클릭 시 드롭다운 축소 구현
• 백엔드와 통신, API 명세서에 맞는 응답값으로 코드 수정
• 로그인 유지
• 로그아웃 기능