Merge pull request #20 from Leets-Official/19-feat/Header-컴포넌트-제작

[Feat] Header 컴포넌트 제작

Author: KyeongJooni

.github/workflows/codeql.yml

@@ -0,0 +1,33 @@
+name: CodeQL
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  security-events: write
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: javascript-typescript
+          trap-caching: false
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3

.github/workflows/pr-automation.yml

@@ -35,7 +35,7 @@ jobs:
 
             // Reviewer 추가
             if (currentReviewers.length === 0) {
-              const reviewers = ['YeBeenChoi', 'jwj0620gcu'].filter(r => r !== prAuthor);
+              const reviewers = ['YeBeenChoi', 'jwj0620gcu', 'KyeongJooni'].filter(r => r !== prAuthor);
               if (reviewers.length > 0) {
                 try {
                   await github.rest.pulls.requestReviewers({

.github/workflows/pr-check.yml

@@ -1,10 +1,14 @@
-name: Build Test
+name: PR Build Test
 
 on:
   pull_request:
     branches:
       - main
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
   pull-requests: write
@@ -54,14 +58,12 @@ jobs:
         run: |
           yarn lint --max-warnings 0 --format json > lint-results.json || {
             echo "LINT_FAILED=true" >> $GITHUB_OUTPUT
-            echo "Lint issues found, but continuing build..."
+            exit 1
           }
-        continue-on-error: true
 
       - name: Format check
         id: format
         run: yarn format:check
-        continue-on-error: true
 
       - name: Run tests
         id: test

.github/workflows/pr-description-check.yml

@@ -0,0 +1,60 @@
+name: PR Description Check
+
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+permissions:
+  pull-requests: write
+
+jobs:
+  check-description:
+    name: Check PR description
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+
+    steps:
+      - name: Check if PR has description
+        id: check
+        run: |
+          # 템플릿 텍스트 제거:
+          # - 제목 (## 로 시작)
+          # - HTML 주석 (<!-- -->)
+          # - 체크리스트 (- [ ])
+          # - 구분선 (---)
+          # - 빈 줄
+          # - "- Close #" 만 있는 줄
+          FILTERED=$(echo "$RAW_BODY" | sed -r \
+            -e '/^##/d' \
+            -e '/<!--.*-->/d' \
+            -e '/^<!--/d' \
+            -e '/^-->/d' \
+            -e '/^---$/d' \
+            -e '/^- \[/d' \
+            -e '/^- Close #$/d' \
+            -e '/^$/d')
+
+          if [[ -z "${FILTERED//[[:space:]]/}" ]]; then
+            echo "empty=true" >> $GITHUB_OUTPUT
+          else
+            echo "empty=false" >> $GITHUB_OUTPUT
+          fi
+        env:
+          RAW_BODY: ${{ github.event.pull_request.body }}
+
+      - uses: actions/checkout@v4
+        if: steps.check.outputs.empty == 'true'
+        with:
+          sparse-checkout: 'README.md'
+
+      - name: Comment on PR
+        if: steps.check.outputs.empty == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }} --body \
+          "👋 @${{ github.actor }} PR 설명이 비어있습니다. 변경 사항에 대한 설명을 추가해주세요."

.prettierignore

@@ -6,3 +6,4 @@ node_modules
 pnpm-lock.yaml
 yarn.lock
 package-lock.json
+lint-results.json

package.json

@@ -8,8 +8,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",

src/app/root.tsx

@@ -21,7 +21,7 @@ export default function Root() {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="w-full overflow-x-hidden">
         <AppProviders>
           <Outlet />
         </AppProviders>

src/pages/playground.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@shared/ui/Button/Button';
 import { Card } from '@shared/ui/Card/Card';
 import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
+import { Header } from '@shared/ui/Header/Header';
 import { Profile } from '@shared/ui/Profile/Profile';
 import { RadioButton } from '@shared/ui/RadioButton/RadioButton';
 
@@ -10,6 +11,11 @@ export default function Playground() {
       <h1 className="typo-title-2">UI Playground</h1>
 
       {/* Button */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">Header</h2>
+        <Header />
+      </section>
+
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Button</h2>
         <p className="typo-caption-2 text-gray-600">

src/shared/assets/logo/index.ts

@@ -0,0 +1,5 @@
+import Logo from './logo.svg?react';
+import Logo2 from './logo2.svg?react';
+import Logo3 from './logo3.svg?react';
+
+export { Logo, Logo2, Logo3 };

src/shared/ui/Button/Button.tsx

@@ -5,7 +5,14 @@ import type { VariantProps } from 'tailwind-variants';
 export type ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'type'> &
   VariantProps<typeof buttonVariants>;
 
-export const Button = ({ children, variant, className, onMouseUp, ...props }: ButtonProps) => {
+export const Button = ({
+  children,
+  variant,
+  size,
+  className,
+  onMouseUp,
+  ...props
+}: ButtonProps) => {
   const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {
     onMouseUp?.(e);
     e.currentTarget.blur();
@@ -14,7 +21,7 @@ export const Button = ({ children, variant, className, onMouseUp, ...props }: Bu
   return (
     <button
       type="button"
-      className={buttonVariants({ variant, className })}
+      className={buttonVariants({ variant, size, className })}
       onMouseUp={handleMouseUp}
       {...props}
     >