CHORE(format) : 모든 파일 포맷팅

.eslintrc.json

@@ -1,22 +1,17 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true,
-        "node": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "no-unused-vars": ["warn"],
-        "react/prop-types": ["off"]
-    }
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "no-unused-vars": ["warn"],
+    "react/prop-types": ["off"]
+  }
 }

.prettierrc

@@ -1,6 +1,6 @@
 {
-    "tabWidth": 2,
-    "useTabs": false,
-    "semi": false,
-    "singleQuote": true
-}
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true
+}

src/App.js

@@ -1,17 +1,17 @@
-import React from "react";
-import GlobalStyle from "./styles/GlobalStyle";
-import { BrowserRouter as Router } from "react-router-dom";
-import MainRouter from "./MainRouter";
+import React from 'react'
+import GlobalStyle from './styles/GlobalStyle'
+import { BrowserRouter as Router } from 'react-router-dom'
+import MainRouter from './MainRouter'
 
 const App = () => {
   return (
     <main>
-      <GlobalStyle/>
+      <GlobalStyle />
       <Router>
-        <MainRouter/>
+        <MainRouter />
       </Router>
     </main>
-  );
+  )
 }
 
-export default App;
+export default App

src/MainRouter.jsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import { styled } from 'styled-components';
-import { Routes, Route } from 'react-router-dom';
-import HomePage from './pages/HomePage';
+import React from 'react'
+import { styled } from 'styled-components'
+import { Routes, Route } from 'react-router-dom'
+import HomePage from './pages/HomePage'
 
 const MainRouter = () => {
   return (
     <Container>
       {/*헤더*/}
       <Routes>
-        <Route path='/' element={<HomePage/>}/>
+        <Route path="/" element={<HomePage />} />
       </Routes>
     </Container>
-  );
-};
+  )
+}
 
 const Container = styled.div`
   position: relative;
   display: flex;
   height: calc(var(--vh, 1vh) * 100);
   justify-content: center;
-  // margin: auto;
-  // max-width: 100%;
+  margin: auto;
+  max-width: 100%;
   background-color: ${({ theme }) => theme.colors.p500};
-`;
+`
 
-export default MainRouter;
+export default MainRouter

src/components/Upload/UploadComponent.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ReactComponent as Logo } from "../assets/images/dropbox.svg";
+import styled from "styled-components";
+
+const UploadComponent = () => {
+    return(
+        <div>
+            <UploadBoxStyled>
+                <Logo/>
+            </UploadBoxStyled>
+        </div>
+    );
+}
+
+
+const UploadBoxStyled = styled.div`
+    background-color: ${({theme}) => theme.colors.gray200};
+`;
+
+
+export default UploadComponent;

src/index.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { RecoilRoot } from 'recoil';
-import { ThemeProvider } from 'styled-components';
-import { theme } from './styles/theme';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import { RecoilRoot } from 'recoil'
+import { ThemeProvider } from 'styled-components'
+import { theme } from './styles/theme'
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
   <RecoilRoot>
     <ThemeProvider theme={theme}>
       <React.StrictMode>
         <App />
       </React.StrictMode>
     </ThemeProvider>
-  </RecoilRoot>
-);
+  </RecoilRoot>,
+)
 
-reportWebVitals();
+reportWebVitals()

src/pages/HomePage.jsx

@@ -1,39 +1,38 @@
-import React, { useState } from "react";
-import FileBtn from "../components/FileBtn";
-import { ReactComponent as Logo } from "../assets/images/dropbox.svg";
-import styled from "styled-components";
+import React, { useState } from 'react'
+import FileBtn from '../components/FileBtn'
+import styled from 'styled-components'
 
 const HomePage = () => {
-    const [isFile, setIsFile] = useState(false);
-    const [isChanged, setIsChanged] = useState(true);
+  const [isFile, setIsFile] = useState(false)
+  const [isChanged, setIsChanged] = useState(true)
 
-    return(
-        <div>
-            <UploadBoxStyled>
-                <Logo/>
-            </UploadBoxStyled>
-            <FileBtn
-                text="Hex 파일 변환"
-                type='button'
-                onClick={() => {
-                console.log('FileChangeBtn Clicked');
-                }}
-                disabled={isFile}
-            />
-            <FileBtn
-                text="파일 다운로드"
-                type='button'
-                onClick={() => {
-                console.log('FileDownBtn Clicked');
-                }}
-                disabled={isChanged}
-            />
-        </div>
-    )
+  return (
+    <div>
+      <BtnWrap>
+        <FileBtn
+          text="Hex 파일 변환"
+          type="button"
+          onClick={() => {
+            console.log('FileChangeBtn Clicked')
+          }}
+          disabled={isFile}
+        />
+        <FileBtn
+          text="파일 다운로드"
+          type="button"
+          onClick={() => {
+            console.log('FileDownBtn Clicked')
+          }}
+          disabled={isChanged}
+        />
+      </BtnWrap>
+    </div>
+  )
 }
 
-const UploadBoxStyled = styled.div`
-    background-color: ${({theme}) => theme.colors.gray200};
-`;
-
-export default HomePage;
+const BtnWrap = styled.div`
+  width: 420px;
+  display: flex;
+  justify-content: space-between;
+`
+export default HomePage

src/reportWebVitals.js

@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'

src/styles/GlobalStyle.jsx

@@ -3,13 +3,13 @@ import { createGlobalStyle } from 'styled-components';
 const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'SpoqaHanSansNeo';
+    font-weight: normal;
 
     src: url('../assets/fonts/SpoqaHanSansNeo-Bold.ttf') format('SpoqaHanSansNeoB'),
         url('../assets/fonts/SpoqaHanSansNeo-Light.ttf') format('SpoqaHanSansNeoL'),
         url('../assets/fonts/SpoqaHanSansNeo-Medium.ttf') format('SpoqaHanSansNeoM'),
         url('../assets/fonts/SpoqaHanSansNeo-Regular.ttf') format('SpoqaHanSansNeoR'),
         url('../assets/fonts/SpoqaHanSansNeo-Thin.ttf') format('SpoqaHanSansNeoT'),
-    font-weight: normal;
   }
 
   *, *::before, *::after {

src/styles/font.jsx

@@ -1,5 +1,5 @@
-import { styled } from 'styled-components';
-import { theme } from './theme';
+import { styled } from 'styled-components'
+import { theme } from './theme'
 
 export const Title = styled.span`
   font-weight: ${({ weight }) => (weight ? weight : 600)};
