[#5] refactor : prettier 및 px -> rem 적용

src/components/NavBar/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Professor } from '@/components/Professor'
+import { Restaurent } from '@/components/Restaurant'
 import { ProfessorCardProps } from '@/components/Professor/ProfessorCard'
 import { getCurrentDate } from '@/utils/time'
 import './style.scss'
@@ -8,73 +9,78 @@ export type ProfessorListProps = {
   professorsList: ProfessorCardProps[]
 }
 
-export const NavBar: React.FC<ProfessorListProps> = ({professorsList}) => {
-  const [currentMenu, setCurrentMenu] = useState("")
+export const NavBar: React.FC<ProfessorListProps> = ({ professorsList }) => {
+  const [currentMenu, setCurrentMenu] = useState('')
   const [renderSwitchNum, setRenderSwitchNum] = useState(0)
-  const [state, setState] = useState("")
+  const [state, setState] = useState('')
   const [hour, setHour] = useState(0)
   const [minute, setMinute] = useState(0)
   const [second, setSecond] = useState(0)
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    setTimeout(() => {
       const [state, hour, minute, second] = getCurrentDate()
       setState(state)
       setHour(hour)
       setMinute(minute)
       setSecond(second)
-    },1000)
-    return () => {
-      clearTimeout(timer)
-    }
-  })
+    }, 1000)
+  }, [second])
 
   const clickNavMenu = (e) => {
-    if(e.target.innerHTML==='맛집 검색'){
+    if (e.target.innerHTML === '맛집 검색') {
       setRenderSwitchNum(1)
-    }
-    else if(e.target.innerHTML==='교수 검색'){
+    } else if (e.target.innerHTML === '교수 검색') {
       setRenderSwitchNum(2)
     }
 
-    if(currentMenu===e.target.innerHTML && renderSwitchNum!==0)
+    if (currentMenu === e.target.innerHTML && renderSwitchNum !== 0)
       setRenderSwitchNum(0)
     setCurrentMenu(e.target.innerHTML)
   }
 
-  const renderSwitch = num => {
-    switch(num) {
+  const renderSwitch = (num) => {
+    switch (num) {
       case 1:
-        return;
+        return <Restaurent />
       case 2:
-        return <Professor professorsList={professorsList}/>;
+        return <Professor professorsList={professorsList} />
       default:
-        return;
+        return
     }
   }
-  
+
   return (
     <div className="nav-bar">
-      <div className="left">
+      <div className="nav-bar-left">
         <div className="notice-academic">학사 공지</div>
         <div className="search-empty-classroom">빈 강의실 찾기</div>
       </div>
-      <div className="center">{state} {hour}:{minute}:{second}</div>
-      <div className="right">
-        <div className="weather">🌤 
-        <span className="lowest"> -8℃</span> / 
-        <span className="best"> 14℃</span>
+      <div className="nav-bar-center">
+        {state} {hour}:{minute}:{second}
+      </div>
+      <div className="nav-bar-right">
+        <div className="weather">
+          🌤
+          <span className="lowest"> -8℃</span> /
+          <span className="best"> 14℃</span>
         </div>
-        <div id="restaurant" className="search-restaurant" onClick={(e) => clickNavMenu(e)}>
+        <div
+          id="restaurant"
+          className="search-restaurant"
+          onClick={(e) => clickNavMenu(e)}
+        >
           <span>맛집 검색</span>
         </div>
-        <div id="professor" className="search-professor" onClick={(e) => clickNavMenu(e)}>
+        <div
+          id="professor"
+          className="search-professor"
+          onClick={(e) => clickNavMenu(e)}
+        >
           <span>교수 검색</span>
         </div>
       </div>
-      {
-        renderSwitch(renderSwitchNum)
-      }
+      {renderSwitch(renderSwitchNum)}
     </div>
   )
 }

src/components/Professor/ProfessorCard/style.scss

@@ -2,7 +2,7 @@
 
 .professor {
   display: grid;
-  grid-row-gap: 10px;
+  gap: 1rem 0;
   background-color: #ffffff;
   border-radius: 0.4rem;
   padding: 0.6rem 0.8rem;
@@ -18,8 +18,8 @@
     justify-content: space-between;
   }
 
-  img {
-    width: 15px;
+  .site {
+    width: 2.7rem;
     top: 10rem;
   }
 
@@ -30,22 +30,23 @@
   }
 
   .professor-name {
-    font-size: 16px;
+    font-size: 2rem;
   }
 
   .professor-position {
-    font-size: 12px;
+    font-size: 1.2rem;
+    color: $color-gray-600;
   }
 
   .professor-school {
-    font-size: 12px;
+    font-size: 1.3rem;
   }
 
   .professor-department {
-    font-size: 5px;
+    font-size: 1.3rem;
   }
 
   .professor-email {
-    font-size: 5px;
+    font-size: 1.3rem;
   }
 }

src/components/Professor/ProfessorSearch/style.scss

@@ -1,25 +1,25 @@
 @use '@/style/package' as *;
 
-.searchBar {
-  margin-bottom: 8px;
+.search-bar {
+  margin-bottom: 0.8rem;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
 
   input {
     border: none;
     width: 15rem;
-    font-size: 16px;
+    font-size: 2.5rem;
     background: bottom;
     color: $color-white;
-    text-align: center;
-  }
-  input::placeholder {
-    color: $color-white;
+    text-align: left;
+    &::placeholder {
+      color: $color-white;
+    }
   }
 
-  img {
-    width: 20px;
+  .search {
+    width: 2rem;
     fill: $color-white;
   }
 }

src/components/Professor/ProfessorSelector/style.scss

@@ -1,19 +1,36 @@
 @use '@/style/package' as *;
 
-.selectBar {
+.select-bar {
   margin-bottom: 1.2rem;
   display: flex;
-  place-content: space-between;
+  place-content: flex-end;
 }
 
 .search-icon {
-  width: 10px;
+  width: 1rem;
 }
 
 .custom-select > select {
-  width: 10.5rem;
+  width: 14rem;
   border-color: $color-white;
-  padding: 3px;
-  font-size: 8px;
+  padding: 0.3rem;
+  font-size: 1.3rem;
   border-radius: 0.4rem;
+  position: relative;
+  display: inline-block;
+  &:first-child {
+    margin-right: 1rem;
+  }
+
+  &:ms-expand {
+    display: none;
+  }
+}
+.select-arrow {
+  position: relative;
+  font-size: 1.8rem !important;
+  top: 0.2rem;
+  right: 3rem;
+  width: 0;
+  height: 0;
 }

src/components/Professor/style.scss

@@ -5,8 +5,8 @@
   right: 2rem;
   top: 5rem;
   background-color: rgba($color-black, 0.5);
-  padding: 16px;
-  width: 25rem;
+  padding: 1.6rem;
+  width: 60rem;
   height: 30rem;
   border-radius: 0.8rem;
   overflow-y: scroll;
@@ -19,7 +19,5 @@
 .profess-info {
   display: grid;
   grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
-  padding-top: 1.2rem;
-  border-top: 0.1rem solid #ffffff;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 }