[3주차 과제] 🌼 쵸키 푸키를 찾아라 💖 #8

Arooming · 2023-05-05T08:06:52Z

🌈 기본 과제

✨ `게임 난이도 선택`

난이도의 종류
- easy → 10개 :: 5쌍 맞추기
- normal → 14개 :: 7쌍 맞추기
- hard → 18개 :: 9쌍 맞추기

난이도 중간에 바꿀시, 카드 모두 뒤집어서 처음으로 돌아가기

✨ `정답 수 노출`

(현재 나의 스코어) / 전체 정답 으로 상단에 노출

✨ `카드 선택`

2개의 카드를 선택하면 다른 카드는 선택할 수 없습니다.

해당 카드의 일치 여부를 조사
1. 정답일 경우
  - 정답 스코어 증가
  - 카드 뒤집힌 채로 유지
2. 오답일 경우
  - 카드 다시 뒷면으로 돌리기

✨ `카드 배열 순서`

카드가 배열되는 순서는 반드시 랜덤으로 지정
난이도에 따라 지정되는 쌍도 랜덤으로 지정

🌈 심화 과제

✨ `애니메이션`

카드를 선택

→ 뒤집어지는 기깔나는 애니메이션을 적용해주세요!!
카드 쌍을 맞춘 경우

→ 저는 현재 스코어가 빛나는 애니메이션을 적용했습니다! 마음대루!!

✨ `theme` + `styled-components` :: 적용

globalstyle
theme

→ 전역에서 사용할 수 있도록 적용해보세요!

✨ `게임 초기화 버튼`

게임 도중 ‘다시하기’ 버튼을 누르면 모든 게임 설정이 처음으로 돌아갑니다.

✨ `createPortal`

모든 카드 맞추기가 끝난 후 보여주는 모달을 Portal을 활용해 만들어주세요!

🌼 PR Point

🍟 카드 랜덤으로 출력

카드 리스트를 상수 배열로 만들고, Math.random() 메소드를 활용해서 랜덤으로 리스트가 섞이도록 구현했어요.
Math.random() - 0.5는 계산 결과가 음수나 양수 중 하나로 나오기 때문에, 이를 활용해서 카드 리스트의 요소가 무작위로 정렬될 수 있게 해줬어요.
난이도 별 리스트가 호출될 때마다 카드 이미지가 랜덤으로 재 정렬되도록 mix 함수를 새로운 상수에 할당하여 export 했어요.

function mixEasyCardList() {
  const mixedEasyCardList = cardImgList
    .sort(() => Math.random() - 0.5)
    .slice(0, 5);
  return mixedEasyCardList.concat(mixedEasyCardList);
}

function mixNormalCardList() {
  const mixedNormalCardList = cardImgList
    .sort(() => Math.random() - 0.5)
    .slice(0, 7);
  return mixedNormalCardList.concat(mixedNormalCardList);
}

function mixHardCardList() {
  const mixedHardCardList = cardImgList.sort(() => Math.random() - 0.5);
  return mixedHardCardList.concat(mixedHardCardList);
}

export const easyCardList = mixEasyCardList();

export const normalCardList = mixNormalCardList();

export const hardCardList = mixHardCardList();

🍟 난이도 별 페이지 동적으로 구현

처음에는 난이도 별로 하나씩 페이지를 생성했었는데, 기능을 구현하면서 중복 코드가 너무 많이 생기게 되더라구요..!
난이도 별로 카드 리스트만 다르게 받을 수 있다면, 하나의 페이지를 두고 동적으로 사용할 수 있을 것 같았어요.

동적으로 페이지를 구현한다면 중복 코드도 없애고 코드 유지 보수도 쉽게 할 수 있을 것 같아서 동적으로 페이지를 구현하는 쪽으로 코드를 수정했습니다.

// Button.jsx
const levelData = ["EASY", "NORMAL", "HARD"];
const [isClick, setIsClick] = useState(0);

<LevelBtnContainer>
        {levelData.map((data, idx) => {
          return (
            <LevelButton
              key={idx}
              type="button"
              isClick={idx === isClick}
              onClick={() => {
                setIsClick(idx);
              }}
            >
              {data}
            </LevelButton>
          );
        })}
      </LevelBtnContainer>

