[백동열] 기능구현 챌린지

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitmessage.txt

@@ -0,0 +1,28 @@
+# <타입> : <제목> 형식으로 작성하며 제목은 최대 50글자 정도로만 입력
+# 제목을 아랫줄에 작성, 제목 끝에 마침표 금지, 무엇을 했는지 명확하게 작성
+
+################
+# 본문(추가 설명)을 아랫줄에 작성
+
+################
+# 꼬릿말(footer)을 아랫줄에 작성 (관련된 이슈 번호 등 추가)
+
+################
+# feat: 새로운 기능 추가
+# fix: 버그 수정
+# docs: 문서 수정
+# test: 테스트 코드, 리팩토링 테스트 코드 추가
+# refact: 코드 리팩토링
+# style: 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
+# chore: 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
+# design: CSS 등 사용자 UI 디자인 변경
+# comment: 필요한 주석 추가 및 변경
+# rename: 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
+# remove: 파일을 삭제하는 작업만 수행한 경우
+# !BREAKING CHANGE: 커다란 API 변경의 이유
+# !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우
+
+################
+
+# git config --global commit.template .gitmessage.txt
+# 위 커맨드로 설정, 로컬 세팅의 경우 --global 제외하기

README.md

@@ -1,171 +1,49 @@
 # 기능 구현 챌린지 - 프론트엔드
 
-### 구현 목표
-
-- [한국임상정보](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를 남긴다.
+- [제작 문서(Notion)](https://time-map.notion.site/Techeer-5ecace250f2344e9a1e2a5cde3c64ffa?pvs=4)
+
+## 5/12 13시 즐겨찾기 기능구현 시작
+
+- [구현(feature) - Search](https://time-map.notion.site/feature-Search-e40e36aaded34919b68882095e69d3cf?pvs=4)
+  - 즐겨찾기 기능구현
+  - 즐겨찾기 UI 제작 및 연결 완료(Jotai)
+
+## 5/12 11시 검색 추천 API 연결 시작
+
+- [구현(feature) - Search](https://time-map.notion.site/feature-Search-e40e36aaded34919b68882095e69d3cf?pvs=4)
+  - 검색어 추천 API 연결
+  - 검색 결과 없을 때, default 화면 구성 완료
+
+## 5/12 10시 검색 기능 구현 시작
+
+- [구현(feature) - Search](https://time-map.notion.site/feature-Search-e40e36aaded34919b68882095e69d3cf?pvs=4)
+  - 검색 시 결과 리스트가 정상적으로 돌아오도록 하기
+
+## 5/11 16시 결과 영역 구현 시작
+
+- [구현 - Search](https://time-map.notion.site/Search-122dee3264194e9cb82c642a5cf2d99f?pvs=4)
+  - Result 영역 구현
+  - Result 카드에 결과 들어오도록 설정
+  - hover 시 description 표현되도록 설정
+
+## 5/11 16시 검색바 구현 시작
+
+- [구현 - Search](https://time-map.notion.site/Search-122dee3264194e9cb82c642a5cf2d99f?pvs=4)
+  - Search Bar 구현
+
+## 5/11 16시 검색 영역 구현 시작
+
+- [구현 - Search](https://time-map.notion.site/Search-122dee3264194e9cb82c642a5cf2d99f?pvs=4)
+  - Search Container 영역 구현
+
+## 5/11 14시 헤더 구현 시작
+
+- [구현 - Header](https://time-map.notion.site/Header-7806999c8eae4d4faae67c3d09c60737?pvs=4)
+
+## 5/11 14시 구현할 기능 목록 설계 시작
+
+- [구현할 기능 목록 설계](https://time-map.notion.site/884a57dbcdd24e30815021488287e77f?pvs=4)
+
+## 5/11 13시 프로젝트 세팅 시작
+
+- [프로젝트 세팅](https://time-map.notion.site/d31c8754ba6740e5b5deb2ce37cce29c?pvs=4)

babel.config.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "vite/babel-preset-react"
+  ],
+  "plugins": ["babel-plugin-styled-components"]
+}

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
+      rel="stylesheet"
+      type="text/css" />
+    <title>Infinite_Challenge_FE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>