[Project] 숭고 Soongo - 프론트앤드 진행편

내가 맡은 역할

헤더, 푸터

가독성을 제일 중요하게 생각하는 사람 입장에서 사이트를 볼 때 가장 많이 신경쓰는 부분이 헤더라고 생각해서 열심히 만들었다! 간단해 보이지만 생각보다 시간은 엄청 많이 썼다..

1. 로그인 전

// 헤더의 로고부분 코드
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>
...
)}

2. 로그인 후

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>
            	...
            </>
          )}
)}

3. Footer

작업한 github주소를 어떻게 넣을까 고민하다가 a태그를 이용해서 새창에 띄우는 방법을 선택했다.

프로젝트하면서 배운 것들

1. 구현하지 못한 기능들은 아예 흐리게 표시해서 구현한 기능을 강조하기!

(Footer에 숭고소개는 아직 못했는데 처리안했음..ㅜ)

2. <Link> 보다는 useNavigate()

Link는 바로 목적지 주소로 이동하는데, useNavigate를 이용해서 사용자 함수를 이용하면 이동하기 전에 로직을 추가할 수 있다!

3. document.querySelector대신에 useRef()

리액트의 강점인 상태 관리를 이용하기 위해서는 html에 직접 접근하는 바닐라 자바스크립트를 사용하는 것보다 리액트에서 제공하는 useRef로 접근해야 한다!

4. 내용이 없을 때는 0이나 이미지로 채워두기

너무 급하게 작성하다보면 여기까지 생각을 못하게 되는데 결과물을 보면 많이 다르다.. undefined가 나오던 화면을 다른 팀원이 기본 이미지로 바꿔줬는데 그거 하나로 갑자기 엄청 깔끔해졌다..!

5. fontawesome하고 싸우지 말고 React-icons사용하기

module.scss를 사용하면 fontawesome하고 싸우게 되는데.. React-icons에 더 다양한 아이콘들이 많아서 편하게 쓸 수 있었다!

더 해보고 싶은 것들

• Footer 버튼에 모달창으로 팀 소개 넣기
• localStorage대신에 쿠키 사용하기
• 다음 프로젝트에서 fetch함수로 받아온 정보 화면에 이쁘게 보여주기