Fix: 헤더 반응형 / 토글메뉴 로직 수정 및 컴포넌트 분리

[Goohyun3436]

:: 최근 작업 주제

• UI 추가
• 기능 추가
• 리뷰 반영
• 리팩토링
• 버그 수정

:: 구현 사항 설명

1. 헤더 새 글 작성 버튼 반응형 UI 라이브러리 없이 구현

• 헤더의 "새 글 작성" 버튼의 경우는 디스플레이 너비 1024px 이하에서는 보이지 않고 토글메뉴에 나타남
• 기존에는 react-responsive 라이브러리의 Media Query 를 활용하여 반응형 구현
• 라이브러리 없이 특정 너비 이하에서display: none; 값을 부여하여 반응형 구현
• map을 활용한 토글메뉴의 경우는 :nth-child() 을 활용하여 특정 메뉴만 반응형 구현

2. media.js 활용해서 헤더/포스트리스트 반응형 전역변수로 관리

• 헤더와 메인페이지의 포스트 리스트 부분은 반응형 조건이 같으므로 src/styles/media.js 에서 전역 변수로 반응형 관리

3. 헤더 토글 메뉴 바깥영역 클릭시 닫히는 기능 추가

• 토글의 렌더링 유무를 react 라이브러리의 useState 훅을 활용하여 구현
• 닫힘 버튼이 따로 없는 토글 메뉴 같은 경우는 토글메뉴 요소를 제외한 나머지 부분을 클릭시 닫히도록 구현

4. 헤더 토글 메뉴 데이터화

• css 스타일링이 동일한 토글 메뉴의 요소들은 map을 활용하여 렌더링하기 위해 public/data/header/toggle.json 에서 메뉴이름, 클릭시 이동할 path 이름을 담은 데이터 정리
• react 라이브러리의 useEffect 와 useState 훅을 활용하여 상태값 관리

5. 토글 메뉴의 a 태그에 각각의 경로 지정

• 이전에 임시로 지정했던 path 경로를 팀원들과 상의 후 기존페이지와 동일하게 경로 지정

6. 헤더 토글 메뉴 오픈 요소 하나로 합치기

• 사용자의 프로필을 클릭하거나 토글메뉴의 화살표 아이콘을 클릭시 토글 메뉴 리스트가 렌더링 되기 때문에
• 사용자의 프로필 아이콘과 토글 메뉴의 아이콘을 하나의 div 태그에 담아서 div 태그의 onClick 이벤트에서 isToggle 상태값을 관리

7. 컴포넌트 분리

• 컴포넌트 파일의 최상위 요소를 제외하고 필요없는 styled component 정리 후 className으로 css 관리

8. 검색 페이지 검색창 글씨색 변수화

• 화이트 모드에서 검색창에 하얀글씨로 뜨는 요류 수정

9. color.js 다크모드 색상 정리

• 팀원들과 색상 코드 병합 후 중복되는 색상들 정리

:: 성장 포인트 & 보완할 점

src/styles/color.js 와 media.js 를 활용하여 색상코드 와 반응형 조건을 전역변수로 선언 후 활용하니 중복코드를 줄일 수 있고 가독성이 좋아졌다.
또한 토글 메뉴 같이 중복되는 요소들은 data 파일에 따로 정리하여 useEffect, useState, map 함수를 이용하여 렌더링 하니 유지보수가 더 좋아졌다.
추후 다음 기능을 추가할 것이다.

1. 로그인 토큰의 유무에 따라 로그인 / 비로그인 각각의 UI 구현
2. 사용자의 프로필 사진 데이터를 받아와서 렌더링
3. 검색 페이지 검색 기능
4. 화이트 모드 색상코드 정리