[TASK-39] style: 전역적으로 사용될 폰트, 색상 토큰 적용 / Navbar, Footer 생성 및 반응형 적용 #7

dahyeo-n · 2024-12-13T21:20:26Z

📝 작업 내용

Storybook 설치 및 세팅이 추가되었습니다.
프로젝트에 공통적으로 사용되는 컴포넌트 스타일의 일관성을 위한 작업을 하였습니다.
2-1. 폰트, 행간/자간, 색상 토큰을 전역적으로 적용
2-2. 아이콘을 쉽고 효율적으로 적용할 수 있도록 시스템 형성 (+ 아이콘 파일, 사이즈 등 따로 관리)
2-3. 반응형이 적용된 Navbar, Footer 구축 (Navbar는 스크롤을 내려도 보이도록 화면 상단에 고정)

📸 스크린샷 (선택)

💬 리뷰 요구사항 (선택)

Storybook 세팅과 폴더 구조 확인하시고, 수정할 사항 있으면 알려주세요!
비효율적인 코드 or 필요 없는 코드가 있다면 알려주세요.
주석은 폰트, 행간/자간 관련한 것만 달아놨어요! 추후 수정될 수 있기에 작성해두었는데 거슬리면 얘기해주세요 :)

SangWoo9734

리뷰 완료했습니다 코멘트 한번 확인 부탁드립니다!

SangWoo9734 · 2024-12-15T05:26:04Z

tailwind.config.ts

+      spacing: {
+        '4.5': '18px',
+        '7.5': '30px',
+        '15': '60px',
+      },


spacing은 gap에 활용되는 프리셋일까요??

iconSizes 파일에서 아이콘 사이즈 정의 시 사용해요!
Tailwind CSS에서는 spacing 키워드를 통해 정의된 값을 margin, padding, width, height 등의 유틸리티 클래스에서 활용해서 spacing 키워드로 작성해뒀어요!

SangWoo9734 · 2024-12-15T05:32:47Z

tailwind.config.ts

+        background: {
+          base: '#101010',
+          title: '#FFFFFF',
+          subtitle: '#F5F5F5',
+        },


피그마와 비교하면서 리뷰진행하고 있는데, 재가 생각하기에 title 색상과 background는 구분되어도 될 것 같다는 생각이 들어서 의견 남깁니다..!

아 그렇겠네요. 좋은 제안 감사해요 😮

위 사진처럼 background에는 base만 남겨두고, 나머지는 따로 구분했어요! className='text-title' 이런 식으로 사용하시면 됩니당

SangWoo9734 · 2024-12-15T05:39:25Z

src/styles/globals.css

@@ -1,3 +1,98 @@
 @tailwind base;


typography에서 title 요소는 없어보이는데 빠진 이유가 있을까요?

어 어제까지 없었는데 갑자기 생겨있네요??
전달 받은 게 없어서 몰랐습니다,, TITLE/L 추가할게요!

SangWoo9734 · 2024-12-15T05:40:10Z

src/styles/globals.css

