Feat: Header UI 추가 #26

pepperdad · 2023-10-31T05:27:13Z

구현사항

헤더 추가

로그인 여부에 따라 헤더 구현 (현재 로그인 확인 로직이 없어, 항상 비로그인 상태로 작성)
헤더 기본 bg는 transparent이나, 스크롤 시의 색상이 Figma에 나와있지 않아, 임시로 bg-white로 설정

테스트

모든 페이지에서 접근 가능

TODO

로그인 여부 확인 로직 구현시, 수정할 것
로그인 시, 우측의 알림, 내 정보 Toggle UI만 추가하였고, 후에 기능 추가할 것

into feat/header ; Conflicts: ; pages/_app.tsx ; src/shared/styles/globals.css

NacreousCloud

코멘트 한번씩 확인부탁드려요~

src/shared/component/header/Notification.tsx

src/shared/component/header/Tabs.tsx

src/shared/component/header/index.tsx

src/shared/component/header/Tabs.tsx

Choi-Jinwook

확인했습니다! 코멘트 남긴 부분 확인부탁드립니다😀

src/shared/component/header/MyInfo.tsx

NacreousCloud

확인했습니다. Lv2로 코멘트 달아놓은 부분들은 장기적으로 보면 이점이 많기때문에 시간나시면 한번 적용해보세용

into feat/header ; Conflicts: ; .yarn/install-state.gz ; src/shared/styles/globals.css

github-actions · 2023-11-06T14:33:35Z

pages/_app.tsx

@@ -8,6 +9,7 @@ import "@shared/styles/globals.css";
 function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
+      <Header />
      <Component {...pageProps} />
      <Alert />
      <Confirm />


이 코드 패치에 대한 간단한 코드 리뷰를 도와드리겠습니다. 잠재적 버그 위험과/또는 개선 제안에 대한 의견을 환영합니다.

빠진 import 문제: Header 컴포넌트를 가져오는 import Header from "header/components" 코드가 추가되었습니다. 이전 코드에서는 해당 import가 누락되었을 가능성이 있으므로 문제는 해결되었습니다.

기능 개선 제안: 리액트 애플리케이션의 헤더를 전역으로 사용하려면 <Header />를 사용하는 것은 좋은 접근 방식입니다. 그러나 각 페이지마다 반복해서 <Header />를 추가해야 하는 번거로움이 있을 수 있습니다. 이를 간소화할 수 있는 방법은 Next.js의 Layout 컴포넌트 아키텍처를 활용하는 것입니다. 레이아웃 컴포넌트를 생성하여 모든 페이지에 적용하고, 레이아웃 컴포넌트 내부에 헤더를 포함시킬 수 있습니다. 이렇게 하면 각 페이지에서 헤더를 중복해서 추가할 필요 없이 공통 레이아웃 컴포넌트에서 관리할 수 있습니다. 이 기능 개선은 코드를 DRY하게 유지하는 데 도움이 될 수 있습니다.

위의 리뷰에 따라 모든 import가 올바르게 추가되었고, 헤더가 애플리케이션 전체에서 사용되도록 변경되었습니다.

github-actions · 2023-11-06T14:34:09Z

src/shared/styles/globals.css

  @apply overflow-y-auto scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-[#FFA4A475] scrollbar-track-[#E2E2E2];
-}
+}


다음은 코드 패치에 대한 간략한 코드 리뷰입니다:

.flex-center 클래스는 flex, items-center, justify-center 속성을 적용하여 수평 및 수직 가운데 정렬을 구현합니다. 이 부분은 문제가 없어 보입니다.

@layer components 영역 안에 있는 .button-full 클래스는 w-full과 h-[54px] 속성을 적용하여 버튼의 너비와 높이를 설정합니다. 이것도 문제가 없어 보입니다.