levelData에 난이도 정보를 담고, 난이도 별 버튼을 생성했어요.
난이도 선택 버튼을 클릭했을 때 setIsClick에 idx를 넣어 현재 렌더링 되는 데이터의 index인 idx와 클릭된 데이터의 index인 isClick의 값이 같아지도록 구현했어요.

// Button.jsx
const [currentPage, setCurrentPage] = useState(<CommonPage />);

useEffect(() => {
    switch (isClick) {
      case 0:
        setCurrentPage(<CommonPage cardList={easyCardList} />);
        break;

      case 1:
        setCurrentPage(<CommonPage cardList={normalCardList} />);
        break;

      case 2:
        setCurrentPage(<CommonPage cardList={hardCardList} />);
        break;

      default:
        break;
    }
  }, [isClick, shuffle]);

return (
	{currentPage};
)

isClick은 levelData의 현재 렌더링되는 데이터의 인덱스 값과 같기 때문에 0: “Easy’, 1: “Normal”, 2: “Hard” 레벨을 의미해요.
switch 문을 활용해서 CommonPage의 prop을 다르게 주어 난이도 별로 출력되는 카드 쌍의 개수를 조절해주었어요.

🍟 카드 쌍을 맞춘 경우 애니메이션 적용

animate가 true인 경우에만 className(scale)이 할당되고, 해당 className에 보여주고자 하는 애니메이션을 저장했어요.

결과적으로, 카드 쌍을 맞췄을 때 animate는 true → className: scale → 보여주고자 하는 애니메이션이 실행됩니다

const [animate, setAnimate] = useState(false);

return (
	<AnswerCounter className={animate ? "scale" : ""}>
		<strong>
			{counter} / {length}
		</strong>
	</AnswerCounter>
)

const AnswerCounter = styled.h1`
  margin: 1.5rem 0rem;
  text-align: center;

  color: ${({ theme }) => theme.colors.lightPink};

  font-size: 2rem;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc,
    0 10px 10px rgba(0, 0, 0, 0.4);

  &.scale {
    transform: scale(1.5, 1.5);
    color: ${({ theme }) => theme.colors.lightYellow};
    text-shadow: 0 1px 0 #fec086, 0 2px 0 #fec086, 0 3px 0 #fec086,
      0 10px 10px rgba(0, 0, 0, 0.4);
  }
`;

🥺 소요 시간, 어려웠던 점

12h

🍟 하나의 카드 선택 시, 같은 이미지를 가진 카드가 공개됨

하나의 카드를 선택하니까 같은 이미지를 가진 카드가 공개돼버리는 문제가 있었습니다..! 이 부분을 어떻게 해결해야 할 지 고민해봤는데 도무지 방법을 모르겠더라구요?…
결국 두 개의 카드가 같은 요소를 참조하고 있기 때문에 발생되는 문제인 것 같아서 이런 저런 자료를 찾아보다가 깊은 복사까지 가게 됐어요,,,,

JSON.parse(JSON.stringify(obj))를 활용해서 깊은 복사를 통해 서로 다른 객체를 참조하도록 구현했고, 이 방법으로 문제를 해결하긴 했는데,, 이게 맞는 방법인지 잘 모르겠어요ㅠ

이 문제에 대한 리뷰 ,,,, (다른 부분에 대한 리뷰도 당연히) 언제나 환영입니당 부탁드려요ㅜ_ㅠ
```
// JSON.parse(JSON.stringify(obj)): 깊은 복사
const copied = JSON.parse(
      JSON.stringify(
        // Object.keys(): 객체를 문자열 배열로 변환
        Object.keys(cardList)
          .map((item) => cardList[item])
          // flat(): 하나의 배열로 만들고자 사용
          .flat()
      )
```

🌈 구현 결과물

_1.mp4

→ 난이도 별로 카드 수 변경됨

_2.mp4

→ 정답 맞출 시, 애니메이션 적용/ 모든 카드를 찾았을 시, 모달 띄워짐/ reset 클릭 시, 카드 순서 변경됨

useMemo() 훅 활용하여 cardList가 변경되지 않을 경우, 이전 값을 재 사용하도록 구현

JSON.parse(JSON.Stringify(obj)) 활용하여 깊은 복사가 가능하도록 수정

iamphj3

아루밍 넘 고생해써!!! 마니 고민한게 잘 느껴져.....흑 진짜 고생해따 ㅜㅜ