@@ -8,7 +8,7 @@ export const Title = styled.span`
   font-style: normal;
   font-weight: 600;
   line-height: 150%; /* 30px */
-`;
+`
 
 export const CustomFont = styled.span`
   font-weight: ${({ weight }) => (weight ? weight : 500)};
@@ -18,7 +18,7 @@ export const CustomFont = styled.span`
   white-space: nowrap;
   font-weight: 500;
   line-height: 16px; /* 133.333% */
-`;
+`
 
 export const Body = styled.span`
   font-weight: ${({ weight }) => (weight ? weight : 500)};
@@ -28,7 +28,7 @@ export const Body = styled.span`
   font-style: normal;
   font-weight: 500;
   line-height: 160%; /* 25.6px */
-`;
+`
 
 export const ButtonText = styled.span`
   font-weight: ${({ weight }) => (weight ? weight : 500)};
@@ -37,4 +37,4 @@ export const ButtonText = styled.span`
   font-style: normal;
   font-weight: 500;
   line-height: 160%; /* 25.6px */
-`;
+`

src/styles/theme.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from 'styled-components'
 
 export const theme = {
   colors: {
@@ -38,7 +38,7 @@ export const theme = {
     body700: '2rem',
     body500: '2rem',
     body300: '2rem',
-    button: '2.25rem'
+    button: '2.25rem',
   },
   fontWeight: {
     title700: '700',
@@ -58,16 +58,16 @@ export const theme = {
     body300: '90%',
     button: '150%',
   },
-};
+}
 
 export const flexCenter = css`
   display: flex;
   justify-content: center;
   align-items: center;
-`;
+`
 
 export const flexColumnCenter = css`
   display: flex;
   flex-direction: column;
   align-items: center;
-`;
+`