Merge pull request #5 반응형 디자인 유틸리티 추가. chip 일부 컴포넌트 구현

반응형 디자인 유틸리티 추가. chip 일부 컴포넌트 구현

.eslintrc.cjs

@@ -9,19 +9,22 @@ module.exports = {
         'plugin:jsx-a11y/recommended',
         'airbnb', // Airbnb 스타일 가이드 사용
         'airbnb/hooks',
-        'airbnb-typescript',
+        'airbnb-typescript'
       ],
       plugins: ['@typescript-eslint'],
       parserOptions: {
-        project: './tsconfig.json',
+        project: './tsconfig.json'
       },
       rules: {
         // 추가적인 규칙 설정
-        '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
+        '@typescript-eslint/comma-dangle': [
+          'error',
+          'always-multiline'
+        ],
         'linebreak-style': 0,
         'react/react-in-jsx-scope': 'off',
-        'react/jsx-props-no-spreading': 'off',
-      },
-    },
-  ],
+        'react/jsx-props-no-spreading': 'off'
+      }
+    }
+  ]
 };

src/components/chip/ColorCircle/ColorCircle.tsx

@@ -0,0 +1,30 @@
+interface CircleProps {
+  color: string;
+  diameter: number;
+  children?: React.ReactNode;
+}
+
+// 색상코드, 지름, 내부요소 prop을 받아 원을 만들어줍니다.
+// 색상코드는 가능하면 #이 붙는 RGB로, 지름은 숫자만 쓰면 px단위로 지정됩니다.
+// 내부요소는 필수가 아니며, 있을 시 중앙정렬됩니다.
+function ColorCircle({ color, diameter, children }: CircleProps) {
+  const circleStyle = {
+    backgroundColor: color,
+    width: `${diameter}px`,
+    height: `${diameter}px`,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    textAlign: 'center',
+  } as React.CSSProperties;
+
+  return <div style={circleStyle}>{children}</div>;
+}
+
+ColorCircle.defaultProps = {
+  children: undefined,
+};
+
+export default ColorCircle;

src/components/chip/ColorCircle/ColorDot.tsx

@@ -0,0 +1,22 @@
+import ColorCircle from './ColorCircle';
+
+interface ColorDotProps {
+  color: string;
+}
+
+// 작은 점이 여럿 사용되서 컴포넌트로 분리했습니다.
+// useMemo를 사용하면 같은 색 컴포넌트는 렌더링을 한번만 하게 할 수 있습니다.
+function ColorDot({ color }: ColorDotProps) {
+  const colorCircleProps = {
+    color,
+    diameter: 8,
+  };
+
+  return <ColorCircle {...colorCircleProps} />;
+}
+
+export default ColorDot;
+
+// 사용예시
+// <ColorDot color="#00ff37" />
+// <ColorDot color="#ff0000" />

src/components/chip/ColorCircle/ColoredTag.tsx

@@ -0,0 +1,30 @@
+interface CircleProps {
+  color: string;
+  diameter: number;
+  children?: React.ReactNode;
+}
+
+// 색상코드, 지름, 내부요소 prop을 받아 원을 만들어줍니다.
+// 색상코드는 가능하면 #이 붙는 RGB로, 지름은 숫자만 쓰면 px단위로 지정됩니다.
+// 내부요소는 필수가 아니며, 있을 시 중앙정렬됩니다.
+function ColorCircle({ color, diameter, children }: CircleProps) {
+  const circleStyle = {
+    backgroundColor: color,
+    width: `${diameter}px`,
+    height: `${diameter}px`,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    textAlign: 'center',
+  } as React.CSSProperties;
+
+  return <div style={circleStyle}>{children}</div>;
+}
+
+ColorCircle.defaultProps = {
+  children: undefined,
+};
+
+export default ColorCircle;

src/styles/global.scss

@@ -26,7 +26,8 @@ $pink_E876EA: #e876ea;
   margin: 0;
 }
 
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
   padding: 0;
@@ -36,4 +37,4 @@ html, body {
   height: 100%;
   margin: 0;
   padding: 0;
-}
+}

src/styles/media.scss

@@ -0,0 +1,40 @@
+// 장치별 사이즈 정의
+$size-mobile: 767px;
+$size-tablet: 768px;
+$size-tablet-max: 1023px;
+$size-desktop: 1024px;
+
+// [모바일]가로 767px 이하일 때
+@mixin mobile {
+  @media (max-width: $size-mobile) {
+    @content;
+  }
+}
+
+// [태블릿]가로 768px 이상, 1023px이하
+@mixin tablet {
+  @media (min-width: $size-tablet) and (max-width: $size-tablet-max) {
+    @content;
+  }
+}
+
+// [데스크탑]가로 1024px 이상
+@mixin desktop {
+  @media (min-width: $size-desktop) {
+    @content;
+  }
+}
+
+// 사용 예시
+// @include mobile{
+//   /*브라우저 사이즈767px이하일때*/
+//     background: black;
+//   }
+//   @include tablet{
+//   /*브라우저 사이즈1023px이하일때*/
+//     background: white;
+//   }
+//   @include desktop{
+//   /*브라우저 사이즈1024px이상일때*/
+//     background: gray;
+//   }

src/styles/utils.scss

@@ -0,0 +1 @@
+@import './media.scss';

src/utils/useWindowSize.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+  // windowSize는 화면의 가로, 세로 크기를 객체로 갖습니다.
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const handleResize = () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  // 초기값 설정
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};
+
+export default useWindowSize;
+
+// 컴포넌트에서 반응형 디자인을 구현하기 위한 커스텀 훅입니다.
+// scss에서의 반응형 디자인은 styles/media.scss를 참고해주세요.
+
+// import useWindowSize from './useWindowSize';
+// const { width } = useWindowSize(); 하여 width나 height를 추출합니다.