Skip to content

FE: [feat] 프로젝트 페이지 구현중. 오탈자 수정 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
soonge2 merged 1 commit into from
Feb 27, 2025
Merged

FE: [feat] 프로젝트 페이지 구현중. 오탈자 수정 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/views/Login/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function Login() {

if (response.status === 200) {
const userData = {
token: result.accessToken
token: result.data.accessToken
};
localStorage.setItem("user", JSON.stringify(userData)); // token, username, projectList
console.log("로그인 성공");
Expand All @@ -44,7 +44,7 @@ export default function Login() {
{
method: "GET",
headers: {
"Authorizaton": `Bearer ${token}`
"Authorization": `Bearer ${token}`
}
});
if (!infoResponse.ok) {
Expand Down
79 changes: 48 additions & 31 deletions src/views/Project/Project.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@ export default function Project() {
const projectList = user.projectList || [];
const project = projectList.find(p => p.projectId === parseInt(projectId, 10));

// 문제 목록
// 문제 목록, 에러, 현재 문제 인덱스, 사용자 답안, 제출 결과 메시지
const [problems, setProblems] = useState([]);
const [error, setError] = useState('');
// 현재 보여줄 문제의 인덱스
const [currentProblemIndex, setCurrentProblemIndex] = useState(0);
// 사용자가 입력한 답 (객관식은 "a", "b", "c", "d", 단답형/서술형은 텍스트)
const [userAnswer, setUserAnswer] = useState('');
const [submissionResult, setSubmissionResult] = useState("");

/* 문제 목록 불러오기 요청 */
useEffect(() => {
Expand All @@ -38,10 +37,10 @@ export default function Project() {
}
return response.json();
})
.then(data => {
.then(result => {
// 응답 데이터에서 problemList 저장 (없으면 빈 배열)
setProblems(data.problemList || []);
console.log('문제 목록 저장 완료:', data.problemList);
setProblems(result.data.problemList || []);
console.log('문제 목록 저장 완료:', result.data.problemList);
})
.catch(err => {
console.error("문제 목록 요청 실패:", err);
Expand Down Expand Up @@ -203,7 +202,10 @@ export default function Project() {
localStorage.setItem("user", JSON.stringify(userData));
window.dispatchEvent(new Event("storageChange"));

alert(`정답 제출 완료. 정답이 ${isCorrect ? "맞습니다" : "틀립니다"}.`);
// 객관식과 단답형 문제일 때만 결과 메시지 출력
if (currentProblem.problemType === "객관식" || currentProblem.problemType === "단답형") {
setSubmissionResult(isCorrect ? "정답이 맞습니다." : "정답이 틀립니다.");
}
} catch (err) {
console.error("정답 제출 중 오류:", err);
alert("정답 제출 중 오류가 발생했습니다.");
Expand Down Expand Up @@ -244,7 +246,10 @@ export default function Project() {
localStorage.setItem("user", JSON.stringify(userData));
window.dispatchEvent(new Event("storageChange"));

alert(`정답 제출 완료. 정답이 ${isCorrect ? "맞습니다" : "틀립니다"}.`);
// 객관식과 단답형 문제일 때만 결과 메시지 출력
if (currentProblem.problemType === "객관식" || currentProblem.problemType === "단답형") {
setSubmissionResult(isCorrect ? "정답이 맞습니다." : "정답이 틀립니다.");
}
}, 1000);
}
};
Expand Down Expand Up @@ -279,37 +284,49 @@ export default function Project() {
</div>
{/* 문제 유형에 따라 입력 필드 다르게 표시 */}
{currentProblem.problemType === "객관식" ? (
<div className="problem-options">
{currentProblem.options.map((option, index) => {
// 객관식은 순서대로 a, b, c, d로 매핑
const letter = String.fromCharCode(97 + index); // 97은 'a'
return (
<label key={index} className="option-label">
<div className="problem-options">
{currentProblem.options.map((option, index) => {
const letter = String.fromCharCode(97 + index);
return (
<label key={index} className="option-label">
<input
type="radio"
name={`problem-${currentProblem.problemId}`}
value={letter}
onChange={(e) => setUserAnswer(e.target.value)}
/>
{letter}. {option}
</label>
);
})}
</div>
) : currentProblem.problemType === "단답형" ? (
<div className="problem-input">
<input
type="radio"
name={`problem-${currentProblem.problemId}`}
value={letter}
type="text"
placeholder="정답 입력"
value={userAnswer}
onChange={(e) => setUserAnswer(e.target.value)}
/>
{letter}. {option}
</label>
);
})}
</div>
</div>
) : (
<div className="problem-input">
<input
type="text"
placeholder="정답 입력"
value={userAnswer}
onChange={(e) => setUserAnswer(e.target.value)}
/>
</div>
// 서술형 문제의 경우에는 입력 필드를 표시하지만 결과 메시지는 출력하지 않음.
<div className="problem-input">
<input
type="text"
placeholder="정답 입력"
value={userAnswer}
onChange={(e) => setUserAnswer(e.target.value)}
/>
</div>
)}
</div>
<div className="arrow-right" onClick={handleNext}>{">"}</div>
</div>
<button className="submit-answer-button" onClick={handleSubmitAnswer}>정답 제출</button>
{((currentProblem.problemType === "객관식" || currentProblem.problemType === "단답형") && submissionResult) && (
<div className="submission-result">{submissionResult}</div>
)}
</div>
) : (
<p>문제가 없습니다.</p>
Expand All @@ -327,4 +344,4 @@ export default function Project() {
</div>
</div>
)
}
}
2 changes: 1 addition & 1 deletion src/views/Question/DoneScreen.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function DoneScreen({ responseData }) {
const handleGoToProject = () => {
const projectId = responseData?.data?.currentProjectId;
if (projectId) {
navigate(`/projcet/${projectId}`);
navigate(`/project/${projectId}`);
} else {
console.log("프로젝트 ID가 없습니다.");
navigate(`/question`);
Expand Down