Inflearn Community Q&A

해당 화면에서 강의와 비슷하게 검색기능을 누르거나 엔터키를 치면 search결과가 나오도록 코드를 짰는데, 에러도 나오지 않고 아무것도 나오지않아. 이리저리 해보다가 우선 문의를 남깁니다!

파일 구조는 아래와 같습니다!

index.tsx

import SearchableLayout from "@/components/searchable-layout";
import { ReactNode } from "react";

export default function Home() {
  return <h1>ONEBITE CINEMA</h1>;
}

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

searchable-layout.tsx

import { useRouter } from "next/router";
import React, { ReactNode, useEffect, useState } from "react";
import style from "./searchable-layout.module.css";

export default function SearchableLayout({
  children,
}: {
  children: ReactNode;
}) {
  const router = useRouter();
  const [search, setSearch] = useState("");

  const q = router.query.q as string;

  useEffect(() => {
    setSearch(q || "");
  }, [q]);

  const onSubmit = () => {
    router.push(`/search?q=${search}`);
  };

  const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
  };
  // Enter 키 입력 이벤트
  const onkeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      onSubmit();
    }
  };
  return (
    <div>
      <div className={style.searchbar_container}>
        <input
          value={search}
          onChange={onChangeSearch}
          placeholder="영화를 입력해주세요..."
          onKeyDown={onkeyDown}
        />
        <button onClick={onSubmit}>검색</button>
      </div>
      {children}
    </div>
  );
}

global-layout

import Link from "next/link";
import { ReactNode } from "react";
import style from "./global_layout.module.css";

export default function GlobalLayout({ children }: { children: ReactNode }) {
  return (
    <div className={style.container}>
      <header className={style.header}>
        <Link href={"/"}>ONEBITE CINEMA</Link>
      </header>
      <main className={style.main}>{children}</main>
    </div>
  );
}

search - index.tsx

import SearchableLayout from "@/components/searchable-layout";
import { useRouter } from "next/router";
import { ReactNode } from "react";

export default function Page() {
  const router = useRouter();
  const { q } = router.query;

  return <h1>검색결과 {q}</h1>;
}

Page.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

위와 같이 구성되어있고, 도저히 제가.. 찾지 못하여 문의드립니다 후..

아마 input쪽이나 search.tsx에 문제가 있는거 같은데 좀 자괴감이 드네요.. 일어나서 다시한번 살펴볼 예정입니다!

다른분들 git도 궁금해서 봤는데 코드는 너무 똑같은데 대체 뭐가 다른 지 모르겠네요..