relase/v2를 develop에 병합합니다.

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}

.github/copilot-instructions.md

@@ -0,0 +1,70 @@
+# Copilot 지침 (AI 코딩 에이전트용)
+
+## 개요
+
+이 BSMHub 프로젝트는 Next.js 기반 모노레포이며, 학교 학생들의 포트폴리오, 프로젝트를 전시하는 온라인 공간입니다. TypeScript, Tailwind CSS, PNPM 워크스페이스를 사용합니다. UI 컴포넌트, 페이지, 서비스, 유틸리티가 명확하게 분리되어 있습니다.
+
+## 아키텍처 및 주요 패턴
+
+- **앱 디렉터리 구조**: 주요 페이지와 레이아웃은 `src/app/`에 위치하며, 파일 기반 라우팅(`page.tsx`, `route.ts`)을 사용합니다.
+- **컴포넌트**: UI 컴포넌트는 도메인별(`card/`, `modal/`, `layout/` 등)로 그룹화되어 있고, 여러 페이지에서 재사용됩니다.
+- **서비스**: API/데이터 로직은 `src/app/services/`와 `src/app/mocks/services/`에 있습니다. 실제/모의 데이터 처리는 이곳에서 합니다.
+- **유틸리티**: 날짜, 변환, Supabase 관련 함수는 `src/app/utils/`에 위치하며, 전역적으로 import하여 사용합니다.
+- **스타일링**: Tailwind CSS는 `tailwind.config.ts`에서 설정하며, 전역 스타일은 `src/app/globals.css`에, 도메인별 스타일은 각 폴더에 있습니다.
+- **상태 관리**: 교차 컴포넌트 상태는 React Context(`ModalContext.tsx` 등)로 관리합니다. 외부 상태 라이브러리보다 Context를 우선 사용합니다.
+- **네비게이션**: Next.js의 `usePathname`, `useRouter` 훅을 사용하며, `Navigator.tsx`에서 현재 경로 하이라이트 예시를 볼 수 있습니다.
+
+## 개발 워크플로우
+
+- **개발 서버 실행**: `pnpm dev`(또는 `npm/yarn/bun dev`)로 로컬 실행
+- **빌드**: `pnpm build`로 프로덕션 빌드
+- **포맷팅**: Prettier(`prettier.config.js`) 사용, 커스텀 린트 규칙 없음
+- **테스트**: 별도 테스트 설정 없음, 필요시 `src/`에 테스트 추가
+- **배포**: 커스텀 CI/CD(`Jenkinsfile`)로 배포
+
+## 코드 작성 원칙 및 스타일
+
+- **DRY(Do not Repeat Yourself)**: 중복 코드를 최대한 피하고, 재사용 가능한 컴포넌트/함수로 분리합니다. 동일한 UI/로직이 반복될 경우 반드시 추상화하여 재사용하세요.
+- **YAGNI(You Aren't Gonna Need It)**: 실제로 필요하지 않은 기능이나 복잡한 추상화는 도입하지 않습니다. 당장 요구되는 기능만 구현하고, 불필요한 확장/예상 코드는 작성하지 않습니다.
+- **KISS(Keep It Simple, Stupid)**: 복잡한 구조나 과도한 추상화보다, 명확하고 간결한 코드를 우선합니다.
+- **일관된 네이밍**: 컴포넌트, 함수, 변수명은 역할이 명확하게 드러나도록 작성하며, 영어로 통일합니다. 예시: `PortfolioCard`, `getProfileDetail`, `mockProjects` 등.
+- **폴더/파일 구조**: 도메인별로 폴더를 나누고, 각 폴더 내에서 역할별로 파일을 분리합니다. 예시: `card/`, `modal/`, `services/`, `utils/` 등.
+- **스타일 일관성**: Tailwind CSS를 기본으로 사용하며, 커스텀 스타일은 최소화합니다. 전역 스타일은 `globals.css`, 도메인별 스타일은 각 폴더에 위치시킵니다.
+- **함수형 컴포넌트**: React 함수형 컴포넌트와 훅을 기본으로 사용합니다. 상태 관리는 Context를 우선 적용하며, 불필요한 외부 라이브러리 사용을 지양합니다.
+- **명확한 책임 분리**: UI, 데이터, 유틸리티, 상태 관리 등 각 역할별로 코드를 분리하여, 한 파일/컴포넌트가 여러 책임을 가지지 않도록 합니다.
+- **외부 링크**: 새 탭에서 열리도록 `target="_blank"`와, `rel="noopener noreferrer nofollow"` 속성을 추가합니다.
+- **접근성 고려**: 시맨틱 HTML 요소 사용, ARIA 속성 추가 등 접근성 향상을 위한 코딩을 지향합니다.
+- **예외 처리**: API 호출 및 비동기 작업 시 적절한 에러 처리를 구현하여, 사용자에게 명확한 피드백을 제공합니다.
+  Always use context7 when I need code generation, setup or configuration steps, or
+  library/API documentation. This means you should automatically use the Context7 MCP
+  tools to resolve library id and get library docs without me having to explicitly ask.
+
+## 커뮤니케이션 및 메시지 작성
+
+- **주석, 코드 리뷰, 커밋 메시지, PR 메시지**는 모두 한국어로 작성합니다. 코드 내 설명, 변경 내역, 리뷰 의견 등 모든 커뮤니케이션은 한국어를 사용하세요.
+
+## 관례 및 통합
+
+- **TypeScript**: 모든 신규 코드는 TypeScript로 작성, 각 도메인별 `types.d.ts`에 타입 정의
+- **모의 데이터**: 로컬 개발/테스트용 데이터는 `src/app/project/[project_name]/mock-data.json` 및 `src/app/data/mockProjects.ts` 활용
+- **외부 서비스**: Supabase 연동은 `src/app/utils/supabase/`의 헬퍼를 사용
+- **아이콘**: `@tabler/icons-react`로 통일
+- **폰트**: Geist 폰트는 Next.js 폰트 최적화 기능으로 적용
+
+## 예시
+
+- **새 페이지 추가**: `src/app/`에 폴더 생성 후 `page.tsx` 추가
+- **새 모달 추가**: `src/app/components/modal/Modal.tsx` 작성 후 `modal/index.ts`에 등록
+- **새 서비스 추가**: API 로직은 `src/app/services/`, 모의 데이터는 `src/app/mocks/services/`에 작성
+
+## 참고
+
+- [README.md] 기본 설정 및 워크플로우
+- [Jenkinsfile] CI/CD 파이프라인
+- [tailwind.config.ts] 스타일 규칙
+- [src/app/components/] UI 패턴
+- [src/app/services/] 데이터/API 로직
+
+---
+
+관례나 워크플로우가 불명확하다면 유지보수자에게 문의하거나 예시를 요청하세요.

.github/workflows/lighthouse.ci.yml

@@ -0,0 +1,26 @@
+name: CI
+on:
+  push:
+    branches: ["develop", "release/v2"]
+permissions:
+  contents: read
+jobs:
+  lighthouseci:
+    runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+      NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+      NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}
+      NEXT_PUBLIC_SUPABASE_INTERNAL_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm install && npm install -g @lhci/[email protected] && npm install tsx
+      - run: npx tsx ./generate-lighthouserc.ts
+      - run: npm run build
+      - run: npx lhci autorun
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}

