Merge pull request #27 from codeit-maso/feature/jeon

🐛 fix: 프리티어, eslint적용, 외 코드 일부 수정

Author: LeeCh0129

src/App.jsx

@@ -1,14 +1,14 @@
-import "./base.scss";
-import { Route, Routes } from "react-router-dom";
-import Header from "./components/layout/Header/Header";
+import './base.scss';
+import { Route, Routes } from 'react-router-dom';
+import Header from './components/layout/Header/Header';
 import Test from './pages/List-page/Test';
 
 export default function App() {
   return (
     <>
-      <Header/>
+      <Header />
       <Routes>
-        <Route path="/" element={<Test/>}/>
+        <Route path="/" element={<Test />} />
       </Routes>
     </>
   );

src/assets/styles/variables.scss

@@ -127,5 +127,3 @@ $font-weight-bold: 700;
   font-size: $font-size-12;
   font-weight: $font-weight-regular;
 }
-
-

src/base.scss

@@ -34,5 +34,5 @@ a {
 
 button {
   cursor: pointer;
-  font-family: "Pretendard", sans-serif;
+  font-family: 'Pretendard', sans-serif;
 }

src/components/layout/Header/Header.jsx

@@ -1,23 +1,27 @@
-import { Link } from "react-router-dom";
-import { useLocation } from "react-router-dom";
-import styles from "./Header.module.scss"; 
-import logo from "../../../assets/images/rolling-logo.svg";
+import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import styles from './Header.module.scss';
+import logo from '../../../assets/images/rolling-logo.svg';
 
-export default function Header(){    
-    const location = useLocation();
-    const showButton = ['/', '/list'];
-    const isLocation = showButton.includes(location.pathname);
+const showButton = ['/', '/list'];
 
-    return(
-        <>
-            <header className={styles.header}>
-                <Link to="/">
-                    <img className={styles.logo} src={logo} alt="rolling logo"></img>
-                </Link>
-                {isLocation && <Link to="/post" className={styles.button}>롤링 페이퍼 만들기</Link>}
-            </header>
-            <div className={styles.underline}></div>
-        </>
-    )       
-}
+export default function Header() {
+  const location = useLocation();
+  const isLocation = showButton.includes(location.pathname);
 
+  return (
+    <>
+      <header className={styles.header}>
+        <Link to="/">
+          <img className={styles.logo} src={logo} alt="rolling logo"></img>
+        </Link>
+        {isLocation && (
+          <Link to="/post" className={styles.button}>
+            롤링 페이퍼 만들기
+          </Link>
+        )}
+      </header>
+      <div className={styles.underline}></div>
+    </>
+  );
+}

src/components/layout/Header/Header.module.scss

@@ -1,28 +1,28 @@
-@import '../../../assets/styles/variables.scss';
+@use '../../../assets/styles/variables.scss' as *;
 
-.header{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width:100%;
-    max-width: 1207px;
-    margin:0 auto;
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1207px;
+  margin: 0 auto;
 }
 
-.underline{
-    height: 1px;
-    background-color: #EDEDED;
+.underline {
+  height: 1px;
+  background-color: #ededed;
 }
 
-.logo{
-    width: 106px;
-    margin: 16px 0;
+.logo {
+  width: 106px;
+  margin: 16px 0;
 }
 
-.button{
-    @include font-16-regular;
-    padding: 7px 16px;
-    border: 1px solid $gray-300;
-    border-radius: 6px;
-    white-space: nowrap;
-}
+.button {
+  @include font-16-regular;
+  padding: 7px 16px;
+  border: 1px solid $gray-300;
+  border-radius: 6px;
+  white-space: nowrap;
+}

src/main.jsx

@@ -6,7 +6,7 @@ import App from './App.jsx';
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
-      <App/>
+      <App />
     </BrowserRouter>
   </StrictMode>,
 );

src/pages/List-page/Test.jsx

@@ -1,5 +1,3 @@
-export default function Test(){
-    return(
-        <div style={{fontSize:"30px"}}>Route test component ^_^ </div>
-    )
-}
+export default function Test() {
+  return <div style={{ fontSize: '30px' }}>Route test component ^_^ </div>;
+}