⚙️ Pennyway 색상표 Tailwind 적용 (#6)

* feat: 리뷰어 및 담당자 자동화 파이프라인 구축

* feat: pennyway 색상표 적용

* feat: reviewers 명시 및 auto-assign-action 버전 업데이트

reviewers에 프론트 팀원 모두가 적용되지 않는 문제가 있어 reviewers를 명시하였습니다.

* feat: numberOfReviewers 명시

리뷰어의 수를 명시해주지 않으면 1명만 등록되는 문제가 있어 0으로 명시하였습니다.

.github/AUTO_ASSIGN_CONFIG.yml

@@ -0,0 +1,8 @@
+addAssignees: author
+addReviewers: true
+
+numberOfReviewers: 0
+reviewers:
+  - Legitgoons
+  - BangDori
+  - suhwan2004

.github/workflows/pr-auto-assign.yml

@@ -0,0 +1,17 @@
+name: pr-auto-assign
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  add-reviewers-and-assignee:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: kentaro-m/[email protected]
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          configuration-path: '.github/AUTO_ASSIGN_CONFIG.yml'

app/page.tsx

@@ -1,3 +1,39 @@
 export default function Home() {
-  return <div className=" text-h1b">Hello World</div>;
+  return (
+    <div className="flex flex-row justify-center gap-12 bg-[#666666]">
+      <div className="w-72">
+        <p className="bg-white text-black">White</p>
+        <p className="bg-gray01 text-black">Gray 01</p>
+        <p className="bg-gray02 text-black">Gray 02</p>
+        <p className="bg-gray03 text-black">Gray 03</p>
+        <p className="bg-gray04 text-black">Gray 04</p>
+        <p className="bg-gray05 text-black">Gray 05</p>
+        <p className="bg-gray06 text-black">Gray 06</p>
+        <p className="bg-gray07 text-white">Gray 07</p>
+      </div>
+
+      <div className="w-72">
+        <p className="bg-red01 text-black">Red 01</p>
+        <p className="bg-red02 text-black">Red 02</p>
+        <p className="bg-red03 text-black">Red 03</p>
+
+        <div className="h-6" />
+
+        <p className="bg-yellow01 text-black">Yellow 01</p>
+        <p className="bg-yellow02 text-black">Yellow 02</p>
+      </div>
+
+      <div className="w-72">
+        <p className="bg-ashblue01 text-black">Ashblue 01</p>
+        <p className="bg-ashblue02 text-black">Ashblue 02</p>
+        <p className="bg-overlay text-white">Overlay</p>
+
+        <div className="h-6" />
+
+        <p className="bg-mint01 text-black">Mint 01</p>
+        <p className="bg-mint02 text-black">Mint 02</p>
+        <p className="bg-mint03 text-black">Mint 03</p>
+      </div>
+    </div>
+  );
 }

tailwind.config.ts

@@ -21,6 +21,33 @@ const config: Config = {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+
+        white: '#ffffff',
+        black: '#000000',
+
+        gray01: '#f7f8f9',
+        gray02: '#f0f2f4',
+        gray03: '#dde0e5',
+        gray04: '#b3b9c4',
+        gray05: '#8691a2',
+        gray06: '#383e4a',
+        gray07: '#161a1d',
+
+        red01: '#fff1f1',
+        red02: '#ff9999',
+        red03: '#ff6767',
+
+        yellow01: '#fffedc',
+        yellow02: '#ffbd3b',
+
+        ashblue01: '#e7fcff',
+        ashblue02: '#d5f0f4',
+
+        mint01: '#d9f9fb',
+        mint02: '#9deff6',
+        mint03: '#00d5e1',
+
+        overlay: 'rgba(0, 0, 0, 0.3)',
       },
       fontFamily: {
         sans: ['Pretendard', 'sans-serif'],