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

[Feat] Icon 컴포넌트 추가 #48

Merged
merged 10 commits into from
Jan 9, 2025
Merged

[Feat] Icon 컴포넌트 추가 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
163e943
feat(packages/ui): Icon 컴포넌트 추가
kongnayeon Jan 3, 2025
24cce89
fix(packages/ui): 아이콘 속성 camelCase로 수정
kongnayeon Jan 3, 2025
6f4c12d
feat(packages/ui): svg 파일 import 스크립트, svgr 플러그인 설정 추가
kongnayeon Jan 8, 2025
95c2db2
feat(packages/ui): Icon 컴포넌트
kongnayeon Jan 8, 2025
23ed120
fix(packages/theme): color 뎁스 낮추기
minseong0324 Jan 9, 2025
762a8e7
[Feat] Spacing 컴포넌트 추가 (#49)
kongnayeon Jan 9, 2025
fb3b6b3
fix: resolve conflicts
kongnayeon Jan 9, 2025
e5ef74c
fix(packages/theme): 컬러 토큰 변경에 따른 dark, theme 토큰 변경
kongnayeon Jan 9, 2025
df39275
fix: resolve conflicts
kongnayeon Jan 9, 2025
5723efc
chore: 주석 제거
kongnayeon Jan 9, 2025
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
5 changes: 3 additions & 2 deletions apps/web/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
transpilePackages: ['@repo/ui', '@repo/theme'],
};

export default withVanillaExtract(nextConfig);
2 changes: 2 additions & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "web",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
Expand All @@ -19,6 +20,7 @@
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@repo/theme": "workspace:*",
"@repo/ui": "workspace:*",
"@types/node": "^20.11.24",
"@types/react": "18.3.0",
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { Metadata } from 'next';
import localFont from 'next/font/local';
import './globals.css';
import '@repo/theme/styles';
//import '@repo/ui/styles';
import '@repo/ui/styles';
import { ThemeProvider } from '@repo/theme';

