Skip to content

Commit

Permalink
Merge pull request #114 from YAPP-Github/refactor/problem-94
Browse files Browse the repository at this point in the history
[ Refactor/problem 94 ] 문제풀이 페이지 model 구현
  • Loading branch information
Happhee authored Jul 21, 2024
2 parents 16c6c03 + a999270 commit d33fa88
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 78 deletions.
59 changes: 13 additions & 46 deletions src/problem/components/AnswerChoiceButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { cn } from "@shared/utils/cn";

import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo";
import ProblemContext from "@problem/context/problemContext";
import { AnswerChoiceModel } from "@problem/models/AnswerChoiceModel";
import { QUERY_KEY } from "@problem/remotes/api";
import {
AnswerCheckInfo,
Expand Down Expand Up @@ -46,40 +47,23 @@ export default function AnswerChoiceButton({
};
},
});
const problemAnswerInfo = problemAnswersInfo[0];

const answerChoiceModel = new AnswerChoiceModel({
problemAnswerInfo: problemAnswersInfo[0],
choiceNumber: choiceAnswer,
renderNumber: number,
});

const onClickAnswerChoice = () => {
if (!problemAnswerInfo) updateChoiceAnswer(number);
if (!answerChoiceModel.isProblemAnswerInfo) updateChoiceAnswer(number);
};

const answerResultInfo = problemAnswerInfo?.data;
const postChoiceAnswer = problemAnswerInfo?.variables;

useEffect(
function setButtonClassName() {
if (!answerResultInfo) {
if (choiceAnswer === number)
setClassName(
ANSWER_CHOICHE_BUTTON_INFO.CURRENT_CHOICE_ANSWER.className,
);

if (choiceAnswer !== number)
setClassName(ANSWER_CHOICHE_BUTTON_INFO.INIT_CHOICE_ANSWER.className);
}
if (answerResultInfo) {
if (answerResultInfo.data.answer === number)
setClassName(
ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_CORRECT.className,
);
if (
answerResultInfo.data.isSolved === false &&
number === postChoiceAnswer.sub
) {
setClassName(ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_FAIL.className);
}
}
const buttonInfo = answerChoiceModel.answerChoiceButtonClassName;
setClassName(buttonInfo?.className);
},
[choiceAnswer, number, problemAnswerInfo],
[choiceAnswer, number, problemAnswersInfo],
);

