test: CI/CD 및 Cypress E2E 테스트 환경 설정 개선

.github/workflows/test.yml

@@ -0,0 +1,62 @@
+name: Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Vitest tests
+        run: npm run test -- --run --coverage
+
+  e2e-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+        env:
+          CYPRESS_baseUrl: http://localhost:4173
+          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run preview
+          wait-on: "http://localhost:4173"
+          wait-on-timeout: 120
+          browser: chrome
+        env:
+          CYPRESS_baseUrl: http://localhost:4173
+          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

.prettierrc

@@ -1,3 +1,9 @@
 {
+  "endOfLine": "auto",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": true,
+  "trailingComma": "es5",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
+    baseUrl: process.env.CYPRESS_baseUrl || "http://localhost:5173",
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/profile-registration.cy.ts

@@ -2,7 +2,7 @@ describe("프로필 등록", () => {
   it("프로필 등록 플로우", () => {
     cy.login();
 
-    cy.url().should("eq", "http://localhost:5173/");
+    cy.url().should("include", "/");
     cy.wait(1000);
 
     cy.get("a[href='/find-teammates']").click();
@@ -21,7 +21,7 @@ describe("프로필 등록", () => {
         });
 
         cy.contains("프로필이 삭제되었습니다", { timeout: 5000 }).should(
-          "be.visible",
+          "be.visible"
         );
         cy.wait(1000); // 삭제 후 UI 업데이트 대기
       }
@@ -46,7 +46,7 @@ describe("프로필 등록", () => {
       cy.get("textarea[placeholder='간단히 역량 어필해 주세요.']")
         .clear()
         .type(
-          "안녕하세요. React와 TypeScript를 다루는 프론트엔드 개발자입니다.",
+          "안녕하세요. React와 TypeScript를 다루는 프론트엔드 개발자입니다."
         );
 
       cy.get("input[placeholder='https://example.com']")
@@ -59,7 +59,7 @@ describe("프로필 등록", () => {
 
     cy.get("[role='dialog']").should("not.exist");
     cy.contains("프로필 등록이 완료되었습니다", { timeout: 5000 }).should(
-      "be.visible",
+      "be.visible"
     );
   });
 });

cypress/support/commands.ts

@@ -1,5 +1,5 @@
 Cypress.Commands.add("login", () => {
-  cy.visit("http://localhost:5173/");
+  cy.visit("/");
   cy.get("button").contains("로그인").click();
   cy.get("input[name='email']").type("test@test.com");
   cy.get("input[name='password']").type("123123123");