feat: 레벨 인터뷰 페이지 연동 #1642

gracefulBrown · 2025-04-15T09:23:07Z

#️⃣연관된 이슈

#1641 연관된 프론트엔드 작업

📝작업 내용

레벨 인터뷰 프론트 기능 구현

💬리뷰 요구사항(선택)

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

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

gemini-code-assist

Hello @gracefulBrown, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request introduces the level interview feature to the application. It includes backend changes to create the interview session and handle answers, as well as frontend components for setting up and conducting the interview. The frontend implementation involves creating new components for the interview setup and session, integrating them into the main interview page, and adding a navigation link to the interview page.

Highlights

Backend: Interview Controller: The InterviewController is modified to return the created session in the response body when creating a new interview session, instead of just returning a 201 Created response.
Backend: Database Migration: The interview_message table schema is updated by removing the member_id and finished columns.
Frontend: Interview Page: A new InterviewPage component is created, which includes InterviewSetup and InterviewSession components to handle the interview setup and the interview session respectively. It manages the state of the interview session and provides callbacks for starting, updating, and ending the session.
Frontend: Navigation Integration: A new entry for '인터뷰' (Interview) is added to the navigation bar, linking to the /interview path.

Changelog

Click here to see the changelog

backend/src/main/java/wooteco/prolog/interview/ui/InterviewController.java
- Added import for java.net.URI.
- Modified the create method to return the created InterviewSessionResponse in the response body.
backend/src/main/resources/db/migration/prod/V15__create_table_interview.sql
- Removed the member_id and finished columns from the interview_message table.
frontend/src/components/NavBar/NavBar.tsx
- Added a new navigation item for the interview page.
frontend/src/constants/path.ts
- Added a new path constant for the interview page: /interview.
frontend/src/pages/InterviewPage/InterviewPage.tsx
- Created a new InterviewPage component with InterviewSetup and InterviewSession components.
- Implemented state management for the interview session and callbacks for session start, update, and end.
frontend/src/pages/InterviewPage/InterviewSession.tsx
- Created a new InterviewSession component to handle the interview session logic.
- Implemented functionality for submitting answers, restarting, and quitting the interview.
- Implemented a chat interface to display messages between the interviewer and interviewee.
frontend/src/pages/InterviewPage/InterviewSetup.tsx
- Created a new InterviewSetup component to handle the interview setup process.
- Implemented functionality for selecting level, mission, and question for the interview.
- Implemented API calls to fetch sessions, missions, and questions based on the selected level and mission.
frontend/src/pages/InterviewPage/index.tsx
- Exported the InterviewPage component.
frontend/src/pages/index.ts
- Exported the InterviewPage component from the main pages index.
frontend/src/routes.js
- Imported the InterviewPage component.
- Added a new route for the interview page.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

A page is linked,
Interview's now in sight,
Code's ready to run.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new interview feature, including backend API endpoints and frontend components for setting up and conducting interviews. The implementation appears well-structured, with clear separation of concerns between the setup and session components. However, there are a few areas that could benefit from further refinement, particularly in error handling and UI clarity.

Summary of Findings

Backend Response Body: The create method in InterviewController returns the InterviewSessionResponse in the response body, which is good for providing immediate feedback to the client. However, it might be more RESTful to only return the URI in the Location header and let the client fetch the resource if needed.
Frontend API Base URL: The frontend components use a hardcoded base URL for the API. It would be better to configure this via environment variables to support different environments.
Question API Response: The InterviewSetup.tsx component handles different possible response structures from the /questions API. It would be better to standardize the API response to avoid this complexity.
Error Handling: The frontend components use console.error for error logging. It would be better to use a more robust error handling mechanism, such as displaying error messages to the user.

Merge Readiness

The pull request introduces a significant new feature and is generally well-implemented. However, addressing the identified issues related to error handling, API consistency, and configuration would improve the overall quality and maintainability of the code. I recommend addressing the high severity issues before merging. I am unable to approve this pull request, and recommend that others review and approve this code before merging.

gemini-code-assist · 2025-04-15T09:23:33Z

backend/src/main/resources/db/migration/prod/V15__create_table_interview.sql