iamphj3 · 2023-05-08T02:32:54Z

week3/src/components/Button.jsx

+    switch (isClick) {
+      case 0:
+        setCurrentPage(<CommonPage cardList={easyCardList} />);
+        break;
+
+      case 1:
+        setCurrentPage(<CommonPage cardList={normalCardList} />);
+        break;
+
+      case 2:
+        setCurrentPage(<CommonPage cardList={hardCardList} />);
+        break;
+
+      default:
+        break;
+    }


요거 isClick을 요기서 switch문으로 나누지 말고 요렇게 바로 넣고, 공통적인 함수로 수행할 수 있도록 리팩토링 할 수도 있을 것 같아! ㅎㅎ 밑에 mixCardList부분에도 달아놨당!!

Suggested change

switch (isClick) {

case 0:

setCurrentPage(<CommonPage cardList={easyCardList} />);

break;

case 1:

setCurrentPage(<CommonPage cardList={normalCardList} />);

break;

case 2:

setCurrentPage(<CommonPage cardList={hardCardList} />);

break;

default:

break;

}

setCurrentPage(<CommonPage cardList={mixCardList(isClick)} />);

iamphj3 · 2023-05-08T02:35:02Z

week3/src/constants/cardImgList.js

+function mixEasyCardList() {
+  const mixedEasyCardList = cardImgList
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 5);
+  return mixedEasyCardList.concat(mixedEasyCardList);
+}
+
+function mixNormalCardList() {
+  const mixedNormalCardList = cardImgList
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 7);
+  return mixedNormalCardList.concat(mixedNormalCardList);
+}
+
+function mixHardCardList() {
+  const mixedHardCardList = cardImgList.sort(() => Math.random() - 0.5);
+  return mixedHardCardList.concat(mixedHardCardList);
+}


머ㅓ 이런식으로...?! 아름이가 구현한 방식도 직관적이고 넘 좋은데 난 뭔가 공통된 기능을 수행하는 함수들은 하나로 묶는게 좋을 것 같다구 갠적으로 생각해써 ㅎㅎㅎ 취향차이일수도 ㅎㅎㅎㅎ

Suggested change

function mixEasyCardList() {

const mixedEasyCardList = cardImgList

.sort(() => Math.random() - 0.5)

.slice(0, 5);

return mixedEasyCardList.concat(mixedEasyCardList);

}

function mixNormalCardList() {

const mixedNormalCardList = cardImgList

.sort(() => Math.random() - 0.5)

.slice(0, 7);

return mixedNormalCardList.concat(mixedNormalCardList);

}

function mixHardCardList() {

const mixedHardCardList = cardImgList.sort(() => Math.random() - 0.5);

return mixedHardCardList.concat(mixedHardCardList);

}

function mixCardList(isClick) {

let cardNum;

switch (isClick) {

case 0:

cardNum = 5;

break;

case 1:

cardNum = 7;

break;

case 2:

cardNum = 9;

break;

default:

break;

}

const mixedCardList = cardImgList

.sort(() => Math.random() - 0.5)

.slice(0, cardNum);

return mixedCardList.concat(mixedCardList);

}

헐 구러네? 난 이 생각은 못했던 것 같아! 위에 switch 문빼고 이렇게 묶으니까 훨씬 기능도 직관적으로 잘 보여서 좋은 것 같아 나두 공통된 기능하는 함수들 하나로 묶으려고 생각 많이 했던 것 같은데 요건 몰랐네..~~ 리팩토링때 참고해야ㅜ지

iamphj3 · 2023-05-08T02:45:07Z

week3/src/components/Button.jsx

+  // 기본 난이도 'EASY'로 설정
+  const [isClick, setIsClick] = useState(0);


0, 1, 2로 난이도 구분하는건가? 그러면 아예 상수로 const EASY = 5, const NORMAL = 7 요런식으로 선언하는건 어땡?!

위에 현지 말대루 난이도 easy 가 0 이라서 기본 난이도 설정을 easy로 해두는걸 useState(0)으로 한건가??

@SynthiaLee 웅 마자 난이도 0,1,2 로 구분하고 잇써! 그래서 기본 난이도 설정을 easy로 하려고 useState 기본 값을 0으로 한고야!

