[chore] E2E 테스트 적용및 Github Action 자동화

.github/workflows/ci.yml

@@ -0,0 +1,91 @@
+name: AllClass CI
+run-name: AllClass CI • ${{ github.ref_name }} • by ${{ github.actor }}
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+      - feat/**
+  pull_request:
+    branches:
+      - main
+      - dev
+      - feat/**
+
+jobs:
+  lint_build:
+    name: "🔧 Lint & Build"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: "========== 🔧 Lint & Build • START =========="
+        run: echo "========== 🔧 Lint & Build • START =========="
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+        env:
+          NEXT_TELEMETRY_DISABLED: 1
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+
+      - name: "========== 🔧 Lint & Build • END =========="
+        if: always()
+        env:
+          JOB_STATUS: ${{ job.status }}
+        run: |
+          echo "========== 🔧 Lint & Build • END (status: ${JOB_STATUS}) =========="
+
+  e2e:
+    name: "🧪 AllClass E2E Test"
+    needs: lint_build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: "========== 🧪 AllClass E2E • START =========="
+        run: echo "========== 🧪 AllClass E2E • START =========="
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: yarn build
+          start: yarn start
+          wait-on: 'http://localhost:3000'
+          browser: chrome
+        env:
+          CI: true
+          NEXT_TELEMETRY_DISABLED: 1
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+          CYPRESS_TEST_USER_ID: ${{ secrets.CYPRESS_TEST_USER_ID }}
+          CYPRESS_TEST_USER_PW: ${{ secrets.CYPRESS_TEST_USER_PW }}
+
+      - name: "========== 🧪 AllClass E2E • END =========="
+        if: always()
+        env:
+          JOB_STATUS: ${{ job.status }}
+        run: |
+          echo "========== 🧪 AllClass E2E • END (status: ${JOB_STATUS}) =========="

.gitignore

@@ -32,6 +32,8 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+# cypress local secrets
+cypress.env.json
 
 # vercel
 .vercel

app/[universityName]/[lectureId]/page.tsx

@@ -1,13 +1,11 @@
-import { ReviewCardListSkeleton } from '@/domains/review';
-import { LectureInfoSkeleton } from '@/domains/lecture';
-import { LectureInfoServer } from '@/domains/lecture/server/components/LectureInfoServer';
-import { ReviewListServer } from '@/domains/review/server/components/ReviewListServer';
+import { ReviewCardListSkeleton, ReviewListServer } from '@/domains/review';
+import { LectureInfoSkeleton, LectureInfoServer } from '@/domains/lecture';
 import { Suspense } from 'react';
-import styles from '@/styles/global.module.css';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { createQueryClient, prefetchLectureRating, prefetchAllSortOptions } from '@/utils';
 import { universityNames } from '@/constants';
 import { getLectureListStatic } from '@/lib';
+import styles from '@/styles/global.module.css';
 
 export async function generateStaticParams() {
   const allParams = await Promise.allSettled(

app/api/revalidate/route.ts

@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 export async function POST(request: NextRequest) {
   try {
-    const { universityName, action } = await request.json();
+    const { universityName, action, lectureId, userNumber } = await request.json();
 
     if (!universityName) {
       return NextResponse.json({ message: 'University name is required' }, { status: 400 });
@@ -14,6 +14,23 @@ export async function POST(request: NextRequest) {
       case 'lecture_removed':
       case 'lecture_modified':
         await revalidateTag(`lectures-${universityName}`);
+        if (lectureId) {
+          await revalidateTag(`lecture-info-${universityName}-${lectureId}`);
+          await revalidateTag(`reviews-${lectureId}`);
+        }
+        break;
+
+      case 'review_added':
+      case 'review_updated':
+      case 'review_deleted':
+        if (lectureId) {
+          await revalidateTag(`reviews-${lectureId}`);
+          await revalidateTag(`lecture-info-${universityName}-${lectureId}`);
+        }
+        if (userNumber) {
+          await revalidateTag(`my-reviews-${userNumber}`);
+          await revalidateTag(`my-lectures-${userNumber}`);
+        }
         break;
 
       case 'university_added':
@@ -29,6 +46,8 @@ export async function POST(request: NextRequest) {
       timestamp: new Date().toISOString(),
       action,
       universityName,
+      lectureId,
+      userNumber,
     });
   } catch (error) {
     return NextResponse.json({ message: 'Internal server error' }, { status: 500 });

app/layout.tsx

@@ -27,11 +27,9 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <AppProviders>
-          <AuthHydrationProvider>
-            <div>{children}</div>
-          </AuthHydrationProvider>
-        </AppProviders>
+        <AuthHydrationProvider>
+          <div>{children}</div>
+        </AuthHydrationProvider>
       </body>
     </html>
   );

app/providers/AuthHydrationProvider.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import { hydrateAuthState } from '@/utils/authHydration';
+import AppProviders from './AppProviders';
 
 interface AuthHydrationProviderProps {
   children: React.ReactNode;
@@ -10,5 +11,9 @@ export default async function AuthHydrationProvider({ children }: AuthHydrationP
 
   await hydrateAuthState(queryClient);
 
-  return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
+  return (
+    <AppProviders>
+      <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>
+    </AppProviders>
+  );
 }

components/common/auth/LoginTriggerWrapper.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { useLoginTrigger } from '@/hooks/useLoginTrigger';
+import { useLoginTrigger } from './hooks/useLoginTrigger';
 import { LoadingSpinner } from '../loading/LoadingSpinner';
 
 function LoginTrigger() {

components/common/starRating/InteractiveStarRating.tsx

@@ -50,7 +50,11 @@ export default function InteractiveStarRating({
   const displayRating = hoverRating || rating;
 
   return (
-    <div className={`${styles.container} ${styles[size]}`} onMouseLeave={handleMouseLeave}>
+    <div
+      className={`${styles.container} ${styles[size]}`}
+      onMouseLeave={handleMouseLeave}
+      data-test="star-rating"
+    >
       <svg width="0" height="0" style={{ position: 'absolute' }}>
         <defs>
           <linearGradient id="halfStar" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -68,6 +72,7 @@ export default function InteractiveStarRating({
             onMouseEnter={(event) => handleMouseEnter(star, event)}
             onClick={(event) => handleClick(star, event)}
             disabled={disabled}
+            data-test={`star-${star}`}
           >
             <Star
               size={size === 'small' ? 20 : size === 'medium' ? 28 : 32}

components/ui/button/Button.tsx

@@ -2,27 +2,21 @@
 
 import styles from './Button.module.css';
 
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: () => void;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'default' | 'primary' | 'secondary';
-  disabled?: boolean;
-  type?: 'button' | 'submit' | 'reset';
   className?: string;
 }
 
 export default function Button({
   children,
-  onClick,
   variant = 'default',
-  disabled = false,
-  type = 'button',
   className = '',
+  ...rest
 }: ButtonProps) {
   const buttonClass = `${styles.button} ${styles[variant]} ${className}`.trim();
 
   return (
-    <button type={type} className={buttonClass} onClick={onClick} disabled={disabled}>
+    <button {...rest} type={rest.type ?? 'button'} className={buttonClass}>
       {children}
     </button>
   );

components/ui/header/Header.tsx

@@ -51,7 +51,7 @@ export default function Header({ showDropdown = false }: HeaderProps) {
       </section>
       <section className={`${styles.rightSection} ${!showDropdown ? styles.alwaysVisible : ''}`}>
         {isLoggedIn ? (
-          <Button variant="default" onClick={handleMyPageClick}>
+          <Button variant="default" onClick={handleMyPageClick} data-test="open-mypage">
             마이페이지
           </Button>
         ) : (
@@ -60,11 +60,11 @@ export default function Header({ showDropdown = false }: HeaderProps) {
           </Button>
         )}
         {isLoggedIn ? (
-          <Button variant="default" onClick={handleLogoutClick}>
+          <Button variant="default" onClick={handleLogoutClick} data-test="logout">
             로그아웃
           </Button>
         ) : (
-          <Button variant="default" onClick={handleLoginClick}>
+          <Button variant="default" onClick={handleLoginClick} data-test="open-login">
             로그인
           </Button>
         )}

components/ui/universityList/DropdownUniversityList.tsx

@@ -15,7 +15,9 @@ export default function DropdownUniversityList() {
 
   return (
     <div className={styles.centerDropdown} ref={dropdownRef} onMouseEnter={handleDropdownOpen}>
-      <button className={styles.dropdownTrigger}>대학교 선택</button>
+      <button className={styles.dropdownTrigger} data-test="univ-switch">
+        대학교 선택
+      </button>
       <div
         className={`${styles.dropdownMenu} ${isDropdownOpen ? styles.open : ''}`}
         onMouseLeave={handleDropdownMouseLeave}

components/ui/universityList/UniversityList.tsx

@@ -25,6 +25,8 @@ const UniversityList = memo(function UniversityList() {
             className={`${styles.universityCard} university-card`}
             key={university.slug}
             href={href}
+            data-test="univ-option"
+            data-slug={university.slug}
             onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
               if (isCurrent) {
                 e.preventDefault();

cypress/e2e/tier1-critical/01-auth-and-review.cy.ts

@@ -0,0 +1,64 @@
+describe('사용자는 로그인을하고 자신이 들은 강의에 리뷰를 작성할 수 있다.', () => {
+  it('사용자는 헤더에 로그인 버튼을 통해 로그인할 수 있다.', () => {
+    cy.clearCookies();
+
+    cy.uiLogin();
+
+    cy.get('header').contains('button', '로그아웃').should('be.visible');
+  });
+
+  it('사용자는 자신이 수강한 강의를 찾고 리뷰를 작성할 수 있다.', () => {
+    cy.uiLogin();
+    cy.visit(encodeURI('/동서대학교'));
+
+    cy.contains('[data-test="lecture-card"] h3', '데이터마이닝', { timeout: 15000 })
+      .scrollIntoView()
+      .should('be.visible')
+      .then(($h3) => {
+        cy.wrap($h3).closest('a').click({ force: true });
+      });
+    cy.byTest('lecture-detail').should('exist');
+
+    cy.byTest('write-review').click();
+    cy.byTest('write-review-form').should('exist');
+    cy.byTest('review-title-input').type('데이터마이닝 수업 후기');
+    cy.byTest('review-content-input').type(
+      '실습 위주로 진행되어 이해가 쉬웠고, 과제량이 적당했습니다. 추천합니다.'
+    );
+    cy.byTest('star-5').click({ force: true });
+
+    cy.window().then((win) => {
+      cy.stub(win, 'alert').as('alert');
+    });
+    cy.byTest('write-submit').click({ force: true });
+
+    cy.get('@alert').should('have.been.called');
+    cy.byTest('review-list').should('exist');
+    cy.byTest('review-item').should('exist');
+
+    cy.reload();
+    cy.byTest('review-list').should('exist');
+    cy.byTest('review-item').should('exist');
+  });
+
+  it('사용자는 수강하지 않은 강의에 리뷰를 작성할 수 없다.', () => {
+    cy.uiLogin();
+    cy.visit(encodeURI('/동서대학교'));
+    cy.byTest('lecture-card').first().click();
+    cy.byTest('lecture-detail').should('exist');
+
+    cy.byTest('write-review').click();
+    cy.byTest('write-review-form').should('exist');
+    cy.byTest('review-title-input').type('후기 작성 테스트');
+    cy.byTest('review-content-input').type(
+      '수강하지 않은 강의에 대한 리뷰 작성 시도가 차단되는지 확인합니다.'
+    );
+    cy.byTest('star-5').click({ force: true });
+    cy.window().then((win) => {
+      cy.stub(win, 'alert').as('alert');
+    });
+    cy.byTest('write-submit').click({ force: true });
+
+    cy.get('@alert').should('have.been.called');
+  });
+});