Jump2FE · coo-kiee · Sep 10, 2023 · Sep 10, 2023 · Sep 24, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -12,9 +12,11 @@
     "project": ["./tsconfig.json"]
   },
   "rules": {
+    "no-param-reassign": "off",
     "no-console": "off",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off",
     "@typescript-eslint/no-unused-vars": "warn",
     "react/jsx-no-useless-fragment": "off",
     "import/prefer-default-export": "off",

diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/use-sync-external-store-npm-1.2.0-44f75d2564-5c639e0f8d.zip b/.yarn/cache/use-sync-external-store-npm-1.2.0-44f75d2564-5c639e0f8d.zip
diff --git a/.yarn/cache/zustand-npm-4.4.1-f6868a7326-80acd0fbf6.zip b/.yarn/cache/zustand-npm-4.4.1-f6868a7326-80acd0fbf6.zip
diff --git a/README.md b/README.md
@@ -11,3 +11,5 @@ $ yarn start
 ```
 
 ## 1회 Chip Component
+
+## 2회 Button Component
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "react-scripts": "5.0.1",
     "styled-components": "^6.0.7",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -39,5 +36,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <div id="modal"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,33 +1,24 @@
-// Img
-import check from './assets/images/chip/check.png';
-import close from './assets/images/chip/close.png';
-
-// Component
-import Chip from './chip';
+import Modal from 'modal';
+import { useEffect } from 'react';
+import useModal from 'stores/useModal';
 
 const App = () => {
+  const { openModal } = useModal();
+
+  useEffect(() => {
+    openModal({
+      COMMON: {
+        component: <>COMMON</>,
+        callback() {
+          console.log('Call Back');
+        },
+      },
+    });
+  }, [openModal]);
+
   return (
     <>
-      <Chip>
-        <Chip.Label>SUGGESTION</Chip.Label>
-      </Chip>
-      <Chip useSelected backgroundColor={{ default: '#bcbcbc', select: '#f17c7c' }}>
-        <Chip.LeadingImg src={check} />
-        <Chip.Label>ASSIST</Chip.Label>
-      </Chip>
-      <Chip useSelected>
-        <Chip.LeadingImg src={check} />
-        <Chip.Label>FILTER USE SELECT</Chip.Label>
-      </Chip>
-      <Chip
-        useSelected
-        backgroundColor={{ default: '#fff', select: '#f17c7c' }}
-        borderColor={{ default: '#f17c7c', select: '#f17c7c' }}
-      >
-        <Chip.LeadingImg src={check} />
-        <Chip.Label>INPUT</Chip.Label>
-        <Chip.TrailingImg src={close} />
-      </Chip>
+      <Modal />
     </>
   );
 };

diff --git a/src/button/index.tsx b/src/button/index.tsx
@@ -0,0 +1,33 @@
+import { ButtonHTMLAttributes, FC, PropsWithChildren } from 'react';
+import { StyledButton } from './style';
+import { Spinner } from '../loading/style';
+
+interface IButton extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+  isFetching?: boolean;
+  height?: string;
+  width?: string;
+  bgColor?: string;
+  borderRadius?: string;
+  hoverOption?: {
+    bgColor?: string;
+    color?: string;
+  };
+}
+const Button: FC<IButton> = ({ isFetching, children, ...rest }) => {
+  return (
+    <StyledButton type="button" {...rest}>
+      {isFetching ? <Spinner /> : children}
+    </StyledButton>
+  );
+};
+
+export default Button;
+
+Button.defaultProps = {
+  isFetching: false,
+  height: '50px',
+  width: '150px',
+  bgColor: undefined,
+  borderRadius: '2.778vw',
+  hoverOption: undefined,
+};
diff --git a/src/button/style/index.tsx b/src/button/style/index.tsx
@@ -0,0 +1,33 @@
+import { styled } from 'styled-components';
+
+export const StyledButton = styled.button<{
+  isFetching?: boolean;
+  borderRadius?: string;
+  height?: string;
+  width?: string;
+  bgColor?: string;
+  hoverOption?: {
+    bgColor?: string;
+    color?: string;
+  };
+}>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background-color: ${(props) => props.bgColor};
+  border-color: ${(props) => props.bgColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${(props) => props.borderRadius};
+  margin: 16px;
+  ${(props) => !props.disabled && 'cursor: pointer;'}
+  ${(props) =>
+    !props.disabled &&
+    `
+  &:hover {
+    border-color: ${props.hoverOption?.bgColor};
+    background-color: ${props.hoverOption?.bgColor};
+    color: ${props.hoverOption?.color};
+  }
+  `}
+`;
diff --git a/src/chip/index.tsx b/src/chip/index.tsx
@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useState } from 'react';
 
 // Style
-import { ChipContainer, ChipLeadingImg, ChipLabel, ChipTrailingImg } from './styled';
+import { ChipContainer, ChipLeadingImg, ChipLabel, ChipTrailingImg } from './style';
 
 interface IChip extends PropsWithChildren {
   useSelected?: boolean;

diff --git a/src/chip/styled/index.tsx → src/chip/style/index.tsx b/src/chip/styled/index.tsx → src/chip/style/index.tsx
diff --git a/src/chip/test.tsx b/src/chip/test.tsx
@@ -0,0 +1,35 @@
+// Img
+import check from './assets/images/chip/check.png';
+import close from './assets/images/chip/close.png';
+
+// Component
+import Chip from '.';
+
+const ChipTest = () => {
+  return (
+    <>
+      <Chip>
+        <Chip.Label>SUGGESTION</Chip.Label>
+      </Chip>
+      <Chip useSelected backgroundColor={{ default: '#bcbcbc', select: '#f17c7c' }}>
+        <Chip.LeadingImg src={check} />
+        <Chip.Label>ASSIST</Chip.Label>
+      </Chip>
+      <Chip useSelected>
+        <Chip.LeadingImg src={check} />
+        <Chip.Label>FILTER USE SELECT</Chip.Label>
+      </Chip>
+      <Chip
+        useSelected
+        backgroundColor={{ default: '#fff', select: '#f17c7c' }}
+        borderColor={{ default: '#f17c7c', select: '#f17c7c' }}
+      >
+        <Chip.LeadingImg src={check} />
+        <Chip.Label>INPUT</Chip.Label>
+        <Chip.TrailingImg src={close} />
+      </Chip>
+    </>
+  );
+};
+
+export default ChipTest;
diff --git a/src/loading/style/index.tsx b/src/loading/style/index.tsx
@@ -0,0 +1,26 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotation = keyframes`
+    from{
+        transform: rotate(0deg);
+    }
+
+    to{
+        transform: rotate(360deg);
+    }
+`;
+
+export const Spinner = styled.div<{
+  height?: string;
+  width?: string;
+  color?: string;
+}>`
+  position: relative;
+  height: ${(props) => props.height || '30px'};
+  width: ${(props) => props.width || '30px'};
+  border: 1px solid ${(props) => props.color || '#000'};
+  border-radius: 50%;
+  border-top: none;
+  border-right: none;
+  animation: ${rotation} 1s linear infinite;
+`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,5 @@ $ yarn start
		```

		## 1회 Chip Component

		## 2회 Button Component