+  }
+
+  h1 {
+    font-size: 1.75rem; /* 28px */


주석까지... 감사합니다 ㅎㅎ

히히 추후에 최종 확인 및 수정 후, 필요 없어지면 주석 한꺼번에 지울게요!

SangWoo9734 · 2024-12-15T05:43:35Z

src/app/layout/AppShell.tsx

@@ -0,0 +1,14 @@
+import Footer from '@/components/Footer/Footer';


저는 특정 페이지를 구성하기 위해 활용되는 요소들은 모두 컴포넌트 쪽으로 뺴는 경향이 있어서 AppShell이 컴포넌트에 에 있는 건 어떨까 의견드립니다!

넵 AppShell 컴포넌트 파일을 components 폴더로 이동시켰어요.

그럼 폴더 구조가 다음과 같이 되는데 맞을까요?

AppShell: components/Layout/AppShell

Navbar, Footer: components/Navbar & components/Footer

SangWoo9734 · 2024-12-15T05:45:37Z

src/app/layout.tsx

 import ReactQueryProvider from './ReactQueryProvider';

+import AppShell from './layout/AppShell';
+
+const PretendardRegular = localFont({


globalcss로 적용하는 거랑 localfont로 className으로 넘겨주는건 무슨 차이가 있나요? 궁금해서 질문드립니다!

Next.js에서 제공하는 next/font 를 사용하면 폰트를 최적으로 로드할 수 있어요. 모든 폰트 파일을 자동으로 최적화하고 성능을 개선해줘요.

next/font/local 은 웹 폰트 다운로드 시간을 절약하고, 오프라인 사용 가능성을 제공해요. 자세한 내용은 Next.js의 공식 문서 내용 중 Font Optimization (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) 에서 확인하실 수 있어요 :)

SangWoo9734 · 2024-12-15T05:46:37Z

src/app/page.tsx

@@ -1,3 +1,90 @@
+'use client';


해당 페이지에 대한 변경 사항은 pr에서 빠져도 될 것 같습니다!

작업 해주신 내용을 한눈에 확인할 수 있어서 편하긴 했습니다 ㅎㅎ

네! 감사해여
파일 지우면 해당 컴포넌트 내에 작성하신 다른 댓글도 지워질 것 같아서 댓글 확인하시면 src/app/page.tsx 는 PR에서 제외할게요!

SangWoo9734 · 2024-12-15T05:52:41Z

src/components/Footer/Footer.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image';


개인적인 취향이긴한데 디렉토리 내에서 export하는 요소가 하나밖에 없으면 Footer/index.tsx로 활용하는 편입니다..! 이렇게 했을 떄 import 하는 쪽에섯 ~/Footer만 사용해도 활용이 가능해서 import 영역이 깔끔하게 관리할 수 있었습니다! 그래서 Footer/index.tsx로 관리하는게 어떨까 의견드립니다!

다만 위 예시는 react 프로젝트이기 떄문에 next에서는 디렉토리 구조가 중요하다보니 제가 간과하고 말씀드린점 있으시면 알려주세요!

알아보니 Next.js의 App Router를 사용해도 제안주신 방법을 사용할 수 있네요!
import가 지저분해서 고민이었는데 잘 짚어주시고 좋은 방법을 알려주셔서 감사해요 👍🏻✨

반영해서 위 사진과 같이 적용하였습니다!

SangWoo9734 · 2024-12-15T06:10:42Z

src/app/page.tsx

+          </div>
+        ))}
+
+        <h1 className='text-gray-50 text-4xl'>타이틀 텍스트</h1>


title, subtitle이런 요소들도 프리셋으로 만들어두는 것은 어떤가요?

프리셋으로 만들어두자고 하시는 게 className에 넣어서 사용할 수 있게끔 만드는 걸 의미하는 게 맞을까요? title은 <h_> 태그로 사용 가능하고, subtitle은 따로 태그 생성이 불가능해 className에 넣어서 사용 가능하게 처리해뒀어요! 처리한 내용은 globals.css 파일에서 확인 가능하세요 :)

해당 요소에 h1 태그와 텍스트 사이즈 조절 클래스가 같이 사용되고 있어서 따로 설정값을 만들지 않으신 걸로 오해했습니다..! 말씀해주신 내용 global.css 에서 확인했습니다! 따로 수정할 필요는 없을 것 같습니다!

SangWoo9734

다현님 추가 커밋에 대한 리뷰 완료했습니다! 수고 많으셨어요! 일부 개인적인 생각이 포함된 리뷰도 있어서 제가 잘못 알고 있는 부분이 있을 수 있습니다!

SangWoo9734 · 2024-12-18T07:14:01Z

tailwind.config.ts

+        'custom-dark': {
+          extend: 'dark', // 다크 모드 기본값 상속받음
+          colors: {
+            background: '#101010', // 다크 모드 배경색
+            foreground: '#FFFFFF', // 텍스트 기본 색상
+          },
+        },


배경색이 중복 되는 것 같아 다음과 같이 color 변수화 해놓은 부분을 위로 빼서 공통으로 사용할 수 있게 하는 방식은 어떨까 제안드립니다!

