[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>と比較してuserNavigate()

リンクは直接宛先アドレスに移動し、userNavigateを使用してユーザー関数を使用して移動する前に論理を追加できます.

3. document.useref()querySelector()ではなく

Reactionの優位状態管理を利用するためには、htmlに直接アクセスするバニラJavaScriptを使うよりも、Reactionが提供するuserefを使うべきです!

4.コンテンツがない場合は0または画像で埋める

急ぎすぎるとここまでは考えられませんが、結果を見るとかなり違います.Undefindから出てきた画面を他のメンバーの基本イメージに変えたのは、これが急にきれいになったから...!

5.fontawesomeとケンカしないでreact-iconsを使う

module.scssを使うとfontawesomeと戦います...react-iconsにはもっと違うアイコンがあるので使いやすい!

まだやりたいことがある。

Modalウィンドウを使用して、

Footerボタンにチームプロファイル

を挿入します.

localStorage

の代わりにCookieを使用

次の項目でfetch関数として受信情報画面に

が綺麗に表示される.