느려도 한걸음씩

디자인 수정, 기능 리팩터링후 웹사이트를 완성하고 vercel을 통해 배포했다  배포링크https://pokeflip.vercel.app/ PokeFlip pokeflip.vercel.app 깃허브https://github.com/hoj0806/pokemon-card-flip GitHub - hoj0806/pokemon-card-flipContribute to hoj0806/pokemon-card-flip development by creating an account on GitHub.github.com

저번 포스트에서 불러온 데이터를 이용해 포켓몬의 상세 정보를 표시해주는 도감을 만들어보자 import { useAppSelector } from "../hooks/useAppSelector";import { pokemons } from "../slice/pokemonSlice";import { motion } from "framer-motion";const PokedexList: React.FC>; setSelectPokemon: React.Dispatch>;}> = ({ setPokedexDetailPopupOpen, setSelectPokemon }) => { const pokemonData = useAppSelector(pokemons); const handleClickPokeDexListIt..

앱안에 카드 게임과 포켓몬의 정보를 볼 수 있는 도감 기능을 만들어보자  https://pokeapi.co/docs/v2 Documentation - PokéAPIIf you were using v1 of this API, please switch to v2 (this page). Read more… Quick tip: Use your browser's "find on page" feature to search for specific resource types (Ctrl+F or Cmd+F). Information This is a consumption-only API — only the HTTP GET mpokeapi.co사용한 api 위의 api를 이용해 포켓몬 데이터를 불러와줬다 export con..

카드 맞추기 게임에 타이머를 추가해 시간이 모두 흘렀을 경우 게임이 종료되는 기능을 만들어보자 import { motion } from "framer-motion";const GameTimer: React.FC>;}> = ({ setIsTimeOut, duration }) => { return ( { setIsTimeOut(true); }} /> );};export default GameTimer; framer-motion 라이브러리를 통해 번거롭게 setTimeOut을 사용하지 않고 타이머바를 만들수 있었다 animate를 통해 initial 상태에서 어떻게 애니메이션이 진행될것인지 정의할수 있다 그리고 transition의 durati..

지난번 포스트에 이어 계속 게임 보드판을 만들어보자 이번에는 카드 클릭시 카드가 뒤집히는 기능, 짝을 맞췄을시 , 못맞췄을시 기능을 만들것이다 1.카드 클릭시 뒤집히는 기능  setFlipCard: (state, action: PayloadAction) => { // uniqueId를 매개변수로 받아 해당 카드를 찾아 isFliped를 true로 설정 const uniqueId = action.payload; state.shuffledData = state.shuffledData.map((pokemon) => { if (pokemon.uniqueId === uniqueId) { return { ...pokemon, isFliped: true };..

{ id: "1", pokemonName: "Bulbasaur", imageUrl: `${imageUrl}1.png`, isFliped: true, uniqueId: "1_1", isCorrect: false, }, 1. 카드 셔플 데이터 만들기본격적으로 카드 게임에 필요한 게임판을 만들어보자 위의 객체들이 들어간 배열을 데이터로 사용한다 id는 각 포켓몬의 도감 번호 순서대로 포켓몬 이름, 포켓몬 사진의 url, 카드가 뒤집혔는지 확인할 isFliled값, 똑같은 추후 똑같은 포켓몬 이름의 카드 두장중 하나를 구별할 uniqueId, 카드를 맞췄는지 확인하는 값인 isCorrect로 이루어져있다  기존 data 는 저러한 객체가 151개 들어가..

와이어 프레임(wireframe)이란?앱이나 웹사이트의 구조와 기능을 시각적으로 표현한 설계도 와이어 프레임의 특징레이아웃 중심 – 디자인보다는 구조와 흐름을 먼저 정의하는 것에 초점 색상이 거의 없음 – 보통 흑백 또는 회색 톤을 사용해 UI 요소의 배치를 보여줌상세한 그래픽 X – 아이콘, 버튼, 이미지 등을 간략한 사각형이나 텍스트로 표현기능과 흐름을 테스트하는 용도 – 개발 전 사용자 경험(UX)을 미리 검토할 수 있음  Figma를 통해 와이어 프레임을 그리고 유저 플로우를 선으로 표현했다(auto flow extention)     Figma 공유 링크 : https://www.figma.com/design/woDqgr1J6krJF1ey92qHvF/pokemon-card-flip?m=auto&..

1.앱 요구사항, 기능주어진 시간안에 뒤집혀 있는 카드를 기억해 뒤집어 짝을 맞추는 카드 게임 제작난이도 선택 기능(Easy, Normal, Hard)사용자의 로컬스토리지에 최고기록 저장(카드를 뒤집을 때 마다 점수 획득)모든 포켓몬의 정보를 볼 수 있는 도감 기능(1세대)도감에서 원하는 포켓몬을 즐겨찾기에 추가할수 있는 기능다크모드 2.기능 카테고리별로 나누기카드 게임 기능최고 점수 저장 기능다크모드도감   3.기술 스택 build : create-react-applangauge : typescript(React)css : tailwind, framer-motionstate management : tanstackquery(poke-api에서 불러운 포켓몬 데이터 관리), reduxToolkit(UI s..