[ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 #4

seobbang · 2023-05-04T14:24:37Z

✨ 구현 기능 명세

기본 과제

✅ 게임 난이도 선택

난이도의 종류

easy → 10개 :: 5쌍 맞추기

normal → 14개 :: 7쌍 맞추기

hard → 18개 :: 9쌍 맞추기

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

✅ 정답 수 노출

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

✅ 카드 선택

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

해당 카드의 일치 여부를 조사

정답일 경우

정답 스코어 증가

카드 뒤집힌 채로 유지

오답일 경우

카드 다시 뒷면으로 돌리기

✅ 카드 배열 순서

카드가 배열되는 순서는 반드시 랜덤으로 지정

난이도에 따라 지정되는 쌍도 랜덤으로 지정

종류 선택시 태그를 카드섹션 위에 하나씩 부착합니다

태그별 상품 리스트 보여줍니다.

전체 → 다보여주기

종류별 → 필터기능

x 클릭시

카드 다시 정렬

종류 선택 해제

태그 삭제

심화 과제

✅ 애니메이션

카드를 선택

뒤집어지는 기깔나는 애니메이션을 적용해주세요!!

카드 쌍을 맞춘 경우

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

✅ theme + styled-components :: 적용

globalstyle

theme

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

✅ 게임 초기화 버튼

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

✅ createPortal

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

✅ 생각 과제

🌼 PR Point

전역 상태관리 라이브러리를 사용하지 않고 구현했습니다!

FindOmpangi.jsx

랜덤으로 카드가 결정되도록 하기 위해서 셔플 함수를 만들었어요.

  // 배열 셔플 함수
  const shuffling = () => {
    const shuffle = (array) => {
      let newArray = array.sort(() => Math.random() - 0.5);
      return newArray;
    };

    shuffle(OMPANGI_DATA);
    const slicedData = OMPANGI_DATA.slice(
      0,
      level === EASY ? 5 : level === NORMAL ? 7 : 9
    );
    return shuffle([...slicedData, ...slicedData]);
  };

level이 바뀌거나 reset 버튼이 눌리지 않는 한 만들어진 랜덤 데이터가 바뀌지 않도록 useMemo를 이용했어요

  // 렌더링 할 랜덤 배열 만들기
  let renderData = useMemo(() => {
    return shuffling();
  }, [level, reset]);

CardSection.jsx

카드 앞면과 뒷면을 openCardList에 따라 조건부 렌더링했어요.

// 카드 렌더링
  const cardList = renderData.map((item, idx) => {
    const { id: cardId, imgSrc, alt } = item;
    // openCardList에 인덱스 있는지 검사해서 조건분기 렌더링
    return openCardList.includes(idx) ? (
      <St.CardFront
        key={`${cardId}_${idx}_front`}
        className={
          openCardList.indexOf(idx) >= openCardList.length - 2 && `${isRotate}`
        }
      >
        <img src={imgSrc} alt={alt} />
      </St.CardFront>
    ) : (
      <St.CardBack
        key={`${cardId}_${idx}_back`}
        id={idx}
        className={cardId}
        onClick={isClickAbled ? handleCardClick : null}
      >
        🌼
      </St.CardBack>
    );
  });

짝 맞추기 실패시,

일정 시간이 지난 후(1.2초) 회전
이후 열린 카드 배열 수정, 이외 카드 클릭 허용 등
필요한 작업을 동기적으로 구현하기 위해 setTimeOut 메소드를 이용했어요.
👉 이런 상황에서 동기적으로 구현할 수 있는 더 좋은 방법이 있다면 공유해주세요! 👐

 // 실패
    else {
      setTimeout(() => {
        setIsRotate("rotate");
      }, 1200);
      // 카드 오픈 리스트에서 최근에 넣었던 두 개 카드 삭제
      setTimeout(() => {
        const newList = openCardList.slice(0, -1);
        setOpenCardList(newList);
        setIsClickAbled(true);
        setIsRotate("");
      }, 1300);
    }

Header.jsx

저는 정답을 맞췄을 때, 점수가 깜빡이는 애니메이션을 적용해보았어요!
최초 렌더링에는 깜빡이지 않도록 early return을 해주었습니다!

  useEffect(() => {
    // 최초 렌더링 early return
    if (score === 0) return;

    if (score === cardCount) {
      setIsModalOpen(true);
    }

    setIsBlink(true);
    setTimeout(() => {
      setIsBlink(false);
    }, 2500);
  }, [score]);

➕ 1차 리팩토링
testCardList의 경우 선택한 두 카드가 짝이 맞는지 검사하기 위한 배열인데, 원래는 state로 만들었다가 다시 생각해보니 렌더링과 관련 없는 변수이므로 state로 관리하는게 적합하지 않다고 생각했어요! 그래서 일반 변수로 바꿔주었습니당

🥺 소요 시간, 어려웠던 점

처음에 카드 앞면과 뒷면을 조건부 렌더링을 해버렸더니 뒤집히는 이벤트 구현할 때 잘 안돼서 힘들었어요 😂
그래서 중간에 class 유무에 따라 앞 뒤를 보여주는 방식으로 다시 바꿀까 하다가, 그냥 한 번 이 상태로 구현해봤습니다! ㅎㅎ

🌈 구현 결과물

level 바꾸기

카드게임 구현 (뒤집어지는 애니메이션, 쌍을 맞춘 경우 깜빡이는)

level 바꾸면 초기화

reset 버튼

모달 구현

hae2ni · 2023-05-07T14:46:32Z

find-ompangi/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">


아니 디테일 뭐냐구,, 감덩이다 정말

우리 셋은 이건 꼭 지켜야지.. 맞지맞지

hae2ni · 2023-05-07T14:47:03Z

find-ompangi/src/App.jsx

+    <>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <Router />


Router를 벌써 쓴거얌..?

hae2ni · 2023-05-07T14:49:10Z

find-ompangi/src/components/CardSection.jsx

+      <St.CardFront
+        key={`${cardId}_${idx}_front`}
+        className={
+          openCardList.indexOf(idx) >= openCardList.length - 2 && `${isRotate}`


혹시 이부분 자세히 설명해줄 수 있으까욤..?

hae2ni · 2023-05-07T14:49:37Z

find-ompangi/src/components/CardSection.jsx

+    margin-top: 1rem;
+  `,
+
+  CardFront: styled.article`


시멘틱 태그 다 써준 거 너무너무 죠타아! 👍

hae2ni · 2023-05-07T14:50:38Z

find-ompangi/src/components/Header.jsx

+import styled from "styled-components";
+
+const Header = ({ level, score, setIsModalOpen }) => {
+  const cardCount = level === "EASY" ? 5 : level === "NORMAL" ? 7 : 9;


아니 엄청 여러가지 생각을 하게 해준 코드였ㅓ,,, (나는 하나하나 조건 나눠서 useState로 바꿨는데, 코드 줄이기 딱 좋다 배워가요ㅠㅠ!

hae2ni · 2023-05-07T14:50:57Z

find-ompangi/src/components/Header.jsx

+
+const Header = ({ level, score, setIsModalOpen }) => {
+  const cardCount = level === "EASY" ? 5 : level === "NORMAL" ? 7 : 9;
+  const [isBlink, setIsBlink] = useState(false);


이거는 다 맞췄을 때 반짝이는 애니메이션 효과에 관한 건가요?

pr 다시 읽어보니까 맞구만

hae2ni · 2023-05-07T14:53:45Z

find-ompangi/src/pages/FindOmpangi.jsx

@@ -0,0 +1,132 @@
+import styled from "styled-components";


아니 파일 구조 왜이렇게 잘 짰어,, 난 암 생각이 없었구나,, 진짜 반성하구가,,,

hae2ni · 2023-05-07T14:54:26Z

find-ompangi/src/pages/FindOmpangi.jsx

+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // 난이도 버튼 렌더링
+  const levelButtonList = [EASY, NORMAL, HARD].map((item) => (


아 요거 map 쓸 생각을 못했네,,, 어떻게 생각해 냈어..?

hae2ni · 2023-05-07T14:56:18Z

find-ompangi/src/pages/FindOmpangi.jsx

+  };
+
+  // 렌더링 할 랜덤 배열 만들기
+  let renderData = useMemo(() => {


첨에 내가 서현이랑 비슷하게 설계하다가 실패했는데, useMemo()를 안 써서 계속 원하는 대로 안 됐던 게 그래서 였구나,,, 뭔가 반성중,,,

ljh0608

항상 많이 배워갑니다~ 저는 이번에 주석을.. 좀 빼먹은 것 같은데 주석까지 꼼꼼하게 하신거 보고 반성하고 돌아가요

ljh0608 · 2023-05-09T05:38:15Z

find-ompangi/.eslintrc.cjs

+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",


eslint 설정까지 해줬네 대단해!
웹 심화에서 배우고 다시 많이 까먹었는데 이렇게 eslint랑 react에서 추천하는 plugin이라도 넣어주면서 다음부턴 초기설정부터 잘 하고 시작해야겠다는 생각이 드네..

ljh0608 · 2023-05-09T05:42:34Z

find-ompangi/.gitignore

+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*


log파일이 어떤거고 왜 ignore에 넣는건지 궁금한데 설명해줄 수 있어?

기록이 자동으로 남는 파일로 알고 있어!
예를 들어 yarn-error.log같은 경우에는 yarn 하면서 발생한 에러를 자동으로 기록해주더라!

아무래도 그 기록이 코드파일에는 필요하지 않으니까 깃에 올릴 필요가 없는게 아닐까 싶네?!

ljh0608 · 2023-05-09T05:42:53Z

find-ompangi/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">


우리 셋은 이건 꼭 지켜야지.. 맞지맞지

ljh0608 · 2023-05-09T05:44:24Z

find-ompangi/package.json

+    "styled-components": "^5.3.10",
+    "styled-reset": "^4.4.6"


styled-reset 적용했구나! 항상 코드리뷰 하면서 배워갑니다~

ljh0608 · 2023-05-09T06:05:06Z

find-ompangi/src/components/CardSection.jsx

+        setIsRotate("rotate");
+        setTimeout(() => {
+          // 카드 오픈 리스트에서 최근에 넣었던 두 개 카드 삭제
+          const newList = openCardList.slice(0, -1);


오호 이건
openCardList.slice(0, -1 + openCardList.length)
처럼 동작하는 거구나 문법도 배워가!!

근데 배열을 slice로 잘라서 newList에 대입하고 그걸 다시 setOpenList에 주는 이유가 궁금해!

그냥 궁예: 오픈된 카드 안 맞춰줬으니까 다시 뒤집으려고,,,?

ljh0608 · 2023-05-09T06:05:49Z

find-ompangi/src/components/CardSection.jsx

+
+    testCardList.push(classList[2]); // 테스트 배열에 cardId 추가
+    setTimeout(() => {


classList[2]가 무엇을 의미하는거야??

ljh0608 · 2023-05-09T06:09:05Z

find-ompangi/src/components/Header.jsx

+      setIsModalOpen(true);
+    }
+
+    setIsBlink(true);


score가 바뀐다는건 곧 올라간다는 의미니까 setIsBlick를 이렇게 score가 의존성 배열에 들어있는 effect에 넣어줘도 되는거구나? 배워가요~

ljh0608 · 2023-05-09T06:12:16Z

find-ompangi/src/components/Header.jsx

+    <St.HeaderContainer>
+      <h1>🔮 옴팡이를 맞춰주세요 🔮</h1>
+      <St.Score className={isBlink && "blink"}>
+        {score} / {cardCount}
+      </St.Score>
+    </St.HeaderContainer>
+  );
+};
+
+export default Header;
+
+const St = {
+  HeaderContainer: styled.header`


St.Component 의 방법으로 styled component를 사용하는 이유가 궁금해요 금장디장님

팟장님도 이렇게 하시던데! 이게 더 가독성있고 편한것 같기두,,,? 취향차이인가용?

저 같은 경우에는 한눈에 스타일 컴포넌트인지, 일반 컴포넌트인지 쉽게 구분하기 위해서 사용합니당!!!
요렇게 하면 컴포넌트명만 보고도 바로 알 수 있거든요 ㅎㅎㅎ

ljh0608 · 2023-05-09T06:13:18Z

find-ompangi/src/components/modal/SuccessModal.jsx

+  const handleOnClick = () => {
+    setIsModalOpen(false);
+  };


온클릭에 reset매개변수도 넣어주어서 reset시켜주면 게임 이용자가 더 간편하지 않을까 생각을 해봤어!

ljh0608 · 2023-05-09T06:26:52Z

find-ompangi/src/styles/GlobalStyle.js

+html {
+    font-size: 62.5%;
+}


나도 담부터 이렇게 설정해서 1rem 10px로 편하게 적용해야겠다ㅎㅎ;

hae2ni

❤️ 역시 우리 잔디쟝 짱짱 너무 수고해써요! ❤️

hae2ni · 2023-05-09T09:56:31Z

find-ompangi/src/components/CardSection.jsx

+  const [isClickAbled, setIsClickAbled] = useState(true); // 카드 클릭 가능 여부
+  const [isRotate, setIsRotate] = useState("");
+
+  // level이 바뀌면, reset 버튼 눌리면 모두 초기화


하나하나 주석 달아줘서 너무 고마운,,,

hae2ni · 2023-05-09T09:59:55Z

find-ompangi/src/components/CardSection.jsx

+        setIsRotate("rotate");
+        setTimeout(() => {
+          // 카드 오픈 리스트에서 최근에 넣었던 두 개 카드 삭제
+          const newList = openCardList.slice(0, -1);


그냥 궁예: 오픈된 카드 안 맞춰줬으니까 다시 뒤집으려고,,,?

hae2ni · 2023-05-09T10:00:54Z

find-ompangi/src/components/Header.jsx

+    <St.HeaderContainer>
+      <h1>🔮 옴팡이를 맞춰주세요 🔮</h1>
+      <St.Score className={isBlink && "blink"}>
+        {score} / {cardCount}
+      </St.Score>
+    </St.HeaderContainer>
+  );
+};
+
+export default Header;
+
+const St = {
+  HeaderContainer: styled.header`


팟장님도 이렇게 하시던데! 이게 더 가독성있고 편한것 같기두,,,? 취향차이인가용?

hae2ni · 2023-05-09T10:01:10Z

find-ompangi/src/components/Router.jsx

+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>


라우터 지금부터 쓰는 똑또기가 여기이따!!

seobbang added 19 commits April 29, 2023 16:50

init: react 초기세팅 및 style, eslint 초기세팅

d3ecc2f

init: 필요없는 파일 삭제

8aa6222

feat: 헤더 컴포넌트 UI 구현

f0fa612

feat: 카드 컴포넌트 UI 구현

ff2b03c

feat: 난이도 버튼 및 전체적 UI 구현

ccfb95e

feat: level에 따라 카드 개수 다르게 렌더링 구현

e4498f1

feat: 컴포넌트 구조 수정 및 뒷면 클릭시 앞면 보여주기 구현

e97ee6c

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

43af15b

feat: 카드 짝 맞추기 구현

ff9c8d7

feat: 2개 카드 선택시 다른 카드 선택 불가능 구현

71d4ae0

feat: 정답 수 노출 구현

d6420b3

feat: 난이도 중간에 바꾸면 초기화 구현

f707896

feat: 라우터 구현

5ab6ef4

feat: 게임 초기화 버튼 구현

261f679

feat: 카드 쌍을 맞춘 경우 깜빡이는 애니메이션 적용

feaa5d5

feat: 전체 성공시 모달 띄우기 구현

7581b1d

feat: 카드 뒤집어지는 애니메이션 적용

4aacf4f

chore: 주석 추가 및 필요 없는 콘솔로그 삭제

853c44a

style: 카드 배치 스타일 가운데 정렬 변경

a91722f

seobbang self-assigned this May 4, 2023

chore: 주석 제거

1941e7b

seobbang changed the title ~~[ 3주차 기본/심화/생각 과제 ] 🌼 몰티즈를 찾아라 💖~~ [ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 May 5, 2023

seobbang requested review from ljh0608 and hae2ni May 5, 2023 13:42

seobbang added 3 commits May 5, 2023 22:48

생각과제

5b8f2c6

feat: 회전 애니메이션 더 부드럽게 변경

d6bf295

feat: 다시 뒷면으로 뒤집히는 부분도 애니메이션 부드럽게 수정

aee82a1

hae2ni reviewed May 7, 2023

View reviewed changes

seobbang added 2 commits May 9, 2023 10:10

chore: 주석 추가

653ac35

feat: testCard state가 아닌 일반 변수로 변경

9004e12

fix: 카드 다시 뒤집기 코드 수정

cedee0f

ljh0608 reviewed May 9, 2023

View reviewed changes

hae2ni reviewed May 9, 2023

View reviewed changes

Merge branch 'main' into week3

bb0ba60

seobbang merged commit 8d7da6d into main May 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 #4

[ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 #4

seobbang commented May 4, 2023 •

edited

Loading

hae2ni May 7, 2023

ljh0608 May 9, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

hae2ni May 7, 2023

ljh0608 left a comment

ljh0608 May 9, 2023

ljh0608 May 9, 2023

seobbang May 30, 2023

seobbang May 30, 2023

ljh0608 May 9, 2023

ljh0608 May 9, 2023

ljh0608 May 9, 2023

hae2ni May 9, 2023

ljh0608 May 9, 2023

ljh0608 May 9, 2023

ljh0608 May 9, 2023

hae2ni May 9, 2023

seobbang May 9, 2023

ljh0608 May 9, 2023

ljh0608 May 9, 2023

hae2ni left a comment

hae2ni May 9, 2023

hae2ni May 9, 2023

hae2ni May 9, 2023

hae2ni May 9, 2023


		testCardList.push(classList[2]); // 테스트 배열에 cardId 추가
		setTimeout(() => {

[ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 #4

[ 3주차 기본/심화/생각 과제 ] 🌼 옴팡이를 찾아라 💖 #4

Conversation

seobbang commented May 4, 2023 • edited Loading

✨ 구현 기능 명세

기본 과제

심화 과제

✅ 생각 과제

🌼 PR Point

FindOmpangi.jsx

CardSection.jsx

Header.jsx

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

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

ljh0608 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

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

hae2ni 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

seobbang commented May 4, 2023 •

edited

Loading