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

✨ feature: add GNB component #43

Merged
merged 12 commits into from
Nov 26, 2022
Merged

✨ feature: add GNB component #43

merged 12 commits into from
Nov 26, 2022

Conversation

L2HYUNN
Copy link
Member

@L2HYUNN L2HYUNN commented Nov 20, 2022

What's Changed?

Svg 컴포넌트를 만들었습니다.

  • 재사용성을 고려한 Svg 컴포넌트를 만들었습니다.
  • xmlns을 매번 적을 필요가 없습니다.
  • 간단하게 width, height, viewbox를 설정할 수 있습니다.
  • color를 이용하여 간단하게 색상을 변경할 수 있습니다.

GNB에 필요한 각 Icon 컴포넌트를 만들었습니다.

  • Profile, TalentRegister, TalentSearch아이콘이 제작되었습니다.

IconAnchor 컴포넌트를 만들었습니다.

  • Icon이 포함된 next/link 컴포넌트를 생성할 수 있습니다.
  • 기존 Anchor 컴포넌트의 모든 prop을 사용할 수 있습니다.
  • className을 통해 커스텀 스타일링을 적용할 수 있습니다.

NavigationBarList 컴포넌트를 만들었습니다.

  • 반응형을 고려한 디자인을 적용하기 위해 padding 값이 필요해보입니다. ( 추후 논의가 필요합니다. ) ⚠️
  • style은 이후 디자인에 따라 변경될 예정입니다. ⚠️
  • uuid의 경우 merge 이후 예나님이 만들어주신 util 함수 이용하여 변경 예정입니다.

Navigation 컴포넌트를 만들었습니다.

  • Navigation 아이템들은 NAV_LIST_INFO에 의해 결정됩니다.
  • 가독성 및 유지 보수성을 높이기 위해 최대한 컴포넌트를 분리하였습니다.

Screenshots

image

Related to any issues?

Dependency Changes

  • ⛔️

Test Code

  • ⛔️

@L2HYUNN L2HYUNN self-assigned this Nov 20, 2022
@L2HYUNN L2HYUNN linked an issue Nov 20, 2022 that may be closed by this pull request
1 task
@github-actions github-actions bot added the enhancement New feature or request label Nov 20, 2022
@L2HYUNN L2HYUNN marked this pull request as ready for review November 24, 2022 15:58
* className을 통해 tailwindCSS를 이용할 수 있습니다.
*/

export interface InternalSvgProps {
Copy link
Collaborator

Choose a reason for hiding this comment

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

아이콘 내에 props들이 많이 바뀌지 않을 것 같은데, 그냥 icons 내에 모든 파일 내용 나두고 props로 각자 조절할 수 있게 바꾸는 것은 어떨까요?

Copy link
Member Author

Choose a reason for hiding this comment

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

따로 common svg 컴포넌트를 사용하지않고 아래의 PR에서 예나님이 사용하셨던것처럼 svg를 사용하자고 하신게 맞으실까요?

return (
<nav className="w-[375px]">
<ul className="flex w-full justify-evenly">
<NavigationBarList items={NAV_LIST_INFO} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

굳이 props 없이 <NavigationBarList /> 컴포넌트 내에 NAV_LIST_INFO를 나둬도 되지않을까요?

Copy link
Member Author

Choose a reason for hiding this comment

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

네 그 방법이 더 좋을 거 같아요! 컴포넌트 내에 NAV_LIST_INFO를 사용하는 쪽으로 변경하겠습니다~!

Copy link
Member Author

Choose a reason for hiding this comment

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

변경 완료했습니다 :)

@L2HYUNN L2HYUNN requested a review from hwangyena November 26, 2022 07:08
Copy link
Collaborator

@doyoonear doyoonear left a comment

Choose a reason for hiding this comment

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

LGTM

@L2HYUNN L2HYUNN merged commit 82a3528 into dev Nov 26, 2022
@L2HYUNN L2HYUNN deleted the feature/GNB branch November 27, 2022 11:34
@L2HYUNN L2HYUNN restored the feature/GNB branch November 27, 2022 13:41
@L2HYUNN L2HYUNN deleted the feature/GNB branch November 27, 2022 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feature] GNB 컴포넌트 개발 (common)
3 participants