@@ -14,10 +14,8 @@ create table if not exists prolog.interview_session (
 create table if not exists prolog.interview_message (
    created_at datetime not null,
    session_id bigint not null,
-    member_id bigint not null,
    sender enum ('INTERVIEWEE','INTERVIEWER','SYSTEM') not null,


The member_id column has been removed from the interview_message table. Ensure that the application logic no longer relies on this column. If it does, this is a critical issue.

gemini-code-assist · 2025-04-15T09:23:33Z

frontend/src/pages/InterviewPage/InterviewSetup.tsx

+        // API 응답 데이터 구조 확인 및 변환
+        const questionList = response.data.questions || response.data || [];
+        const formattedQuestions = questionList.map((q: any) => ({
+          id: q.id,
+          content: q.content || q.question || q.text || '',
+        }));
+


The component handles different possible response structures from the /questions API. It would be better to standardize the API response to avoid this complexity. Standardizing the API response will make the frontend code cleaner and easier to maintain.

const formattedQuestions = response.data.questions.map((q: any) => ({ id: q.id, content: q.content, }));

gemini-code-assist · 2025-04-15T09:23:33Z

backend/src/main/java/wooteco/prolog/interview/ui/InterviewController.java

        return ResponseEntity.created(URI.create("/interviews/" + session.id()))
-            .build();
+            .body(session);


Returning the session in the body is good for immediate feedback, but consider if returning only the URI in the Location header is more appropriate for a RESTful API. The client can then fetch the resource if needed.

Suggested change

return ResponseEntity.created(URI.create("/interviews/" + session.id()))

.build();

.body(session);

return ResponseEntity.created(URI.create("/interviews/" + session.id()))

.build();

gemini-code-assist · 2025-04-15T09:23:33Z

frontend/src/pages/InterviewPage/InterviewSession.tsx

+const api = axios.create({
+  baseURL: 'http://localhost:8080',
+});


Consider using environment variables to configure the base URL for the API. This will allow you to easily switch between different environments (e.g., development, production).

const api = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:8080', });

gemini-code-assist · 2025-04-15T09:23:33Z

frontend/src/pages/InterviewPage/InterviewSession.tsx

+    } catch (error) {
+      console.error('Failed to submit answer:', error);


Using console.error is not ideal for production. Consider implementing a more robust error handling mechanism, such as displaying an error message to the user.

console.error('Failed to submit answer:', error); // Display error message to user alert('Failed to submit answer. Please try again.');

gemini-code-assist · 2025-04-15T09:23:33Z

frontend/src/pages/InterviewPage/InterviewSetup.tsx

+const api = axios.create({
+  baseURL: 'http://localhost:8080',
+});


Consider using environment variables to configure the base URL for the API. This will allow you to easily switch between different environments (e.g., development, production).

const api = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:8080', });

gemini-code-assist · 2025-04-15T09:23:34Z

frontend/src/pages/InterviewPage/InterviewSetup.tsx

+        console.error('Failed to fetch questions:', error);
+        setQuestions([]);


Using console.error is not ideal for production. Consider implementing a more robust error handling mechanism, such as displaying an error message to the user.

console.error('Failed to fetch questions:', error); // Display error message to user alert('Failed to fetch questions. Please try again.');

feat: 레벨 인터뷰 페이지 연동

6d66282

gemini-code-assist bot reviewed Apr 15, 2025

View reviewed changes

gemini-code-assist bot suggested changes Apr 15, 2025

View reviewed changes

feat: 레벨 인터뷰 힌트 적용

63fafb1

gracefulBrown merged commit 4c46a55 into main Apr 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: 레벨 인터뷰 페이지 연동 #1642

feat: 레벨 인터뷰 페이지 연동 #1642

Uh oh!

gracefulBrown commented Apr 15, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

gemini-code-assist bot Apr 15, 2025

Uh oh!

Uh oh!

		} catch (error) {
		console.error('Failed to submit answer:', error);

		console.error('Failed to fetch questions:', error);
		setQuestions([]);

feat: 레벨 인터뷰 페이지 연동 #1642

feat: 레벨 인터뷰 페이지 연동 #1642

Uh oh!

Conversation

gracefulBrown commented Apr 15, 2025

#️⃣연관된 이슈

📝작업 내용

💬리뷰 요구사항(선택)

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Changelog

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Summary of Findings

Merge Readiness

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!