Remove (main)폴더로 이동

frontend/app/(route)/(main)/search/_components/PostList/index.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import React, { useRef } from 'react'
+import {  useInfiniteQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { useObserver } from '@/app/_hooks/useUserObserver'
+import style from './postList.module.css'
+
+interface PokeMonItem {
+  name:string,
+  url:string,
+}
+const OFFSET = 30
+
+const getPokemonList = ({ pageParam = 0 }) => {
+  const response = axios
+  .get("https://pokeapi.co/api/v2/pokemon", {
+    params: {
+      limit: OFFSET,
+      offset: pageParam,
+      },
+  })
+  .then(res => res?.data)
+  console.log(response)
+  return response
+}
+
+const PostList = () => {
+  const bottom = useRef<HTMLDivElement | null>(null)
+  const {
+    data,
+    status,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey:['pokemon'],
+    queryFn: getPokemonList,
+    initialPageParam: 0,
+    getNextPageParam:(lastPage)=>{
+      const { next } = lastPage
+      if(!next) {
+        return false;
+      }
+      const nextOffset = Number(new URL(next).searchParams.get("offset"))
+      console.log(nextOffset)
+      return nextOffset
+    }
+
+  })
+  const onIntersect = ([entry]) => entry.isIntersecting && fetchNextPage()
+  useObserver({
+    target: bottom,
+    onIntersect,
+})
+  return (
+    <div>
+      {status === "pending" && <p>불러오는 중</p>}
+      {status === "error" && <p>{error.message}</p>}
+      {status === "success" &&
+        data.pages.map((group, index) => (
+          <div key={index} className={style.card_list}>
+            {group.results.map((pokemon:PokeMonItem,idx:number) => (
+              <div key={`${pokemon.name}-${idx}`} className={style.card_wrapper}>
+                <img
+                  src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${idx+1}.png`} 
+                  alt={pokemon.name}
+                />
+              </div>
+            ))}
+          </div>
+      ))}
+      <button type='button' onClick={() => fetchNextPage()}>더 불러오기</button>
+      <div ref={bottom} />
+      {isFetchingNextPage && <p>계속 불러오는 중</p>}
+    </div>
+  )
+}
+
+export default PostList

frontend/app/(route)/(main)/search/_components/PostList/postList.module.css

@@ -0,0 +1,13 @@
+.card_list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.card_wrapper {
+  flex-basis: calc(33.33% - 4px);
+  background-color: whitesmoke;
+  margin-bottom: 8px;
+}
+.card_wrapper:hover {
+  cursor: pointer;
+}

frontend/app/(route)/(main)/search/_components/SearchInput/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+import React from 'react'
+import style from './searchInput.module.css'
+
+const SearchInput = () => {
+  return (
+    <div className={style.main_wrapper}>
+      <form className={style.search_form}>
+        <input className={style.search_input} placeholder='검색어를 입력해주세요'/>
+      </form>
+    </div>
+  )
+}
+
+export default SearchInput

frontend/app/(route)/(main)/search/_components/SearchInput/searchInput.module.css

@@ -0,0 +1,17 @@
+.main_wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.search_form {
+  width: 80%;
+}
+.search_input {
+  padding: 8px 12px;
+  background-color: gray;
+  border: none;
+  border-radius: 16px;
+  width: 100%;
+}

frontend/app/(route)/(main)/search/page.module.css

@@ -0,0 +1,7 @@
+.main_wrapper {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 12px 8px;
+  align-items: center;
+}