feat: 세그멘트 버튼 추가 및 여러 버그수정 (#20)

* chore: changeLog 추가

* chore: modify template

* input 매개변수 및 마진 값 수정 (#12)

* (#11) refactor: setState -> onChange로 변경

* (#11) fix: margin left 6px 추가

* (#14) feat: modal 매개변수로 children 추가 (#15)

* fix: input label 옵셔널

* fix: modal children 옵셔널

* fix: search setState -> onChange

* fix: index에서 name CheckBox로 export

* (#19) feat: Segmented Button

* fix: margin 로직 수정

* fix: input 에러메시지 빈 값일 때에도 추가

src/components/input/index.tsx

@@ -70,7 +70,9 @@ const _Input = styled.input<{ errorMsg: string }>`
   border-radius: 4px;
   border: 1px solid
     ${({ theme, errorMsg }) =>
-      typeof errorMsg === 'undefined' ? theme.color.gray5 : theme.color.error};
+      typeof errorMsg === 'undefined' || errorMsg === ''
+        ? theme.color.gray5
+        : theme.color.error};
   :focus {
     border: 2px solid ${({ theme }) => theme.color.primary};
   }

src/components/search/index.tsx

@@ -43,7 +43,7 @@ const _Wrapper = styled.label<wrapperPropsType>`
   align-items: center;
   width: 241px;
   height: 40px;
-  margin: ${({ margin }) => marginToCss({ margin })};
+  ${({ margin }) => marginToCss({ margin })};
   background: ${({ theme }) => theme.color.gray1};
   box-shadow: 0 1px 20px rgba(204, 204, 204, 0.24);
   border-radius: 30px;

src/components/segmentedBtn/SegmentBtn.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { SegmentedBtn } from '.';
+
+export default {
+  title: 'component/segmentedBtn',
+  component: SegmentedBtn,
+} as ComponentMeta<typeof SegmentedBtn>;
+
+const selectedArr = ['A', 'B', 'C'];
+
+const Template: ComponentStory<typeof SegmentedBtn> = (args) => {
+  const [state, setState] = useState<string | number>(selectedArr[0]);
+  const onChange = (selected: string | number) => {
+    setState(selected);
+  };
+  return (
+    <SegmentedBtn
+      onChange={onChange}
+      selectedArr={selectedArr}
+      cur={state}
+      {...args}
+    />
+  );
+};
+
+export const segmentedBtn = Template.bind({});

src/components/segmentedBtn/index.tsx

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components';
+import { marginCssType, marginToCss } from '../../utils/distance';
+import { Text } from '../styleGuide/text/Text';
+
+interface PropsType<T> extends marginCssType {
+  selectedArr: T[];
+  cur: T;
+  onChange: (selected: T) => void;
+}
+
+export const SegmentedBtn = <T extends string | number>({
+  selectedArr,
+  cur,
+  onChange,
+  margin,
+}: PropsType<T>) => {
+  return (
+    <_Wrapper margin={margin}>
+      {selectedArr.map((selected) => (
+        <_SelectedItem
+          onClick={() => onChange(selected)}
+          display="inline-block"
+          key={selected}
+        >
+          <_SelectedInner cur={selected === cur}>{selected}</_SelectedInner>
+        </_SelectedItem>
+      ))}
+    </_Wrapper>
+  );
+};
+
+const _Wrapper = styled.div<marginCssType>`
+  ${({ margin }) => marginToCss({ margin })};
+  display: inline-block;
+  height: 48px;
+  border: 1px solid ${({ theme }) => theme.color.primaryLighten1};
+  cursor: pointer;
+  border-radius: 4px;
+  > div {
+    :first-of-type {
+      left: -1px;
+    }
+    :last-of-type {
+      right: -1px;
+    }
+  }
+`;
+
+const _SelectedItem = styled(Text)`
+  color: ${({ theme }) => theme.color.gray4};
+  width: 110px;
+  height: 48px;
+  transition: 0.15s;
+  position: relative;
+  top: -1px;
+`;
+
+const _SelectedInner = styled.div<{ cur: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  transition: 0.15s;
+  ${({ theme, cur }) =>
+    cur &&
+    css`
+      background-color: ${theme.color.primary};
+      border-radius: 4px;
+      color ${theme.color.gray1}
+    `};
+`;

src/components/styleGuide/text/Text.tsx

@@ -43,7 +43,7 @@ const _Text = styled.div<PropsType>`
   display: ${({ display }) => display};
   color: ${({ color, theme }) => theme.color[color]};
   ${({ size, theme }) => theme.font[size]};
-  margin: ${({ margin }) => marginToCss({ margin })};
+  ${({ margin }) => marginToCss({ margin })};
   cursor: ${({ cursor }) => cursor};
   text-align: ${({ align }) => align};
 `;

src/index.ts

@@ -1,5 +1,5 @@
 export * from './components/button/Button';
-export * from './components/checkBox';
+export * as CheckBox from './components/checkBox';
 export * from './components/dropdown';
 export * from './components/input';
 export * from './components/radio/Radio';
@@ -17,3 +17,4 @@ export * from './components/search';
 export * from './components/styleGuide/icon';
 export * from './components/modal';
 export * from './components/breadCrumb/BreadCrumb';
+export * from './components/segmentedBtn';

src/utils/distance.ts

@@ -4,32 +4,53 @@ import styled from 'styled-components';
 /** 이거 배열말고 그냥 매개변수로 받아야 타이핑이 줄어들음 */
 type marginType =
   | [number, number, number, number]
-  | [number | directionType, number]
+  | [number | directionType, number | 'auto']
   | [number];
 
 export interface marginCssType {
-  margin?: marginType;
+  margin?: marginType[] | marginType;
 }
 
-export const marginToCss = ({ margin }: marginCssType) => {
-  if (!margin) return;
+const mgReturn = (mg: marginType) => {
+  if (mg[0] === 0 && mg[1] === 'auto') {
+    return `margin: 0 auto;`;
+  }
 
-  switch (margin[0]) {
+  const unitTransform = (m: 'auto' | number) => (m === 'auto' ? m : m + 'px');
+
+  switch (mg[0]) {
     case 'top':
-      return `${margin[1]}px 0 0 0`;
+      return `margin-top: ${unitTransform(mg[1])};`;
     case 'bottom':
-      return `0 0 ${margin[1]}px 0`;
+      return `margin-bottom: ${unitTransform(mg[1])};`;
     case 'left':
-      return `0 0 0 ${margin[1]}px`;
+      return `margin-left: ${unitTransform(mg[1])};`;
     case 'right':
-      return `0 ${margin[1]}px 0 0`;
+      return `margin-right: ${unitTransform(mg[1])};`;
     default:
-      let css = '';
-      for (let i = 0; i < margin.length; i++) css += margin[i] + 'px ';
-      return css;
+      let css = 'margin: ';
+      for (let j = 0; j < mg.length; j++) css += mg[j] + 'px ';
+      return css + ';';
   }
 };
 
+export const marginToCss = ({ margin }: marginCssType) => {
+  if (!margin) return;
+  let mgCss = '';
+
+  if (Array.isArray(margin[0])) {
+    for (let i = 0; i < margin.length; i++) {
+      // @ts-expect-error
+      mgCss += mgReturn(margin[i]);
+    }
+  } else {
+    // @ts-expect-error
+    mgCss = mgReturn(margin);
+  }
+
+  return mgCss;
+};
+
 export const _Wrapper = styled.div<marginCssType>`
-  margin: ${({ margin }) => marginToCss({ margin })};
+  ${({ margin }) => marginToCss({ margin })};
 `;