@iamphj3 (아래 51~54 번째 줄) click한 값과 levelData의 인덱스가 같으면 해당 난이도가 선택됐다는 걸 나타내기 위해서 난이도를 0, 1, 2로 구분해줬어..!!

iamphj3 · 2023-05-08T02:46:15Z

week3/src/components/Button.jsx

+  const levelData = ["EASY", "NORMAL", "HARD"];
+  // 기본 난이도 'EASY'로 설정
+  const [isClick, setIsClick] = useState(0);
+  const [currentPage, setCurrentPage] = useState(<CommonPage />);


초기값에 currentPage 컴포넌트에 cardList props 안들어가도 되는거야?! 밑에 난이도 설정에는 있길래!!!

초기값으로는 props없이 페이지만 리턴하고 아래서 난이도 별로 props를 준다고 생각해서 이렇게 구현했더..! 초기값에도 props를 주는게 좋을까?

iamphj3 · 2023-05-08T02:48:28Z

week3/src/components/Button.jsx

+      <ResetButton
+        type="button"
+        onClick={() => {
+          setShuffle((prev) => prev + 1);


왜 리셋버튼을 누르면 setShuffle에 +1을 하는거야??!

나두 궁금!!!

아! 이거 reset 버튼이 클릭될 때마다 위에 페이지들을 다시 렌더링시켜서 카드 배열을 변하게 해주려고 shuffle을 생성했어! 그래서 버튼이 클릭될 때마다 shuffle 값에 변화를 줘서 useEffect가 실행될 수 있게 구현해봤어..!!

iamphj3 · 2023-05-08T07:28:23Z

week3/src/components/Header.jsx

+    <>
+      <ChokiPokiHeader>
+        <strong> 💗 쵸키랑 푸키를 맞춰주세요! 💗</strong>
+        <AnswerCounter className={animate ? "scale" : ""}>


animate 이면 scale 효과를 주려고 넣은건강?! 그러면 그냥 요런식으로 props로 넘겨줘서 조건부로 스타일 적용할 수 있지 않으까??!

Suggested change

<AnswerCounter className={animate ? "scale" : ""}>

<AnswerCounter animate={animate}>

iamphj3 · 2023-05-08T07:29:50Z

week3/src/components/Modal.jsx

+  @font-face {
+    font-family: "UhBeeSe_hyun";
+    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/UhBeeSe_hyun.woff")
+      format("woff");
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  font-family: "UhBeeSe_hyun";
+  font-size: 1rem;


요것두 theme으로 적용해주쟈!!!

iamphj3 · 2023-05-08T07:30:38Z

week3/src/components/SingleCard.css

+.card {
+  position: relative;
+}
+
+.card .front {
+  transform: rotateY(90deg);
+  transition: all ease-in 0.1s;
+  position: absolute;
+}
+
+.flipped .front {
+  transform: rotateY(0deg);
+  transition-delay: 0.1s;
+}
+
+.card .back {
+  transition: all ease-in 0.1s;
+  transition-delay: 0.1s;
+}
+
+.flipped .back {
+  transform: rotateY(90deg);
+  transition-delay: 0s;
+}


요건 왜 js안에 안넣구 따로 css 파일로 빼준걸까??!?!?!

js에서 한번에 정의하기가 헷갈려서 css로 빼서 먼저 기능 구현하고 js에 넣으려고 했는데 그냥 올려버렸....ㅎㅎ 다시 해봐야쥥

iamphj3 · 2023-05-08T07:33:08Z

week3/src/components/SingleCard.jsx

+  };
+  return (
+    <div className="card">
+      <div className={flipped ? "flipped" : ""}>


이것도 일케 바로 prop으로 넘겨주면된당!!!

Suggested change

<div className={flipped ? "flipped" : ""}>

<div flipped={flipped}>

iamphj3 · 2023-05-08T07:45:24Z

week3/src/components/CommonPage.jsx

+        flippedCard.length === copiedCardList.length
+          ? setModalOn(true)
+          : setModalOn(false);


Suggested change

flippedCard.length === copiedCardList.length

? setModalOn(true)

: setModalOn(false);

setModalOn(flippedCard.length === copiedCardList.length);

요렇게 하면 좀 더 간결하게 쓸 수 있겠당!ㅎㅎ

SynthiaLee · 2023-05-08T17:07:38Z

week3/src/components/Button.jsx

+        {levelData.map((data, idx) => {
+          return (
+            <LevelButton
+              key={idx}


키값 잊지않구 준거 칭찬해~!

SynthiaLee · 2023-05-08T17:19:37Z

week3/src/constants/cardImgList.js

+const cardImgList = [
+  {
+    name: img_1,
+    alt: "첫 번째 카드",


alt도 따로 줬구나! 나는 아예 name으로 alt에도 같이 쓸 수 있는걸 줘서 그걸 재활용했는데 alt랑 이름이랑 많이 다른거 아닌 경우에는 추천해!

마쟈!! 그렇게 쓰는 것도 좋은 것 같아! 근데 alt는 이미지를 설명하는 글이라 좀 더 직관적이게 해주는게 좋다고 해서 따로 한글로 정의해줬어ㅎㅎ

SynthiaLee · 2023-05-08T17:24:24Z

week3/src/components/CommonPage.jsx

+
+  return (
+    <>
+      <Header counter={counter} length={copiedCardList.length / 2} />


요기 현지가 위에 counter score로 바꾸는거 말한거처럼 length 도 �totalScore 같은걸로 바꿔주면 더 직관적일거 같아!!

SynthiaLee · 2023-05-08T17:25:17Z

week3/src/components/CommonPage.jsx

+  const flippedCard = document.getElementsByClassName("flipped");
+
+  // useMemo() 활용하여 cardList가 변경되지 않을 경우, 이전 값을 재사용하도록 구현
+  const copiedCardList = useMemo(() => {


오 useMemo 사용햇구나 싱기...!

웅 useMemo에 dependency로는 cardList를 줘서 리스트가 변하지 않을 경우에는 카드 배열이 변하지 않도록 했어..!! 안그러면 카드를 하나 클릭할 때마다 계속 카드 배열이 변하더라구 흑흑

SynthiaLee · 2023-05-08T17:56:33Z

week3/src/components/Modal.jsx

+
+export default Modal;
+
+const ModalContainer = styled.div`


div 대신 section 으로 시맨틱하게 바꿔도 좋을거 같아~!

옹 코드 구현할 때 section 태그는 그룹화하는 역할이라고 생각을 해서 모달 생성에 section을 쓰는건 의도와 맞지 않다고 생각햇던 것 같아! 다시 잘 생각해보고 리팩토링때 참고할게!!

SynthiaLee · 2023-05-08T18:03:11Z

어디서 아루미처럼 큐티뽀쨕한 캐릭터를 들고왓서...🥺 수고해따아💓

Arooming added 30 commits April 26, 2023 16:00

init: 초기 환경 구축

e07952f

feat: css 전역변수 생성

3018ee5

style: title 변경

15ed4e3

chore: style-components 설치

32bcda2

feat: Header 생성

5778688

chore: 설치 및 업데이트

ffc9b24

style: 색상 및 폰트 수정

98e9381

feat: 난이도 선택 버튼 추가

91aefe4

style: GlobalStyle 파일로 분리

7db65d4

style: 카드 이미지 추가

311e61f

feat: 선택된 난이도에 따라 다른 페이지 렌더링

10bf217

style: 전역 스타일 추가

b1961c3

chore: 카드 이미지 리스트 생성

1affc68

feat: 난이도 별 페이지 생성

24770bb

feat: 카드 섞기

5ffbda0

remove: 난이도 별 페이지 삭제

a4f866b

feat: 난이도 별 이미지 전달

eb59ead

remove: 안 쓰는 파일 삭제

056989e

chore: 필요없는 주석 삭제

b38baa2

feat: 난이도 별 카드 불러오기 동적 구현

450054d

chore: prop-types 설치

c9bbefa

style: 카드 뒷면 사진

df4a1ba

feat: 카드 생성 컴포넌트 분리 및 prop-types 지정

1f987eb

feat: 카드 생성 부분 컴포넌트로 분리

c95df59

feat: reset 기능 추가

8679a34

feat: 선택된 카드의 동일함 여부에 따라 콘솔 출력

0c4064d

fix: 카드 선택 시 모든 카드 위치가 재 정렬되는 오류 해결

66ec068

useMemo() 훅 활용하여 cardList가 변경되지 않을 경우, 이전 값을 재 사용하도록 구현

style: reset 버튼 position 변경

481bca6

feat: 카드 뒤집힌 상태로 있다가 선택하면 앞면 보임

2509faa

fix: 하나의 카드 선택 시 동일한 주소의 이미지를 가진 카드까지 공개되는 오류 해결

7588080

JSON.parse(JSON.Stringify(obj)) 활용하여 깊은 복사가 가능하도록 수정

Arooming added 7 commits May 5, 2023 02:28

remove: 생각과제 삭제

5694a0b

feat: 난이도 별 카드 이미지 랜덤 지정

e474728

feat: 2개 카드 선택 시, 다른 카드 선택 불가

292a49a

fix: 오타 수정

bb8c04c

chore: 콘솔 삭제

ffd5dfc

chore: timeout 시간 늘림

a3f469a

style: 카드 크기 수정

5cd57a2

Arooming requested review from iamphj3, Happhee and SynthiaLee May 5, 2023 08:07

Arooming assigned iamphj3 and SynthiaLee and unassigned iamphj3 and SynthiaLee May 5, 2023

Arooming added 기본과제 심화과제 3주차 labels May 5, 2023

iamphj3 reviewed May 8, 2023

View reviewed changes

SynthiaLee reviewed May 8, 2023

View reviewed changes

Arooming added 6 commits June 9, 2023 15:15

Merge branch 'main' into week3_findCard

5452b9b

refactor: theme에 font 추가

c0a3c5b

refactor: 중복 코드 삭제

aa3abe6

refactor: 연산자 수정

fa9c773

refactor: 코드리뷰 반영

a7627e8

refactor: 직관적인 변수 명으로 수정

f1a28d8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 과제] 🌼 쵸키 푸키를 찾아라 💖 #8

[3주차 과제] 🌼 쵸키 푸키를 찾아라 💖 #8

Arooming commented May 5, 2023 •

edited

Loading

iamphj3 left a comment

iamphj3 May 8, 2023

iamphj3 May 8, 2023

Arooming May 10, 2023

iamphj3 May 8, 2023

SynthiaLee May 8, 2023

Arooming May 10, 2023

Arooming May 10, 2023 •

edited

Loading

iamphj3 May 8, 2023

Arooming May 10, 2023

iamphj3 May 8, 2023

SynthiaLee May 8, 2023

Arooming May 10, 2023

iamphj3 May 8, 2023

iamphj3 May 8, 2023

iamphj3 May 8, 2023

Arooming May 10, 2023

iamphj3 May 8, 2023

iamphj3 May 8, 2023

SynthiaLee May 8, 2023

SynthiaLee May 8, 2023

Arooming May 10, 2023

SynthiaLee May 8, 2023

Arooming May 10, 2023

SynthiaLee May 8, 2023

Arooming May 10, 2023 •

edited

Loading

SynthiaLee May 8, 2023

Arooming May 10, 2023

SynthiaLee commented May 8, 2023

		// 기본 난이도 'EASY'로 설정
		const [isClick, setIsClick] = useState(0);

	<AnswerCounter className={animate ? "scale" : ""}>
	<AnswerCounter animate={animate}>

	<div className={flipped ? "flipped" : ""}>
	<div flipped={flipped}>

[3주차 과제] 🌼 쵸키 푸키를 찾아라 💖 #8

Are you sure you want to change the base?

[3주차 과제] 🌼 쵸키 푸키를 찾아라 💖 #8

Conversation

Arooming commented May 5, 2023 • edited Loading

🌈 기본 과제

✨ 게임 난이도 선택

✨ 정답 수 노출

✨ 카드 선택

✨ 카드 배열 순서

🌈 심화 과제

✨ 애니메이션

✨ theme + styled-components :: 적용

✨ 게임 초기화 버튼

✨ createPortal

🌼 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

iamphj3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Arooming May 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Arooming May 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SynthiaLee commented May 8, 2023

Arooming commented May 5, 2023 •

edited

Loading

✨ `게임 난이도 선택`

✨ `정답 수 노출`

✨ `카드 선택`

✨ `카드 배열 순서`

✨ `애니메이션`

✨ `theme` + `styled-components` :: 적용

✨ `게임 초기화 버튼`

✨ `createPortal`

Arooming May 10, 2023 •

edited

Loading

Arooming May 10, 2023 •

edited

Loading