.github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: ['develop']
+    branches: ["develop"]
   pull_request:
-    branches: ['develop']
+    branches: ["develop"]
 
 jobs:
   build:
@@ -17,6 +17,7 @@ jobs:
       NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
       NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
       NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}
+      NEXT_PUBLIC_SUPABASE_INTERNAL_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
 
     strategy:
       matrix:
@@ -28,7 +29,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          cache: "npm"
       - run: npm ci
       - run: npm install --platform=linuxmusl --arch=x64 sharp
       - run: npm run build

.gitignore

@@ -38,3 +38,15 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#local file
+*.local
+
+# lighthouse ci
+.lighthouseci/
+.lighthouserc.json
+
+# storybook
+storybook-static
+# Sentry Config File
+.env.sentry-build-plugin

.vscode/mcp.json

@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "Sentry": {
+      "url": "https://mcp.sentry.dev/mcp/junho-lee-r0/javascript-nextjs",
+      "type": "http"
+    }
+  }
+}

Dockerfile

@@ -1,12 +1,14 @@
 # Build Stage
 FROM node:23-alpine AS builder
 WORKDIR /app
-RUN apk add --no-cache vips-dev
-COPY package*.json ./
-RUN npm ci
-RUN npm install --platform=linuxmusl --arch=x64 sharp
+RUN npm install -g pnpm
+RUN apk add --no-cache vips-dev git
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+# RUN npm_config_platform=linuxmusl npm_config_arch=x64 pnpm add sharp
 COPY . .
-RUN npm run build
+RUN --mount=type=cache,target=/app/.next/cache  \ 
+  pnpm run build
 
 # Production Stage
 FROM node:23-alpine AS runner

Jenkinsfile

