feat : 공통컴포넌트 구현 (#20)

* fix : 공통 컴포넌트 관련 eslint, prettier설정 변경

* feat : 공통 컴포넌트 구현

.eslintrc.json

@@ -26,7 +26,8 @@
   "plugins": ["react", "@typescript-eslint", "jsx-a11y", "import"],
   "rules": {
     "react/react-in-jsx-scope": "off",
-    "import/prefer-default-export": "off" //파일에서 export를 하나만 할때 default export를 쓰라고 하는 eslint off
+    "import/prefer-default-export": "off", //파일에서 export를 하나만 할때 default export를 쓰라고 하는 eslint off
+    "no-confusing-arrow": ["error", { "allowParens": true, "onlyOneSimpleParam": true }]
   },
   "settings": {
     "react": {

.prettierrc

@@ -1,6 +1,6 @@
 {
-  "arrowParens": "avoid",
-  "printWidth": 100,
+  "arrowParens": "always",
+  "printWidth": 130,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

src/components/common/Card.styled.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+interface CardProps {
+  $position?: string;
+  $width?: string;
+  $height?: string;
+  $border?: string;
+  $radius?: string;
+  $backgroundColor?: string;
+  $color?: string;
+  $textAlign?: string;
+  theme?: {
+    color: {
+      fontColor: string;
+    };
+  };
+}
+
+const Card = styled.div<CardProps>`
+  position: ${(props) => props.$position || 'relative'};
+  width: ${(props) => props.$width || 'auto'};
+  height: ${(props) => props.$height || 'auto'};
+  border: ${(props) => props.$border || 'none'};
+  border-radius: ${(props) => props.$radius || '0px'};
+  background-color: ${(props) => props.$backgroundColor || 'transparent'};
+  color: ${(props) => props.$color || props.theme?.color};
+  text-align: ${(props) => props.$textAlign || 'start'};
+`;
+
+export { Card };

src/components/common/Container.styled.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+interface ContainerProps {
+  $position?: string;
+  $display?: string;
+  $direction?: string;
+  $justify?: string;
+  $align?: string;
+  $width?: string;
+  $height?: string;
+  $border?: string;
+  $radius?: string;
+  $backgroundColor?: string;
+  $fontSize?: string;
+  $fontWeight?: string;
+  theme?: {
+    color: {
+      backgroundColor: string;
+    };
+    fontSize: {
+      m: string;
+    };
+    fontWeight: {
+      medium: string;
+    };
+  };
+}
+
+const Container = styled.div<ContainerProps>`
+  position: ${(props) => (props?.$position ? props.$position : 'relative')};
+  display: ${(props) => (props?.$display ? props.$display : 'block')};
+  flex-direction: ${(props) => (props?.$direction ? props.$direction : 'row')};
+  justify-content: ${(props) => (props?.$justify ? props.$justify : 'start')};
+  align-items: ${(props) => (props?.$align ? props.$align : 'start')};
+  width: ${(props) => (props?.$width ? props.$width : 'auto')};
+  height: ${(props) => (props?.$height ? props.$height : 'auto')};
+  border: ${(props) => (props?.$border ? props.$border : 'none')};
+  border-radius: ${(props) => (props?.$radius ? props.$radius : 0)};
+  background-color: ${(props) => (props?.$backgroundColor ? props.$backgroundColor : props?.theme?.color.backgroundColor)};
+  font-size: ${(props) => (props?.$fontSize ? props.$fontSize : props?.theme?.fontSize.m)};
+  font-weight: ${(props) => (props?.$fontWeight ? props.$fontWeight : props?.theme?.fontWeight.medium)};
+`;
+
+export { Container };

src/components/common/Flex.styled.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+
+interface FlexProps {
+  $display?: string;
+  $direction?: string;
+  $justify?: string;
+  $align?: string;
+  $gap?: string | number;
+  $wrap?: string;
+}
+
+const Flex = styled.div<FlexProps>`
+  display: ${(props) => (props?.$display ? props.$display : 'flex')};
+  flex-direction: ${(props) => (props?.$direction ? props.$direction : 'row')};
+  justify-content: ${(props) => (props?.$justify ? props.$justify : 'start')};
+  align-items: ${(props) => (props?.$align ? props.$align : 'start')};
+  gap: ${(props) => (props?.$gap ? props.$gap : 0)};
+  flex-wrap: ${(props) => (props?.$wrap ? props.$wrap : 'nowrap')};
+`;
+
+export { Flex };

src/components/common/Input.styled.tsx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+
+interface InputProps {
+  $position?: string;
+  $width?: string;
+  $height?: string;
+  $border?: string;
+  $outline?: string;
+  $appearance?: string;
+  $letterSpacing?: string;
+  $fontSize?: string;
+  $backgroundColor?: string;
+  $color?: string;
+  theme?: {
+    fontSize: {
+      xs: string;
+    };
+    color: {
+      backgroundColor: string;
+      fontColor: string;
+    };
+  };
+}
+
+const Input = styled.input<InputProps>`
+  position: ${(props) => (props?.$position ? props.$position : 'relative')};
+  width: ${(props) => (props?.$width ? props.$width : 'auto')};
+  height: ${(props) => (props?.$height ? props.$height : 'auto')};
+  border: ${(props) => (props?.$border ? props.$border : 'none')};
+  outline: ${(props) => (props?.$outline ? props.$outline : 'none')};
+  appearance: ${(props) => (props?.$appearance ? props.$appearance : 'none')};
+  letter-spacing: ${(props) => (props?.$letterSpacing ? props.$letterSpacing : '-0.02em')};
+  font-size: ${(props) => (props?.$fontSize ? props.$fontSize : props.theme?.fontSize.xs)};
+  background-color: ${(props) => (props?.$backgroundColor ? props.$backgroundColor : props.theme?.color.backgroundColor)};
+  color: ${(props) => (props?.$color ? props.$color : props.theme?.color.fontColor)};
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+  }
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  *::-webkit-search-results-button,
+  *::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+`;
+
+export { Input };

src/components/common/Text.styled.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+interface TextProps {
+  $position?: string;
+  $top?: string;
+  $bottom?: string;
+  $left?: string;
+  $right?: string;
+  $display?: string;
+  $width?: string;
+  $height?: string;
+  $lineHeight?: string;
+  $fontSize?: string;
+  $fontWeight?: string;
+  $color?: string;
+  $decorationLine?: string;
+  theme?: {
+    fontSize: {
+      s: string;
+    };
+    fontWeight: {
+      bold: string;
+    };
+    color: {
+      fontColor: string;
+    };
+  };
+}
+
+const Text = styled.span<TextProps>`
+  position: ${(props) => (props?.$position ? props.$position : 'relative')};
+  top: ${(props) => (props?.$top ? props.$top : 'auto')};
+  bottom: ${(props) => (props?.$bottom ? props.$bottom : 'auto')};
+  left: ${(props) => (props?.$left ? props.$left : 'auto')};
+  right: ${(props) => (props?.$right ? props.$right : 'auto')};
+  display: ${(props) => (props?.$display ? props.$display : 'block')};
+  width: ${(props) => (props?.$width !== undefined ? props.$width : 'fit-content')};
+  height: ${(props) => (props?.$height !== undefined ? props.$height : 'auto')};
+  line-height: ${(props) => (props?.$lineHeight ? props.$lineHeight : '100%')};
+  font-size: ${(props) => (props?.$fontSize ? props.$fontSize : props.theme?.fontSize.s)};
+  font-weight: ${(props) => (props?.$fontWeight ? props.$fontWeight : props.theme?.fontWeight.bold)};
+  color: ${(props) => (props?.$color ? props.$color : props.theme?.color.fontColor)};
+  text-decoration-line: ${(props) => (props?.$decorationLine ? props.$decorationLine : 'none')};
+`;
+
+export { Text };

src/components/common/index.tsx

@@ -0,0 +1,5 @@
+export { Container } from './Container.styled';
+export { Card } from './Card.styled';
+export { Flex } from './Flex.styled';
+export { Input } from './Input.styled';
+export { Text } from './Text.styled';