Feat/search

src/app/(main)/layout.tsx

@@ -13,7 +13,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
 
       <div className="flex flex-1 flex-col overflow-hidden">
         <Topbar />
-        <main className="flex-1 overflow-auto p-10">{children}</main>
+        <main className="flex-1 overflow-auto p-10 scrollbar-hide">{children}</main>
       </div>
     </div>
   );

src/app/(main)/search/page.tsx

@@ -1,7 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import Title from "@/components/search/SearchTitle";
+import { TextField } from "@/components/ui/TextField";
+import { TextArea } from "@/components/ui/TextArea";
+import { AICreationButton } from "@/components/ui/AI_Creation_Button";
+import { ElementList, type Element } from "@/components/search/ElementList/ElementList";
+import { Checklist } from "@/components/search/Checklist";
+import { Footer } from "@/components/search/Footer";
+import { PatentImportModal } from "@/components/search/PatentImportModal";
+import { Button } from "@/components/ui/Button";
+
 export default function SearchPage() {
+  const [elements, setElements] = useState<Element[]>([
+    { id: crypto.randomUUID(), name: "", description: "" },
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleAdd = () => {
+    setElements((prev) => [...prev, { id: crypto.randomUUID(), name: "", description: "" }]);
+  };
+
+  const handleDelete = (id: string) => {
+    setElements((prev) => prev.filter((el) => el.id !== id));
+  };
+
+  const handleChange = (id: string, field: "name" | "description", value: string) => {
+    setElements((prev) => prev.map((el) => (el.id === id ? { ...el, [field]: value } : el)));
+  };
+
+  const handleAICreate = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setElements([
+        {
+          id: crypto.randomUUID(),
+          name: "생분해성 베이스 수지",
+          description: "PLA·PBAT 블렌드 폴리에스터",
+        },
+        {
+          id: crypto.randomUUID(),
+          name: "표면개질 나노 충전제",
+          description: "실란 처리된 무기 나노입자",
+        },
+        {
+          id: crypto.randomUUID(),
+          name: "무용제 수계 분산 공정",
+          description: "유기용제 없이 수계 분산으로 코팅층 형성",
+        },
+        {
+          id: crypto.randomUUID(),
+          name: "UV 경화 기교",
+          description: "자외선 경화형 가교제에 의한 표면 가교",
+        },
+      ]);
+      setIsLoading(false);
+    }, 2000);
+  };
+
   return (
-    <>
-      <div></div>
-    </>
+    <div className="flex flex-col gap-13 px-20 pb-5">
+      <div className="flex flex-col gap-7">
+        <div className="flex justify-between">
+          <Title stepnum={1} title="발명 정보" />
+          <Button variant="secondary" size="sm" onClick={() => setIsModalOpen(true)}>
+            특허 번호로 불러오기
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-4 pl-10">
+          <TextField
+            labelSize={17}
+            label="발명의 명칭"
+            placeholder="EX) 생분해성 고분자 코팅 조성물"
+            gap={1.5}
+          />
+
+          <div className="flex flex-row gap-3">
+            <TextField
+              labelSize={17}
+              label="기술 분야"
+              placeholder="EX) 고분자 화학 코팅"
+              gap={1.5}
+            />
+            <TextField labelSize={17} label="IPC 분류" placeholder="EX) C09D 5/00" gap={1.5} />
+          </div>
+
+          <TextArea
+            labelSize={17}
+            label="핵심 기술 설명"
+            placeholder="발명의 핵심 구성과 작동 방식을 간단히 설명해주세요"
+            rows={4}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-7">
+        <Title stepnum={2} title="출원인 정보" />
+
+        <div className="flex flex-row gap-3 pl-10">
+          <TextField
+            labelSize={17}
+            label="사명 (선택)"
+            placeholder="EX) 그린폴리머(주)"
+            gap={1.5}
+          />
+          <TextField
+            labelSize={17}
+            label="의뢰인 (선택)"
+            placeholder="담당자 또는 발명자 성명을 입력해주세요"
+            gap={1.5}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-row items-center justify-between">
+          <Title
+            stepnum={3}
+            title="구성요소 분석"
+            label="청구항을 구성요소 단위로 분해해 판단의 정밀성을 높힙니다."
+          />
+
+          <AICreationButton onClick={handleAICreate} />
+        </div>
+
+        <div className="overflow-hidden border-y border-outline-default ml-10">
+          <ElementList
+            elements={elements}
+            isLoading={isLoading}
+            onAdd={handleAdd}
+            onDelete={handleDelete}
+            onChange={handleChange}
+          />
+        </div>
+
+        <Checklist />
+      </div>
+
+      <Footer />
+
+      {isModalOpen && (
+        <PatentImportModal
+          initialPatentNumber=""
+          onClose={() => setIsModalOpen(false)}
+          onSubmit={() => setIsModalOpen(false)}
+        />
+      )}
+    </div>
   );
 }