import { nextui } from '@nextui-org/react'; const colors = { main: '#6304FF', system: { error: '#FF2828', success: '#3D6EFF', }, black: '#111111', white: '#FFFFFF', gray: { 900: '#222222', 800: '#2B2B2B', 700: '#616161', 600: '#757575', 500: '#9E9E9E', 400: '#B5B5B5', 300: '#E0E0E0', 200: '#EEEEEE', 100: '#F5F5F5', 50: '#FAFAFA', }, title: '#FFFFFF', subtitle: '#F5F5F5', background: { base: '#101010', }, }; export default { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}', ], theme: { extend: { fontFamily: { sans: ['var(--font-geist-sans)'], }, colors, // 테마 색상 재활용 spacing: { '4.5': '18px', '7.5': '30px', '15': '60px', }, }, }, plugins: [ nextui({ themes: { 'custom-dark': { extend: 'dark', colors: { background: colors.background.base, // 재활용 foreground: colors.white, // 재활용 }, }, }, }), ], };

감사합니다 이것도 다음 PR에서 반영할게요!

SangWoo9734 · 2024-12-18T07:20:21Z

src/components/Input/EmailInput.tsx

+    }
+  };
+
+  const isInvalid = React.useMemo(() => {


useMemo만 Import 해오는게 좋을 것 같습니다!

넵 React. 빼는 걸 잊었어서 아까 빼서 다시 커밋했습니다!
밀린 커밋이 많아서 이건 다음 PR에 반영할게요!

SangWoo9734 · 2024-12-18T07:21:20Z

src/components/Input/EmailInput.tsx

+  const isInvalid = React.useMemo(() => {
+    if (value === '') return false;
+
+    return !validateEmail(value);


별도 함수로 분리하신 이유가 있을까요?

useMemo 때문에 따로 뺐는데 의미가 없어져서 합치도록 하겠습니다~!

SangWoo9734 · 2024-12-18T07:32:29Z

src/components/Input/EmailInput.tsx

+    } else {
+      setMessage('');
+    }
+  }, [value, isInvalid]);


inValid의 useMemo랑 useEffect 둘다 value에 의존하고 있는 것으로 보입니다. 제가 이해하기로는 useEffect가 동작할때 useMemo가 캐싱값을 버리고 다시 연산에 들어갈 것 같아 굳이 useMemo를 사용할 필요가 없어보입니다.

넵 이것도 반영해두겠습니다

SangWoo9734 · 2024-12-18T07:35:43Z

src/components/Input/EmailInput.tsx

@@ -43,7 +54,7 @@ const EmailInput = () => {
    } else {
      setMessage('');
    }
-  }, [value, isInvalid]);
+  }, [value, isInvalid, mode]);


Mode가 의존성 배열에 포함되는 이유가 있을까요? 현재 컴포넌트 내에서 별도 조작이 있지않아보이고, props기 때문에 변할 염려가 없어 보입니다..!

앗 ㅠ 네 잘못 넣었네요. 빼도록 할게요!

dahyeo-n added 9 commits December 11, 2024 03:01

setting: Storybook 설치 및 세팅

fc543c2

feat: 폰트, 행간/자간을 전역적으로 적용

4f5cb54

style: 전역적으로 사용될 색상 토큰 적용

a15215f

style: 일관된 아이콘 디자인 시스템 스타일 추가

09ba9da

chore: 로고와 심볼 파일 추가

63586ec

style: Navbar, Footer 생성

f92dde4

style: 스크롤을 내려도 Navbar가 보이도록 화면 상단에 고정

b17ada3

style: Navbar 반응형 적용

66bdc77

style: Footer 반응형 적용

effe5f4

dahyeo-n added chore 그 외 기타 수정 (ex. 오타 등) style 사용자 UI 디자인 변경 setting package.json 파일 수정 및 패키지 설치 Priority: High 우선순위 높음 labels Dec 13, 2024

dahyeo-n requested a review from SangWoo9734 December 13, 2024 21:20

dahyeo-n added 2 commits December 14, 2024 07:17

chore: Prettier 설정 업데이트 (JSX 속성에 작은따옴표 사용)

5bd70b9

chore: 모든 파일에 Prettier 규칙 적용 (작은 따옴표로 수정)

c77bf1f

SangWoo9734 reviewed Dec 15, 2024

