From eb609f66bafb9cb75515fafe3db4dcc29b1e905f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=B8=EB=B9=88=20=EA=B6=8C?= Date: Mon, 23 Feb 2026 23:56:09 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20CSS=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20Tailwind?= =?UTF-8?q?=20=EA=B8=B0=EB=B0=98=20UI=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=9D=BC=EC=9B=90=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- postcss.config.js | 1 + src/index.css | 1 - src/pages/home/home.css | 68 -------------------------------- src/pages/home/home.tsx | 42 ++++++++++++-------- src/shared/ui/button/button.css | 30 -------------- src/widgets/header/ui/header.css | 32 --------------- src/widgets/header/ui/header.tsx | 17 +++++--- 7 files changed, 38 insertions(+), 153 deletions(-) delete mode 100644 src/pages/home/home.css delete mode 100644 src/shared/ui/button/button.css delete mode 100644 src/widgets/header/ui/header.css diff --git a/postcss.config.js b/postcss.config.js index c2ddf74..f69c5d4 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { "@tailwindcss/postcss": {}, + autoprefixer: {}, }, }; diff --git a/src/index.css b/src/index.css index f91c1a4..e2bfe43 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,3 @@ -@import "tailwindcss"; /* ==================================== 아주대학교 웹 서비스 디자인 시스템 diff --git a/src/pages/home/home.css b/src/pages/home/home.css deleted file mode 100644 index 2c9a9e0..0000000 --- a/src/pages/home/home.css +++ /dev/null @@ -1,68 +0,0 @@ -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: inherit; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #357a14; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 12e8699..5931b66 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Header } from "@/widgets/header"; -import "./home.css"; type User = { name: string; @@ -19,8 +18,10 @@ export const HomePage: React.FC = () => { onCreateAccount={() => setUser({ name: "Jane Doe" })} /> -
-

Pages in Storybook

+
+

+ Pages in Storybook +

We recommend building UIs with a{" "} @@ -33,8 +34,8 @@ export const HomePage: React.FC = () => { needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:

-
); diff --git a/src/shared/ui/button/button.css b/src/shared/ui/button/button.css deleted file mode 100644 index 7efe955..0000000 --- a/src/shared/ui/button/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #555ab9; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/src/widgets/header/ui/header.css b/src/widgets/header/ui/header.css deleted file mode 100644 index ad77492..0000000 --- a/src/widgets/header/ui/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/src/widgets/header/ui/header.tsx b/src/widgets/header/ui/header.tsx index 31488b0..9c5fa90 100644 --- a/src/widgets/header/ui/header.tsx +++ b/src/widgets/header/ui/header.tsx @@ -1,5 +1,4 @@ import { Button } from "@/shared/ui/button/button"; -import "./header.css"; type User = { name: string; @@ -14,9 +13,15 @@ export interface HeaderProps { export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-
+
- + -

Acme

+

+ Acme +

{user ? ( <> - + Welcome, {user.name}! +} +``` + +--- + +## 의존성 관리 + +패키지 매니저는 **pnpm**만 사용합니다. + +```bash +# 패키지 추가 +pnpm add [패키지명] +pnpm add -D [패키지명] # 개발 의존성 + +# 패키지 제거 +pnpm remove [패키지명] +``` + +### VERSIONS.md 갱신 규칙 + +의존성을 추가하거나 업데이트할 경우 반드시 `docs/VERSIONS.md`를 함께 업데이트합니다. + +- 현재 버전 현황 테이블 갱신 +- 업데이트 이력에 날짜 및 변경 내역 추가 +- 반려한 항목이 있으면 반려 사유도 기록 + +--- + +## CI/CD + +### PR 생성 시 + +- 빌드 검사 +- ESLint 검사 +- Firebase Preview URL 자동 생성 + +### `main` 머지 시 -프로젝트 구조, 컨벤션, 워크플로우는 **[CONTRIBUTING.md](./CONTRIBUTING.md)** 를 참고하세요. \ No newline at end of file +- Firebase Hosting Live 자동 배포 \ No newline at end of file