[cherry-pick] 마이페이지 기능 구현 및 디자인 개선

.github/workflows/ci.yml

@@ -107,9 +107,9 @@ jobs:
       - name: Build Storybook
         run: yarn build-storybook
 
-  # Playwright E2E: 스테이징 환경 대상 실행
-  # E2E_AUTH_JSON secret 설정 시 @auth 태그 포함 전체 스위트 실행
-  # secret 누락/만료 시 비인증 테스트만 실행 (fallback)
+  # Playwright E2E:
+  # - non-@auth 테스트: CI 내 로컬 서버(localhost:3000) 대상 항상 실행 (스테이징 의존 없음)
+  # - @auth 테스트: 스테이징 접속 가능 시에만 실행, 불가 시 경고 후 스킵
   # 갱신 절차: yarn e2e:save-auth → GitHub Secret E2E_AUTH_JSON 업데이트
   e2e:
     runs-on: ubuntu-latest
@@ -170,15 +170,45 @@ jobs:
         if: env.E2E_AUTH_JSON == ''
         run: echo "::warning::E2E_AUTH_JSON not set — skipping @auth tests"
 
-      - name: Run E2E tests (full suite, with auth)
-        if: env.E2E_AUTH_JSON != '' && env.AUTH_EXPIRED != 'true'
-        run: yarn e2e
+      - name: Build Next.js app
+        run: yarn build
         env:
-          E2E_BASE_URL: https://test.zeroone.it.kr
+          NEXT_PUBLIC_API_BASE_URL: https://test-api.zeroone.it.kr
 
-      - name: Run E2E tests (non-auth only)
-        if: env.E2E_AUTH_JSON == '' || env.AUTH_EXPIRED == 'true'
+      - name: Start local server
+        run: |
+          NEXT_PUBLIC_API_BASE_URL=https://test-api.zeroone.it.kr yarn start &
+          for i in $(seq 1 30); do
+            if curl -sf --max-time 5 http://localhost:3000/ > /dev/null 2>&1; then
+              echo "Local server ready"
+              break
+            fi
+            echo "Waiting for server... ($i/30)"
+            if [[ "$i" == "30" ]]; then
+              echo "::error::Local server failed to start after 60s"
+              exit 1
+            fi
+            sleep 2
+          done
+
+      - name: Run E2E tests (non-auth, local server)
         run: yarn e2e --grep-invert @auth
+        env:
+          E2E_BASE_URL: http://localhost:3000
+
+      - name: Check staging connectivity
+        run: |
+          STATUS=$(curl -s --max-time 10 -o /dev/null -w "%{http_code}" https://test.zeroone.it.kr/ 2>/dev/null || true)
+          if [[ "$STATUS" =~ ^[2-4][0-9][0-9]$ ]]; then
+            echo "Staging reachable (HTTP $STATUS)"
+          else
+            echo "::warning::Staging https://test.zeroone.it.kr unreachable — skipping @auth tests"
+            echo "STAGING_DOWN=true" >> "$GITHUB_ENV"
+          fi
+
+      - name: Run E2E tests (auth suite, staging)
+        if: env.E2E_AUTH_JSON != '' && env.AUTH_EXPIRED != 'true' && env.STAGING_DOWN != 'true'
+        run: yarn e2e --grep @auth
         env:
           E2E_BASE_URL: https://test.zeroone.it.kr
 

e2e/class/builder-feed.spec.ts

@@ -123,7 +123,11 @@ function makeComments(): { content: BuilderFeedCommentsResponse } {
         {
           commentId: 1,
           content: '멋진 피드네요!',
-          author: { memberId: 3, nickname: '댓글러', role: 'STUDENT' },
+          author: {
+            memberId: 3,
+            nickname: '댓글러',
+            role: 'STUDENT',
+          },
           createdAt: '2025-05-01T13:00:00.000Z',
           replies: [],
         },
@@ -215,7 +219,9 @@ async function mockFeedDetailApis(page: Page) {
         return;
       }
       await route.fulfill({
-        json: { content: { feedId: FEED_ID, isLiked: true, likeCount: 6 } },
+        json: {
+          content: { feedId: FEED_ID, isLiked: true, likeCount: 6 },
+        },
       });
     },
   );
@@ -228,11 +234,13 @@ test.describe('빌더 피드 목록 @auth', () => {
     page,
   }) => {
     await mockFeedListApis(page, [makeFeedItem(FEED_ID)]);
-    await page.goto(FEED_LIST_PATH, { waitUntil: 'load' });
-    await page.waitForLoadState('networkidle', { timeout: 30000 });
+    await Promise.all([
+      page.waitForResponse((r) => /\/courses\/vibe-intro$/.test(r.url())),
+      page.goto(FEED_LIST_PATH, { waitUntil: 'load' }),
+    ]);
 
     await expect(page.getByText(/테스트 피드 내용/)).toBeVisible({
-      timeout: 15000,
+      timeout: 5000,
     });
     await expect(page.getByText('테스터').first()).toBeVisible();
   });