src/app/globals.css

@@ -42,6 +42,7 @@
   /* Primary */
   --color-bg-primary-tint: #f5f9ff; /* Primary-120 */
   --color-bg-primary-light: #eef5ff; /* Primary-110 */
+  --color-bg-elementlist: #E4EFFF;  /* Primary-100 */
 
   /* Primary-light */
   --color-bg-primary: #4478f0; /* Primary-50 */
@@ -68,6 +69,8 @@
   --color-icon-neutral-subtle: #909ba6; /* Gray-50 */
 
   --color-icon-primary-default: #4478F0;
+  --color-icon-primary-emphasize: #2152E5;
+
 
   /* Stroke */
   --color-stroke-divider: #f2f6f9; /* Gray-90 */

src/app/layout.tsx

@@ -88,7 +88,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="h-full overflow-hidden">{children}</body>
     </html>
   );
 }

src/components/search/Checklist.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { Checkbox } from "@/components/searchlist/Checkbox";
+
+const ITEMS = ["미공개 기술", "관련 수치데이터 보유", "누락 정보 없음"] as const;
+
+export function Checklist() {
+  const [checked, setChecked] = useState<Record<string, boolean>>({});
+
+  return (
+    <div className="flex items-center gap-8 pl-10">
+      {ITEMS.map((label, index) => {
+        const uniqueId = `checklist-${index}`;
+
+        return (
+          <div key={label} className="flex items-center gap-1">
+            <Checkbox
+              id={uniqueId}
+              checked={!!checked[label]}
+              onChange={(e) => setChecked((prev) => ({ ...prev, [label]: e.target.checked }))}
+            />
+
+            <label htmlFor={uniqueId} className="cursor-pointer text-body-15 text-title-secondary">
+              {label}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/search/ElementList/ElementList.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import PlusIcon from "@/components/icons/icon-plus.svg";
+import { LoadingIndicator } from "./LoadingIndicator";
+import { ElementRow } from "./ElementRow";
+
+export interface Element {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface ElementListProps {
+  elements: Element[];
+  isLoading?: boolean;
+  onAdd: () => void;
+  onDelete: (id: string) => void;
+  onChange: (id: string, field: "name" | "description", value: string) => void;
+}
+
+export function ElementList({
+  elements,
+  isLoading = false,
+  onAdd,
+  onDelete,
+  onChange,
+}: ElementListProps) {
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-[1fr_1fr_auto] items-center gap-4 bg-bg-neutral-hover px-4 py-2.5">
+        <span className="text-label-15 text-body-disabled">발명 구성요소</span>
+        <span className="text-label-15 text-body-disabled">설명</span>
+        <div className="w-11" />
+      </div>
+
+      {isLoading ? (
+        <LoadingIndicator label="AI가 발명 정보를 분석해 구성요소를 추출하고 있습니다..." />
+      ) : (
+        <>
+          {elements.map((el, index) => (
+            <ElementRow
+              key={el.id}
+              index={index}
+              name={el.name}
+              description={el.description}
+              onDelete={() => onDelete(el.id)}
+              onChangeName={(value) => onChange(el.id, "name", value)}
+              onChangeDescription={(value) => onChange(el.id, "description", value)}
+            />
+          ))}
+
+          <button
+            type="button"
+            onClick={onAdd}
+            className="flex w-full items-center gap-1 px-4 py-3 text-label-17 text-primary-default transition-opacity cursor-pointer bg-bg-surface hover:bg-bg-neutral-hover active:bg-bg-neutral-subtle"
+          >
+            <PlusIcon className=" m-2 h-5 w-5 text-icon-primary-emphasize [&_path]:fill-current" />
+            구성요소 추가
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

src/components/search/ElementList/ElementRow.tsx

@@ -0,0 +1,46 @@
+import TrashIcon from "@/components/icons/icon-trashcan.svg";
+import { ElementTitle } from "./ElementTitle";
+
+interface ElementRowProps {
+  index: number;
+  name: string;
+  description: string;
+  onDelete: () => void;
+  onChangeName: (value: string) => void;
+  onChangeDescription: (value: string) => void;
+}
+
+export function ElementRow({
+  index,
+  name,
+  description,
+  onDelete,
+  onChangeName,
+  onChangeDescription,
+}: ElementRowProps) {
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto] items-center gap-4 px-4 py-3">
+      <ElementTitle index={index} value={name} onChange={onChangeName} />
+
+      <textarea
+        value={description}
+        onChange={(e) => {
+          onChangeDescription(e.target.value);
+          e.target.style.height = "auto";
+          e.target.style.height = `${e.target.scrollHeight}px`;
+        }}
+        placeholder="구성요소 설명"
+        rows={1}
+        className="w-full resize-none overflow-hidden bg-transparent text-label-17 text-body-secondary placeholder:text-caption-label placeholder:text-label-17 focus:outline-none"
+      />
+
+      <button
+        type="button"
+        onClick={onDelete}
+        className="p-2.5 text-icon-neutral-subtle transition-colors hover:text-error-default"
+      >
+        <TrashIcon className="h-6 w-6 [&_path]:fill-current" />
+      </button>
+    </div>
+  );
+}

src/components/search/ElementList/ElementTitle.tsx

@@ -0,0 +1,23 @@
+interface ElementTitleProps {
+  index: number;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function ElementTitle({ index, value, onChange }: ElementTitleProps) {
+  return (
+    <div className="flex min-w-0 w-full items-center gap-3">
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-bg-elementlist text-label-emphasis-15 text-primary-sub">
+        {String.fromCharCode(65 + index)}
+      </span>
+
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="구성요소 명칭"
+        className="w-full bg-transparent text-title-secondary text-label-emphasis-17 placeholder:text-caption-label placeholder:text-label-emphasis-17 focus:outline-none"
+      />
+    </div>
+  );
+}

src/components/search/ElementList/LoadingIndicator.tsx

@@ -0,0 +1,12 @@
+type LoadingIndicatorProps = {
+  label: string;
+};
+
+export function LoadingIndicator({ label }: LoadingIndicatorProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-12">
+      <div className="h-9 w-9 animate-spin rounded-full border-3 border-icon-primary-default border-t-transparent" />
+      <span className="text-label-17 text-caption-label">{label}</span>
+    </div>
+  );
+}

src/components/search/Footer.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/Button";
+import { ResultCountButton } from "./ResultCountButton";
+
+export function Footer() {
+  return (
+    <div className="flex pt-6 pb-7 pl-10 items-center justify-between">
+      <div className="flex items-center gap-6 text-label-17 text-title-secondary">
+        <span>탐색 결과 개수</span>
+        <ResultCountButton />
+      </div>
+
+      <Button size="sm" disabled>
+        탐색 시작
+      </Button>
+      {/* api 연동 이후 disabled 해제 관련 조건 추가 예정 */}
+    </div>
+  );
+}