Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Design] Mobile ver. - Header 반응형 구현 #371

Merged
merged 25 commits into from
Aug 11, 2024
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
7f57cdd
init: 파일 생성
lydiacho Aug 6, 2024
0511324
fix: theme color 네이밍 범용적으로 수정
lydiacho Aug 6, 2024
9243911
move: Nav 디렉토리 만들어서 컴포넌트 분리
lydiacho Aug 6, 2024
8499b99
feat: react-responsive 설치 및 useDevice hook 추가
lydiacho Aug 6, 2024
5dd0d93
feat: isTablet, isMobile 공용 useDevice 추가
lydiacho Aug 6, 2024
81cccb1
fix: Logo svg className prop 확장
lydiacho Aug 6, 2024
6af78f6
chore: PC지원 막기 임시 해제
lydiacho Aug 6, 2024
103d010
design: tab/mob ver. 헤더 로고, 햄버거 조건부 렌더링
lydiacho Aug 6, 2024
6b9d655
design: 햄버거 토클 시 background 변경
lydiacho Aug 6, 2024
991774c
Merge branch 'develop' of https://github.com/sopt-makers/sopt-recruit…
lydiacho Aug 7, 2024
1f9bafa
fix: TextBox이메일 width 처리 누락 해결
lydiacho Aug 7, 2024
d25f739
fix: 달라진 useDevice 반환값에 따른 수정
lydiacho Aug 7, 2024
f6d8b81
fix: header position fixed로 수정 및 layout marginTop 추가
lydiacho Aug 7, 2024
0abb01a
design: header padding 반응형
lydiacho Aug 7, 2024
3670e36
fix: 디자인 변경사항 (padding값) 반영
lydiacho Aug 7, 2024
07936d0
feat: Nav 내부의 MenuList 컴포넌트 분리
lydiacho Aug 7, 2024
31d271e
design: 드롬메뉴 헤더 반응형
lydiacho Aug 7, 2024
83a0595
feat: DEVICE_TYPE에 따라 isMenuOpen값 초기화
lydiacho Aug 7, 2024
ae771ba
feat: 햄버거 버튼과 닫기 버튼
lydiacho Aug 8, 2024
1b85135
design: dimmed 배경
lydiacho Aug 8, 2024
7dcc466
feat: dimmed 배경 클릭 시 헤더 닫히도록
lydiacho Aug 10, 2024
dc6f1b9
design: 반응형 header 드롭메뉴 애니메이션
lydiacho Aug 10, 2024
c167161
design: 반응형 header active 페이지 bolder 추가
lydiacho Aug 10, 2024
aaea71f
design: 햄버거버튼 다크모드 조건부스타일링
lydiacho Aug 10, 2024
c1bba63
feat: 애니메이션 keyframes 공통 animationa.css.ts로 분리
lydiacho Aug 11, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
init: 파일 생성
lydiacho committed Aug 6, 2024
commit 7f57cdd0aee6be94822922068655b56cd0f0da7b
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const MobileHeader = () => {
return <header>index</header>;
};

export default MobileHeader;
22 changes: 22 additions & 0 deletions src/common/components/Layout/components/Header/Mobile/style.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { style } from '@vanilla-extract/css';

import { Z_INDEX } from '@constants/zIndex';
import { theme } from 'styles/theme.css';

export const container = style({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',

position: 'sticky',
top: 0,
maxWidth: 1440,
width: '100%',
minWidth: 1000,
margin: '0 auto',
padding: '22px 156px 22px 150px',

backgroundColor: theme.color.background,

zIndex: Z_INDEX.gnbHeader,
});
6 changes: 4 additions & 2 deletions src/common/components/Layout/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import { ThemeContext } from '@store/themeContext';

import { MENU_ITEMS, MENU_ITEMS_MAKERS } from './contants';
import MenuItem from './MenuItem';
import MobileHeader from './Mobile';
import { container, logo, menuList } from './style.css';

const Header = () => {
@@ -37,7 +38,8 @@ const Header = () => {
};
return (
<>
{isMakers != undefined && (
<MobileHeader />
{/* {isMakers != undefined && (
<header className={container}>
<button onClick={handleClickLogo} className={logo}>
{isMakers ? isLight ? <MakersLogo /> : <MakersDarkLogo /> : <NowsoptLogo />}
@@ -64,7 +66,7 @@ const Header = () => {
</ul>
</nav>
</header>
)}
)} */}
</>
);
};