[release] main 병합 진행

[dbjoung]

#️⃣ 연관된 이슈

ex) #이슈번호, #이슈번호

📝 작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요 (이미지 첨부 가능)

🖼️ 스크린샷 (선택)

UI 변경 등 시각적으로 확인할 수 있는 내용이 있다면 첨부해주세요

💬 리뷰 요구사항 (선택)

리뷰어가 특히 봐주었으면 하는 부분이 있다면 작성해주세요

[github-actions]

🤖 AI Code Review

View results

🧠 요약

• 이 PR에서는 여러 파일에서 코드 구조를 개선하고, 상태 관리 및 API 호출 방식을 통일하는 작업이 진행되었습니다.
• 특히, useAuthedClient 훅을 도입하여 API 호출 시 인증 토큰을 관리하는 방식으로 변경되었습니다.
• 또한, UI 구성 요소의 재사용성을 높이기 위해 여러 컴포넌트가 리팩토링되었습니다.

⚠️ 세부 코드 리뷰

• [src/features/auth/api/auth.api.ts:8] any 사용 → any는 타입 안정성을 해치므로, 구체적인 타입을 정의해야 합니다.

  • 문제: any 타입을 사용하여 타입 안전성을 보장하지 않음.
  • 개선 방안: LoginRequest와 LoginResponse의 타입을 명확히 정의하여 사용.
  • 코드 예시:

    export async function login(dto: LoginRequest, client: ClientRequestType): Promise<LoginResponse> {
        const raw = await client.request<LoginResponse>('/api/v1/auth/token', {
            method: 'POST',
            body: dto,
        });
        return unwrap(raw);
    }

• [src/features/auth/components/AuthShell.tsx:8] useEffect에서 비디오 재생 제어 → 비디오 재생 상태를 관리하는 로직이 필요합니다.

  • 문제: 비디오가 페이지가 숨겨질 때 일시 정지되지 않음.
  • 개선 방안: visibilitychange 이벤트를 사용하여 비디오 재생 상태를 관리.
  • 코드 예시:

    useEffect(() => {
        const onVisibility = () => {
            if (videoRef.current) {
                document.hidden ? videoRef.current.pause() : videoRef.current.play();
            }
        };
        document.addEventListener('visibilitychange', onVisibility);
        return () => document.removeEventListener('visibilitychange', onVisibility);
    }, []);

• [src/features/interview/api/interview.api.ts:5] API 호출 시 ClientRequestType 사용 → API 호출을 통일하여 코드의 일관성을 높임.

  • 문제: 기존의 API 호출 방식이 일관되지 않음.
  • 개선 방안: 모든 API 호출에 ClientRequestType을 사용하여 인증 토큰을 자동으로 관리.
  • 코드 예시:

    export async function getInterviewDetailAuthed(client: ClientRequestType, interviewId: number): Promise<InterviewDetail> {
        const raw = await client.request<InterviewDetail>(`/api/v1/interviews/${interviewId}`, { method: 'GET' });
        return raw!;
    }

• [src/shared/components/layouts/MainLayout.tsx:20] useEffect에서 drawerOpen 상태 관리 → 상태 변경 시 body의 오버플로우 속성을 조정.

  • 문제: 모바일에서 드로어가 열릴 때 body의 스크롤이 비활성화되지 않음.
  • 개선 방안: drawerOpen 상태에 따라 body의 오버플로우 속성을 조정.
  • 코드 예시:

    useEffect(() => {
        document.body.style.overflow = drawerOpen ? 'hidden' : '';
    }, [drawerOpen]);

🧪 테스트 제안

• AuthShell 컴포넌트의 비디오 재생 상태가 페이지의 가시성에 따라 올바르게 변경되는지 테스트합니다.
• API 호출이 성공적으로 이루어지고, 반환된 데이터가 올바르게 처리되는지에 대한 단위 테스트를 작성합니다.
• MainLayout에서 드로어가 열릴 때 body의 오버플로우 속성이 변경되는지 확인하는 테스트를 추가합니다.

🔧 자동 수정 가능 예시

• any 타입을 제거하고 구체적인 타입을 사용하는 자동 수정 스니펫:

export interface LoginRequest {
    email: string;
    password: string;
}

export interface LoginResponse {
    accessToken: string;
    refreshToken: string;
}

export async function login(dto: LoginRequest, client: ClientRequestType): Promise<LoginResponse> {
    const raw = await client.request<LoginResponse>('/api/v1/auth/token', {
        method: 'POST',
        body: dto,
    });
    return unwrap(raw);
}

이러한 피드백을 통해 코드의 품질과 유지보수성을 높일 수 있습니다.