Skip to content

Commit

Permalink
[#48] 메인페이지 & 헤더 반응형작업 완료 (1024,768,414,375)
Browse files Browse the repository at this point in the history
  • Loading branch information
@leemember
leemember committed Oct 9, 2021
1 parent f2ec195 commit 2cd313d
Show file tree
Hide file tree
Showing 10 changed files with 343 additions and 46 deletions.
14 changes: 14 additions & 0 deletions src/components/Common/Footer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,18 @@ export const FooterBox = styled.footer`
font-size: 1.6rem;
}
}
@media (max-width: 768px) {
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 30px;
}
}
@media (max-width: 414px) {
padding: 30px 20px 0;
ul {
grid-template-columns: 1fr;
margin-bottom: 0;
}
}
`;
169 changes: 124 additions & 45 deletions src/components/Common/Header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,17 @@ import { AiOutlineSearch } from 'react-icons/ai';
import { Link, useHistory } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logoutRequestAction } from 'reducers/user';
import { Gnb, Menu, User, Title, UserProfile } from './styles';
import { HiMenu } from 'react-icons/hi';
import { GrClose } from 'react-icons/gr';
import {
Gnb,
Menu,
User,
Title,
UserProfile,
SmallGnb,
ListMenu,
} from './styles';

function Header() {
// [TODO] logInLoading, logInError 일 때 상태 처리하기
Expand All @@ -15,7 +25,7 @@ function Header() {
}));
// 검색
const [searchValue, setSearchValue] = useState('');

const [showMenu, setShowMenu] = useState(false);
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
const history = useHistory();
const dispatch = useDispatch();
Expand All @@ -32,6 +42,10 @@ function Header() {
history.push(name);
};

const onClickShowMenu = () => {
setShowMenu(!showMenu);
};

const onSubmit = useCallback(
e => {
e.preventDefault();
Expand All @@ -42,57 +56,122 @@ function Header() {
[searchValue, history],
);
return (
<Gnb>
<div className="navWrap">
<Menu>
<>
<Gnb>
<div className="navWrap">
<Menu>
<Title type="button" onClick={() => GoToPage('/')}>
BTS
</Title>

<Link to="/board" className="board">
커뮤니티
</Link>
</Menu>

<User>
<li className="search">
<form onSubmit={onSubmit}>
<input
type="search"
value={searchValue}
onChange={onChangeSearch}
placeholder="NFT 경매품을 입력하세요."
/>
</form>

<span>
<i>
<AiOutlineSearch />
</i>
</span>
</li>

{userInfo ? (
<>
<UserProfile onClick={() => GoToPage('/mypage')}>
<img src={userInfo.picture} alt="profileImage" />
</UserProfile>
<li className="user">
<button type="button" onClick={handleLogoutClick}>
로그아웃
</button>
</li>
</>
) : (
<li className="user">
<button type="button" onClick={() => GoToPage('/login')}>
로그인
</button>
</li>
)}
</User>
</div>
</Gnb>

{/* 모바일버전 메뉴바 */}

<SmallGnb>
<div className="navWrap">
<Title type="button" onClick={() => GoToPage('/')}>
BTS
</Title>

<Link to="/board" className="board">
커뮤니티
</Link>
</Menu>

<User>
<li className="search">
<form onSubmit={onSubmit}>
<input
type="search"
value={searchValue}
onChange={onChangeSearch}
placeholder="NFT 경매품을 입력하세요."
/>
</form>

<span>
<i>
<AiOutlineSearch />
</i>
</span>
</li>

{userInfo ? (
<>
<UserProfile onClick={() => GoToPage('/mypage')}>
<img src={userInfo.picture} alt="profileImage" />
</UserProfile>
<div className="rightMenu">
<li className="search">
<form onSubmit={onSubmit}>
<input
type="search"
value={searchValue}
onChange={onChangeSearch}
/>
</form>

<span>
<i>
<AiOutlineSearch />
</i>
</span>
</li>
<button type="button" onClick={onClickShowMenu}>
<HiMenu />
</button>
</div>
</div>

{showMenu ? (
<ListMenu>
<button type="button" className="close" onClick={onClickShowMenu}>
<GrClose />
</button>
{userInfo ? (
<>
<UserProfile onClick={() => GoToPage('/mypage')}>
<img src={userInfo.picture} alt="profileImage" />
<p>MyPage</p>
</UserProfile>
<li className="user">
<button type="button" onClick={handleLogoutClick}>
로그아웃
</button>
</li>
</>
) : (
<li className="user">
<button type="button" onClick={handleLogoutClick}>
로그아웃
<button type="button" onClick={() => GoToPage('/login')}>
로그인
</button>
</li>
</>
) : (
<li className="user">
<button type="button" onClick={() => GoToPage('/login')}>
로그인
</button>
)}
<li>
<Link to="/board" className="board">
커뮤니티
</Link>
</li>
)}
</User>
</div>
</Gnb>
</ListMenu>
) : null}
</SmallGnb>
</>
);
}

Expand Down
99 changes: 99 additions & 0 deletions src/components/Common/Header/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,15 @@ export const Gnb = styled.nav`
max-width: 900px;
}
}
@media (max-width: 768px) {
.navWrap {
padding: 0;
max-width: 700px;
}
}
@media (max-width: 414px) {
display: none;
}
`;

export const Title = styled.button`
Expand Down Expand Up @@ -125,6 +134,20 @@ export const UserProfile = styled.div`
border-radius: 50%;
object-fit: cover;
}
@media (max-width: 414px) {
width: 90px;
height: 90px;
position: absolute;
top: 3.4rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
p {
margin-top: 0.5rem;
color: #fe5000;
font-weight: 500;
}
}
`;

export const NotiIcon = styled.div`
Expand All @@ -140,3 +163,79 @@ export const NotiIcon = styled.div`
}
}
`;

