가독성을 제일 중요하게 생각하는 사람 입장에서 사이트를 볼 때 가장 많이 신경쓰는 부분이 헤더라고 생각해서 열심히 만들었다! 간단해 보이지만 생각보다 시간은 엄청 많이 썼다..
// 헤더의 로고부분 코드
function Header() {
const navigate = useNavigate();
// 아직은 넣을 로직이 없지만 확장성을 위해서 useNavigate를 사용
function handleNavigate(path) {
navigate(path);
}
...
return (
...
<span className={styles.headerLogo}>
<img
onClick={() => handleNavigate('/')}
src="로고 이미지 경로 Soongo-logo.png"
width="100px"
// 웹 접근성 지켜주기
alt="soongo-logo"
/>
</span>
...
)}
function Header() {
...
// 로그인, 로그아웃 정보를 담을 isLogin state선언
const [isLogin, setIsLogin] = useState(false);
useEffect(() => {
// localStorage에 토큰이 없다면 false, 있으면 true
if (!localStorage.getItem('access_token')) {
setIsLogin(false);
} else {
setIsLogin(true);
}
}, []);
// 로그아웃 버튼을 누르면 토큰 삭제
const logoutBtn = () => {
localStorage.removeItem('access_token');
setIsLogin(false);
};
// ref가 profile인 태그 선택해서 클릭할때마다 스타일 바꾸기
const [profileClick, setProfileClick] = useState(false);
const profile = useRef();
const profileOutline = () => {
if (!profileClick) {
profile.current.style.outline = '2px solid #03c7ae';
setProfileClick(true);
} else {
profile.current.style.outline = 'none';
setProfileClick(false);
}
};
return (
...
// 삼항 연산자를 사용해서 로그인, 로그아웃 상태에 따라 다른 화면 보여주기
{isLogin ? (
<>
...
<li onClick={logoutBtn}>
<div className={styles.flexRow}>로그아웃</div>
</li>
<li>
<div className={styles.flexRow}>
<img
src="기본 이미지 경로"
className={styles.profileImg}
alt="profile_image"
ref={profile}
onClick={profileOutline}
/>
...
</>
) : (
<>
<li onClick={() => handleNavigate('/login')}>로그인</li>
<li onClick={() => handleNavigate('/sign-up')}>회원가입</li>
...
</>
)}
)}
작업한 github주소를 어떻게 넣을까 고민하다가 a태그를 이용해서 새창에 띄우는 방법을 선택했다.
(Footer에 숭고소개는 아직 못했는데 처리안했음..ㅜ)
팀 소개 모달을 추가했습니다! 😎
Link는 바로 목적지 주소로 이동하는데, useNavigate를 이용해서 사용자 함수를 이용하면 이동하기 전에 로직을 추가할 수 있다!
리액트의 강점인 상태 관리를 이용하기 위해서는 html에 직접 접근하는 바닐라 자바스크립트를 사용하는 것보다 리액트에서 제공하는 useRef로 접근해야 한다!
너무 급하게 작성하다보면 여기까지 생각을 못하게 되는데 결과물을 보면 많이 다르다.. undefined가 나오던 화면을 다른 팀원이 기본 이미지로 바꿔줬는데 그거 하나로 갑자기 엄청 깔끔해졌다..!
module.scss를 사용하면 fontawesome하고 싸우게 되는데.. React-icons에 더 다양한 아이콘들이 많아서 편하게 쓸 수 있었다!