[03]SocialGallery Project

Main Page 구현

Header

상단 Header부분 구성(SideBar, Logo, Login)

    <header className="header">
    <nav className="header__content">
      <div className="header__buttons">
        <Link to ="/"><p>Social Gallery</p></Link>
      </div>

      <div className="header__buttons header__buttons--desktop">
        <Link to="#">
          <img src="/assets/Main/home_btn.jpg" alt="" />
        </Link>
        <Link to="#">
          <img src="/assets/Main/msg_btn.png" alt="" />
        </Link>
        <Link to="#">
          <img src="/assets/Main/video_btn.png" alt="" />
        </Link>
        <button className="profile-button">
          <div className="profile-button img">
            <Link to = "/login"><img src="/assets/main/user.png" alt="User Picture" /></Link>
          </div>
        </button>
      </div>
    </nav>
  </header>

1) Img부분은 Public 폴더에 관리

mainfest.webmainfest처럼 build된 결과물에서 특정한 파일 이름이 필요한 경우 유용

수천개의 이미지 파일을 동적으로 참조해야 하는 경우 유용

Sidebar

1) 상단 User 정보

Server로부터 로그인한 User의 정보를 받아옴(임시로 더미데이터 불러옴 추후 서버와 연동할 예정)

	const userProfile = ()=>{
		axios.get('https://jsonplaceholder.typicode.com/users/1')
		.then(res=>{
			setPfUser(res.data.name)
			console.log(setPfUser)
		},[])
}