Merge pull request #16 from payw-org/feat/5-search-professor

Feat/5 search professor

public/data/data.json

@@ -49,6 +49,62 @@
       "image": "/images/cau-logo.png"
     }
   ],
+  "professorsList": [
+    {
+      "id": 1,
+      "position": "교수",
+      "school": "중앙대학교",
+      "department": "데이터 베이스 시스템",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "김정빈"
+    },
+    {
+      "id": 2,
+      "position": "교수",
+      "school": "중앙대학교",
+      "department": "데이터 베이스 시스템",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "최범수"
+    },
+    {
+      "id": 3,
+      "position": "조교수",
+      "school": "고려대학교",
+      "department": "정보처리",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "유인근"
+    },
+    {
+      "id": 4,
+      "position": "교수",
+      "school": "연세대학교",
+      "department": "데이터분석",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "이민수"
+    },
+    {
+      "id": 5,
+      "position": "교수",
+      "school": "상명대학교",
+      "department": "정보처리",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "김범근"
+    },
+    {
+      "id": 6,
+      "position": "교수",
+      "school": "성공대학교",
+      "department": "정보분석",
+      "email": "[email protected]",
+      "url": "https://www.naver.com",
+      "name": "최인빈"
+    }
+  ],
   "todoSectionList": [
     {
       "id": 1,

src/App.tsx

@@ -1,18 +1,37 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Store } from '@/store'
 import { MainSection } from '@/components/MainSection'
 import { SideMenuBar } from '@/components/SideMenuBar'
 import { TodoContainer } from '@/components/TodoContainer'
+import { ProfessorCardProps } from '@/components/Professor/ProfessorCard'
+import { NavBar } from '@/components/NavBar'
 import '@/style/fonts.scss'
 import '@/style/global.scss'
+import axios from 'axios'
+
+const getData = async () => {
+  const response = await axios.get('/data/data.json')
+  return response.data.professorsList
+}
 
 const App: React.FC = () => {
+  const [professorsList, setProfessorsList] = useState<ProfessorCardProps[]>()
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const fetchedData = await getData()
+      setProfessorsList(fetchedData)
+    }
+    fetchData()
+  }, [])
+
   return (
     <>
       <div id="bg" style={{ backgroundImage: 'url("images/bg/1.jpg")' }}>
         <img id="bg-overlay" src="images/bg/overlay.png"></img>
       </div>
       <Store>
+        {professorsList ? <NavBar professorsList={...professorsList} /> : <></>}
         <MainSection />
         <SideMenuBar />
         <TodoContainer />

src/components/NavBar/index.tsx

@@ -0,0 +1,86 @@
+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'
+
+export type ProfessorListProps = {
+  professorsList: ProfessorCardProps[]
+}
+
+export const NavBar: React.FC<ProfessorListProps> = ({ professorsList }) => {
+  const [currentMenu, setCurrentMenu] = useState('')
+  const [renderSwitchNum, setRenderSwitchNum] = useState(0)
+  const [state, setState] = useState('')
+  const [hour, setHour] = useState(0)
+  const [minute, setMinute] = useState(0)
+  const [second, setSecond] = useState(0)
+
+  useEffect(() => {
+    setTimeout(() => {
+      const [state, hour, minute, second] = getCurrentDate()
+      setState(state)
+      setHour(hour)
+      setMinute(minute)
+      setSecond(second)
+    }, 1000)
+  }, [second])
+
+  const clickNavMenu = (e) => {
+    if (e.target.innerHTML === '맛집 검색') {
+      setRenderSwitchNum(1)
+    } else if (e.target.innerHTML === '교수 검색') {
+      setRenderSwitchNum(2)
+    }
+
+    if (currentMenu === e.target.innerHTML && renderSwitchNum !== 0)
+      setRenderSwitchNum(0)
+    setCurrentMenu(e.target.innerHTML)
+  }
+
+  const renderSwitch = (num) => {
+    switch (num) {
+      case 1:
+        return <></>
+      case 2:
+        return <Professor professorsList={professorsList} />
+      default:
+        return
+    }
+  }
+
+  return (
+    <div className="nav-bar">
+      <div className="nav-bar-left">
+        <div className="notice-academic">학사 공지</div>
+        <div className="search-empty-classroom">빈 강의실 찾기</div>
+      </div>
+      <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)}
+        >
+          <span>맛집 검색</span>
+        </div>
+        <div
+          id="professor"
+          className="search-professor"
+          onClick={(e) => clickNavMenu(e)}
+        >
+          <span>교수 검색</span>
+        </div>
+      </div>
+      {renderSwitch(renderSwitchNum)}
+    </div>
+  )
+}