@@ -5,29 +5,66 @@ pipeline {
         IMAGE_NAME = 'bsmhub'
         SUPABASE_KEY = credentials('NEXT_PUBLIC_SUPABASE_ANON_KEY')
         GOOGLE_CLIENT = credentials('NEXT_PUBLIC_GOOGLE_CLIENT_ID')
-        NEXT_PUBLIC_SUPABASE_URL = 'https://bsmhubsp.obtuse.kr'
-        CONTAINER_NAME = "bsmhub-${env.BRANCH_NAME}"
-        DEPLOY_SERVER = '10.3.0.127'
+        NEXT_PUBLIC_SUPABASE_URL = 'https://bsmhubsp.insert.team'
+        NEXT_PUBLIC_SUPABASE_INTERNAL_URL = 'http://10.59.0.103:8000'
+        DEPLOY_SERVER = '10.59.0.106'
         DEPLOY_CREDS = credentials('DEPLOY_SERVER_CREDS')
         REPO_OWNER = 'insert-intern-24'
         REPO_NAME = 'bsmhub'
         GITHUB_APP = credentials('GITHUB_APP_CREDENTIALS')
     }
     stages {
-        stage('Find Available Port') {
+        stage('Setup Names and Port') {
             steps {
                 script {
-                    PORT = sh(script: '''
-                            for port in $(seq 4000 4999); do
-                                if ! netstat -tna | grep -q ":$port "; then
-                                    echo "$port"
-                                    exit 0
-                                fi
-                            done
-                            echo "4000"  # Fallback port if none found
-                        ''', returnStdout: true).trim()
+                    if (env.CHANGE_ID != null) {
+                        // PR인 경우: PR-숫자 형식 사용
+                        CONTAINER_NAME = "bsmhub-PR-${env.CHANGE_ID}"
+                        IMAGE_TAG = "${env.REGISTRY}/${env.IMAGE_NAME}:PR-${env.CHANGE_ID}"
 
-                    echo "Found port: ${PORT}"
+                        // PR 번호를 기반으로 포트 계산 (4000 + PR번호)
+                        def prNumber = env.CHANGE_ID as Integer
+                        PORT = (4000 + (prNumber % 1000)).toString()
+                        echo "PR #${env.CHANGE_ID} deployment:"
+                        echo "  Container: ${CONTAINER_NAME}"
+                        echo "  Image: ${IMAGE_TAG}"
+                        echo "  Port: ${PORT} (fixed)"
+
+                        // 기존 컨테이너가 해당 포트를 사용 중인지 확인
+                        def existingContainer = sh(script: "docker ps -q -f name=${CONTAINER_NAME}", returnStdout: true).trim()
+                        if (existingContainer) {
+                            echo '✅ Found existing container - will be replaced'
+                        } else {
+                            echo 'ℹ️  No existing container found - will create new one'
+                        }
+                    } else {
+                        // 일반 브랜치인 경우: 브랜치명 정규화 후 사용
+                        def normalizedBranch = env.BRANCH_NAME
+                            .replaceAll('/', '-')
+                            .replaceAll('[^a-zA-Z0-9._-]', '')
+                            .toLowerCase()
+                            .take(128)
+
+                        CONTAINER_NAME = "bsmhub-${normalizedBranch}"
+                        IMAGE_TAG = "${env.REGISTRY}/${env.IMAGE_NAME}:${normalizedBranch}"
+
+                        // 사용 가능한 포트 찾기
+                        PORT = sh(script: '''
+                                for port in $(seq 4000 4999); do
+                                    if ! netstat -tna | grep -q ":$port "; then
+                                        echo "$port"
+                                        exit 0
+                                    fi
+                                done
+                                echo "4000"  # Fallback port if none found
+                            ''', returnStdout: true).trim()
+
+                        echo "Branch '${env.BRANCH_NAME}' deployment:"
+                        echo "  Normalized: ${normalizedBranch}"
+                        echo "  Container: ${CONTAINER_NAME}"
+                        echo "  Image: ${IMAGE_TAG}"
+                        echo "  Port: ${PORT} (available)"
+                    }
                 }
             }
         }
@@ -39,22 +76,25 @@ pipeline {
                         NEXT_PUBLIC_SUPABASE_ANON_KEY=${SUPABASE_KEY}
                         NEXT_PUBLIC_GOOGLE_CLIENT_ID=${GOOGLE_CLIENT}
                         NEXT_PUBLIC_SUPABASE_URL=${NEXT_PUBLIC_SUPABASE_URL}
+                        NEXT_PUBLIC_SUPABASE_INTERNAL_URL=${NEXT_PUBLIC_SUPABASE_INTERNAL_URL}
                         NEXT_PUBLIC_SITE_URL=http://${DEPLOY_SERVER}:${PORT}
                     """.stripIndent()
                     sh 'cat .env.local'
                 }
             }
         }
 
-        stage('PR Preview') {
+        stage('PR Preview Comment') {
             when {
-                expression { env.CHANGE_ID != null } // PR인 경우에만 실행
+                expression {
+                    env.CHANGE_ID != null
+                }
             }
             steps {
                 script {
                     def comment = """🚀 배포 준비중
                         |
-                        | 예상포트 : `${PORT}`
+                        | 고정포트 : `${PORT}` (PR #${env.CHANGE_ID} 전용)
                         |""".stripMargin()
                     def payload = groovy.json.JsonOutput.toJson([body: comment])
                     sh """
@@ -71,38 +111,91 @@ pipeline {
         stage('Build and Push Docker Image') {
             steps {
                 script {
-                    def imageTag = "${env.REGISTRY}/${env.IMAGE_NAME}:${env.BRANCH_NAME}"
-                    sh "docker build -t ${imageTag} ."
+                    echo "Building Docker image: ${IMAGE_TAG}"
+                    sh "DOCKER_BUILDKIT=1 docker build -t ${IMAGE_TAG} ."
+                    echo '✅ Docker image built successfully'
+
+                    // PR이 아닌 경우 빌드 확인만 하고 종료
+                    if (env.CHANGE_ID == null) {
+                        echo 'ℹ️  Non-PR branch detected - skipping deployment'
+                        echo '✅ Build verification completed successfully'
+                    }
                 }
             }
         }
 
-        stage('Deploy to Remote Server') {
+        stage('Stop and Remove Existing Container') {
+            when {
+                expression {
+                    env.CHANGE_ID != null
+                }
+            }
             steps {
                 script {
-                    def imageTag = "${env.REGISTRY}/${env.IMAGE_NAME}:${env.BRANCH_NAME}"
+                    echo "Checking for existing container: ${CONTAINER_NAME}"
+                    def existingContainer = sh(script: "docker ps -aq -f name=${CONTAINER_NAME}", returnStdout: true).trim()
+
+                    if (existingContainer) {
+                        echo "Found existing container: ${existingContainer}"
+                        echo "Stopping and removing container: ${CONTAINER_NAME}"
+                        sh """
+                            docker stop ${CONTAINER_NAME} || true
+                            docker rm ${CONTAINER_NAME} || true
+                        """
+                        echo 'Successfully removed existing container'
+                    } else {
+                        echo "No existing container found with name: ${CONTAINER_NAME}"
+                    }
+                }
+            }
+        }
+
+        stage('Deploy New Container') {
+            when {
+                expression {
+                    env.CHANGE_ID != null
+                }
+            }
+            steps {
+                script {
+                    echo "Deploying new container: ${CONTAINER_NAME} on port ${PORT}"
+                    echo "Using image: ${IMAGE_TAG}"
                     sh """
-                        docker rm -f ${env.CONTAINER_NAME} || true
                         docker run -d \\
-                            --name ${env.CONTAINER_NAME} \\
+                            --name ${CONTAINER_NAME} \\
                             -p ${PORT}:3000 \\
                             --restart unless-stopped \\
                             --env-file .env.local \\
-                            ${imageTag}
+                            ${IMAGE_TAG}
+                    """
+
+                    // 컨테이너가 정상적으로 시작되었는지 확인
+                    sh """
+                        sleep 3
+                        if docker ps | grep -q ${CONTAINER_NAME}; then
+                            echo "✅ Container ${CONTAINER_NAME} is running successfully"
+                        else
+                            echo "❌ Container ${CONTAINER_NAME} failed to start"
+                            docker logs ${CONTAINER_NAME}
+                            exit 1
+                        fi
                     """
                 }
             }
         }
 
-        stage('Update PR') {
+        stage('Update PR Comment') {
             when {
-                expression { env.CHANGE_ID != null } // PR인 경우에만 실행
+                expression {
+                    env.CHANGE_ID != null
+                }
             }
             steps {
                 script {
                     def comment = """🚀 배포 완료!
                         |
                         |✨ 개발서버 프리뷰: http://${env.DEPLOY_SERVER}:${PORT}
+                        |📌 고정포트: `${PORT}` (PR #${env.CHANGE_ID} 전용)
                         |
                         | Cloudflare WARP VPN을 통한 내부망 접근 필수, Google One Tab Login 사용 불가능
                         |""".stripMargin()