Skip to content
This repository has been archived by the owner on Jun 15, 2024. It is now read-only.

feat: 상세 결과페이지 해설 기능 구현 #81

Merged
merged 2 commits into from
Jan 19, 2024
Merged

feat: 상세 결과페이지 해설 기능 구현 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
211a3ca
feat: 상세 결과페이지 해설 기능 구현
toothlessdev Jan 19, 2024
f1293e6
fix : GithubAction 배포자동화 스크립트 수정 resolve #80
toothlessdev Jan 19, 2024
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 .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ jobs:
port: ${{ secrets.DEPLOY_SERVER_PORT }}
script: |
cd stocodi-web
git checkout release
git pull origin release
echo ${{secrets.DEPLOY_SERVER_PASSWORD}} | sudo -S git checkout release --force
echo ${{secrets.DEPLOY_SERVER_PASSWORD}} | sudo -S git pull origin release --force
chmod +x ./deploy.sh
echo ${{secrets.DEPLOY_SERVER_PASSWORD}} | sudo -S bash ./deploy.sh
49 changes: 49 additions & 0 deletions src/constants/Result.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,55 @@ export const GetResult = (score: number) => {
}
};

export const GetResultCommentIndex = (score: number) => {
return ((score / 20 + 1).toFixed(0) as unknown as number) - 1;
};

