[3주차 기본/심화/공유 과제] 숫자 게임 만들기 🔢 #4
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
minjeoong
reviewed
Nov 10, 2024
Comment on lines
+4
to
+15
| const NumberCard = ({ cardNumber, handleCardClick, isVisible }) => { | ||
| return ( | ||
| <> | ||
| <NumberCardLayout | ||
| onClick={() => handleCardClick(cardNumber)} | ||
| isVisible={isVisible} | ||
| > | ||
| <NumberCardTextStyle>{cardNumber}</NumberCardTextStyle> | ||
| </NumberCardLayout> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
오 카드도 컴포넌트로 해서 IsVisible 값으로 처리하는 게 깔끔하고 좋네요,,!👍🏻👍🏻
Comment on lines
+25
to
+29
| {gameRanking | ||
| .sort( | ||
| (a, b) => formatRankingData(a.play) - formatRankingData(b.play) | ||
| ) | ||
| .map((rank, index) => { |
There was a problem hiding this comment.
오.. 랭킹 데이터를 format 하도록 함수를 뺀 거군요!! 👏🏻
| setNumberArray(createRandomArray(1, 9)); | ||
| setNextNumberArray(createRandomArray(10, 18)); | ||
| setIsVisible(Array(9).fill(true)); | ||
| }; |
There was a problem hiding this comment.
숫자 직접 넣으셨는데,
유지보수 하기에도 그렇지만
level 에 따라 달라지는 부분 구현을 나중에 추가한다는 가정하에
state 로 관리하거나, 변수로 관리하면 좋을 것 같아요!!
| JSON.parse(localStorage.getItem("ranking")) | ||
| ); | ||
|
|
||
| const { time, startTimer, resetTimer } = useTimer(); |
There was a problem hiding this comment.
time 관련 함수로 따로 빼는 아이디어 너무 좋네요...
함수 빼기 장인이다,,
shroqkf
reviewed
Nov 11, 2024
Comment on lines
+6
to
+12
| const Header = ({ handleChangeContent, content, time }) => { | ||
| const [buttonState, setButtonState] = useState("GAME"); | ||
|
|
||
| const handleClickButton = (content) => { | ||
| handleChangeContent(content); | ||
| setButtonState(content); | ||
| }; |
There was a problem hiding this comment.
이 부분에서 buttonState와 content가 비슷한 역할을 하고 있는 것으로 보여서
handleChangeContent(content);
setButtonState(content);
혹시 둘 다 작성하신 이유가 있을까요??
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| visibility: ${({ isVisible }) => (!isVisible ? "hidden" : "visible")}; |
There was a problem hiding this comment.
visibility 속성을 사용해서 슷자카드를 조정할 수 있네요!! 🤩
Comment on lines
+27
to
+37
| const handleCardNumberChange = (number) => { | ||
| setCardNumber(number); | ||
| }; | ||
|
|
||
| const handleCardClick = (number) => { | ||
| if (number === 1) { | ||
| startTimer(); | ||
| } | ||
|
|
||
| if (number === cardNumber) { | ||
| handleCardNumberChange((prev) => prev + 1); |
There was a problem hiding this comment.
handleCardNumberChange 함수를 별도로 만들지 않고 setCardNumber((prev) => prev + 1)로 작성하면 더 직관적이지 않을까,, 생각합니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ 구현 기능 명세
💡 기본 과제
18까지 클릭해야한다면, 처음에는 19까지의 숫자가 랜덤으로 보여짐현재 시각,게임의 레벨,플레이 시간3개의 정보를 localStorage에 저장 (랭킹에서 사용)🔥 심화 과제
Level 1:
3 x 3, Level 2:4 x 4, Level 3:5 x 5createPortal
공유과제
링크 첨부 : https://wave-web.tistory.com/94
❗️ 내가 새로 알게 된 점
❓ 구현 과정에서의 어려웠던/고민했던 부분
🥲 소요 시간
2일🖼️ 구현 결과물
3주차 과제 구현 영상