Jy/XButton, Input, Search Filter 구현

client/src/components/atoms/Input/FilterInput.stories.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterInput from './FilterInput';
+
+export default {
+  component: FilterInput,
+  title: 'FilterInput',
+};
+export const Default = () => {
+  const content = text('content', 'content');
+  const type = text('type', 'button');
+  const onClick = () => {
+    // 버튼 메서드
+  };
+  return <FilterInput type={type} content={content} onClick={onClick} />;
+};

client/src/components/atoms/Input/FilterInput.tsx

@@ -0,0 +1,39 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+interface Props {
+  content: string;
+  onClick?: () => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  type: string;
+}
+
+const StyledInput = styled.input`
+  font-size: 1rem;
+  text-decoration: none;
+  border: none;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const FilterInput: FunctionComponent<Props> = ({
+  type,
+  content,
+  onClick,
+  onChange,
+}) => {
+  return (
+    <StyledInput
+      type={type}
+      onClick={onClick}
+      onChange={onChange}
+      value={content}
+    />
+  );
+};
+
+export default FilterInput;

client/src/components/atoms/Input/index.ts

@@ -1 +1,2 @@
-export { default } from './Input';
+export { default as Input } from './Input';
+export { default as FilterInput } from './FilterInput';

client/src/components/molecules/FilterModal/FilterModal.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterModal from './FilterModal';
+
+export default {
+  component: FilterModal,
+  title: 'FilterModal',
+};
+export const Default = () => {
+  const optionHeader = text('optionHeader', 'Filter Issues');
+  const options = [
+    'Open issues',
+    'Your issues',
+    'Everything assigned to you',
+    'Everything mentioning to you',
+    'Closed issues',
+  ];
+  const type = 'button';
+  const keys = ['search1', 'search2', 'search3', 'search4', 'search5'];
+  const onClick = () => {
+    // modal button 클릭 시
+  };
+  return (
+    <FilterModal
+      display="block"
+      optionHeader={optionHeader}
+      options={options}
+      onClick={onClick}
+      type={type}
+      keys={keys}
+    />
+  );
+};
+
+export const Author = () => {
+  const optionHeader = text('optionHeader', 'Filter by author');
+  const options = ['user1', 'user2', 'user3', 'user4', 'user5'];
+  const onClick = () => {
+    // modal button 클릭 시
+  };
+  const type = 'checkbox';
+  const keys = ['radio1', 'radio2', 'radio3', 'radio4', 'radio5'];
+  const input = 'Filter users';
+  return (
+    <FilterModal
+      display="block"
+      optionHeader={optionHeader}
+      options={options}
+      onClick={onClick}
+      type={type}
+      input={input}
+      keys={keys}
+    />
+  );
+};

client/src/components/molecules/FilterModal/FilterModal.tsx

@@ -0,0 +1,75 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+import { Input, FilterInput } from '@components/atoms/Input';
+
+interface Props {
+  optionHeader: string;
+  options: string[];
+  onClick?: () => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  input?: string;
+  type: string;
+  keys: string[];
+  display: string;
+}
+
+const StyledUl = styled.ul`
+  border-radius: 0.3rem;
+  list-style: none;
+  border: 1px solid ${({ theme }) => theme.palette.BORDER_COLOR};
+  max-width: 300px;
+  margin: 10px 0;
+`;
+
+const StyledLi = styled.li`
+  & > h3 {
+    font-weight: 600;
+  }
+
+  & > input {
+    width: 100%;
+    text-align: left;
+  }
+
+  & > input,
+  & > h3 {
+    color: ${({ theme }) => theme.palette.PRIMARY};
+    font-size: 0.8rem;
+    padding: 7px 16px;
+    border-bottom: 1px solid ${({ theme }) => theme.palette.BORDER_COLOR};
+  }
+
+  & > input:hover {
+    background-color: ${({ theme }) => theme.palette.BG_COLOR02};
+  }
+
+  & > input:focus {
+    outline: none;
+  }
+`;
+
+const SearchFilter: FunctionComponent<Props> = ({
+  optionHeader,
+  options,
+  onClick,
+  type,
+  input,
+  display,
+  keys,
+}) => {
+  return (
+    <StyledUl style={{ display }}>
+      <StyledLi>
+        <h3>{optionHeader}</h3>
+      </StyledLi>
+      {input ? <Input placeholder={input} type="text" /> : <></>}
+      {options.map((option: string, i: number) => (
+        <StyledLi key={keys[i]}>
+          <FilterInput type={type} content={option} onClick={onClick} />
+        </StyledLi>
+      ))}
+    </StyledUl>
+  );
+};
+
+export default SearchFilter;

client/src/components/molecules/FilterModal/index.ts

@@ -0,0 +1 @@
+export { default } from './FilterModal';