export const ResultComment = {
comment_basic: [
"경제에 대한 기초적인 이해가 필요한 단계입니다. 이 문제에서는 물가지수와 기준금리의 관계에 대한 오해가 있습니다. 물가지수는 국가의 통화량과 물가 상승률을 나타내는 지표로, 중앙은행의 기준금리는 이를 조절하는데 영향을 미칩니다.",
"경제에 대한 기초적인 이해가 있으나, 몇몇 개념에 대한 혼동이 있을 수 있습니다. 예를 들어, 금리가 돈의 가치에 어떻게 영향을 미치는지에 대한 개념을 좀 더 명확히 이해할 필요가 있습니다.",
"경제에 대한 중간 수준의 이해를 가지고 있습니다. 일부 개념은 잘 이해하고 있지만, 미흡한 부분이 있을 수 있습니다. 특히 환율과 해외여행에 대한 관계를 좀 더 심화된 관점에서 이해할 필요가 있습니다.",
"경제에 대한 기본 개념을 잘 이해하고 있습니다. 추가적인 학습과 실무 경험을 통해 더욱 향상될 수 있습니다. 인플레이션과 빈부격차에 대한 개념을 더 깊이 파고들면 좋을 것입니다.",
"경제에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 개념에 대한 세부적인 이해도가 높을 것으로 예상됩니다. 물가조절 정책과 중앙은행의 역할 등에 대한 더 깊은 이해를 기대할 수 있습니다.",
],
comment_bank: [
"은행상품에 대한 기초적인 이해가 부족합니다. 예금자 보호법과 은행상품의 특징에 대한 기본적인 공부가 필요합니다.",
"은행상품에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 예를 들어, 시간이 지날수록 받는 이자와 관련된 문제에서 조금 더 명확한 이해가 필요합니다.",
"은행상품에 대한 기본적인 이해가 있습니다. 예금자 보호법과 은행상품 간의 차이를 명확히 이해하는 것이 중요합니다.",
"은행상품에 대한 중간 수준의 이해를 가지고 있습니다. 보다 심화된 내용에 대한 학습이 필요할 수 있습니다. 은행상품을 효과적으로 활용하는 방법에 대한 추가적인 공부가 필요합니다.",
"은행상품에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 어려운 부분도 잘 이해하고 있을 것으로 예상됩니다. 전문가 수준의 은행상품 활용 능력을 갖추고 있습니다. 향후 금융 계획 수립과 관리에 높은 수준의 자신감이 기대됩니다.",
],
comment_credit: [
"카드와 신용에 대한 기초적인 이해가 필요한 단계입니다. 신용카드와 체크카드의 차이 등을 명확히 이해하는 것이 중요합니다.",
"카드와 신용에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 신용점수와 카드의 관계에 대한 이해를 더 깊이 파고들면 좋을 것입니다.",
"카드와 신용에 대한 기본적인 이해가 있습니다. 몇몇 부분에서는 미숙할 수 있습니다. 제1금융권과 제2금융권에 대한 차이 등을 명확히 이해하는 것이 중요합니다.",
"카드와 신용에 대한 중간 수준의 이해를 가지고 있습니다. 보다 심화된 내용에 대한 학습이 필요할 수 있습니다. 카드 사용 시의 금융 전략에 대한 이해가 높아질 것으로 기대됩니다.",
"카드와 신용에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 어려운 개념도 이해하고 있을 것으로 예상됩니다. 카드와 신용을 효과적으로 관리하는 방법에 대한 전문 지식을 보유하고 있습니다. 전문가 수준의 카드와 신용 관리 능력을 갖추고 있습니다. 향후 금융 전략 수립과 관리에 뛰어난 능력이 기대됩니다.",
],
comment_tax: [
"세금에 대한 기초적인 이해가 필요한 단계입니다. 은행 예금에 대한 과세 방법과 연말정산에 대한 이해가 필요합니다.",
"세금에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 은행 예금과 소득에 대한 세금 부과에 대한 이해를 높이는 것이 중요합니다.",
"세금에 대한 기본적인 이해가 있습니다. 그러나 몇몇 부분에서는 미흡할 수 있습니다. 세액공제와 연말정산에 대한 내용을 더 자세히 이해할 필요가 있습니다.",
"세금에 대한 중간 수준의 이해를 가지고 있습니다. 세액공제와 소득공제에 대한 내용을 더 심화된 관점에서 이해하는 것이 중요합니다.",
"세금에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 어려운 부분도 잘 이해하고 있을 것으로 예상됩니다. 연말정산과 세액공제에 대한 전문 지식을 가지고 있습니다. 전문가 수준의 세금 전략 수립과 관리 능력을 보유하고 있습니다. 향후 금융 전략 수립과 관리에 뛰어난 능력이 기대됩니다.",
],
comment_insurance: [
"보험에 대한 기초적인 이해가 필요한 단계입니다. 주보험과 특약, 실손의료보험에 대한 기본적인 지식이 부족합니다.",
"보험에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 주보험과 특약에 대한 차이를 명확히 이해하는 것이 중요합니다.",
"보험에 대한 기본적인 이해가 있습니다. 그러나 몇몇 부분에서는 미흡할 수 있습니다. 보험금 지급과 관련된 내용을 더 자세히 이해할 필요가 있습니다.",
"보험에 대한 중간 수준의 이해를 가지고 있습니다. 실손의료보험에 대한 내용을 더 깊이 파고들면 좋을 것입니다.",
"보험에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 어려운 부분도 잘 이해하고 있을 것으로 예상됩니다. 다양한 보험 상품에 대한 심화된 지식을 보유하고 있습니다. 전문가 수준의 보험 전략 수립과 관리 능력을 갖추고 있습니다. 향후 금융 전략 수립과 관리에 뛰어난 능력이 기대됩니다.",
],
comment_investment: [
"투자에 대한 기초적인 이해가 필요한 단계입니다. 주식과 채권, ETF, 레버리지 상품에 대한 기본적인 지식이 부족합니다.",
"투자에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 주식과 채권에 대한 차이를 명확히 이해하는 것이 중요합니다.",
"투자에 대한 중간 수준의 이해를 가지고 있습니다. 주식과 채권의 위험과 수익에 대한 내용을 더 깊이 파고들면 좋을 것입니다.",
"투자에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇 어려운 부분도 잘 이해하고 있을 것으로 예상됩니다. 다양한 투자 전략에 대한 전문 지식을 가지고 있습니다.",
"투자에 대한 탁월한 지식을 갖고 있습니다. 전문가 수준의 투자 전략 수립과 관리 능력을 갖추고 있습니다. 향후 금융 전략 수립과 관리에 뛰어난 능력이 기대됩니다.",
],
};

