preproject 12.20.

주말 포함 8일차, 미포함 6일차

모달창 구현

modal false는 모달창이 뜨지 않는 상태
setModal(true)는 모달창이 뜨는 상태
삼항연산자 사용해서 modal === true? <Modal/>:null;
껐다켰다하려면, 상태가 반대로 바껴야하니까 onClick=setModal(!modal)
삼항연산자를 어디에 위치시키지?.. <Modal/>이 들어갈곳..!!

로그아웃 구현

로그아웃 버튼 누르면 메인 페이지로 이동
메인 페이지 header가 변경됨 (about, for teams 메뉴 추가 / LogIn, SignUp 버튼)

탭 구현

기본적인 방법은 모달창과 같음
state에 따라 어떻게 보일지 구현하기
즉, true일때 메뉴가 선택이 되고, 그 메뉴에 따른 창이 떠야한다
useState의 기본값은 1?
{state 값이 i일때? 창 : null}
창이 아니라 link이면 true에 뭘 넣어야하지? 주소값이 바껴야하는데..
맵사용?

false일때는 메뉴 효과 미적용, true일때는 메뉴 효과 적용
const [menueffect, setMenueffect] = useState(false)
{menueffect===true? 효과적용:미적용}
그렇다면.. true일때 css명을 추가하는 방식으로 작성?
메뉴 onclick={setMenueffect(!menueffect)} 맞나...

1)

const Nav = () => {
    const [menueffect, setMenueffect]=useState(false);
  return (
    <>
        <div className='navContainer'>
            <div className='menu'>
                <ul>
                    <li className={menueffect===true? 'menuHover':''} onClick={setMenueffect(true)}>
                    {/* <li className='menuHover'> */}
                        <Link to="/">Home　　　　　　　　　</Link></li>

2)

const Nav = () => {
    const [menueffect, setMenueffect]=useState([false,false,false,false]);
  return (
    <>
        <div className='navContainer'>
            <div className='menu'>
                <ul>
                    <li className={menueffect[0]? 'menuHover' : ''} onClick={setMenueffect([true,false,false,false])}>
                    {/* <li className='menuHover'> */}
                        <Link to="/">Home　　　　　　　　　</Link></li>

input에 돋보기 아이콘 넣기

---

client 폴더만 push 해버림... ㅠㅠㅠㅠ
feature 브랜치 다시 만들어서 pre폴더에서 push 하고 풀리퀘?

---

기본헤더를 비로그인상태로 변경

마지막 아이콘을 로그아웃아이콘으로 변경했음

검색창에 돋보기아이콘 넣기

메뉴 클릭후 다른 메뉴로 변경할때까지 계속 눌린 효과 줘야하는데 일단 호버

푸터 보완 필요 (원래 밑에 계속 떠잇는게 아니라 아예 내려가야하는데 수정 예정)

헤더 세가지상태 설명 필요

각 컴포넌트 상단 div를 시맨틱으로

깃컨벤션 지키기

삼항연산자 조건 ===true? 삭제