1. Navbar

Navbar 컴포넌트는 웹 사이트의 상단에 위치하여 사용자에게 주요 페이지로의 링크를 제공합니다. 로고, 링크, 크기, 색상, 위치를 설정하여 커스터마이즈 할 수 있습니다.

1.1. Import

import { Navbar } from '@components/Navbar';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Componique

Home About Projects Contact

import { Navbar } from '@components/Navbar';
function Example() {
  return (
    <Navbar
      logoName="Componique"
      logoSrc={Logo}
      links={[
        { name: "Home", href: "/" },
        { name: "About", href: "/about" },
        { name: "Projects", href: "/projects" },
        { name: "Contact", href: "/contact" },
      ]}
    />
  );
}
export default Example;

1.3. Changing the Size of the Navbar

Navbar 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 small입니다:

small: 작은 크기
medium: 중간 크기
large: 큰 크기

Componique

Home About Projects Contact

Componique

Home About Projects Contact

Componique

Home About Projects Contact

import { Navbar } from '@components/Navbar';
function Example() {
  return (
    <>
      <Navbar logoName="Componique" logoSrc={Logo} size="small" links={[
        { name: "Home", href: "/" },
        { name: "About", href: "/about" },
        { name: "Projects", href: "/projects" },
        { name: "Contact", href: "/contact" },]} />
      <Navbar logoName="Componique" logoSrc={Logo} size="medium" links={[
        { name: "Home", href: "/" },
        { name: "About", href: "/about" },
        { name: "Projects", href: "/projects" },
        { name: "Contact", href: "/contact" },]} />
      <Navbar logoName="Componique" logoSrc={Logo} size="large" links={[
        { name: "Home", href: "/" },
        { name: "About", href: "/about" },
        { name: "Projects", href: "/projects" },
        { name: "Contact", href: "/contact" },]} />
    </>
  );
}
export default Example;

1.4. Changing the Hover Color

Navbar 컴포넌트는 링크에 마우스를 올렸을 때 텍스트 색상을 변경할 수 있습니다:

skyblue: 하늘색
blue: 파란색 (기본값)
red: 빨간색

Componique

Home About Projects Contact

Componique

Home About Projects Contact

Componique

Home About Projects Contact

import { Navbar } from '@components/Navbar';
function Example() {
  return (
    <>
      <Navbar logoName="Componique" logoSrc={Logo} hoverColor="skyblue" links={[
        { name: "Home", href: "/" },
         { name: "About", href: "/about" },
         { name: "Projects", href: "/projects" },
         { name: "Contact", href: "/contact" },]} />
      <Navbar logoName="Componique" logoSrc={Logo} hoverColor="blue" links={[
         { name: "Home", href: "/" },
         { name: "About", href: "/about" },
         { name: "Projects", href: "/projects" },
         { name: "Contact", href: "/contact" },]} />
      <Navbar logoName="Componique" logoSrc={Logo} hoverColor="red" links={[
        { name: "Home", href: "/" },
         { name: "About", href: "/about" },
         { name: "Projects", href: "/projects" },
         { name: "Contact", href: "/contact" },]} />
    </>
  );
}
export default Example;

1.5. Props

Navbar 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	Navbar의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"small"`
`hoverColor`	Navbar의 링크에 마우스를 올렸을 때 텍스트 색상을 설정합니다.	`"skyblue" \| "blue" \| "red"`	`"blue"`
`position`	Navbar의 위치를 설정합니다.	`"static" \| "sticky" \| "relative"`	`"static"`
`logoSrc`	로고 이미지의 경로를 설정합니다.	`string`	`-`
`logoName`	로고 옆에 표시될 이름을 설정합니다.	`string`	`-`
`links`	네비게이션 링크들의 배열을 설정합니다.	`{ name: string; href: string }[]`	`[]`

1.6. Full Example

import { Navbar } from '@components/Navbar';
import Logo from "@/images/logo.svg";
            
function Example() {
  return (
    <div>
      <Navbar
        logoName="Componique"
        logoSrc={Logo}
        size="medium"
        hoverColor="blue"
        position="sticky"
        links={[
          { name: "Home", href: "/" },
          { name: "About", href: "/about" },
          { name: "Projects", href: "/projects" },
          { name: "Contact", href: "/contact" },
        ]}
      />
    </div>
  );
}

export default Example;

2. NavbarSearch

NavbarSearch 컴포넌트는 웹 사이트의 상단에 로고와 검색 필드를 포함한 네비게이션 바를 제공합니다. 다양한 크기와 입력 필드 설정을 통해 사용자 맞춤형 검색 바를 만들 수 있습니다.

2.1. Import

import NavbarSearch from '@components/NavbarSearch/NavbarSearch';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Compunique

import NavbarSearch from '@components/NavbarSearch/NavbarSearch';
  

function Example() {
  const [searchTerm, setSearchTerm] = useState("");

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };

  return (
    <NavbarSearch
      name="search"
      id="searchInput"
      maxLength={8}
      type="search"
      size="medium"
      placeholder="Search"
      value={searchTerm}
      onChange={(e) => console.log(e.target.value)}
    />
  );
}

export default Example;

2.3. Props

NavbarSearch 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`name`	검색 입력 필드의 name 속성을 설정합니다.	`string`	`-`
`id`	검색 입력 필드의 id 속성을 설정합니다.	`string`	`-`
`maxLength`	검색 입력 필드의 최대 길이를 설정합니다.	`number`	`-`
`size`	검색 입력 필드의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`placeholder`	검색 입력 필드의 플레이스홀더 텍스트를 설정합니다.	`string`	`-`
`type`	검색 입력 필드의 타입을 설정합니다.	`string`	`"text"`
`onChange`	검색 입력 필드의 값이 변경될 때 호출되는 핸들러입니다.	`(e: React.ChangeEvent<HTMLInputElement>)`	`-`

2.4. Full Example

import NavbarSearch from '@components/NavbarSearch/NavbarSearch';

function Example() {
  return (
    <div>
      <NavbarSearch
        name="search"
        id="searchInput"
        maxLength={8}
        type="search"
        size="medium"
        placeholder="Search"
      />
    </div>
  );
}

export default Example;