[SP2] blog tab navigation #228

f0rever0 · 2023-10-20T05:17:20Z

Summary

블로그 탭 네비게이션 부분과 헤더를 변경하였습니다.
작업하다보니 전체적인 톤 ( 헤더, 기본 body background ) 도 피그마와 차이가 있어서 수정했습니다.
헤더 media query 분기 픽셀값도 차이가 있어서 수정했습니다.

Screenshot

[헤더]

[블로그]

ezgif.com-gif-maker.mov

Comment

드롭다운은 서진이 작업물 머지하고 새로 이슈파서 작업할게요!

…pt-makers/sopt.org-frontend into feat/#218-blog-tab-navigation

f0rever0 · 2023-10-20T05:18:37Z

src/pages/blog.tsx

@@ -0,0 +1 @@
+export { default } from '@src/views/BlogPage';


/blog 로 접속하면 해당 페이지입니다!

SeojinSeojin · 2023-10-21T07:25:44Z

src/components/Footer/OriginFooter/style.ts

@@ -4,7 +4,7 @@ import { mainColor } from '@src/lib/styles/colors';
 export const Root = styled.footer`
  width: 100%;
  min-height: 162px;
-  background-color: #2a2a2a;
+  background-color: #17171c;


요것 이제 새 컬러 상수를 사용해 주셔요..!

요 컬러는 mds에 없어서...! 색상코드를 넣었습니다! pd에게 다시 확인하고 커밋해둘게요!

SeojinSeojin · 2023-10-21T07:26:46Z

src/components/Header/header.module.scss

@@ -8,19 +8,20 @@
  justify-content: center;
  align-items: center;
  position: fixed;
-  background-color: rgba(22, 22, 28, 0.9);
+  background-color: #0f0f12;


여기도요!!!

scss 파일에서 color 코드를 불러오려는데

./src/components/Header/header.module.scss SassError: Can't find stylesheet to import. ╷ 2 │ @import '@src/lib/styles/colors.ts'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/components/Header/header.module.scss 2:9 root stylesheet

이러한 에러가 계속 떠서 아예 styled-component를 통일하게 사용하도록 style.ts로 바꿨습니다!

SeojinSeojin · 2023-10-21T07:27:34Z

src/components/Header/menuTapList.ts

@@ -12,20 +12,9 @@ export const menuTapList: MenuTapList = [
    href: '/project',
  },
  {
-    type: MenuTapType.Parent,
+    type: MenuTapType.Router,


좋네용.. 사실 이제 MenuTapType.Anchor 도 사라지긴 해서 type 이라는 친구도 없어도 되긴 혀요

다른 것이 추가될 수도 있으니 살려두어도 괜찮을 것 같습니당

MenuTapType.Anchor 도 지울까 했는데,,, 일단 살려뒀습니다!

SeojinSeojin · 2023-10-21T07:28:02Z

src/lib/styles/colors.ts

+  gray500: '#515159',
+  gray600: '#3F3F47',
+  gray700: '#2E2E35',
+  gray800: '#202025',
  gray900: '#0F0F12',


최신 브랜치를 머지해주쎄용~!!

SeojinSeojin · 2023-10-21T07:32:25Z

src/views/BlogPage/components/navigation/types.ts

+    title: string;
+    description: string;


title, description 도 하나의 타입으로 빼면 좋을 것 같습니당

이름이 list인데 리스트가 �아니고 오브젝트네용..

저 같은 경우에는 이렇게 쓰는 것을 선호합니다!!!! but. .. 혹시 REVIEW와 ARTICLE이 담는 컨텐츠가 달라질 것을 예상하고 이렇게 작성하신 거라면 이대로도 좋아요~~

enum BlogTabType = { REVIEW='review', ARTICLE='article' } type BlogTabContent = { title: string; description: string; } type BlogTabMap = Record<BlogTabType, BlogTabContent>;

의견 감사합니다! 일단 저렇게 타입을 쓴 이유는
나중에 드롭다운에 들어갈 내용 (label)을 같이 관리할 수 있지 않을까 싶어서 입니다!
두 탭의 내용과 타입이 달라질 수 도 있으니까요. 드롭다운 기능까지 붙이고 나서는 서진의 의견대로 통일할 건 통일하면 좋을 것 같네요!!

SeojinSeojin · 2023-10-21T07:33:28Z

src/views/BlogPage/components/navigation/style.ts

+
+  cursor: pointer;
+  position: relative;
+  border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray200}`};


요거 호버했을 때는 스타일 변화가 없나욤??

피그마 상에서 클릭시 이벤트에만 색상이 부여되어있어요!

SeojinSeojin · 2023-10-21T07:34:12Z

src/views/BlogPage/components/navigation/style.ts