const geistSans = localFont({
Expand Down
9 changes: 8 additions & 1 deletion apps/web/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import { Icon } from '@repo/ui';

export default function Home() {
return <div>웹 1팀 파이팅!</div>;
return (
<div>
웹 1팀 파이팅!
<Icon width={100} height={100} name="stack" fill="blue" />
</div>
);
}
3 changes: 3 additions & 0 deletions packages/theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"name": "@repo/theme",
"version": "0.0.0",
"private": true,
"main": "./dist/index.js",
"type": "module",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
Expand Down
58 changes: 29 additions & 29 deletions packages/theme/src/themes/dark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@ import type { ThemeContract } from './contract';

export const darkTheme: ThemeContract = {
colors: {
primary: tokens.colors.primary.green200,
primary400to200: tokens.colors.primary.green200,
primaryHover: tokens.colors.primary.green100,
primary: tokens.colors.green200,
primary400to200: tokens.colors.green200,
primaryHover: tokens.colors.green100,

warning: tokens.colors.semantic.warning300,
warning: tokens.colors.warning300,

grey: tokens.colors.grey[1000],
grey25: tokens.colors.grey[950],
grey50: tokens.colors.grey[900],
grey50B: tokens.colors.grey[900],
grey100: tokens.colors.grey[800],
grey200: tokens.colors.grey[700],
grey300: tokens.colors.grey[600],
grey400: tokens.colors.grey[500],
grey500: tokens.colors.grey[400],
grey600: tokens.colors.grey[300],
grey700: tokens.colors.grey[200],
grey800: tokens.colors.grey[100],
grey900: tokens.colors.grey[50],
grey950: tokens.colors.grey[25],
grey1000: tokens.colors.grey[0],
grey: tokens.colors.grey1000,
grey25: tokens.colors.grey950,
grey50: tokens.colors.grey900,
grey50B: tokens.colors.grey900,
grey100: tokens.colors.grey800,
grey200: tokens.colors.grey700,
grey300: tokens.colors.grey600,
grey400: tokens.colors.grey500,
grey500: tokens.colors.grey400,
grey600: tokens.colors.grey300,
grey700: tokens.colors.grey200,
grey800: tokens.colors.grey100,
grey900: tokens.colors.grey50,
grey950: tokens.colors.grey25,
grey1000: tokens.colors.grey0,

grey0to950: tokens.colors.grey[950],
grey0to800: tokens.colors.grey[800],
grey0to700: tokens.colors.grey[700],
grey25to900: tokens.colors.grey[900],
grey25to800: tokens.colors.grey[800],
grey50Bto800: tokens.colors.grey[800],
grey100to700: tokens.colors.grey[700],
grey100to700Hover: tokens.colors.grey[600],
grey950toPrimary: tokens.colors.primary.green200,
grey1000to1000: tokens.colors.grey[1000],
grey0to950: tokens.colors.grey950,
grey0to800: tokens.colors.grey800,
grey0to700: tokens.colors.grey700,
grey25to900: tokens.colors.grey900,
grey25to800: tokens.colors.grey800,
grey50Bto800: tokens.colors.grey800,
grey100to700: tokens.colors.grey700,
grey100to700Hover: tokens.colors.grey600,
grey950toPrimary: tokens.colors.green200,
grey1000to1000: tokens.colors.grey1000,
},
space: tokens.spacing,
borderRadius: tokens.radius,
Expand Down
58 changes: 29 additions & 29 deletions packages/theme/src/themes/light.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@ import type { ThemeContract } from './contract';

export const lightTheme: ThemeContract = {
colors: {
primary: tokens.colors.primary.green200,
primary400to200: tokens.colors.primary.green400,
primaryHover: tokens.colors.primary.green300,
primary: tokens.colors.green200,
primary400to200: tokens.colors.green400,
primaryHover: tokens.colors.green300,

warning: tokens.colors.semantic.warning500,
warning: tokens.colors.warning500,

grey: tokens.colors.grey[0],
grey25: tokens.colors.grey[25],
grey50: tokens.colors.grey[50],
grey50B: tokens.colors.grey['50B'],
grey100: tokens.colors.grey[100],
grey200: tokens.colors.grey[200],
grey300: tokens.colors.grey[300],
grey400: tokens.colors.grey[400],
grey500: tokens.colors.grey[500],
grey600: tokens.colors.grey[600],
grey700: tokens.colors.grey[700],
grey800: tokens.colors.grey[800],
grey900: tokens.colors.grey[900],
grey950: tokens.colors.grey[950],
grey1000: tokens.colors.grey[1000],
grey: tokens.colors.grey0,
grey25: tokens.colors.grey25,
grey50: tokens.colors.grey50,
grey50B: tokens.colors.grey50B,
grey100: tokens.colors.grey100,
grey200: tokens.colors.grey200,
grey300: tokens.colors.grey300,
grey400: tokens.colors.grey400,
grey500: tokens.colors.grey500,
grey600: tokens.colors.grey600,
grey700: tokens.colors.grey700,
grey800: tokens.colors.grey800,
grey900: tokens.colors.grey900,
grey950: tokens.colors.grey950,
grey1000: tokens.colors.grey1000,

grey0to950: tokens.colors.grey[0],
grey0to800: tokens.colors.grey[0],
grey0to700: tokens.colors.grey[0],
grey25to900: tokens.colors.grey[25],
grey25to800: tokens.colors.grey[25],
grey50Bto800: tokens.colors.grey['50B'],
grey100to700: tokens.colors.grey[100],
grey100to700Hover: tokens.colors.grey[200],
grey950toPrimary: tokens.colors.grey[950],
grey1000to1000: tokens.colors.grey[1000],
grey0to950: tokens.colors.grey0,
grey0to800: tokens.colors.grey0,
grey0to700: tokens.colors.grey0,
grey25to900: tokens.colors.grey25,
grey25to800: tokens.colors.grey25,
grey50Bto800: tokens.colors.grey50B,
grey100to700: tokens.colors.grey100,
grey100to700Hover: tokens.colors.grey200,
grey950toPrimary: tokens.colors.grey950,
grey1000to1000: tokens.colors.grey1000,
Comment on lines +28 to +37
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

색상 전환 토큰의 네이밍 컨벤션 및 구조 개선 필요

현재 색상 전환을 나타내는 토큰들의 네이밍이 직관적이지 않고, 실제 구현된 값은 단일 색상을 참조하고 있습니다.

다음 사항들을 개선해주세요:

  1. 전환 효과가 필요한 경우 CSS 변수나 gradient 함수를 사용하는 것이 더 적절할 수 있습니다
  2. 단일 색상을 참조하는 경우, 해당 색상의 용도나 컨텍스트를 명확히 표현하는 이름을 사용해주세요

예시:

- grey0to950: tokens.colors.grey0,
+ backgroundDefault: tokens.colors.grey0,

Committable suggestion skipped: line range outside the PR's diff.

},
space: tokens.spacing,
borderRadius: tokens.radius,
Expand Down
52 changes: 24 additions & 28 deletions packages/theme/src/tokens/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
export const colors = {
primary: {
green100: '#F1FFB5',
green200: '#E6FF79',
green300: '#D0F141',
green400: '#D2F634',
},
semantic: {
warning300: '#FF724E',
warning500: '#FF3300',
blue: '#1662E3',
},
grey: {
0: '#FFFFFF',
25: '#F7F9FB',
50: '#EAEFF4',
'50B': '#E5EEF7',
100: '#D8E3ED',
200: '#C2CDDE',
300: '#A3ADBD',
400: '#788391',
500: '#5A6471',
600: '#3F4750',
700: '#293342',
800: '#1D222C',
900: '#14181F',
950: '#0E0F15',
1000: '#000000',
},
green100: '#F1FFB5',
green200: '#E6FF79',
green300: '#D0F141',
green400: '#D2F634',

kongnayeon marked this conversation as resolved.
Show resolved Hide resolved
warning300: '#FF724E',
warning500: '#FF3300',
blue: '#1662E3',

grey0: '#FFFFFF',
grey25: '#F7F9FB',
grey50: '#EAEFF4',
grey50B: '#E5EEF7',
grey100: '#D8E3ED',
grey200: '#C2CDDE',
grey300: '#A3ADBD',
grey400: '#788391',
grey500: '#5A6471',
grey600: '#3F4750',
grey700: '#293342',
grey800: '#1D222C',
grey900: '#14181F',
grey950: '#0E0F15',
grey1000: '#000000',
} as const;
44 changes: 30 additions & 14 deletions packages/ui/esbuild.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,40 @@
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
import esbuild from 'esbuild';
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
import svgr from 'esbuild-plugin-svgr';
import { preserveDirectivesPlugin } from 'esbuild-plugin-preserve-directives';
import path from 'path';

const outdir = path.join(process.cwd(), 'dist');

const buildOptions = {
entryPoints: ['src/index.ts'],
bundle: true,
platform: 'node',
plugins: [
svgr(),
vanillaExtractPlugin(),
preserveDirectivesPlugin({
directives: ['use client', 'use strict'],
include: /\.(js|ts|jsx|tsx)$/,
exclude: /node_modules/,
}),
],
loader: { '.css': 'file' },
outdir,
external: ['react'],
};

esbuild
.build({
entryPoints: ['./src/index.ts'],
bundle: true,
plugins: [
vanillaExtractPlugin(),
preserveDirectivesPlugin({
directives: ['use client', 'use strict'],
include: /\.(js|ts|jsx|tsx)$/,
exclude: /node_modules/,
}),
],
...buildOptions,
format: 'esm',
loader: { '.css': 'file' },
outdir,
external: ['react', 'react-dom'],
})
.catch(() => process.exit(1));

// TODO commonjs에서 빌드 오류 나는 현상
// esbuild
// .build({
// ...buildOptions,
// format: 'cjs',
// })
// .catch(() => process.exit(1));
4 changes: 4 additions & 0 deletions packages/ui/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
16 changes: 13 additions & 3 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"name": "@repo/ui",
"version": "0.0.0",
"private": true,
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
Expand All @@ -12,7 +15,9 @@
"scripts": {
"build": "tsc && node esbuild.config.mjs",
"dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch",
"lint": "eslint . --max-warnings 0"
"lint": "eslint . --max-warnings 0",
"build:icons": "esbuild src/scripts/generate-icon-map.ts --bundle --platform=node --outdir=dist/scripts",
"generate:icons": "pnpm run build:icons && node dist/scripts/generate-icon-map.js"
},
"dependencies": {
"@repo/theme": "workspace:^",
Expand All @@ -21,12 +26,17 @@
"react": "^18"
},
"devDependencies": {
"@repo/theme": "workspace:*",
"@types/node": "^20.11.24",
"@types/react": "^18.2.0",
"@vanilla-extract/esbuild-plugin": "^2.3.5",
"esbuild": "^0.21.0",
"esbuild-plugin-preserve-directives": "^0.0.11"
"esbuild-plugin-preserve-directives": "^0.0.11",
"esbuild-plugin-svgr": "^3.1.0",
"ts-node": "^10.9.2"
Comment on lines +29 to +36
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

@repo/theme 의존성 중복 및 esbuild 호환성 이슈

  • @repo/theme가 dependencies와 devDependencies 모두에 정의되어 있습니다. devDependencies에서 제거하고 dependencies의 "workspace:^" 버전만 유지하는 것이 좋습니다.
  • esbuild v0.21.0으로의 다운그레이드가 확인되었습니다. 현재 사용 중인 플러그인들(@vanilla-extract/esbuild-plugin, esbuild-plugin-preserve-directives, esbuild-plugin-svgr)과의 호환성을 확인해주세요.
🔗 Analysis chain

의존성 버전 충돌 가능성을 확인해주세요.

@repo/theme가 dependencies와 devDependencies 모두에 정의되어 있으며, 버전 지정 방식이 다릅니다:

  • dependencies: "workspace:^"
  • devDependencies: "workspace:*"

또한, esbuild의 버전이 다운그레이드(^0.24.0 → ^0.21.0)되었습니다.

다음 스크립트로 의존성 충돌 여부를 확인해보세요:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for dependency conflicts and compatibility issues

# Check for duplicate dependencies
jq -r '.dependencies + .devDependencies | keys[]' package.json | sort | uniq -d

# Check esbuild compatibility with plugins
jq -r '.devDependencies | with_entries(select(.key | startswith("esbuild")))' package.json

Length of output: 177

Script:

#!/bin/bash
# Find the ui package.json and show its contents
fd --type f "package.json" packages/ui/ --exec cat {}

Length of output: 1298

},
"peerDependencies": {
"react": "^18.2.0"
"react": "^18",
"react-dom": "^18"
}
}
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowBottom.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowLeft.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowRight.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowTop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconCalendar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconChat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconCheck.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconCheckCalendar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/ui/src/assets/icons/IconDocument.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading