(실제로 istj는 아닙니다.. 그림은 아이패드로 그렸음!!)
ResultPage
ResultPage에서는 쿼리스트링으로 받은, 나열된 12개의 mbti 요소를 가지고 mbti 결과를 보여주기로 했다.
JSON
ResultPage에 보여줄 mbti 결과 글 역시 json 데이터로 만들었다.
"id": "INFJ",
"subhead": "#계획적 #창의적 #갈등조정 #평화주의자",
"nickname1": "평화롭게 갑시다!",
"nickname2": "계획적 서포팅형 팀원",
"img": "img/INFJ.jpg",
"description": [
{
"des": "인내심이 많고 통찰력과 직관이 뛰어나며 배려심이 많아요"
},
{
"des": "팀플에서 다른 팀원들에게 잘 맞춰주고, 웬만해선 불만을 표시하지 않아요"
},이런 식으로.
그리고 똑같이 ResultPage에 임포트했다.
import mbti from "../json/mbtiresult";처음에 저렇게 했더니, vs코드에 임포트가 안 된 것처럼 보여서 이것저것 건드렸었는데, 그냥 저렇게 해도 되는 거였더라...
useSearchParams
쿼리스트링을 가져오기 위해서 useSearchParams를 사용했다.
result?name=Hyeon&res=EJESFJIJSTNF여기서 name뒤의 값으로 유저의 이름을, res 뒤의 값으로 MBTI를 판별하여 결과 페이지에 보여줄 것이다.
const params = searchParams.get("res");
const input_name = searchParams.get("name");먼저 params 변수와 input_name 변수에 각 값을 넣어줬다.
let e = 0, s = 0, t = 0, j = 0;그리고 params 변수에 mbti요소가 각 몇개가 있는지 체크하기 위해 e,s,t,j라는 변수를 만들어줬다. (어차피 e-i, s-n, t-f, j-p는 각각 합쳐서 3개가 나오기 때문에 한 쪽 개수만 세도 나머지 요소의 개수를 알 수 있다. 고로 e,s,t,j변수만 만들어줬다)
for (let c = 0; c <= params.length; c++) {
if (params[c] === 'E')
e++;
else if (params[c] === 'S')
s++;
else if (params[c] === 'T')
t++;
else if (params[c] === 'J')
j++;
}그 후 for문을 통해 e,s,t,j의 길이를 세줬다. params.length까지 돌리는 걸로 설정해놨지만 12로 했어도 될듯...?
let result = [e >= 2 ? 'E' : 'I',
s >= 2 ? 'S' : 'N',
t >= 2 ? 'T' : 'F',
j >= 2 ? 'J' : 'P'
];그리고 e, s, t, j의 개수를 세서, result라는 배열[]에 결과를 담도록 했다.
위의 params를 따른다면 result는 [ESFJ]가 될 것임!
let count;
outer: for (count = 0; count < 16; count++) {
for (let i = 0; i < 4; i++) {
if (mbti[count].id[i] !== result[i]) {
break;
} else if (i === 3) {
break outer;
}
}
}이제 result를 가지고 json 데이터를 가져오자. count라는 변수를 선언해 json에 저장된 16개의 mbti.id를 돈다.
여기서 mbti는 import mbti from "../json/mbtiresult";로 가져온 json 데이터다. 그리고 돌면서 mbti[count].id와 result의 값이 같은 경우를 찾는다. i가 string을 돌면서 완벽하게 mbti가 일치하는지 확인할 것이다.
여기선 outer를 설정해서, 만약 id와 result가 일치한다면 이중 for문을 바로 탈출할 수 있도록 설정했다.
<h3>조별 과제 속 <span>{input_name}</span>님의 모습은?</h3>
<h3>{mbti[count].nickname1}</h3>
<h2>{mbti[count].nickname2}</h2>
<p>{mbti[count].id}</p>
<img src={mbti[count].img} alt="결과 이미지" width="200px" height="200px"/>이런 식으로 count의 값을 가지고 mbti 결과를 보여줬슴니다.
<div className="btn">
<CopyToClipboard text={window.location.toString()} onCopy={() => alert("공유 링크가 복사되었습니다!")}>
<button>결과 공유하기</button>
</CopyToClipboard>CopyToClipboard로 결과 링크를 복사할 수 있게 했다.
text에 복사할 링크를 넣어준다. window.location.toString()은 window.location.href와 같은 값이 나오는데, 전체 url의 값을 반환한다.
그리고 onCopy에 alert를 넣어주어 "공유링크가 복사되었습니다!"라는 알림이 뜨도록 했다.
<Link to="/" style={{textDecoration: 'none'}}>
<button>다시 테스트 하기</button>
</Link>
</div>또 다시테스트하기 라는 버튼을 만들고 그것을 Link로 감싸 첫 화면('/')으로 돌아가게 만들었다. textDecoration: 'none'하면 link 때문에 생기는 밑줄이 사라진다.
====
끝끝끝. 오랜만에 다시 코드보니까 왜 이렇게 짰지? 이해 안 가는 부분도 있고 그렇다.