@@ -241,11 +249,13 @@ test.describe('빌더 피드 목록 @auth', () => {
     page,
   }) => {
     await mockFeedListApis(page, []);
-    await page.goto(FEED_LIST_PATH, { waitUntil: 'load' });
-    await page.waitForLoadState('networkidle', { timeout: 30000 });
+    await Promise.all([
+      page.waitForResponse((r) => /\/courses\/vibe-intro$/.test(r.url())),
+      page.goto(FEED_LIST_PATH, { waitUntil: 'load' }),
+    ]);
 
     await expect(page.getByText('아직 등록된 피드가 없어요.')).toBeVisible({
-      timeout: 15000,
+      timeout: 5000,
     });
   });
 });
@@ -256,11 +266,17 @@ test.describe('빌더 피드 상세 @auth', () => {
   });
 
   test('피드 상세 렌더링 — 내용·댓글 표시', async ({ page }) => {
-    await page.goto(FEED_DETAIL_PATH, { waitUntil: 'load' });
-    await page.waitForLoadState('networkidle', { timeout: 30000 });
+    await Promise.all([
+      page.waitForResponse(
+        (r) =>
+          /\/builder-feeds\/\d+$/.test(r.url()) &&
+          r.request().method() === 'GET',
+      ),
+      page.goto(FEED_DETAIL_PATH, { waitUntil: 'load' }),
+    ]);
 
     await expect(page.getByText('피드 상세 내용입니다.')).toBeVisible({
-      timeout: 15000,
+      timeout: 5000,
     });
     await expect(page.getByText('멋진 피드네요!')).toBeVisible({
       timeout: 10000,
@@ -270,12 +286,14 @@ test.describe('빌더 피드 상세 @auth', () => {
   test('좋아요 버튼 클릭 → POST /builder-feeds/{id}/like 호출 확인', async ({
     page,
   }) => {
-    await page.goto(FEED_DETAIL_PATH, { waitUntil: 'load' });
-    await page.waitForLoadState('networkidle', { timeout: 30000 });
-
-    await expect(page.getByText('피드 상세 내용입니다.')).toBeVisible({
-      timeout: 15000,
-    });
+    await Promise.all([
+      page.waitForResponse(
+        (r) =>
+          /\/builder-feeds\/\d+$/.test(r.url()) &&
+          r.request().method() === 'GET',
+      ),
+      page.goto(FEED_DETAIL_PATH, { waitUntil: 'load' }),
+    ]);
 
     const [likeResponse] = await Promise.all([
       page.waitForResponse(

src/api/client/axios.ts

@@ -65,3 +65,22 @@ axiosInstanceV5.interceptors.response.use(
     axiosInstanceV5(requestConfig),
   ),
 );
+
+// v6 MyPage API 전용 인스턴스
+export const axiosInstanceV6 = axios.create({
+  baseURL: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v6/`,
+  timeout: 60000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+attachApiLogger(axiosInstanceV6, 'client-v6-json');
+axiosInstanceV6.interceptors.request.use(attachAccessTokenToRequest);
+axiosInstanceV6.interceptors.response.use(
+  (config) => config,
+  createClientAuthResponseRejectedHandler((requestConfig) =>
+    axiosInstanceV6(requestConfig),
+  ),
+);

src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-submission-modal.tsx

@@ -286,11 +286,11 @@ export function LessonQnaSubmissionModal({
         </div>
 
         {/* Footer */}
-        <div className="flex shrink-0 items-center justify-center gap-200 px-750 py-300">
+        <div className="flex shrink-0 items-center gap-200 px-750 py-300">
           <button
             type="button"
             onClick={handleDraftSave}
-            className="w-full rounded-100 border border-rose-400 px-400 py-200 font-designer-18b text-rose-500 hover:opacity-80"
+            className="flex h-700 flex-1 items-center justify-center rounded-100 border border-rose-400 font-designer-18b text-rose-500 hover:opacity-80"
           >
             임시저장
           </button>
@@ -299,7 +299,7 @@ export function LessonQnaSubmissionModal({
             onClick={handleSubmit}
             disabled={createQna.isPending}
             className={cn(
-              'w-full rounded-100 px-400 py-200 font-designer-18b text-text-inverse transition-opacity',
+              'flex h-700 flex-1 items-center justify-center rounded-100 font-designer-18b text-text-inverse transition-opacity',
               createQna.isPending
                 ? 'cursor-not-allowed bg-gray-300'
                 : 'bg-rose-500 hover:opacity-90',