techeer-sv · teawon · May 7, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "plugin:storybook/recommended"
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    // 최대 깊이를 2단계로 제한
+    "max-depth": ["error", 2],
+    // 들여쓰기를 2 스페이스로 제한
+    indent: ["error", 2],
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# 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?
+
+*storybook.log
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+};
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,7 @@
+<!-- 
+    스토리북은 preview-head.html 파일을 통해 <head> 태그에 필요한 내용을 추가 가능
+    모달 컴포넌트는 포털(ReactDOM.createPortal)을 통해 DOM 트리의 특정 요소로 렌더링되는데 
+    이떄 필요한 타겟 요소 등록
+-->
+
+<div id="modal-root"></div>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -1,171 +1,46 @@
-# 기능 구현 챌린지 - 프론트엔드
+## 구현 기능 목록
 
-### 구현 목표
+- [x] 프로그램 초기 설정
 
-- [한국임상정보](https://clinicaltrialskorea.com/) 페이지의 검색영역을 클론하기
+  - [x] vite, ts, react, eslint
+  - [x] 스토리북
+  - [x] tailwind
 
-### 참고자료
+- [ ] 컴포넌트 구현
 
-- 과제 요구 UI [[피그마 링크]](https://www.figma.com/file/2I7T132M48F6FbhJHwIB0r/Techeer-Infinite-Challenge-FE?type=design&node-id=0-1&mode=design&t=5ogNibInEDjJplQd-0)
+  - [x] 칩
+  - [x] 토글 버튼
+  - [x] 검색바
+  - [x] 드롭박스
+  - [x] 모달
+  - [ ] 검색 리스트
+    - [x] 단일 검색 리스트 요소
+    - [x] 최근 검색어
+    - [x] 추천 검색어
+  - [ ] 헤더
 
-- 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 연결
+  - [ ] 어느 시점에 API를 호출할지 고민
+- [ ] 질환 검색 최근 검색어 표현
 
-- 질환 명 검색시 API를 호출하여 드롭박스를 통해 추천 검색어를 보여주는 기능을 구현합니다.
-  - 검색어가 없을 시 “검색어 없음” 표출
-  - 최근에 검색어를 보여줍니다.
-- 검색어를 검색 시 결과를 리스트로 보여줍니다.
-  - 검색어가 없을 시 화면도 구현
-  - 검색 결과 컴포넌트를 클릭 시 `https://clinicaltrialskorea.com/studies/{검색어ID}` 링크로 이동
-- 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
-  - README에 전략에 대한 설명 기술
-- API를 호출할 때 마다 `console.info("calling api")` 출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정
-- 과제를 수행하면서 진행하셨던 고민, 원래 구현하고자 했던 설계의 방향성 등을 Pull Request Body(PR Comment)에 적어서 제출해 주시면 감안하여 과제 검토를 진행할 예정이에요.
+- [ ] 검색 페이지 퍼블리싱
 
-### 선택 구현 사항
+  - [ ] 검색 결과 API 연결
+  - [ ] 무한스크롤 및 페이징 처리
 
-- **[선택 사항 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 관련 코드는 각 컴포넌트의 하단에 위치시킨다.
-- 컴포넌트와 함수의 이름은 그 목적이나 기능을 분명하게 반영할 수 있도록 명명한다.
+1. Icon요소의 경우 SVG로 export 후 컴포넌트로 분리하여 사용
 
-> **제한된 시간 안에 과제를 완성하는 것은 많은 집중력이 필요해서 평소만큼 실력 발휘를 못 하셨을 수 있음을 충분히 이해하고 있어요.** 🙇🏻‍♀️
+- 색상, 크기만 다르고 형태가 같은 Icon이 많이 보였기 때문
+- 추가적인 수정에 대해 동적으로 아이콘 요소를 컨트롤 가능
 
-### 개발 조건 및 환경
+2. ToggleButton
 
-- 언어
-  - 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를 남긴다.
+- 초기에는 내부에서 useState를 통해 상태값을 관리하였으나, 외부로 분리
+- api 호출 실패 등 클릭을 했을 때 항상 상태가 변화한다는걸 보장할 수 없고 컴포넌트쪽에서 처리하는게 더 유연하다고 생각
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!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" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="modal-root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>