REACT49 [5] 무한 스크롤 구현하기 카테캠에서 사용한 무한 스크롤을 여기에서도 한 번 사용해볼 것이다.매치 정보가 5개씩 뜨는데 더보기를 누르기 불편하다.따라서 5개까지 내리면 새로 데이터를 받는 식으로 무한 스크롤을 나타낼 것이다.import { useEffect, useRef } from 'react';interface InfiniteScrollObserverProps { onIntersect: () => void; enabled?: boolean; rootMargin?: string; threshold?: number;}export default function InfiniteScrollObserver({ onIntersect, enabled = true, rootMargin = '0px', threshold = 1.0.. 2025. 8. 21. [4] 스타일 꾸미기 api를 받아왔으니 스타일을 웹앱 형식으로 꾸미고자 한다.emtion theme을 이용하여 일관성있게 스타일을 적용했다. global.tsx와 Layout.tsx를 이용해 공통 컴포넌트 스타일을 적용했다.*,*::before,*::after { box-sizing: border-box;}Layout.tsx의 padding과 margin이 전체 사이즈에 계속 포함되어 결과가 없는 빈 화면에서도 커서가 생성되었다.padding과 margin을 포함하기 위해 box-sizing을 border-box로 설정하였다.global.tsx에 설정했다. 또한, search Input에 소환사명을 적고 엔터를 눌렀을 때 검색 버튼이 누르도록 설정하고자 했다.import { SearchButton, SearchNameIn.. 2025. 8. 19. [3] 매치 정보 가져오기 1. match ID 가져오기여기서 matchId를 가져와 각 match에 대한 정보를 다른 api에서 불러온다. 딱히 힘든 부분은 없었다. 시작과 count를 0과 20으로 상수 설정을 하였다. import useFetch from '@/hooks/fetch/useFetch.ts';import { MATCH_ID } from '@/api/url.ts';export default function useMatchId({ puuid, enabled }) { const { data, isLoading, isError } = useFetch({ key: 'matchId', value: puuid, url: MATCH_ID(puuid), options: { enabled, .. 2025. 8. 13. [2] puuid를 이용하여 소환사 정보 받아오기 이전처럼 url에 받아온 puuid를 넣으면 된다.여기서 데이터를 받아온다.import useUserInfo from '@/hooks/fetch/useUserInfo.ts';type UserInfoProps = { puuid: string;};export default function UserInfo({ puuid }: UserInfoProps) { const { data, isLoading, isError } = useUserInfo(puuid); console.log(data); if (isLoading) return 로딩 중...; return ( {isError && 유저 정보를 불러올 수 없습니다.} {data && ( {data... 2025. 8. 6. 이전 1 2 3 4 ··· 13 다음