export const ResultLow = [
{
img: "/img/test-1.png",
Expand Down
51 changes: 35 additions & 16 deletions src/pages/test-page/ResultDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import domtoimage from "dom-to-image";
import { Link } from "react-router-dom";

import { LabelContainer } from "../../interfaces/display/LabelContainer";
import { AvatarSection } from "../../components/test-page/AvatarSection";
Expand All @@ -20,7 +21,9 @@ import { useSelector } from "react-redux";
import { RootState } from "../../store/store";
import { shareKakaoLink } from "../../utils/ShareKakaoLink";

import { GetResult } from "../../constants/Result";
import { GetResult, GetResultComment, GetResultCommentIndex, ResultComment } from "../../constants/Result";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";

export default function ResultDetailPage() {
const { score } = useSelector((state: RootState) => state.UserQuestion);
Expand Down Expand Up @@ -51,16 +54,30 @@ export default function ResultDetailPage() {

<div className={resultPageStyle.result_section}>
<LabelContainer label="해설" width="min(486px, 100%)">
경제기초: 경제에 대한 기본 개념을 잘 이해하고 있습니다. 추가적인 학습과 실무 경험을 통해 더욱 향상될 수 있습니다. 인플레이션과
빈부격차에 대한 개념을 더 깊이 파고들면 좋을 것입니다. 은행상품: 은행상품에 대한 기본적인 이해가 있습니다. 예금자 보호법과
은행상품 간의 차이를 명확히 이해하는 것이 중요합니다. 카드와 신용: 카드와 신용에 대한 높은 수준의 이해를 보여주고 있습니다. 몇몇
어려운 개념도 이해하고 있을 것으로 예상됩니다. 카드와 신용을 효과적으로 관리하는 방법에 대한 전문 지식을 보유하고 있습니다.
세금:세금에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 은행 예금과 소득에 대한 세금 부과에 대한 이해를 높이는
것이 중요합니다. 보험: 보험에 대한 일부 기본 개념을 이해하고 있지만, 혼동이 있을 수 있습니다. 주보험과 특약에 대한 차이를 명확히
이해하는 것이 중요합니다. 투자: 투자에 대한 기본적인 이해가 있습니다. 그러나 몇몇 부분에서는 미흡할 수 있습니다. ETF와 레버리지
상품에 대한 내용을 더 자세히 이해할 필요가 있습니다.
<span style={{ fontWeight: "bold" }}>경제기초 : </span>
<span>{ResultComment.comment_basic[GetResultCommentIndex(score[0])]}</span>
<br />
<span style={{ fontWeight: "bold" }}>은행상품 : </span>
<span>{ResultComment.comment_bank[GetResultCommentIndex(score[1])]}</span>
<br />
<span style={{ fontWeight: "bold" }}>카드와 신용 : </span>
<span>{ResultComment.comment_credit[GetResultCommentIndex(score[2])]}</span>
<br />
<span style={{ fontWeight: "bold" }}>세금 : </span>
<span>{ResultComment.comment_tax[GetResultCommentIndex(score[3])]}</span>
<br />
<span style={{ fontWeight: "bold" }}>보험 : </span>
<span>{ResultComment.comment_insurance[GetResultCommentIndex(score[4])]}</span>
<br />
<span style={{ fontWeight: "bold" }}>투자 : </span>
<span>{ResultComment.comment_investment[GetResultCommentIndex(score[5])]}</span>
</LabelContainer>

<Link to="/test/result" style={{ textAlign: "left", margin: "20px auto" }}>
<FontAwesomeIcon icon={faArrowLeft} />
<span style={{ margin: "0px 10px" }}>뒤로 가기</span>
</Link>

<div className={styles.pros_cons_container}>
<div className={styles.pros_cons_item}>
<ProsConsContainer type="pros" width="65%" title={GetCategory(score.indexOf(Math.max(...score)))} />
Expand All @@ -82,21 +99,23 @@ export default function ResultDetailPage() {
label="이미지 저장"
onClick={() => {
// eslint-disable-next-line, @typescript-eslint/no-unsafe-call
domtoimage.toJpeg(document.querySelector(`.${styles.result_page}`) as Node, { quality: 0.95 }).then(function (dataUrl) {
const link = document.createElement("a");
link.download = "금융역량테스트 결과.jpeg";
domtoimage
.toJpeg(document.querySelector(`.${resultPageStyle.result_page}`) as Node, { quality: 0.95 })
.then(function (dataUrl) {
const link = document.createElement("a");
link.download = "금융역량테스트 결과.jpeg";

link.href = dataUrl;
link.click();
});
link.href = dataUrl;
link.click();
});
}}
/>
<ShareItem
icon={shareKakao}
label="카카오톡"
onClick={() => {
console.log("click");
shareKakaoLink("공유하기", "http://localhost:3000/test");
shareKakaoLink("금융역량테스트 바로가기", "http://stocodi.com/test");
}}
/>
<ShareItem icon={shareIG} label="인스타그램" onClick={() => alert("서비스 준비중입니다")} />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/test-page/ResultPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function ResultPage() {
label="카카오톡"
onClick={() => {
console.log("click");
shareKakaoLink("공유하기", "http://localhost:3000/test");
shareKakaoLink("금융역량테스트 바로가기", "http://stocodi.com/test");
}}
/>
<ShareItem icon={shareIG} label="인스타그램" onClick={() => alert("서비스 준비중입니다")} />
Expand Down