src/components/NavBar/style.scss

@@ -0,0 +1,31 @@
+@use '@/style/package' as *;
+
+.nav-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.5rem;
+}
+
+.nav-bar-left,
+.nav-bar-center,
+.nav-bar-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  div {
+    margin: 1rem;
+  }
+}
+
+.weather {
+  .lowest {
+    color: $color-blue-lighten-0;
+  }
+  .best {
+    color: $color-red-lighten-0;
+  }
+}

src/components/Professor/ProfessorCard/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import './style.scss'
+
+export type ProfessorCardProps = {
+  id: number
+  position: string
+  school: string
+  department: string
+  email: string
+  url: string
+  name: string
+}
+
+export const ProfessorCard = ({ professor }) => {
+  return (
+    <div className="professor-card">
+      <div className="professor">
+        <div className="professor-header">
+          <div className="professor-header-info">
+            <span className="professor-name">{professor.name}</span>
+            <span className="professor-position">{professor.position}</span>
+          </div>
+          <a href={professor.url} target="_blank">
+            <i className="f7-icons site">arrowtriangle_right_square</i>
+          </a>
+        </div>
+        <div className="professor-school">{professor.school}</div>
+        <div className="professor-department">{professor.department}</div>
+        <div className="professor-email">{professor.email}</div>
+      </div>
+    </div>
+  )
+}

src/components/Professor/ProfessorCard/style.scss

@@ -0,0 +1,52 @@
+@use '@/style/package' as *;
+
+.professor {
+  display: grid;
+  gap: 1rem 0;
+  background-color: #ffffff;
+  border-radius: 0.4rem;
+  padding: 0.6rem 0.8rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: -0.05em;
+  line-height: 1.2;
+  color: $color-gray-900;
+
+  .professor-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  .site {
+    width: 2.7rem;
+    top: 10rem;
+  }
+
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .professor-name {
+    font-size: 2rem;
+  }
+
+  .professor-position {
+    font-size: 1.2rem;
+    color: $color-gray-600;
+  }
+
+  .professor-school {
+    font-size: 1.3rem;
+  }
+
+  .professor-department {
+    font-size: 1.3rem;
+  }
+
+  .professor-email {
+    font-size: 1.3rem;
+  }
+}

src/components/Professor/ProfessorSearch/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import './style.scss'
+
+export type SearchBarProps = {
+  filterSelector: (value: string) => void
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({ filterSelector }) => {
+  const [professorInput, setProfessorInput] = useState('')
+
+  const handleInput = (e) => {
+    setProfessorInput(e.target.value)
+  }
+
+  const enterkey = (e) => {
+    if (e.keyCode == 13) {
+      filterSelector(e.target.value)
+    }
+  }
+
+  const clickInput = () => {
+    filterSelector(professorInput)
+  }
+  return (
+    <>
+      <input
+        onChange={handleInput}
+        type="text"
+        placeholder="Search"
+        value={professorInput}
+        onKeyUp={enterkey}
+      ></input>
+      <i className="f7-icons search" onClick={clickInput}>
+        search
+      </i>
+    </>
+  )
+}

src/components/Professor/ProfessorSearch/style.scss

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