Skip to content

Commit

Permalink
setting: shadcn/ui 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
dvp-tae committed Oct 14, 2024
1 parent b982b05 commit cc43b95
Show file tree
Hide file tree
Showing 10 changed files with 274 additions and 40 deletions.
20 changes: 20 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
9 changes: 8 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,23 @@
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-progress": "^1.1.0",
"@tanstack/react-query": "^5.59.0",
"@types/node": "^22.7.4",
"autoprefixer": "^10.4.20",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.452.0",
"postcss": "^8.4.47",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"recoil": "^0.7.7",
"tailwindcss": "^3.4.13"
"tailwind-merge": "^2.5.4",
"tailwindcss": "^3.4.13",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/js": "^9.12.0",
Expand Down
26 changes: 26 additions & 0 deletions src/components/ui/progress.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
className
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
77 changes: 76 additions & 1 deletion src/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,77 @@
@tailwind utilities;

@layer base {
* {
@apply border-border;
}

@font-face {
font-family: "Pretendard";
src: url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css");
}

html {
font-size: 62.5%;
font-family: pretendard;
background-color: #f2f2f2;
}

body {
@apply bg-background text-foreground;
}

:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer components {
Expand Down Expand Up @@ -60,4 +122,17 @@
.body2-regular {
@apply text-[0.9375rem] font-normal leading-normal tracking-[-0.01em];
}
.body3-normal {
@apply text-[0.8125rem] font-normal leading-normal tracking-[-0.01em];
}
.body4-normal {
@apply text-[0.75rem] font-normal leading-normal tracking-[-0.01em];
}
}

@layer utilities {
.carousel-item-overlay::after {
content: "";
@apply absolute inset-0 bg-black rounded-lg bg-opacity-20;
}
}
6 changes: 6 additions & 0 deletions src/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
2 changes: 1 addition & 1 deletion src/libraries/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function AppContainer({ children }: PropsWithChildren) {
}, []);

return (
<div className="mx-auto max-w-[420px] min-h-real-screen bg-white">
<div className="mx-auto max-w-[450px] min-h-real-screen bg-[#1C1C1C]">
<ReactQuerySetting>
<RecoilRoot>{children}</RecoilRoot>
</ReactQuerySetting>
Expand Down
25 changes: 7 additions & 18 deletions src/pages/Login/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Progress } from "@/components/ui/progress";

export const LoginPage = () => {
return (
<div>
<div className="text-common-white">
<p className="display1-bold">폰트 크기 테스트</p>
<p className="display2-medium">폰트 크기 테스트</p>
<p className="title1-bold">폰트 크기 테스트</p>
Expand Down Expand Up @@ -41,28 +43,14 @@ export const LoginPage = () => {
<div className="w-10 h-10 bg-secondary-900"></div>
</div>
<div className="flex">
<div className="w-10 h-10 bg-background-light"></div>
<div className="w-10 h-10 bg-background-dark"></div>
<div className="w-10 h-10 bg-system-error"></div>
<div className="w-10 h-10 bg-system-positive"></div>
</div>
<div className="w-10 h-10 bg-error"></div>
<div className="flex">
<div className="w-10 h-10 bg-common-white"></div>
<div className="w-10 h-10 bg-common-black"></div>
</div>
<div className="flex">
<div className="w-10 h-10 bg-grayscale-0"></div>
<div className="w-10 h-10 bg-grayscale-10"></div>
<div className="w-10 h-10 bg-grayscale-20"></div>
<div className="w-10 h-10 bg-grayscale-30"></div>
<div className="w-10 h-10 bg-grayscale-40"></div>
<div className="w-10 h-10 bg-grayscale-50"></div>
<div className="w-10 h-10 bg-grayscale-60"></div>
<div className="w-10 h-10 bg-grayscale-70"></div>
<div className="w-10 h-10 bg-grayscale-80"></div>
<div className="w-10 h-10 bg-grayscale-90"></div>
<div className="w-10 h-10 bg-grayscale-100"></div>
</div>
<div className="flex">
<div className="flex mb-10">
<div className="w-10 h-10 bg-grayscale-0"></div>
<div className="w-10 h-10 bg-grayscale-10"></div>
<div className="w-10 h-10 bg-grayscale-20"></div>
Expand All @@ -75,6 +63,7 @@ export const LoginPage = () => {
<div className="w-10 h-10 bg-grayscale-90"></div>
<div className="w-10 h-10 bg-grayscale-100"></div>
</div>
<Progress value={33} />
</div>
);
};
72 changes: 54 additions & 18 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
Expand All @@ -11,17 +12,18 @@ export default {
},
colors: {
primary: {
900: "#48161B",
800: "#592325",
700: "#692F2C",
600: "#7A3B36",
500: "#86433C",
400: "#9C5E56",
300: "#B37971",
200: "#D19D96",
100: "#EFC1B9",
50: "#FFE2D7",
DEFAULT: "#692F2C",
900: "#B14E2D",
800: "#CC5932",
700: "#DB5F35",
600: "#E9663A",
500: "#F46C3E",
400: "#F47F59",
300: "#F59576",
200: "#F7B29D",
100: "#F9D0C3",
50: "#F8EBE9",
DEFAULT: "#E9663A",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
900: "#080998",
Expand All @@ -34,13 +36,11 @@ export default {
200: "#9CA2EE",
100: "#C4C6F5",
50: "#E6E7F3",
DEFAULT: "#717DE8",
DEFAULT: "#8F9AF8",
foreground: "hsl(var(--secondary-foreground))",
},
background: {
light: "#FBF9F3",
dark: "#241A16",
},
error: "#E95547",
background: "hsl(var(--background))",
system: { error: "#E95547", positive: "#8BAFFE" },
common: {
white: "#FFFFFF",
black: "#000000",
Expand All @@ -58,11 +58,47 @@ export default {
90: "#E9E9E9",
100: "#FFFFFF",
},
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
1: "hsl(var(--chart-1))",
2: "hsl(var(--chart-2))",
3: "hsl(var(--chart-3))",
4: "hsl(var(--chart-4))",
5: "hsl(var(--chart-5))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
minHeight: {
"real-screen": "calc(var(--vh) * 100)",
},
},
plugins: [],
plugins: [require("tailwindcss-animate")],
};
8 changes: 7 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,11 @@
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Loading

0 comments on commit cc43b95

Please sign in to comment.