.overflow-content 클래스는 스크롤바 디자인을 설정합니다. overflow-y-auto 속성을 통해 세로 스크롤을 가능하게 하고, scrollbar-thin, scrollbar-thumb-rounded-full, scrollbar-track-rounded-full, scrollbar-thumb-[#F5A200], scrollbar-track-[#E2E2E2] 등의 속성을 적용합니다. 문제가 없어 보이는데, 참고로 RGBA 값인 [#FFA4A475]는 잘못된 형식입니다. 수정이 필요합니다.

.overflow-FAQ 클래스도 .overflow-content와 동일한 스크롤바 디자인을 적용합니다. 마찬가지로 RGBA 값 형식이 잘못되어 있습니다. 수정 필요합니다.

github-actions · 2023-11-09T02:09:16Z

src/shared/styles/globals.css

@@ -65,6 +70,7 @@ a {
    @apply border border-solid border-[#ADADAD] focus:border-[#4285F4];
  }
 }
+
 /* 약관 동의 우측 스크롤 바 */
 .overflow-content {
  @apply overflow-y-auto scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-[#F5A200] scrollbar-track-[#E2E2E2];


코드 리뷰 내용:

새로운 CSS 클래스 .flex-center가 추가되었는데, 해당 클래스를 사용하기 위해 @apply flex items-center justify-center라는 스타일을 적용하려고 시도하고 있습니다.

@layer components 부분에서 .button-full 클래스에 w-full과 h-[54px] 스타일이 적용됩니다.

약관 동의 우측 스크롤 바를 나타내기 위해 .overflow-content 클래스에 overflow-y-auto, scrollbar-thin, scrollbar-thumb-rounded-full, scrollbar-track-rounded-full, scrollbar-thumb-[#F5A200], scrollbar-track-[#E2E2E2] 스타일이 적용됩니다.

위의 코드 패치에 대한 버그나 개선 제안은 현재로서는 없습니다. 다만 전체적인 문맥이나 다른 코드와의 상호작용을 고려해야 할 수 있습니다.

pepperdad added 7 commits October 26, 2023 15:42

feat: header 추가

1d1d957

feat: logo 추가

9e6af80

feat: Header 컴포넌트 개선

70c8eb2

Merge branch 'develop' of https://github.com/Project-Catcher/catcher-web

40db830

into feat/header ; Conflicts: ; pages/_app.tsx ; src/shared/styles/globals.css

fix: logo 경로 변경 및 asset 추가

f5baaba

feat: 로그인 상태에 따라 보이는 헤더 UI 수정

2b79fae

feat: Tabs 컴포넌트로 분리

7311b7c

pepperdad requested review from NacreousCloud and Choi-Jinwook October 31, 2023 05:27

pepperdad changed the title ~~Feat: 헤더 구현~~ Feat: Header UI 추가 Oct 31, 2023

pepperdad added 4 commits October 31, 2023 14:45

fix: 로그인 상태 확인 로직 수정

7506b63

design: close asset 추가

be19b35

feat: 알림 토글 추가

6e9c449

feat: 로그인 상태에서 알림, 내 정보 Toggle event 추가

38a7dc3

NacreousCloud requested changes Nov 1, 2023

View reviewed changes

pepperdad added 2 commits November 2, 2023 16:05

feat: 내부 알림 컴포넌트 추가 및 프로필,ID 영역 클릭시 토글로 수정

450af02

feat: 고정 데이터에 타입 추가

124abdd

Choi-Jinwook reviewed Nov 2, 2023

View reviewed changes

src/shared/component/header/MyInfo.tsx Outdated Show resolved Hide resolved

pepperdad added 3 commits November 4, 2023 09:04

fix: scroll position에서 발생하는 불필요한 렌더링 반복 제거

3ff8952

fix: header 컴포넌트 경로 수정

f668721

feat: MyInfo 내의 반복되는 버튼 컴포넌트로 분리

59edce0

pepperdad requested review from NacreousCloud and Choi-Jinwook November 4, 2023 05:48

fix: 글자 수 늘어날 시 width 달라지지 않게 width 고정

6587b37

NacreousCloud approved these changes Nov 5, 2023

View reviewed changes

Merge branch 'develop' of https://github.com/Project-Catcher/catcher-web

e900733

into feat/header ; Conflicts: ; .yarn/install-state.gz ; src/shared/styles/globals.css

github-actions bot reviewed Nov 6, 2023

View reviewed changes

NacreousCloud and others added 2 commits November 8, 2023 23:32

Chore: 누락된 캐시파일 추가

06c58e2

Merge branch 'develop' into feat/header

11c3064

pepperdad merged commit bad461f into develop Nov 9, 2023
2 checks passed

github-actions bot reviewed Nov 9, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Header UI 추가 #26

Feat: Header UI 추가 #26

pepperdad commented Oct 31, 2023 •

edited

Loading

NacreousCloud left a comment

Choi-Jinwook left a comment

NacreousCloud left a comment

github-actions bot Nov 6, 2023

github-actions bot Nov 6, 2023

github-actions bot Nov 9, 2023

Feat: Header UI 추가 #26

Feat: Header UI 추가 #26

Conversation

pepperdad commented Oct 31, 2023 • edited Loading

구현사항

테스트

TODO

NacreousCloud left a comment

Choose a reason for hiding this comment

Choi-Jinwook left a comment

Choose a reason for hiding this comment

NacreousCloud left a comment

Choose a reason for hiding this comment

github-actions bot Nov 6, 2023

Choose a reason for hiding this comment

github-actions bot Nov 6, 2023

Choose a reason for hiding this comment

github-actions bot Nov 9, 2023

Choose a reason for hiding this comment

pepperdad commented Oct 31, 2023 •

edited

Loading