View reviewed changes

SangWoo9734 assigned SangWoo9734 and dahyeo-n and unassigned SangWoo9734 Dec 15, 2024

SangWoo9734 approved these changes Dec 15, 2024

View reviewed changes

dahyeo-n added 9 commits December 15, 2024 17:57

chore: background 색상과 title 색상을 따로 구분

f62cb4a

style: title-l 스타일 추가

7e8724c

move: AppShell 관련된 파일의 폴더 구조 변경

d778416

chore: 메인 페이지에서 디자인 시스템 관련 테스트 한 코드 삭제

c13a30e

setting: NextUI 설치 및 세팅

eb317ff

style: 다크모드 색상 커스텀 및 적용

b9d61d7

style: Navbar, Footer 배경 색상 변경

2bb2103

chore: rafce 스니펫 형태로 변경

7f1cb62

style: Input 컴포넌트에 사용할 custom-label 스타일 추가

5e2cfef

dahyeo-n added 7 commits December 17, 2024 14:59

style: EmailInput CSS 추가

1308ad7

feat: EmailInput에 유효성 검사 로직 추가

176fc6f

feat: mode가 sign-up이면 이메일 중복 여부 검사, sign-in이면 가입 여부 확인

e2bbcef

feat: EmailInput 입력 필드 내용을 전부 지울 수 있는 onClear 기능 추가

72ca9a6

style: Navbar, Footer에 적용된 폰트와 아이콘 스타일 수정

11b161b

feat: Icon이 onClick 이벤트도 prop으로 받을 수 있도록 수정

ed6550b

chore: <메인 페이지> 컴포넌트를 rafce 스니펫 형태로 변경

4f5c277

SangWoo9734 reviewed Dec 18, 2024

View reviewed changes

Merge branch 'dev' into feature/design-system

8448053

dahyeo-n merged commit a239525 into dev Dec 18, 2024
0 of 2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TASK-39] style: 전역적으로 사용될 폰트, 색상 토큰 적용 / Navbar, Footer 생성 및 반응형 적용 #7

[TASK-39] style: 전역적으로 사용될 폰트, 색상 토큰 적용 / Navbar, Footer 생성 및 반응형 적용 #7

dahyeo-n commented Dec 13, 2024 •

edited

Loading

SangWoo9734 left a comment

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024 •

edited

Loading

dahyeo-n Dec 15, 2024 •

edited

Loading

SangWoo9734 Dec 15, 2024

dahyeo-n Dec 15, 2024

SangWoo9734 Dec 15, 2024

SangWoo9734 left a comment

SangWoo9734 Dec 18, 2024

dahyeo-n Dec 18, 2024

SangWoo9734 Dec 18, 2024

dahyeo-n Dec 18, 2024

SangWoo9734 Dec 18, 2024

dahyeo-n Dec 18, 2024 •

edited

Loading

SangWoo9734 Dec 18, 2024

dahyeo-n Dec 18, 2024

SangWoo9734 Dec 18, 2024

dahyeo-n Dec 18, 2024

		@@ -0,0 +1,14 @@
		import Footer from '@/components/Footer/Footer';

[TASK-39] style: 전역적으로 사용될 폰트, 색상 토큰 적용 / Navbar, Footer 생성 및 반응형 적용 #7

[TASK-39] style: 전역적으로 사용될 폰트, 색상 토큰 적용 / Navbar, Footer 생성 및 반응형 적용 #7

Conversation

dahyeo-n commented Dec 13, 2024 • edited Loading

📝 작업 내용

📸 스크린샷 (선택)

💬 리뷰 요구사항 (선택)

SangWoo9734 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

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

SangWoo9734 Dec 15, 2024 • edited Loading

Choose a reason for hiding this comment

dahyeo-n Dec 15, 2024 • 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

SangWoo9734 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

dahyeo-n Dec 18, 2024 • 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

Choose a reason for hiding this comment

dahyeo-n commented Dec 13, 2024 •

edited

Loading

SangWoo9734 Dec 15, 2024 •

edited

Loading

dahyeo-n Dec 15, 2024 •

edited

Loading

dahyeo-n Dec 18, 2024 •

edited

Loading