+    width: 100%;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {


태블릿 뷰랑 내용이 같아서 하나만 써도 될 것 같아요!!!

합치겠습니당!

…pt-makers/sopt.org-frontend into feat/#218-blog-tab-navigation

solar3070

1280px부터 헤더가 중간에서 보이는데 확인해주세요!
그리고 해당 PR에서 꼭 해야 하는 작업은 아니지만 푸터가 내용물에 따라 위치가 변경되는 것 보다는 하단에 고정시키는 게 좋을 것 같네요!

solar3070 · 2023-10-21T11:33:02Z

src/views/BlogPage/BlogPage.tsx

+import PageLayout from '@src/components/common/PageLayout';
+import Navigation from './components/navigation';
+
+export default function BlogPage() {
+  return (
+    <PageLayout>
+      <Navigation />
+    </PageLayout>
+  );
+}


suggestion;

해당 코드를 pages/blog 컴포넌트에 바로 작성하는 건 어떨까요? 앞으로는 기존 구조 대신 페이지 컴포넌트 내에 바로 작성하는 것을 제안드립니다.

[제안 이유]

views/BlogPage/BlogPage -> views/BlogPage/index -> pages/blog에 re-export하는 과정이 복잡하고 불필요하게 느껴진다. (위 구조를 취해야 하는 이유를 모르겠음)

페이지 컴포넌트 내에서만 사용할 수 있는 함수를 사용하기 어렵다.

@SeojinSeojin @f0rever0 다들 어떻게 생각하시나요?

사실 저도 이번에 og 버그를 잡으면서 SSR을 위해서 re-export를 하던 구조를 깨버렸기 때문에...
논의를 다시 했으면 했어요!
다만 이번에 작업 시간이 빠듯하다보니까 미뤄뒀었는데, 혜준언니가 말해준거에 동감하는 바입니다!

solar3070 · 2023-10-21T11:42:34Z

src/views/BlogPage/components/navigation/index.tsx

+import * as S from './style';
+import { BlogTabList } from './types';
+
+export default function Navigation() {


suggestion;

Navigation이라는 이름 보다는 BlogTap과 같은 이름을 사용하는 게 어떨까요?
네비게이션은 서로 연관이 없는 별도의 데이터를 이동하는 느낌이라면 탭은 서로 연관이 있는 데이터를 구분하는 데 사용하는 느낌인 것 같아서요. [참고]
또한, 개인적으로는 작성하신 컴포넌트 내의 상수나 스타일 컴포넌트명을 고려했을 때 Tap이 더 적절하다고 느껴집니다!

레퍼런스까지 감사합니다! tab 네이밍이 더 적절하겠군요!

solar3070 · 2023-10-21T12:30:43Z

src/views/BlogPage/components/navigation/style.ts

+
+  cursor: pointer;
+  position: relative;
+  border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray200}`};


위처럼 && 연산자를 사용했을 때 falsy한 값이 반환됐을 때도 정상 작동하는 이유가 궁금해서 찾아봤는데 스타일 컴포넌트가 falsy한 값으로 평가되는 보간을 css로 바꿀 때 무시하는 것 같네요. [레퍼런스]

f0rever0 · 2023-10-21T13:16:16Z

@solar3070
헤더 움직이는거 영상으로 보여주실 수 있으실까요?
지금 제가 확인했는데는 움직이지 않아서요!
(말씀해주신 footer는 작업 다끝나고 새로 이슈 파서 작업하면 좋을 것 같아요!)

2023-10-21.10.08.35.mov

solar3070 · 2023-10-22T02:24:52Z

@solar3070 헤더 움직이는거 영상으로 보여주실 수 있으실까요? 지금 제가 확인했는데는 움직이지 않아서요!

제가 잘못 확인했던 거였네요......! 번거롭게 해드려서 죄송해요 😓 잘 동작합니다!

solar3070 · 2023-10-22T12:10:02Z

src/views/BlogPage/components/blogTab/index.tsx

+import { BlogTabList } from './types';
+
+export default function BlogTab() {
+  const [selectTab, setSelectTab] = useState<keyof BlogTabList>('REVIEW');


suggestion;

상태명 selectedTap은 어떨까요?

문법적으로 selectedTap 가 더 적절하겠네요. 수정하겠습니다!

solar3070 · 2023-10-22T12:17:00Z

src/views/BlogPage/components/blogTab/index.tsx

+    REVIEW: {
+      title: '활동후기',
+      description: '회원들의 진솔한 후기를 통해 SOPT를 미리 만나보세요.  ',
+    },
+    ARTICLE: {
+      title: '아티클',
+      description: '회원들의 아티클을 통해 SOPT에서 얻은 인사이트를 확인해보세요.',
+    },


ask;

key 이름 대문자로 하신 이유가 궁금합니다!

key값은 고유하니까, 고유한 상수값은 대문자로 표기했어요!

f0rever0 added 15 commits October 18, 2023 11:32

feat : blog 탭 생성

7145e8a

style : change header style

8bbcfe5

feat : 블로그 탭 네비게이션

94a89ee

style : 전체적인 컬러 코드 변경

12efe7d

feat : blog 탭 생성

78c2717

style : change header style

80adbca

feat : 블로그 탭 네비게이션

c10ea97

style : 전체적인 컬러 코드 변경

9c116aa

Merge branch 'feat/#218-blog-tab-navigation' of https://github.com/so…

d9ea44c

…pt-makers/sopt.org-frontend into feat/#218-blog-tab-navigation

refactor : change to inline export

88ae4c1

refactor: apply color systems

4c2e5f6

style : header 선택한 탭에 밑줄

babab4f

fix : change constant color

85aa5ef

fix : blog tab mobile boder style

5c178a1

fix : blog tab description

8966d63

f0rever0 requested review from SeojinSeojin and solar3070 October 20, 2023 05:17

f0rever0 self-assigned this Oct 20, 2023

pull-request-size bot added the size/L label Oct 20, 2023

f0rever0 commented Oct 20, 2023

View reviewed changes

SeojinSeojin reviewed Oct 21, 2023

View reviewed changes

f0rever0 added 3 commits October 21, 2023 16:38

feat : blog 탭 생성

7dc7385

style : change header style

43776ca

feat : 블로그 탭 네비게이션

8f2e09a

f0rever0 added 12 commits October 21, 2023 16:38

style : 전체적인 컬러 코드 변경

dc3d174

feat : blog 탭 생성

51d8a5e

refactor : change to inline export

190d379

refactor: apply color systems

c02989e

style : header 선택한 탭에 밑줄

2064b1e

fix : change constant color

51d8f9a

fix : blog tab mobile boder style

d0557d7

fix : blog tab description

5c31a0d

style : change tab style

bb6d10a

Merge branch 'feat/#218-blog-tab-navigation' of https://github.com/so…

6058f69

…pt-makers/sopt.org-frontend into feat/#218-blog-tab-navigation

fix : color 상수 코드 사용

59cc555

style : footer color 상수로 바꾸기

7f2037a

solar3070 reviewed Oct 21, 2023

View reviewed changes

refactor : change folder name

74553a9

feat : tab description 어절 단위 줄바꿈

3f1bfb4

f0rever0 added 3 commits October 22, 2023 14:59

chore : sopt color libaray 적용

afe94b6

style : header 디자인 변경

dc96bc5

feat : add blog tab title hover style

5423574

solar3070 reviewed Oct 22, 2023

View reviewed changes

f0rever0 added 2 commits October 22, 2023 21:43

chore : blogTab 변수명 수정

1ed8aaf

Merge branch 'develop' into feat/#218-blog-tab-navigation

173801f

pull-request-size bot added size/XL and removed size/L labels Oct 23, 2023

f0rever0 merged commit d4c4beb into develop Oct 23, 2023
1 check passed

f0rever0 deleted the feat/#218-blog-tab-navigation branch October 23, 2023 08:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SP2] blog tab navigation #228

[SP2] blog tab navigation #228

f0rever0 commented Oct 20, 2023

f0rever0 Oct 20, 2023

SeojinSeojin Oct 21, 2023

f0rever0 Oct 21, 2023

SeojinSeojin Oct 21, 2023

f0rever0 Oct 21, 2023

SeojinSeojin Oct 21, 2023

f0rever0 Oct 21, 2023

SeojinSeojin Oct 21, 2023

SeojinSeojin Oct 21, 2023

f0rever0 Oct 21, 2023

SeojinSeojin Oct 21, 2023 •

edited

Loading

f0rever0 Oct 21, 2023

SeojinSeojin Oct 21, 2023

f0rever0 Oct 21, 2023

solar3070 left a comment

solar3070 Oct 21, 2023

f0rever0 Oct 21, 2023

solar3070 Oct 21, 2023

f0rever0 Oct 21, 2023

solar3070 Oct 21, 2023

f0rever0 commented Oct 21, 2023

solar3070 commented Oct 22, 2023 •

edited

Loading

solar3070 Oct 22, 2023

f0rever0 Oct 22, 2023

solar3070 Oct 22, 2023

f0rever0 Oct 22, 2023

[SP2] blog tab navigation #228

[SP2] blog tab navigation #228

Conversation

f0rever0 commented Oct 20, 2023

Summary

Screenshot

Comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeojinSeojin Oct 21, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

solar3070 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f0rever0 commented Oct 21, 2023

solar3070 commented Oct 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeojinSeojin Oct 21, 2023 •

edited

Loading

solar3070 commented Oct 22, 2023 •

edited

Loading