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

feat: Nav Header 구현 #11

Closed
wants to merge 3 commits into from
Closed

feat: Nav Header 구현 #11

wants to merge 3 commits into from

Conversation

Inoansta
Copy link
Collaborator

@Inoansta Inoansta commented Jan 28, 2025

이슈 번호

  • close #이슈_번호

작업한 목록을 작성해 주세요

  • 디자인 가이드에 있는 세가지 Nav Header를 구현했습니다.
  • goBack, goHome, title, spark 네가지 parameter를 이용해 한 컴포넌트 내에서 피그마에 있는 모든 헤더 구현 가능합니다.

스크린샷

  1. goBack goHome
스크린샷 2025-01-28 오후 7 35 50
  1. title
스크린샷 2025-01-28 오후 7 37 03
  1. spark
스크린샷 2025-01-28 오후 7 36 33

pr 포인트나 궁금한 점을 작성해 주세요

  • 페이지 마다 다른 종류의 헤더를 요구하여, 부모 router에 element로 헤더를 넣는 방식이 어려울 것 같습니다.

연관된 issue: #undefined

@github-actions github-actions bot added the feat New feature or request label Jan 28, 2025

import HeaderLeft from './items/HeaderLeft';

import Close from '@/assets/svg/LargeClose.svg?react';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 정의하면 lint 에러가 나오지 않나요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hook과 컴포넌트와 svg를 일부러 구분해놓았는데 다 붙이는게 나을까요?

Comment on lines +16 to +21
const params = [goBack, title, spark].filter((param) => {
return param !== undefined;
});
if (params.length > 1) {
throw new Error('goBack, title, spark 중 하나만 입력해야 합니다.');
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

의도한걸 파악하기 어려워요!
무슨 의도로 작성하신건가요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commnet에 있는것처럼 Param에서 goback, title, spark는 셋중 각각 하나만 입력이 가능합니다!

Comment on lines +16 to +36
if (goBack) {
return (
<ArrowLeftThick
className={'flex-1 mr-[20px]'}
onClick={() => navigate(-1)}
/>
);
} else if (spark) {
return (
<div className={'flex flex-row flex-1 items-center'}>
<SparkSymbol />
<SparkText />
</div>
);
} else if (title && title.length > 0) {
return (
<>
<span className={'flex-1 text-title4-eb'}>{title}</span>
</>
);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

명령형 프로그래밍이랑 선언형 프로그램 공부하시면 좋을것 같아요!
이 부분은 제가 한번 작성해보겠습니다!

@Inoansta Inoansta closed this Jan 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants