Pre-project_01

메뉴바의 구조를 어떻게 할지 고민 중에 기존 사이트의 구조가 어떻게 되어있는지 정리해보고 결정하려고 한다

Header

간단하게 정리하자면 이렇게 구성되어있었다.

<header>
  <div>
  	<a>모바일용 메뉴버튼</a>
  	<div>모바일용 메뉴</div> // 사이드메뉴와 같은 구조
  </div>
  <a>로고</a>
  <ol>메인메뉴</ol>
  <div>메인메뉴팝업</div>
  <form>
    <div>
       <input type="text" name="검색창" />
       <svg>검색아이콘</svg> // 아이콘에 클릭기능 없음
       <div>input 활성화시 팝업</div>
    </div>
  </form>
  <nav>
    <ol>
      <li>마이페이지</li>
	  <li>기타툴바</li>
	  <li>기타툴바</li>
	  <li>기타툴바</li>
	  <li>기타툴바</li>
    </ol>
  </nav>
</header>

팝업에 관한 부분은 다음 회의때 건의 해서 결정하는걸로 하고, 기존 구성과 같은 형식으로 진행하고자 한다.

<header>
  <div>
  	<a><i>모바일용 메뉴버튼</i></a>
  	<div>모바일용 메뉴</div> // 사이드메뉴와 같은 구조
  </div>
  <a>로고</a>
  <form>
    <div>
       <input type="text" name="검색창" />
       <i>react-icons 사용 검색아이콘</i>
       <div>input 활성화시 팝업</div> // -> 보류
    </div>
  </form>
  <nav>
    {로그인 ? (
      <ol>
      	<li><a><img src="" alt="마이페이지" /></a></li>
	  	<li><button>로그아웃</button></li>
      </ol>
    ) : (
      <ol>
      	<li><button>로그인</button></li>
	  	<li><button>회원가입</button></li>
      </ol>
    )}
  </nav>
</header>

컴포넌트로 나누어보기

<Header>
  <MobileMenu />
  <a>로고</a>
  <Search />
  <TopBar />
</Header>

Side

사이드바 메뉴는 main과 header에 각각 넣어준다
컴포넌트 명은 SideBar로 예정

<aside>
  <nav>
  	<ol>
  	  <li><a><span>Home</span></a></li>
      <li>
        <ol>
          <li><span>Public</span></li>
		  <li><a><i>지구본모양</i><span>Questions</span></a></li>
		  <li><a><span>Tags</span></a></li>
		  <li><a><span>Users</span></a></li>
		  <li><a><span>About</span></a></li>
        </ol>
      </li>
  	</ol>
  </nav>
</aside>

Main

사이드바 포함해서 차후 기능 추가예정

<main>
  <SideBar />
  <section>
  	본문내용구간
  </section>
</main>

Footer

최대한 간략하게 진행

<footer>
  <a>로고</a>
  <span>팀명</span>
</footer>

최종 컴포넌트화 했을 시

<Header />
<Main />
<Footer />