11.1 랜딩페이지 배포 및 그룹스터디 런칭

.github/workflows/deploy-dev.yml

@@ -1,3 +1,6 @@
+# 도커 허브에 이미지 push 후 서버에 배포하는 방식 (25.10.30 이후)
+#
+
 name: Front Test Server (Develop)
 
 on:
@@ -6,60 +9,64 @@ on:
       - develop # develop 브랜치에 push가 발생하면 실행
 
 jobs:
-  deploy:
+  build-and-push-image: # 도커 이미지 빌드 및 도커 허브 push
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
+      - name: ENV 파일 생성
+        run: |
+          echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL }}" > .env
+          echo "NEXT_PUBLIC_KAKAO_CLIENT_ID=${{ secrets.NEXT_PUBLIC_KAKAO_CLIENT_ID }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_CLIENT_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}" >> .env
+          echo "NEXT_PUBLIC_CLARITY_PROJECT_ID=${{ secrets.NEXT_PUBLIC_CLARITY_PROJECT_ID }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_SHEETS_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_SHEETS_ID }}" >> .env
+          echo "GOOGLE_SERVICE_ACCOUNT_EMAIL=${{ secrets.GOOGLE_SERVICE_ACCOUNT_EMAIL }}" >> .env
+          echo "GOOGLE_PRIVATE_KEY=${{ secrets.GOOGLE_PRIVATE_KEY }}" >> .env
+
+      - name: DockerHub 로그인
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Docker 이미지 빌드 및 push
+        run: |
+          docker build -f Dockerfile.dev -t zerooneitkr/frontend:develop .
+          docker push zerooneitkr/frontend:develop
+
+  deploy-image-to-server: # 도커 허브 pull 후 서버에 배포
+    runs-on: ubuntu-latest
+    needs: build-and-push-image
+
+    steps:
       - name: Setup SSH
         run: |
           mkdir -p ~/.ssh
           echo "${{ secrets.LIGHTSAIL_SSH_KEY }}" > ~/.ssh/id_ed25519
           chmod 600 ~/.ssh/id_ed25519
           ssh-keyscan -H ${{ secrets.LIGHTSAIL_HOST }} >> ~/.ssh/known_hosts
           echo "SSH 설정 완료"
-
-      - name: Deploy to server
+          
+      - name: 서버 배포
         run: |
           ssh -i ~/.ssh/id_ed25519 ${{ secrets.LIGHTSAIL_USER }}@${{ secrets.LIGHTSAIL_HOST }} << EOF
 
-            # 용량 확보를 위해 도커 컨테이너, 이미지 먼저 정리
             echo "사용하지 않는 컨테이너, 이미지, 네트워크 정리 중 (볼륨제외)..."
+            sudo docker stop frontend-dev || true
+            sudo docker rm frontend-dev || true
             sudo docker system prune -a -f
-
-            # 디렉토리 없으면 생성
-            if [ ! -d "/home/ubuntu/front/study-platform-client-dev" ]; then
-              mkdir -p "/home/ubuntu/front/study-platform-client-dev"
-              echo "디렉토리 생성 완료"
-            fi
 
+            # 여기다 도커 컴포즈 파일 갖다놓았기 때문임
             cd ~/front/study-platform-client-dev
 
-            # git 저장소 없으면 clone, 있으면 fetch + reset (덮어쓰기)
-            if [ ! -d ".git" ]; then
-              git clone git@github.com:code-zero-to-one/study-platform-client.git .
-              echo "Git clone 완료"
-            else
-              git fetch origin
-              git reset --hard origin/develop
-              echo "Git fetch & reset 완료"
-            fi
-
-            git fetch origin
-            git checkout develop
-            git pull origin develop
-
-            echo ".env 파일 생성"
-            echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL }}" > .env
-            echo "NEXT_PUBLIC_KAKAO_CLIENT_ID=${{ secrets.NEXT_PUBLIC_KAKAO_CLIENT_ID }}" >> .env
-            echo "NEXT_PUBLIC_GOOGLE_CLIENT_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}" >> .env
+            echo "도커 이미지 pull"
+            sudo docker pull zerooneitkr/frontend:develop
 
             echo "도커 컴포즈 재시작"
-            sudo docker stop frontend-dev
-            sudo docker rm frontend-dev
             sudo docker compose -f docker-compose.dev.yml up -d --build
 
-            echo "운영 서버 배포 완료"
+            echo "테스트 서버 배포 완료"
           EOF

.github/workflows/deploy-dev.yml.diabled → .github/workflows/deploy-dev.yml.disabled

@@ -1,3 +1,5 @@
+# EC2 내부에서 빌드하던 방식 (25.10.30 이전)
+
 name: Front Test Server (Develop)
 
 on:
