Merge pull request #3 from Leeseunghwan7305/tmdghks7305

Tmdghks7305

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+# Workflow name
+name: "Chromatic Deployment"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - run: npm
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -70,6 +70,9 @@
 
 - 키보드만으로 추천 검색어들로 이동 가능하도록 구현
   - 검색창에서 onKeyDown 이벤트가 발생했을 때 event.key 값이 ArrowDown, ArrowUp일 경우 selectedIndex가 변경되게 했고 추천 검색어의 index와 selectedIndex가 같을 때 background-color가 변경되도록 구현.
+
+### 검색창
+=======
 
 ### 검색창
 ![2024-05-1010 09 48-ezgif com-video-to-gif-converter](https://github.com/Leeseunghwan7305/Infinite_Challenge_FE/assets/78102507/378ec5b8-452d-4c64-8147-4f8a909deea7)

package.json

@@ -9,12 +9,14 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_bc436d25f0df202"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.34.2",
     "@tanstack/react-query-devtools": "^5.35.1",
     "axios": "^1.6.8",
+    "chromatic": "^11.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.0",

src/common/Nav.stories.ts

@@ -0,0 +1,34 @@
+// Nav.stories.tsx
+import { Meta, StoryObj } from "@storybook/react";
+import Nav from "./Nav";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Common/Nav",
+  component: Nav,
+  parameters: {
+    layout: "centered",
+  },
+  tages: ["autodocs"],
+  // decorators: [
+  //   (Story) => (
+  //     <div
+  //       style={{
+  //         position: "absolute",
+  //         top: 0,
+  //         left: 0,
+  //         width: "100%",
+  //       }}
+  //     >
+  //       <Story />
+  //     </div>
+  //   ),
+  // ],
+  args: { onClick: fn() },
+} as Meta<typeof Nav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/components/main/DropBox.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import DropBox from "./DropBox";
+
+const meta = {
+  title: "Components/DropBox",
+  component: DropBox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  // argTypes: {
+  //   type: "추천검색어",
+  // },
+  args: { onClick: fn() },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "800px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof DropBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const RecommendedSearch: Story = {
+  args: {
+    type: "추천검색어",
+    searchLists: [
+      { name: "Search Term 1", id: 1 },
+      { name: "Search Term 2", id: 2 },
+      { name: "Search Term 3", id: 3 },
+    ],
+    selectedIndex: -1,
+  },
+};
+
+export const RecentSearch: Story = {
+  args: {
+    type: "최근검색어",
+    searchLists: [
+      { name: "Search Term 1", id: 1 },
+      { name: "Search Term 2", id: 2 },
+      { name: "Search Term 3", id: 3 },
+    ],
+    selectedIndex: -1,
+  },
+};
+
+// import React, { useState } from "react";
+// import { Story } from "@storybook/react";
+// import DropBox, { DropBoxProps } from "./DropBox";
+
+// export default {
+//   title: "Components/DropBox",
+//   component: DropBox,
+// };
+
+// const Template: Story<DropBoxProps> = (args) => {
+//   const [value, setValue] = useState("");
+//   return <DropBox {...args} value={value} setValue={setValue} />;
+// };
+
+// export const RecommendedSearch = Template.bind({});
+// RecommendedSearch.args = {
+//   type: "추천검색어",
+//   searchLists: [
+//     { name: "Search Term 1", id: 1 },
+//     { name: "Search Term 2", id: 2 },
+//     { name: "Search Term 3", id: 3 },
+//   ],
+//   selectedIndex: -1,
+// };
+
+// export const RecentSearch = Template.bind({});
+// RecentSearch.args = {
+//   type: "최근검색어",
+//   searchLists: [],
+//   selectedIndex: -1,
+// };

src/components/main/NoResult.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react";
+import NoResult from "./NoResult";
+
+const meta = {
+  title: "Components/NoResult",
+  component: NoResult,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "1000px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof NoResult>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    title: "검색결과가 없습니다.",
+    description: "검색어를 다시 확인해주세요.",
+  },
+};

src/components/main/ResultList.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ResultList from "./ResultList";
+import { ResultListType } from "@/src/types/searchResult";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Components/ResultList",
+  component: ResultList,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "1000px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof ResultList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const sampleResults: ResultListType = {
+  from_type: 1,
+  url: "http://example.com",
+  id: 123,
+  ct_id: "NCT123456",
+  locations: [{ city: "San Francisco" }],
+  phases: ["Phase 1", "Phase 2"],
+  minimum_age_display: "18 Years",
+  maximum_age_display: "65 Years",
+  title: "Study of Something Important",
+  start_date: "2021-01-01",
+  completion_date: "2023-01-01",
+  lead_sponsor_name: "Big Pharma Inc.",
+  brief_summary: "This study investigates something important.",
+  gender: "All",
+  is_sponsor: true,
+  survey_id: null,
+  is_new: true,
+  created_at: "2020-12-31",
+};
+
+export const Basic: Story = {
+  args: {
+    searchResult: sampleResults,
+    toggleFavorites: () => {},
+    location: "main",
+  },
+};

src/components/main/SearchBar.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SearchBar from "./SearchBar";
+import { useState } from "react";
+import { fn, userEvent, within } from "@storybook/test";
+
+const meta = {
+  title: "Components/SearchBar",
+  component: SearchBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "800px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: { onClick: fn() },
+} as Meta<typeof SearchBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Render = (args: typeof meta) => {
+  const [value, setValue] = useState("");
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  const refetch = () => {};
+
+  return (
+    <SearchBar
+      {...args}
+      value={value}
+      setValue={setValue}
+      onChange={onChange}
+      refetch={refetch}
+    />
+  );
+};
+
+export const Basic: Story = {
+  render: () => <Render />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getAllByRole("textbox")[0];
+
+    await userEvent.type(input, "갑상선", {
+      delay: 100,
+    });
+    await userEvent.click(input);
+  },
+};

src/components/main/SearchBar.tsx

@@ -91,7 +91,6 @@ const Input = styled.input`
   border: none;
   font-size: 16px;
   background-color: transparent;
-  pointer-events: none;
   input::placeholder {
     color: #bbbbbb;
   }