{label}
;
+};
+
+export default Chip;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..455e14e
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,43 @@
+import ReactDOM from "react-dom";
+import Button from "@/components/Button";
+interface IModal {
+ title: string;
+ onConfirm: () => void;
+ onClose: () => void;
+ isOpen: boolean;
+}
+
+const Modal = ({ title, onConfirm, onClose, isOpen }: IModal) => {
+ if (!isOpen) return null;
+
+ const modalContent = (
+
+
+ );
+
+ return ReactDOM.createPortal(
+ modalContent,
+ document.getElementById("modal-root")!
+ );
+};
+
+export default Modal;
diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
new file mode 100644
index 0000000..d50c771
--- /dev/null
+++ b/src/components/ToggleButton.tsx
@@ -0,0 +1,20 @@
+import BookmarkIcon from "@/components/icons/BookmarkIcon";
+
+interface IToggleButton {
+ checked: boolean;
+ onClick?: () => void;
+}
+
+const ToggleButton = ({ checked, onClick }: IToggleButton) => {
+ return (
+
+ );
+};
+
+export default ToggleButton;
diff --git a/src/components/icons/BookmarkIcon.tsx b/src/components/icons/BookmarkIcon.tsx
new file mode 100644
index 0000000..5ac2e72
--- /dev/null
+++ b/src/components/icons/BookmarkIcon.tsx
@@ -0,0 +1,27 @@
+interface IBookmarkIcon {
+ fillColor?: string;
+ isFilled?: boolean;
+}
+
+const BookmarkIcon = ({ isFilled = true, fillColor }: IBookmarkIcon) => {
+ const fillStyle = `var(--${fillColor})`;
+
+ return (
+
+ );
+};
+
+export default BookmarkIcon;
diff --git a/src/components/icons/SearchIcon.tsx b/src/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..e4f55af
--- /dev/null
+++ b/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,25 @@
+// SearchIcon.js
+
+interface ISearchIcon {
+ size?: number;
+ color?: string;
+}
+
+const SearchIcon = ({ size = 16, color = "white" }: ISearchIcon) => {
+ return (
+
+ );
+};
+
+export default SearchIcon;
diff --git a/src/docs/Request.md b/src/docs/Request.md
new file mode 100644
index 0000000..efd9399
--- /dev/null
+++ b/src/docs/Request.md
@@ -0,0 +1,172 @@
+# 기능 구현 챌린지 - 프론트엔드
+
+### 구현 목표
+
+- [한국임상정보](https://clinicaltrialskorea.com/) 페이지의 검색영역을 클론하기
+
+### 참고자료
+
+- 과제 요구 UI [[피그마 링크]](https://www.figma.com/file/2I7T132M48F6FbhJHwIB0r/Techeer-Infinite-Challenge-FE?type=design&node-id=0-1&mode=design&t=5ogNibInEDjJplQd-0)
+
+- API
+ - [https://api.clinicaltrialskorea.com/api/v1/search-conditions/?name={검색어}](https://api.clinicaltrialskorea.com/api/v1/search-conditions/?name={검색어)
+ - 예제) 검색어에 ‘갑상선’을 넣었을 경우
+ ```tsx
+ [
+ {
+ name: "갑상선암",
+ id: 4373,
+ },
+ {
+ name: "갑상선염",
+ id: 4376,
+ },
+ {
+ name: "갑상선중독증",
+ id: 4378,
+ },
+ {
+ name: "갑상선 중독",
+ id: 4381,
+ },
+ {
+ name: "갑상선암종",
+ id: 4375,
+ },
+ {
+ name: "갑상선염증",
+ id: 4377,
+ },
+ ...
+ ];
+ ```
+ - https://api.clinicaltrialskorea.com/api/v1/studies/?offset=0&limit=10&conditions={검색어}
+ - 예제) 검색어에 ‘갑상선’을 넣었을 경우
+ ```jsx
+ {
+ "count": 8,
+ "next": null,
+ "previous": null,
+ "sponsored_studies": [],
+ "results": [
+ {
+ "from_type": 1,
+ "url": "https://api.clinicaltrialskorea.com/api/v1/studies/29262/",
+ "id": 29262,
+ "ct_id": "201900132",
+ "locations": [],
+ "phases": [
+ "3상"
+ ],
+ "minimum_age_display": "18세",
+ "maximum_age_display": null,
+ "title": "이전 VEGFR 표적 요법 후 진행한 방사성요오드 치료저항성 분화 갑상선암 시험대상자에서 카보잔티닙(XL184)에 대한 제3상, 무작위배정, 이중 눈가림, 위약 대조 시험",
+ "start_date": "2019-01-01",
+ "completion_date": "2022-08-01",
+ "lead_sponsor_name": "파머수티컬리서치어소시에이츠코리아",
+ "brief_summary": "본 시험의 목적은 이전 VEGFR 표적 요법 후 진행한 RAI 저항성 DTC 시험대상자에서 위약과 비교하여 카보잔티닙이 PFS 및 ORR에 미치는 영향을 평가하는 것이다.",
+ "gender": "남녀모두",
+ "is_sponsor": false,
+ "survey_id": null,
+ "is_new": false,
+ "created_at": "2021-10-26T19:18:06.531105"
+ },
+ {
+ "from_type": 1,
+ "url": "https://api.clinicaltrialskorea.com/api/v1/studies/27142/",
+ "id": 27142,
+ "ct_id": "202100156",
+ "locations": [
+ {
+ "city": "서울"
+ }
+ ],
+ "phases": [
+ "연구자 임상시험"
+ ],
+ "minimum_age_display": "18세",
+ "maximum_age_display": "65세",
+ "title": "갑상선 전절제술을 시행받는 환자에서 수술 전 비타민 D(디맥정 30,000 IU) 경구 투여의 수술 후 저칼슘혈증 예방 효용성 연구",
+ "start_date": "2020-12-01",
+ "completion_date": "2022-12-01",
+ "lead_sponsor_name": "서울대학교병원",
+ "brief_summary": "수술 전 비타민 D3(cholecalciferol) 경구 복용의 수술 후 저칼슘혈증 예방효과를 증명하고자 하는 연구자 임상시험이다.",
+ "gender": "남녀모두",
+ "is_sponsor": false,
+ "survey_id": null,
+ "is_new": false,
+ "created_at": "2022-05-12T13:47:12.640427"
+ },
+ ...
+ ]
+ }
+ ```
+
+### 필수 구현 사항
+
+- 질환 명 검색시 API를 호출하여 드롭박스를 통해 추천 검색어를 보여주는 기능을 구현합니다.
+ - 검색어가 없을 시 “검색어 없음” 표출
+ - 최근에 검색어를 보여줍니다.
+- 검색어를 검색 시 결과를 리스트로 보여줍니다.
+ - 검색어가 없을 시 화면도 구현
+ - 검색 결과 컴포넌트를 클릭 시 `https://clinicaltrialskorea.com/studies/{검색어ID}` 링크로 이동
+- 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
+ - README에 전략에 대한 설명 기술
+- API를 호출할 때 마다 `console.info("calling api")` 출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정
+- 과제를 수행하면서 진행하셨던 고민, 원래 구현하고자 했던 설계의 방향성 등을 Pull Request Body(PR Comment)에 적어서 제출해 주시면 감안하여 과제 검토를 진행할 예정이에요.
+
+### 선택 구현 사항
+
+- **[선택 사항 1]** 키보드만으로 추천 검색어들로 이동 가능하도록 구현합니다. (+2점)
+ - ex) 키보드 방향키, 탭을 사용하여 다음 추천 검색어로 이동
+- **[선택 사항 2]** React-Query를 활용하여 캐싱을 구현합니다. (+2점)
+- **[선택 사항 3]** 검색어 결과는 페이지네이션 또는 무한스크롤 선택합니다. (+1점)
+ - 외부 라이브러리 없이 구현할 경우 추가 점수 (+2점)
+- **[선택 사항 4]** 스크랩 저장 기능을 구현합니다. (+3점)
+ - 페이지를 새로고침 해도 리스트가 남아있도록 구현.
+ - 즐겨찾기 페이지에서 스크랩한 결과물 리스트 보여주도록 구현.
+ - 확인 모달을 통해 스크랩을 삭제.
+- **[선택 사항 5]** 뷰포트 크기에 따른 반응형 UI를 구현합니다. (+2점)
+- **[선택 사항 6]** Storybook을 사용하여 UI 인터렉션 테스팅을 구현합니다. (+2점)
+
+### 프로그래밍 요구사항
+
+- `useEffect`의 사용을 최소화하고, 사용 시 의존성을 명확히 정의한다.
+- 모든 상수는 컴포넌트 외부에서 선언하여 관리한다.
+- `if` 조건문을 활용해 값을 바로 반환함으로써 `else`를 사용하지 않도록 한다. 경우에 따라 `if/else` 또는 `switch` 문을 사용할 필요가 있을 때는 그 사용이 적절한지 고민한다.
+- 들여쓰기(depth)는 최대 2단계까지만 허용한다. 이를 위해 함수나 메서드를 분리하는 방법을 고려한다.
+- 모든 숫자 및 문자 리터럴은 명확한 이름을 가진 상수로 정의하여 사용한다.
+- UI와 데이터 처리 로직을 명확히 분리하여 관리한다.
+- 재사용 가능하도록 컴포넌트를 설계하고 구현한다.
+- Styled-components 관련 코드는 각 컴포넌트의 하단에 위치시킨다.
+- 컴포넌트와 함수의 이름은 그 목적이나 기능을 분명하게 반영할 수 있도록 명명한다.
+
+> **제한된 시간 안에 과제를 완성하는 것은 많은 집중력이 필요해서 평소만큼 실력 발휘를 못 하셨을 수 있음을 충분히 이해하고 있어요.** 🙇🏻♀️
+
+### 개발 조건 및 환경
+
+- 언어
+ - JavaScript
+ - TypeScript (+1점)
+- 프레임워크
+ - React
+ - Next.js
+- 사용가능한 기술
+ - 상태 관리 라이브러리 (Redux, Zustand, Jotai 등)
+ - 스타일 관련 라이브러리 (styled-components, emotion, UI kit, tailwind, antd 등)
+ - HTTP Client (axios 등)
+ - 이외 과제 구현에 필요한 외부 라이브러리
+
+## 📈 진행 요구사항
+
+- 미션은 [Infinite_Challenge_FE](https://github.com/techeer-sv/Infinite_Challenge_FE) 를 fork/clone해 시작한다.
+- 기능을 구현하기 전에 Infinite_Challenge_FE 레포지토리 하위에 README.md 파일을 생성해 구현할 기능 목록을 정리해 추가한다.
+- git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가한다.
+ - [AngularJS Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) 참고해 commit log를 남긴다.
+- 아래 절차를 따라 미션을 제출한다.
+ - 본 repository를 개인 repository로 fork한다.
+ - fork한 저장소를 자신의 컴퓨터로 clone한다.
+ - 기능 구현을 위한 브랜치를 생성한다. 브랜치 이름은 본인의 github ID를 이용한다.
+ - 생성한 브랜치에서 기능을 구현한다.
+ - 최상위 디렉토리에 바로 소스코드가 보이도록 해주세요, 불필요한 depth가 존재하면 안됩니다.
+ - 기능 구현이 종료되면, [Infinite_Challenge_FE](https://github.com/techeer-sv/Infinite_Challenge_FE)로 Pull Request를 남긴다.
diff --git a/src/domain/KoreaClinicalInfo/components/Navbar.tsx b/src/domain/KoreaClinicalInfo/components/Navbar.tsx
new file mode 100644
index 0000000..52ae767
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/Navbar.tsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+import Logo from "@/assets/icons/logo.svg";
+
+const Navbar = () => {
+ return (
+
+
+ {title}
+ +
+
+
+
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchBar.tsx b/src/domain/KoreaClinicalInfo/components/SearchBar.tsx
new file mode 100644
index 0000000..d43ff4e
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchBar.tsx
@@ -0,0 +1,65 @@
+import SearchIcon from "@/components/icons/SearchIcon";
+import { useState } from "react";
+import Button from "@/components/Button";
+import SearchSuggestion from "./SearchSuggestion";
+// Controlled 컴포넌트
+interface ISearchBar {
+ value: string;
+ placeholder?: string;
+ onChange: (e: React.ChangeEvent
+
+ )}
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchCard.tsx b/src/domain/KoreaClinicalInfo/components/SearchCard.tsx
new file mode 100644
index 0000000..81eb9db
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchCard.tsx
@@ -0,0 +1,56 @@
+import Chip from "@/components/Chip";
+import ToggleButton from "@/components/ToggleButton";
+interface ISearchCard {
+ title: string;
+ description: string;
+ region: string;
+ period: string;
+ tagList: string[];
+ toggleChecked?: boolean;
+ width?: string;
+ onToggleClick?: () => void;
+}
+
+const SearchCard = ({
+ title,
+ description,
+ region,
+ period,
+ tagList,
+ toggleChecked = false,
+ onToggleClick,
+ width = "431px",
+}: ISearchCard) => {
+ return (
+
+ {/* 카드 상단 */}
+
+ );
+};
+
+export default SearchCard;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchResult.tsx b/src/domain/KoreaClinicalInfo/components/SearchResult.tsx
new file mode 100644
index 0000000..b1416d2
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchResult.tsx
@@ -0,0 +1,241 @@
+import { SearchResultList } from "../types";
+import SearchCard from "./SearchCard";
+// TODO api 연결을 통해 데이터 받도록 처리
+const dummyData = {
+ count: 8,
+ next: null,
+ previous: null,
+ sponsored_studies: [],
+ results: [
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/29262/",
+ id: 29262,
+ ct_id: "201900132",
+ locations: [],
+ phases: ["3상"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "이전 VEGFR 표적 요법 후 진행한 방사성요오드 치료저항성 분화 갑상선암 시험대상자에서 카보잔티닙(XL184)에 대한 제3상, 무작위배정, 이중 눈가림, 위약 대조 시험",
+ start_date: "2019-01-01",
+ completion_date: "2022-08-01",
+ lead_sponsor_name: "파머수티컬리서치어소시에이츠코리아",
+ brief_summary:
+ "본 시험의 목적은 이전 VEGFR 표적 요법 후 진행한 RAI 저항성 DTC 시험대상자에서 위약과 비교하여 카보잔티닙이 PFS 및 ORR에 미치는 영향을 평가하는 것이다.",
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2021-10-26T19:18:06.531105",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/27142/",
+ id: 27142,
+ ct_id: "202100156",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["연구자 임상시험"],
+ minimum_age_display: "18세",
+ maximum_age_display: "65세",
+ title:
+ "갑상선 전절제술을 시행받는 환자에서 수술 전 비타민 D(디맥정 30,000 IU) 경구 투여의 수술 후 저칼슘혈증 예방 효용성 연구",
+ start_date: "2020-12-01",
+ completion_date: "2022-12-01",
+ lead_sponsor_name: "서울대학교병원",
+ brief_summary:
+ "수술 전 비타민 D3(cholecalciferol) 경구 복용의 수술 후 저칼슘혈증 예방효과를 증명하고자 하는 연구자 임상시험이다.",
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2022-05-12T13:47:12.640427",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/26718/",
+ id: 26718,
+ ct_id: "202100581",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["연구자 임상시험"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "폐경 후 여성에서 갑상선암 치료 후 TSH 억제요법으로 기인한 골 소실에 대한 디맥의 예방적 효과",
+ start_date: "2021-05-01",
+ completion_date: "2024-05-01",
+ lead_sponsor_name: "서울대학교병원",
+ brief_summary:
+ "갑상선암 치료 후 갑상선 호르몬 억제요법 중인 낮은 골밀도를 보이는 폐경 후 여성에서 디맥의 예방적 효과를 무작위 공개임상 연구로 증명하고자 한다.",
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2022-05-12T13:11:21.265256",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/564644/",
+ id: 564644,
+ ct_id: "202200870",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["2상"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "INV-001 투여 시 갑상선절제술 후 흉터 예방에 대한 유효성 및 안전성을 평가하기 위한 무작위배정, 이중눈가림, 위약대조, 제2상 임상시험",
+ start_date: "2022-12-01",
+ completion_date: "2024-05-01",
+ lead_sponsor_name: "(주)이노보테라퓨틱스",
+ brief_summary: null,
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2023-03-21T00:33:49.372454",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/28325/",
+ id: 28325,
+ ct_id: "202000095",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["3상"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "키나아제 억제제 투여 경험이 없는, 진행된, 진행성, RET-돌연변이 갑상선 수질암 환자에서, 셀퍼카티닙과 의사가 선택한 카보잔티닙 또는 반데타닙을 비교하는 다기관, 무작위배정, 공개, 제3상 시험(LIBRETTO-531)",
+ start_date: "2020-01-01",
+ completion_date: "2024-07-01",
+ lead_sponsor_name: "한국릴리",
+ brief_summary:
+ "[일차 목적]\n• 카보잔티닙 또는 반데타닙 대비 셀퍼카티닙을 투여받은 진행된, 진행성, 키나아제\n억제제 투여 경험이 없는, RET-돌연변이 MTC 환자의 TFFS를 비교한다.(BICR에 의한 TFFS)\n\n[이차 목적]\n• 카보잔티닙 또는 반데타닙 대비 셀퍼카티닙을 투여받은 진행된, 진행성, 키나아제 억제제 투여 경험이 없는, RET-돌연변이 MTC 환자에서 관찰된, RECIST 1.1 기준에 따른 기타 유효성 결과를 비교한다.\n• 카보잔티닙 또는 반데타닙 대비 셀퍼카티닙의 안전성과 내약성을 평가한다.\n• 카보잔티닙 또는 반데타닙 대비 셀퍼카티닙의 내약성을 비교한다.\n• 현지 RET 실험실 검사의 수행 결과를 단회, 중앙 검사와 비교 평가한다.\n• 셀퍼카티닙을 투여받는 환자들에서 셀퍼카티닙의 PK 를 평가한다.",
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2021-10-26T18:27:08.304546",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/542953/",
+ id: 542953,
+ ct_id: "202200790",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["연구자 임상시험"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "원격전이를 동반한 분화갑상선암에서 PSMA 발현과 방사성 요오드 섭취 정도 비교",
+ start_date: "2022-10-01",
+ completion_date: "2024-10-01",
+ lead_sponsor_name: "한국원자력의학원 원자력병원",
+ brief_summary: null,
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2022-10-13T00:00:25.447321",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/210533/",
+ id: 210533,
+ ct_id: "202200421",
+ locations: [
+ {
+ city: "서울",
+ },
+ ],
+ phases: ["3상"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "RET-돌연변이 갑상선 수질암 치료를 위한 프랄세티닙 대 표준 치료의 제3상, 무작위 배정, 공개 임상시험",
+ start_date: "2022-03-01",
+ completion_date: "2034-07-01",
+ lead_sponsor_name: "피피디디벨럽먼트피티이엘티디",
+ brief_summary: null,
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2022-05-20T00:01:54.084129",
+ },
+ {
+ from_type: 1,
+ url: "https://api.clinicaltrialskorea.com/api/v1/studies/26836/",
+ id: 26836,
+ ct_id: "202100463",
+ locations: [
+ {
+ city: "경기도",
+ },
+ ],
+ phases: ["연구자 임상시험"],
+ minimum_age_display: "18세",
+ maximum_age_display: null,
+ title:
+ "갑상선 절제술 및 경부 종괴 적출술 후 보툴리눔 독소 주입과 CO2 레이져 복합요법의 경부 반흔 예방 효과",
+ start_date: "2021-04-01",
+ completion_date: "2022-02-01",
+ lead_sponsor_name: "가톨릭대학교성빈센트병원",
+ brief_summary:
+ "경부 절개를 통해 종양을 적출하는 갑상선절제술 및 경부 종양 절제술 환자에서 수술 시 절개 부위의 보툴리눔 독소 주입술과 절제적 CO2 레이저 치료의 병행 요법이 반흔 예방에 보다 우수하여 미용적 효과 및 환자의 만족감을 상승시킬 수 있음을 알아 보고자 함.\n또한 상처 치유 과정에서 보툴리눔 독소가 레이저 치료의 반흔 제거 시술 효과를 상승시키는 결과를 보일 수 있음을 확인하고자 함",
+ gender: "남녀모두",
+ is_sponsor: false,
+ survey_id: null,
+ is_new: false,
+ created_at: "2022-05-12T13:21:53.749473",
+ },
+ ],
+};
+
+interface ISearchResult {
+ list?: SearchResultList;
+}
+
+const SearchResult = ({ list }: ISearchResult) => {
+ list = dummyData;
+
+ return (
+
+
+ {/* 설명 */}
+ {title}
++ {description} +
+ +
+
+ {/* 태그 목록 */}
+ {`실시기관지역 | ${region}`}
+{`모집 마감일 | ${period} 까지`}
+
+ {tagList.map((tag, index) => (
+
+
+
+ );
+};
+
+export default SearchResult;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecentSearch.tsx b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecentSearch.tsx
new file mode 100644
index 0000000..499b708
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecentSearch.tsx
@@ -0,0 +1,38 @@
+import { SearchItem } from ".";
+import { SearchKeywordType } from "../../types";
+interface IRecentSearch {
+ onItemClick: (keyword: number) => void;
+ recentKeyWords: SearchKeywordType[];
+}
+
+const RecentSearch = ({ recentKeyWords, onItemClick }: IRecentSearch) => {
+ return (
+
+ {list.results.map((item, index) => (
+ loc.city).join(", ") || "-"}
+ period={item.completion_date}
+ tagList={item.phases}
+ toggleChecked={false}
+ onToggleClick={() => console.log("북마크")}
+ />
+ ))}
+
+
+ onItemClick(keyword.id)}
+ />
+ ))}
+
+ ) : (
+ <>
+
+ );
+};
+
+export default RecentSearch;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecommendSearch.tsx b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecommendSearch.tsx
new file mode 100644
index 0000000..b3c6220
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/RecommendSearch.tsx
@@ -0,0 +1,74 @@
+import SearchIcon from "@/components/icons/SearchIcon";
+import { SearchItem } from ".";
+import { SearchKeywordType } from "../../types";
+interface IRecommendSearch {
+ searchKeywords: string;
+ onItemClick: (keywordId: number) => void;
+ recommendKeyWords: SearchKeywordType[];
+}
+/**
+ * 특정 검색 키워드를 기준으로 추천 키워드를 분리하는 함수
+ * @param searchKeyword
+ * @param recommendKeyword
+ * @returns regularText: string
+ */
+const splitKeyword = (searchKeyword: string, recommendKeyword: string) => {
+ const index = recommendKeyword
+ .toLowerCase()
+ .indexOf(searchKeyword.toLowerCase());
+ if (index === -1) {
+ return recommendKeyword;
+ }
+ const regularText = recommendKeyword.substring(index + searchKeyword.length);
+
+ return regularText;
+};
+
+const RecommendSearch = ({
+ searchKeywords,
+ recommendKeyWords,
+ onItemClick,
+}: IRecommendSearch) => {
+ return (
+
+ 최근검색어
+
+
+ {recentKeyWords && recentKeyWords.length > 0 ? (
+ <>
+ {recentKeyWords.map((keyword, index) => (
+
+
+ 최근 검색어가 없습니다.
+
+
+
+ )}
+
+ onItemClick(keyword.id)}
+ />
+ );
+ })}
+
+ ) : (
+ <>
+
+ );
+};
+
+export default RecommendSearch;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchSuggestion/SearchItem.tsx b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/SearchItem.tsx
new file mode 100644
index 0000000..3e4b5b1
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/SearchItem.tsx
@@ -0,0 +1,26 @@
+import SearchIcon from "@/components/icons/SearchIcon";
+
+interface ISearchItem {
+ boldText?: string;
+ regularText?: string;
+ onClick: () => void;
+}
+
+const SearchItem = ({ boldText, regularText, onClick }: ISearchItem) => {
+ return (
+
+
+
+
+
+
+ {searchKeywords}
+
+
+ 추천검색어
+
+
+ {recommendKeyWords && recommendKeyWords.length > 0 ? (
+ <>
+ {recommendKeyWords.map((keyword, index) => {
+ const regularText = splitKeyword(searchKeywords, keyword.name);
+ return (
+
+
+ 추천 검색어가 없습니다
+
+
+
+ )}
+
+
+ );
+};
+
+export default SearchItem;
diff --git a/src/domain/KoreaClinicalInfo/components/SearchSuggestion/index.tsx b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/index.tsx
new file mode 100644
index 0000000..9469a05
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/components/SearchSuggestion/index.tsx
@@ -0,0 +1,60 @@
+export { default as SearchItem } from "./SearchItem";
+export { default as RecommendSearch } from "./RecommendSearch";
+export { default as RecentSearch } from "./RecentSearch";
+
+import { RecommendSearch, RecentSearch } from ".";
+
+interface ISearchSuggestion {
+ searchKeyword?: string;
+}
+
+const dummyRecentSearch = [
+ {
+ id: 1,
+ name: "최근검색어1",
+ },
+ {
+ id: 2,
+ name: "최근검색어2",
+ },
+ {
+ id: 3,
+ name: "최근검색어3",
+ },
+];
+
+const dummyRecommendSearch = [
+ {
+ id: 1,
+ name: "추천검색어1",
+ },
+ {
+ id: 2,
+ name: "추천검색어2",
+ },
+ {
+ id: 3,
+ name: "추천검색어3",
+ },
+];
+
+const SearchSuggestion = ({ searchKeyword }: ISearchSuggestion) => {
+ return (
+
+
+
+ {boldText}
+ {regularText}
+
+
+ {searchKeyword ? (
+ {}}
+ />
+ ) : (
+ {}}
+ />
+ )}
+
+ );
+};
+
+export default SearchSuggestion;
diff --git a/src/domain/KoreaClinicalInfo/pages/FavoritesPage.tsx b/src/domain/KoreaClinicalInfo/pages/FavoritesPage.tsx
new file mode 100644
index 0000000..b12a3b2
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/pages/FavoritesPage.tsx
@@ -0,0 +1,9 @@
+const FavoritesPage = () => {
+ return (
+
+
+ );
+};
+
+export default FavoritesPage;
diff --git a/src/domain/KoreaClinicalInfo/pages/MainPage.tsx b/src/domain/KoreaClinicalInfo/pages/MainPage.tsx
new file mode 100644
index 0000000..9350213
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/pages/MainPage.tsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+import Navbar from "../components/Navbar";
+import SearchBar from "../components/SearchBar";
+import SearchResult from "../components/SearchResult";
+
+const MainPage = () => {
+ const [searchKeyword, setSearchKeyword] = useStateFavorites
+
+
+ );
+};
+
+export default MainPage;
diff --git a/src/domain/KoreaClinicalInfo/types.ts b/src/domain/KoreaClinicalInfo/types.ts
new file mode 100644
index 0000000..d590bee
--- /dev/null
+++ b/src/domain/KoreaClinicalInfo/types.ts
@@ -0,0 +1,37 @@
+export interface SearchKeywordType {
+ id: number;
+ name: string;
+}
+
+export interface SearchResultList {
+ count: number;
+ next: string | null;
+ previous: string | null;
+ sponsored_studies: string[];
+ results: SearchResult[];
+}
+
+export interface SearchResult {
+ from_type: number;
+ url: string;
+ id: number;
+ ct_id: string;
+ locations: Location[];
+ phases: string[];
+ minimum_age_display: string;
+ maximum_age_display: string | null;
+ title: string;
+ start_date: string;
+ completion_date: string;
+ lead_sponsor_name: string;
+ brief_summary: string | null;
+ gender: string;
+ is_sponsor: boolean;
+ survey_id: number | null;
+ is_new: boolean;
+ created_at: string;
+}
+
+interface Location {
+ city: string;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..3d7150d
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ setSearchKeyword(e.target.value)}
+ onSubmit={handleSubmit}
+ />
+
+ 국내 모든 임상시험 검색하고
+온라인으로 참여하기
+
+
+
+ # Configure your project
+
+ Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+ 
+
+ Add styling and CSS
+Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
+ Learn more
+ 
+
+ Provide context and mocking
+Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
+ Learn more
+ 
+
+
+
+ Load assets and resources
+To link static files (like fonts) to your projects and stories, use the + `staticDirs` configuration option to specify folders to load when + starting Storybook.
+ Learn more
+
+
+ # Do more with Storybook
+
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
+ 
+
+ Autodocs
+Auto-generate living, + interactive reference documentation from your components and stories.
+ Learn more
+ 
+
+ Publish to Chromatic
+Publish your Storybook to review and collaborate with your entire team.
+ Learn more
+ 
+
+ Figma Plugin
+Embed your stories into Figma to cross-reference the design and live + implementation in one place.
+ Learn more
+ 
+
+ Testing
+Use stories to test a component in all its variations, no matter how + complex.
+ Learn more
+ 
+
+
+ Accessibility
+Automatically test your components for a11y issues as you develop.
+ Learn more
+
+
+
+
+ 
+
+
+
+
+
diff --git a/src/stories/KoreaClinicalInfo/RecentSearch.stories.tsx b/src/stories/KoreaClinicalInfo/RecentSearch.stories.tsx
new file mode 100644
index 0000000..c72f084
--- /dev/null
+++ b/src/stories/KoreaClinicalInfo/RecentSearch.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RecentSearch } from "@/domain/KoreaClinicalInfo/components/SearchSuggestion";
+import { fn } from "@storybook/test";
+
+const meta = {
+ title: "KoreaClinicalInfo/SearchSuggestion/RecentSearch",
+ component: RecentSearch,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ decorators: [
+ (Story) => (
+
+ 
+ Join our contributors building the future of UI development.
+
+ Star on GitHub
+
+ 
+
+
+ Get support and chat with frontend developers.
+
+ Join Discord server
+
+ 
+
+
+
+ Watch tutorials, feature previews and interviews.
+
+ Watch on YouTube
+
+
+ ),
+ ],
+ argTypes: {
+ recentKeyWords: {
+ control: "object",
+ description: "최근 검색어 목록",
+ },
+ onItemClick: {
+ action: "clicked",
+ description: "최근 검색어 클릭 이벤트",
+ },
+ },
+ args: {
+ onItemClick: fn(),
+ },
+} satisfies Meta
+
+ ),
+ ],
+ argTypes: {
+ searchKeywords: {
+ control: "text",
+ description: "추천 검색어 목록",
+ },
+ recommendKeyWords: {
+ control: "object",
+ description: "추천 검색어 목록",
+ },
+ onItemClick: {
+ action: "clicked",
+ description: "추천 검색어 클릭 이벤트",
+ },
+ },
+ args: {
+ onItemClick: fn(),
+ },
+} satisfies Meta
+
+ ),
+ ],
+ argTypes: {
+ boldText: {
+ control: "text",
+ description: "굵은 글씨",
+ },
+ regularText: {
+ control: "text",
+ description: "일반 글씨",
+ },
+ onClick: {
+ action: "clicked",
+ description: "검색 결과 클릭 이벤트",
+ },
+ },
+ args: {
+ onClick: fn(),
+ },
+} satisfies Meta