codestates / codestates/aneun-dongne
[Dev-Log] 1209 / 윤해용
- Dominant language
- JavaScript
- Stars
- 6
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
> ### 오늘은 어떻게 프로젝트에 기여했나요?
> * 주소창에 아이콘과 이름 아는동네로 바꿈
> * 회원가입 성공시 모달창 꺼지게 설정했음.
> * 마이페이지 SPA, 메뉴바 리팩토링.
> ### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
> * 리팩토링이 필요해 보여서 시도중인데, 생각보다 시간이 많이 걸린다.
> * SPA에서 메뉴 버튼 클릭 시, 클릭한 메뉴버튼만 색이 바뀌게 하는 작업이 어려웠다.
```useRef```으로 ul 태그를 가져온다. navEffectHandler에서 ```focused```를 classname에 붙여서 색을 하나만 바뀌게한다.
하나만 바뀌게 하는 조건은 ```useLocation```을 이용해 현재경로일 때만 바뀌게 했다.
```jsx
const { pathname } = useLocation();
const navMenu = useRef();
useEffect(() => {
navEffectHandler();
});
const navEffectHandler = () => {
for (let i = 0; i < navMenu.current.childNodes.length; i++) {
navMenu.current.childNodes[i].childNodes[0].classList.remove("focused");
}
switch (pathname) {
case "/mypage":
navMenu.current.childNodes[0].childNodes[0].classList.add("focused");
break;
case "/mypage/comments":
navMenu.current.childNodes[1].childNodes[0].classList.add("focused");
break;
case "/mypage/like":
navMenu.current.childNodes[2].childNodes[0].classList.add("focused");
break;
case "/mypage/visited":
navMenu.current.childNodes[3].childNodes[0].classList.add("focused");
break;
default:
return;
}
};
...
return(
```
> ### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
> * [ ] 마이페이지 내가 쓴 리뷰 구현하기
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.