-
Notifications
You must be signed in to change notification settings - Fork 3
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
Feature : 공통컴포넌트 - 헤더 및 레이아웃 작업 #5
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
5f0ad27
💄 style : Pretendard 폰트 적용 (일단 cdn.. 추후 로컬 에셋으로 받으면 좋을듯)
seondal 556c177
📦 add : Pretendard 폰트 에셋
seondal befca58
💄 style : typography 적용
seondal 9265974
📦 add : 디자인시스템 colors 상수
seondal 37eaeed
📦 add : 컬러시스템
seondal 500fa67
✨ feat : 확대금지
seondal 4438d0b
✨ feat : 페이지 추가
seondal 6ca0a39
✨ feat : 탭바 네비게이션 기능
seondal c5ce8cd
⚙️ set : pxToRemTailWind 제거
seondal adf6aff
💄 style : 메인헤더 포함 레이앙수 여백 조정
seondal 09fc51a
💄 style : 헤더 divider
seondal caf2a30
♻️ refactor : 코드리뷰 반영
seondal 32a930b
💄 style : Header position fixed
seondal e93d33b
📄 docs : 메타데이터 수정 (임시)
seondal File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Feed() { | ||
return <>포즈피드</>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
export default function Home() { | ||
return <main className="">ssss</main>; | ||
return <div>ssss</div>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Pick() { | ||
return <>포즈픽</>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Talk() { | ||
return <>포즈톡</>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import MainHeader from './MainHeader'; | ||
import Tab from './Tab'; | ||
|
||
export default function Header() { | ||
return ( | ||
<div className="border-b-divider fixed inset-x-0 border-b-2 bg-white px-20 pt-16"> | ||
<MainHeader /> | ||
<Tab /> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export default function MainHeader() { | ||
return ( | ||
<div className="flex h-48 items-center justify-between"> | ||
<h4>PosePicker</h4> | ||
<div>햄버거아이콘</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
'use client'; | ||
|
||
import Link from 'next/link'; | ||
import { usePathname } from 'next/navigation'; | ||
|
||
const tabData = [ | ||
{ path: '/pick', title: '포즈픽' }, | ||
{ path: '/talk', title: '포즈톡' }, | ||
{ path: '/feed', title: '포즈피드' }, | ||
]; | ||
seondal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
export default function Tab() { | ||
const path = usePathname(); | ||
|
||
return ( | ||
<nav className="flex items-center gap-16"> | ||
{tabData.map((item) => ( | ||
<div key={item.path}> | ||
{item.path === path ? ( | ||
<> | ||
<div className="py-12"> | ||
<h5 className="text-brand">{item.title}</h5> | ||
</div> | ||
<div className="border-b-main-violet relative top-0.5 border-b-2" /> | ||
</> | ||
) : ( | ||
<Link className="py-12" href={item.path}> | ||
<h5>{item.title}</h5> | ||
</Link> | ||
)} | ||
</div> | ||
))} | ||
</nav> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as Header } from './Header'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
export const COLOR = { | ||
white: '#FFFFFF', | ||
gray: { | ||
30 : '#F9F9FB', | ||
50 : '#F7F7FA', | ||
100 :'#F0F0F5', | ||
200 : '#E8E8EE', | ||
300 :'#E1E1E8', | ||
400 :'#CDCED6', | ||
500 :'#A9ABB8', | ||
600 :'#858899', | ||
700 :'#525463', | ||
800 :'#3E404C', | ||
900 :'#2B2D36', | ||
950 :'#252730', | ||
}, | ||
black: '#141218', | ||
violet: { | ||
50 :'#141218', | ||
100 :'#E2D9FC', | ||
200 :'#C8B8FA', | ||
300 :'#B29BF8', | ||
400 :'#9C7FF5', | ||
500 :'#8662F3', | ||
600 :'#744CEB', | ||
700 :'#5B2EE0', | ||
800 :'#4B25C1', | ||
900 :'#412499', | ||
950 :'#21005D', | ||
} | ||
} as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
@font-face { | ||
font-family: "Pretendard"; | ||
font-weight: 700; | ||
src: url('/fonts/Pretendard-Bold.woff2') format("woff2"); | ||
} | ||
|
||
@font-face { | ||
font-family: "Pretendard"; | ||
font-weight: 500; | ||
src: url("/fonts/Pretendard-Medium.woff2") format("woff2"); | ||
} | ||
|
||
@font-face { | ||
font-family: "Pretendard"; | ||
font-weight: 400; | ||
src: url("/fonts/Pretendard-Regular.woff2") format("woff2"); | ||
} | ||
seondal marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,32 @@ | ||
import { COLOR } from "../../src/constants/color"; | ||
|
||
export const colors = { | ||
white: '#FFFFFF', | ||
gray: { | ||
'030': '#F9F9FB', | ||
'050': '#F7F7FA', | ||
}, | ||
} as const; | ||
// bg | ||
"white": COLOR.white, | ||
"sub-white": COLOR.gray[50], | ||
"divider": COLOR.gray[100], | ||
|
||
// border | ||
"default": COLOR.gray[300], | ||
"active": COLOR.gray[900], | ||
"disabled": COLOR.gray[100], | ||
|
||
// brand colors | ||
"main-violet-light": COLOR.violet[300], | ||
"main-violet": COLOR.violet[500], | ||
"main-violet-dark": COLOR.violet[700], | ||
|
||
// text | ||
"cto": COLOR.black, | ||
"brand": COLOR.violet[500], | ||
"primary":COLOR.gray[900], | ||
"secondary": COLOR.gray[700], | ||
"tertiary": COLOR.gray[500], | ||
"caption": COLOR.gray[400], | ||
|
||
// icon | ||
"icon-default": COLOR.gray[800], | ||
"icon-hover": COLOR.gray[600], | ||
"icon-disabled": COLOR.gray[500], | ||
|
||
seondal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} as const |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
h1 { | ||
seondal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
font-weight: 700; | ||
font-size: 3rem; | ||
line-height: 3.75rem; | ||
letter-spacing: -0.4px; | ||
} | ||
h2 { | ||
font-weight: 700; | ||
font-size: 2rem; | ||
line-height: 3rem; | ||
letter-spacing: -0.4px; | ||
} | ||
h3 { | ||
font-weight: 700; | ||
font-size: 1.5rem; | ||
line-height: 2.25rem; | ||
letter-spacing: -0.3px; | ||
} | ||
h4 { | ||
font-weight: 700; | ||
font-size: 1.25rem; | ||
line-height: 1.875rem; | ||
letter-spacing: -0.2px; | ||
} | ||
|
||
/* | ||
subtitle-1 에 해당하는 타이포입니다. | ||
hifi에서 subtitle-2, subtitle-3은 아직 쓰이지 않는 것 같아서 임의로 h5로 사용했어요 | ||
*/ | ||
h5 { | ||
font-weight: 500; | ||
font-size: 1rem; | ||
line-height: 1.5rem; | ||
letter-spacing: -0.2px; | ||
} | ||
|
||
p { | ||
font-weight: 400; | ||
font-size: 1rem; | ||
line-height: 1.5rem; | ||
letter-spacing: -0.1px; | ||
} | ||
|
||
caption { | ||
font-weight: 500; | ||
font-size: 0.75rem; | ||
line-height: 1.125rem; | ||
letter-spacing: 0.4px; | ||
} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기에
<Header />
를 두게되면 모든 페이지에 공통으로 이<Header />
가 적용이 될거에요.여기에 두는 것보다는 각 폴더의 layout에 두는 것이 더 적합하다고 생각해요 !There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
앱라우팅이 처음이라 잘 몰라서 일단 다른 프로젝트들이 네비게이션이나 헤더는 공통 레이아웃에 두는 것 같아 따라해봤습니다 ㅎㅎ...! 각 폴더의 레이아웃에 두면 오히려 중복이 많아질것 같아서요..
피그마에는 모든 경로에 이 헤더가 있는 것 같아서.. + 서브 헤더가 필요한 경우에는 라우팅으로 구분하려고 했는데 이 방법은 너무 비효율적일까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
최상단
layout.tsx
는 현재 server component여서 pathname을 받아오지 못합니다.따라서, path에 따라 다른 Header를 보여줄 수 없습니다.
leerob.io와 같은 방식으로 Header에서 다르게 보여주는 방법도 있지만, 저희는 포즈픽,톡,피드 외의 다른 페이지와 Header구성이 전혀 다르기에 적합한 방식이라 생각하지 않습니다.
묶어서 layout을 적용할 수 있는 Route Handler를 이용하면 좋을 것 같습니다. 이 부분은 제가 한 번 해볼게요 !