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.

Sign up for GitHub

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

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

Merged
merged 28 commits into from
Dec 18, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
fc543c2
setting: Storybook 설치 및 세팅
dahyeo-n Dec 10, 2024
4f5cb54
feat: 폰트, 행간/자간을 전역적으로 적용
dahyeo-n Dec 11, 2024
a15215f
style: 전역적으로 사용될 색상 토큰 적용
dahyeo-n Dec 11, 2024
09ba9da
style: 일관된 아이콘 디자인 시스템 스타일 추가
dahyeo-n Dec 11, 2024
63586ec
chore: 로고와 심볼 파일 추가
dahyeo-n Dec 12, 2024
f92dde4
style: Navbar, Footer 생성
dahyeo-n Dec 13, 2024
b17ada3
style: 스크롤을 내려도 Navbar가 보이도록 화면 상단에 고정
dahyeo-n Dec 13, 2024
66bdc77
style: Navbar 반응형 적용
dahyeo-n Dec 13, 2024
effe5f4
style: Footer 반응형 적용
dahyeo-n Dec 13, 2024
5bd70b9
chore: Prettier 설정 업데이트 (JSX 속성에 작은따옴표 사용)
dahyeo-n Dec 13, 2024
c77bf1f
chore: 모든 파일에 Prettier 규칙 적용 (작은 따옴표로 수정)
dahyeo-n Dec 14, 2024
f62cb4a
chore: background 색상과 title 색상을 따로 구분
dahyeo-n Dec 15, 2024
7e8724c
style: title-l 스타일 추가
dahyeo-n Dec 15, 2024
d778416
move: AppShell 관련된 파일의 폴더 구조 변경
dahyeo-n Dec 15, 2024
c13a30e
chore: 메인 페이지에서 디자인 시스템 관련 테스트 한 코드 삭제
dahyeo-n Dec 15, 2024
eb317ff
setting: NextUI 설치 및 세팅
dahyeo-n Dec 16, 2024
b9d61d7
style: 다크모드 색상 커스텀 및 적용
dahyeo-n Dec 16, 2024
2bb2103
style: Navbar, Footer 배경 색상 변경
dahyeo-n Dec 16, 2024
7f1cb62
chore: rafce 스니펫 형태로 변경
dahyeo-n Dec 17, 2024
5e2cfef
style: Input 컴포넌트에 사용할 custom-label 스타일 추가
dahyeo-n Dec 17, 2024
1308ad7
style: EmailInput CSS 추가
dahyeo-n Dec 17, 2024
176fc6f
feat: EmailInput에 유효성 검사 로직 추가
dahyeo-n Dec 17, 2024
e2bbcef
feat: mode가 sign-up이면 이메일 중복 여부 검사, sign-in이면 가입 여부 확인
dahyeo-n Dec 17, 2024
72ca9a6
feat: EmailInput 입력 필드 내용을 전부 지울 수 있는 onClear 기능 추가
dahyeo-n Dec 17, 2024
11b161b
style: Navbar, Footer에 적용된 폰트와 아이콘 스타일 수정
dahyeo-n Dec 17, 2024
ed6550b
feat: Icon이 onClick 이벤트도 prop으로 받을 수 있도록 수정
dahyeo-n Dec 17, 2024
4f5c277
chore: <메인 페이지> 컴포넌트를 rafce 스니펫 형태로 변경
dahyeo-n Dec 17, 2024
8448053
Merge branch 'dev' into feature/design-system
dahyeo-n Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@tanstack/react-query": "^5.62.3",
"framer-motion": "^11.14.4",
"next": "15.0.4",
"next-themes": "^0.4.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"zustand": "^5.0.2"
Expand Down
14 changes: 14 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 11 additions & 3 deletions src/components/Layout/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,22 @@ import Footer from '@/components/Footer';
import Navbar from '@/components/Navbar';

import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';

const AppShell = ({ children }: { children: React.ReactNode }) => {
return (
<>
<NextUIProvider>
<Navbar />
<main>{children}</main>
<Footer />
<NextThemesProvider
attribute='class'
value={{
dark: 'custom-dark',
}}
>
<Navbar />
<main>{children}</main>
<Footer />
</NextThemesProvider>
</NextUIProvider>
</>
);
Expand Down
15 changes: 13 additions & 2 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,17 @@ export default {
},
},
},
darkMode: 'class',
plugins: [nextui()],
plugins: [
nextui({
themes: {
'custom-dark': {
extend: 'dark', // 다크 모드 기본값 상속받음
colors: {
background: '#101010', // 다크 모드 배경색
foreground: '#FFFFFF', // 텍스트 기본 색상
},
},
Comment on lines +53 to +59
Copy link
Collaborator

Choose a reason for hiding this comment

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

배경색이 중복 되는 것 같아 다음과 같이 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, // 재활용
          },
        },
      },
    }),
  ],
};

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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

},
}),
],
} satisfies Config;