@@ -30,12 +32,12 @@ jobs:
             sudo docker system prune -a -f
 
             # 디렉토리 없으면 생성
-            if [ ! -d "$HOME/ubuntu/front/study-platform-client-prod" ]; then
-              mkdir -p "$HOME/ubuntu/front/study-platform-client-prod"
+            if [ ! -d "/home/ubuntu/front/study-platform-client-dev" ]; then
+              mkdir -p "/home/ubuntu/front/study-platform-client-dev"
               echo "디렉토리 생성 완료"
             fi
 
-            cd ~/front/study-platform-client-prod
+            cd ~/front/study-platform-client-dev
 
             # git 저장소 없으면 clone, 있으면 fetch + reset (덮어쓰기)
             if [ ! -d ".git" ]; then
@@ -53,14 +55,17 @@ jobs:
 
             echo ".env 파일 생성"
             echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL }}" > .env
-            echo "NEXT_PUBLIC_GTM_ID=${{ secrets.NEXT_PUBLIC_GTM_ID }}" >> .env
             echo "NEXT_PUBLIC_KAKAO_CLIENT_ID=${{ secrets.NEXT_PUBLIC_KAKAO_CLIENT_ID }}" >> .env
             echo "NEXT_PUBLIC_GOOGLE_CLIENT_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}" >> .env
+            echo "NEXT_PUBLIC_CLARITY_PROJECT_ID=${{ secrets.NEXT_PUBLIC_CLARITY_PROJECT_ID }}" >> .env
+            echo "NEXT_PUBLIC_GOOGLE_SHEETS_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_SHEETS_ID }}" >> .env
+            echo "GOOGLE_SERVICE_ACCOUNT_EMAIL=${{ secrets.GOOGLE_SERVICE_ACCOUNT_EMAIL }}" >> .env
+            echo "GOOGLE_PRIVATE_KEY=${{ secrets.GOOGLE_PRIVATE_KEY }}" >> .env
 
             echo "도커 컴포즈 재시작"
-            sudo docker stop study-platform-client-prod-frontend-1
-            sudo docker rm study-platform-client-prod-frontend-1
-            sudo docker compose up -d --build
+            sudo docker stop frontend-dev
+            sudo docker rm frontend-dev
+            sudo docker compose -f docker-compose.dev.yml up -d --build
 
             echo "운영 서버 배포 완료"
-          EOF
+          EOF

Dockerfile.dev

@@ -9,7 +9,7 @@ COPY . .
 # 빌드시점에 .env 파일 복사 
 COPY .env .env
 
-RUN yarn install && yarn build
+RUN yarn install && yarn build --no-lint
 
 # 2단계: production
 FROM node:20-alpine AS runner
@@ -34,4 +34,4 @@ RUN yarn install --production
 
 EXPOSE 3000
 
-CMD ["yarn", "start"]
+CMD ["yarn", "start"]

app/(landing)/layout.tsx

@@ -0,0 +1,53 @@
+import '../global.css';
+
+import Clarity from '@microsoft/clarity';
+import { GoogleTagManager } from '@next/third-parties/google';
+import { clsx } from 'clsx';
+import type { Metadata } from 'next';
+import localFont from 'next/font/local';
+import MainProvider from '@/app/provider';
+import Header from '@/widgets/home/header';
+
+export const metadata: Metadata = {
+  title: 'ZERO-ONE',
+  description: '매일 아침을 함께 시작하는 1:1 기상 스터디 플랫폼, ZERO-ONE',
+  icons: {
+    icon: '/favicon.ico',
+  },
+};
+
+const pretendard = localFont({
+  src: '../../public/fonts/PretendardVariable.woff2',
+  variable: '--font-pretendard',
+  display: 'swap',
+});
+
+const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+const CLARITY_PROJECT_ID = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;
+
+export default function ServiceLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  if (typeof window !== 'undefined' && CLARITY_PROJECT_ID) {
+    Clarity.init(CLARITY_PROJECT_ID);
+  }
+
+  return (
+    <html lang="en">
+      <head>{GTM_ID && <GoogleTagManager gtmId={GTM_ID} />}</head>
+      <body className={clsx(pretendard.className, 'h-screen w-screen')}>
+        <MainProvider>
+          <div className="w-full overflow-auto">
+            {/** 1400 + 48*2 패딩 양옆 48로 임의적용 */}
+            <div className="m-auto flex min-w-[1496px] flex-1 flex-col items-center">
+              <Header />
+              <main className="w-full">{children}</main>
+            </div>
+          </div>
+        </MainProvider>
+      </body>
+    </html>
+  );
+}