return (
Expand All @@ -95,25 +79,8 @@ export default function AnswerChoiceButton({
</span>

<ChoiceFillCircleSvg
isChoice={
(!answerResultInfo && choiceAnswer === number) ||
(answerResultInfo &&
(postChoiceAnswer.sub === number ||
answerResultInfo.data.answer === number))
}
fill={
(!answerResultInfo && choiceAnswer === number && "white") ||
(!answerResultInfo && choiceAnswer !== number && "#A5A5A5") ||
(answerResultInfo &&
answerResultInfo.data.answer === number &&
"#0166B3") ||
(answerResultInfo &&
answerResultInfo.data.isSolved === false &&
postChoiceAnswer.sub === number &&
"#B00020") ||
(answerResultInfo && postChoiceAnswer.sub !== number && "#A5A5A5") ||
""
}
isChoice={answerChoiceModel.isChoiceFillCircle}
fill={answerChoiceModel.getChoiceFillColor}
/>
</Button>
);
Expand Down
66 changes: 34 additions & 32 deletions src/problem/components/AnswerSubmitButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { Button } from "@shared/components/ui/button";
import { deleteCookie } from "cookies-next";

import { useProblemIdsViewModel } from "@common/models/useProblemIdsViewModel";
import { BUTTON_INFO } from "@problem/constants/answerButtonInfo";
import QuizContext from "@problem/context/problemContext";
import { AnswerSubmitModel } from "@problem/models/AnswerSubmitModel";
import { QUERY_KEY } from "@problem/remotes/api";
import { postProblemAnswerMutationOptions } from "@problem/remotes/postProblemAnswerOption";
import { AnswerCheckInfo } from "@problem/types/problemInfo";
Expand All @@ -37,42 +37,44 @@ export default function AnswerSubmitButton() {
select: (mutation) => mutation.state.data as AnswerCheckInfo,
});

const answerSubmitModel = new AnswerSubmitModel({
isChoiceAnswer: Boolean(choiceAnswer),
isPostAnswerSuccess: Boolean(problemAnswerInfo[0]),
isExistNextProblem: isExistNextProblem(),
});

const onPostProblemAnswer = () => {
if (choiceAnswer && !problemAnswerInfo[0])
postProblemAnswer({ sub: choiceAnswer.toString() });
const answerSubmitModel = new AnswerSubmitModel({
isChoiceAnswer: Boolean(choiceAnswer),
isPostAnswerSuccess: Boolean(problemAnswerInfo[0]),
isExistNextProblem: isExistNextProblem(),
});
const BUTTON_STATE = answerSubmitModel.answerButtonState;

if (problemAnswerInfo[0] && isExistNextProblem()) {
initProblemContextInfo();
const problemId = nextSetProblemId();
push(`/problem/${problemId}`);
}
if (problemAnswerInfo[0] && !isExistNextProblem()) {
push("/");
setTimeout(() => {
clearProblem();
deleteCookie(IS_EXIST_PROBLEMS);
}, 2000);
switch (BUTTON_STATE) {
case "PRE_ANSWER_SELECT":
postProblemAnswer({ sub: (choiceAnswer || "").toString() });
break;

case "POST_SUBMIT":
initProblemContextInfo();
const problemId = nextSetProblemId();
push(`/problem/${problemId}`);
break;

case "LINK_TO_MAIN":
push("/");
setTimeout(() => {
clearProblem();
deleteCookie(IS_EXIST_PROBLEMS);
}, 2000);
break;
}
};
const isPostAnswerSuccess = problemAnswerInfo[0];
const result =
(isPostAnswerSuccess &&
!isExistNextProblem() &&
BUTTON_INFO.LINK_TO_MAIN.title) ||
(isPostAnswerSuccess && BUTTON_INFO.POST_SUBMIT.title) ||
(!isPostAnswerSuccess && BUTTON_INFO.PRE_ANSWER_SELECT.title);
const buttonInfo = answerSubmitModel.answerSubmitButtonClassName;

const style =
(!choiceAnswer &&
!isPostAnswerSuccess &&
BUTTON_INFO.PRE_ANSWER_SELECT.className) ||
(choiceAnswer &&
!isPostAnswerSuccess &&
BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.className) ||
(isPostAnswerSuccess &&
!isExistNextProblem() &&
BUTTON_INFO.LINK_TO_MAIN.className) ||
(isPostAnswerSuccess && BUTTON_INFO.POST_SUBMIT.className);
const result = buttonInfo?.title;
const style = buttonInfo?.className;

return (
<Button
Expand Down
85 changes: 85 additions & 0 deletions src/problem/models/AnswerChoiceModel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo";
import { ProblemAnswerMuationState } from "@problem/types/problemInfo";

export class AnswerChoiceModel {
constructor({
problemAnswerInfo,
choiceNumber,
renderNumber,
}: {
problemAnswerInfo: ProblemAnswerMuationState | undefined;
choiceNumber: string | null;
renderNumber: string;
}) {
this.problemAnswerInfo = problemAnswerInfo;
this.choiceNumber = choiceNumber;
this.renderNumber = renderNumber;

this.answerChoiceButtonType();
}

private answerChoiceButtonType() {
const isSubmitAnswer = Boolean(this.problemAnswerInfo?.data);
const answerResultInfo = this.problemAnswerInfo?.data;
const postChoiceAnswer = this.problemAnswerInfo?.variables;

this.INIT_CHOICE_ANSWER =
!isSubmitAnswer && this.choiceNumber !== this.renderNumber;
this.CURRENT_CHOICE_ANSWER =
!isSubmitAnswer && this.choiceNumber === this.renderNumber;

this.CHOICE_ANSWER_CORRECT =
isSubmitAnswer && answerResultInfo?.data.answer === this.renderNumber;
this.CHOICE_ANSWER_FAIL =
isSubmitAnswer &&
answerResultInfo?.data.isSolved === false &&
this.renderNumber === postChoiceAnswer?.sub;
}
get answerChoiceButtonClassName() {
if (this.INIT_CHOICE_ANSWER)
return ANSWER_CHOICHE_BUTTON_INFO.INIT_CHOICE_ANSWER;

if (this.CURRENT_CHOICE_ANSWER)
return ANSWER_CHOICHE_BUTTON_INFO.CURRENT_CHOICE_ANSWER;

if (this.CHOICE_ANSWER_CORRECT)
return ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_CORRECT;

if (this.CHOICE_ANSWER_FAIL)
return ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_FAIL;

return ANSWER_CHOICHE_BUTTON_INFO.INIT_CHOICE_ANSWER;
}

get isChoiceFillCircle() {
if (this.INIT_CHOICE_ANSWER) return false;
if (
!this.CURRENT_CHOICE_ANSWER &&
!this.CHOICE_ANSWER_CORRECT &&
!this.CHOICE_ANSWER_FAIL
)
return false;
return true;
}

get getChoiceFillColor() {
if (this.INIT_CHOICE_ANSWER) return "#A5A5A5";
if (this.CURRENT_CHOICE_ANSWER) return "white";
if (this.CHOICE_ANSWER_CORRECT) return "#0166B3";
if (this.CHOICE_ANSWER_FAIL) return "#B00020";
return "#A5A5A5";
}

get isProblemAnswerInfo() {
return Boolean(this.problemAnswerInfo);
}

private problemAnswerInfo: ProblemAnswerMuationState | undefined;
private choiceNumber: string | null;
private renderNumber: string;

private INIT_CHOICE_ANSWER: boolean = false;
private CURRENT_CHOICE_ANSWER: boolean = false;
private CHOICE_ANSWER_CORRECT: boolean = false;
private CHOICE_ANSWER_FAIL: boolean = false;
}
56 changes: 56 additions & 0 deletions src/problem/models/AnswerSubmitModel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { BUTTON_INFO, BUTTON_STATE } from "@problem/constants/answerButtonInfo";

export class AnswerSubmitModel {
constructor({
isPostAnswerSuccess,
isChoiceAnswer,
isExistNextProblem,
}: {
isPostAnswerSuccess: boolean;
isExistNextProblem: boolean;
isChoiceAnswer: boolean;
}) {
this.isPostAnswerSuccess = isPostAnswerSuccess;
this.isChoiceAnswer = isChoiceAnswer;
this.isExistNextProblem = isExistNextProblem;

this.answerSubmitType();
}

private answerSubmitType() {
this.LAST_PROBLEM_LINK_TO_MAIN =
this.isPostAnswerSuccess && !this.isExistNextProblem;
this.POST_ANSWER_SUBMIT =
this.isPostAnswerSuccess && this.isExistNextProblem;
this.BEFORE_CHOICHE_ANSWER =
!this.isChoiceAnswer && !this.isPostAnswerSuccess;
this.POST_ANSWER_PRE_SUBMIT =
this.isChoiceAnswer && !this.isPostAnswerSuccess;
}
get answerSubmitButtonClassName() {
if (this.BEFORE_CHOICHE_ANSWER) return BUTTON_INFO.PRE_ANSWER_SELECT;

if (this.POST_ANSWER_SUBMIT) return BUTTON_INFO.POST_SUBMIT;

if (this.POST_ANSWER_PRE_SUBMIT) return BUTTON_INFO.POST_ANSWER_PRE_SUBMIT;

if (this.LAST_PROBLEM_LINK_TO_MAIN) return BUTTON_INFO.LINK_TO_MAIN;
}

get answerButtonState() {
if (this.POST_ANSWER_PRE_SUBMIT) return BUTTON_STATE[0];

if (this.POST_ANSWER_SUBMIT) return BUTTON_STATE[2];

if (this.LAST_PROBLEM_LINK_TO_MAIN) return BUTTON_STATE[3];
}

private isPostAnswerSuccess: boolean = false;
private isExistNextProblem: boolean = false;
private isChoiceAnswer: boolean = false;

private LAST_PROBLEM_LINK_TO_MAIN: boolean = false;
private POST_ANSWER_SUBMIT: boolean = false;
private BEFORE_CHOICHE_ANSWER: boolean = false;
private POST_ANSWER_PRE_SUBMIT: boolean = false;
}

0 comments on commit d33fa88

Please sign in to comment.