export const SmallGnb = styled.nav`
display: none;
@media (max-width: 414px) {
display: block;
position: sticky;
z-index: 50;
background-color: #fff;
padding: 0.6rem 1rem;
width: 100%;
.navWrap {
display: flex;
justify-content: space-between;
align-items: center;
}
svg {
font-size: 1.8rem;
cursor: pointer;
}
.rightMenu {
display: flex;
justify-content: center;
align-items: end;
.search {
position: relative;
width: 10rem;
background: #f6f6f6;
color: #5f5f5f;
border-radius: 3px;
margin-right: 0.5rem;
span {
position: absolute;
font-size: 1.4em;
right: 11px;
top: 6px;
}
}
i {
svg {
font-size: 1.4rem !important;
}
}
input {
padding: 0.3rem;
font-size: 1rem;
}
}
}
`;

export const ListMenu = styled.ul`
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
display: block;
li {
border-bottom: 1px solid #ddd;
padding: 1rem;
color: #444;
&:nth-of-type(1) {
margin-top: 12rem;
border-top: 1px solid #ddd;
}
}
.close {
position: absolute;
right: 1rem;
top: 1rem;
svg {
font-size: 1.2rem;
}
}
`;
9 changes: 9 additions & 0 deletions src/components/Common/Loader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,13 @@ export const LoadingWrap = styled.main`
}
}
}
@media (max-width: 414px) {
h2 {
font-size: 1rem !important;
line-height: 1.5;
}
img {
width: 100%;
}
}
`;
4 changes: 4 additions & 0 deletions src/components/Common/Member/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ const MemberBox = styled.li`
display: grid;
grid-auto-columns: 1fr 1fr;
place-items: center;
margin-bottom: 40px;
@media (max-width: 414px) {
width: 100%;
}
`;

const MemberPhoto = styled.div`
Expand Down
3 changes: 3 additions & 0 deletions src/components/Common/Pagination/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,7 @@ const Paging = styled.ul`
}
}
}
@media (max-width: 414px) {
margin: 20px 0;
}
`;
Loading

0 comments on commit 2cd313d

Please sign in to comment.