[TIL] 2021/12/06 Thu - 레이어 팝업, 공통 alert 컴포넌트 만들기, 퀴즈 결과 로직 수정

 

 

 

 

 

Today I Learned

 

 

오늘도 수정할 게 많았다.

 

 

 소셜 공유하기 레이어 팝업 

 

 

원래는 아래에서 위로 올라오는 바텀 시트를 만들고 싶었는데,

참고하려는 코드를 보니 우리의 프로젝트 규모에 적용하기에는 오버스팩이라 레이어팝업으로 만드는 것으로 변경했다.

 

모달 래퍼는 컴포넌트로 만들어둔 게 있어서 그걸 사용하려다가

이미 다른 곳에서 사용하려고 mui 패키지가 설치되어 있었기 때문에 mui의 백드롭을 사용하기로 했다.

 

 

 

 

팝업은 esc 키를 누르거나 닫기를 눌렀을 때만 닫히도록 만들었고,

소셜 공유하기는 세 개의 페이지에서 사용되기 때문에 컴포넌트화 하였다.

 

 

 퀴즈 결과 화면 출력 로직 추가 

 

퀴즈 10개 문제 중 맞힌 개수에 따라 특정 텍스트가 출력되도록 수정했다.

 

0-3개 : 아주 작은 기적..."밈기적".

4-7개 : n개 맞춘 나, 제법 "밈잘알"이에요.

8-10개 : 치료가 필요할 정도로 심각한 "밈중독"입니다.

 

 

props로 받은 퀴즈 문제 리스트에 있는 정답과 리덕스에서 불러온 유저가 선택한 리스트를 비교하여 맞힌 개수를 계산했다.

 

/* 생략 */

const user_answer_list = useSelector((state) => state.quiz.user_answer_list)
const answerCnt = quiz_list
  ? quiz_list.filter((quiz, i) => {
    return quiz.solution === user_answer_list[i]
  }).length
: null

/* 생략 */

 

화면에 출력할 텍스트의 변수는 useState로 만들고,

처음 렌더링될 때 바로 실행될 수 있도록 useEffect로 state를 설정했다.

 

/* 생략 */

const [resultText, setResultText] = useState({ sub: '', main: '' })

useEffect(() => {
  if (answerCnt >= 0 && answerCnt < 4) {
    setResultText({ sub: '아주 작은 기적...', main: '"밈기적."' })
  } else if (answerCnt >= 4 && answerCnt < 8) {
    setResultText({ sub: `${answerCnt}개나 맞춘 나,`, main: '제법 "밈잘알"이에요.' })
  } else {
    setResultText({ sub: '치료가 필요할 정도로 심각한', main: '"밈중독"입니다.' })
  }
}, [])

/* 생략 */

 

 

 

 알럿 컴포넌트 만들기 

 

 

공통으로 쓸 알럿 컴포넌트를 만들었다.

기본으로 나오는 window.alert는 서비스와 어울리지도 않고 위치도 애매해서 그대로 쓰기 싫었고,

다른 팀원이 스윗알럿을 쓴 페이지가 있었는데 위치 커스텀이 안 돼서 변경했다.

 

알럿이 쓰이는 곳이 의외로 많아서 다 적용을 한 것 같은데도 남아있어서 계속 찾아내야 한다.

 

 

 

 

 

완성해야 하는 기한이 다가올수록 성격이 예민해져서 큰일이다.