Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @gracefulBrown, I'm Gemini Code Assist1! 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
InterviewControlleris modified to return the created session in the response body when creating a new interview session, instead of just returning a201 Createdresponse. - Backend: Database Migration: The
interview_messagetable schema is updated by removing themember_idandfinishedcolumns. - Frontend: Interview Page: A new
InterviewPagecomponent is created, which includesInterviewSetupandInterviewSessioncomponents 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
/interviewpath.
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
createmethod to return the createdInterviewSessionResponsein the response body.
- Added import for
- backend/src/main/resources/db/migration/prod/V15__create_table_interview.sql
- Removed the
member_idandfinishedcolumns from theinterview_messagetable.
- Removed the
- 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.
- Added a new path constant for the interview page:
- frontend/src/pages/InterviewPage/InterviewPage.tsx
- Created a new
InterviewPagecomponent withInterviewSetupandInterviewSessioncomponents. - Implemented state management for the interview session and callbacks for session start, update, and end.
- Created a new
- frontend/src/pages/InterviewPage/InterviewSession.tsx
- Created a new
InterviewSessioncomponent 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.
- Created a new
- frontend/src/pages/InterviewPage/InterviewSetup.tsx
- Created a new
InterviewSetupcomponent 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.
- Created a new
- frontend/src/pages/InterviewPage/index.tsx
- Exported the
InterviewPagecomponent.
- Exported the
- frontend/src/pages/index.ts
- Exported the
InterviewPagecomponent from the main pages index.
- Exported the
- frontend/src/routes.js
- Imported the
InterviewPagecomponent. - Added a new route for the interview page.
- Imported the
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.
Footnotes
-
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. ↩
There was a problem hiding this comment.
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
createmethod inInterviewControllerreturns theInterviewSessionResponsein 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 theLocationheader 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.tsxcomponent handles different possible response structures from the/questionsAPI. It would be better to standardize the API response to avoid this complexity. - Error Handling: The frontend components use
console.errorfor 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.
| created_at datetime not null, | ||
| session_id bigint not null, | ||
| member_id bigint not null, | ||
| sender enum ('INTERVIEWEE','INTERVIEWER','SYSTEM') not null, |
There was a problem hiding this comment.
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.
| // API 응답 데이터 구조 확인 및 변환 | ||
| const questionList = response.data.questions || response.data || []; | ||
| const formattedQuestions = questionList.map((q: any) => ({ | ||
| id: q.id, | ||
| content: q.content || q.question || q.text || '', | ||
| })); | ||
|
|
There was a problem hiding this comment.
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,
}));|
|
||
| return ResponseEntity.created(URI.create("/interviews/" + session.id())) | ||
| .build(); | ||
| .body(session); |
There was a problem hiding this comment.
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.
| return ResponseEntity.created(URI.create("/interviews/" + session.id())) | |
| .build(); | |
| .body(session); | |
| return ResponseEntity.created(URI.create("/interviews/" + session.id())) | |
| .build(); |
| const api = axios.create({ | ||
| baseURL: 'http://localhost:8080', | ||
| }); |
There was a problem hiding this comment.
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',
});| } catch (error) { | ||
| console.error('Failed to submit answer:', error); |
There was a problem hiding this comment.
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.');| const api = axios.create({ | ||
| baseURL: 'http://localhost:8080', | ||
| }); |
There was a problem hiding this comment.
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',
});| console.error('Failed to fetch questions:', error); | ||
| setQuestions([]); |
There was a problem hiding this comment.
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.');
1 participant
#️⃣연관된 이슈
#1641 연관된 프론트엔드 작업
📝작업 내용
레벨 인터뷰 프론트 기능 구현
💬리뷰 요구사항(선택)