[모각코]모현에서 모먹지?(1) - 기능, UI/UX 구체화

이젠 진짜 협업에서 프로그램을 만들어보자!

 

---

모현에서 모먹지?

사용언어 및 개발환경

언어: 자바스크립트

라이브러리: 리액트

 

프로그램 소개

개요 

- 본교 앞 음식점에 대한 정보를 재공하는 프로그램

- 학교 커뮤니티인 '에브리타임'의 맛집 게시판을 이용해보면 앱 자체의 특성상 각각의 게시물을 통해 정보에 접근하다보니 가시성이 떨어진다고 판단되었다. 따라서 여러개의 음식점 정보를 한 눈에 파악할 수 있고자 한다.

 

기능소개

카테고리별 분리

카테고리는 크게 위치별과 메뉴별로 나뉜다.

학교 앞의 특성상 위치는 외대사거리, 모현사거리, 교내, 배달로 나뉜다.

이 프로그램을 이용하는 대부분의 사람들은 본교 학생들일 것이므로 본래 메뉴별만 있던 카테고리에 위치별도 추가하였다

 

지도

알고자하는 음식점을 클릭하면 맵api를 이용하여 음식점의 상세주소와 지도를 보여주고자한다.

 

 

키워드

해당 음식점이 혼자 밥먹기 좋은 지 회식하기 좋은 지에 대한 간략한 정보를 해시태그 형식으로 제공하고자 한다

 

검색 기능

상호명으로도 검색할 수 있고 위에 언급한 키워드(ex. 혼밥, 회식 등)로도 검색이 가능하도록 구현할 것이다.

 

스크랩 기능

쉽게 말해 자신이 "즐겨찾기"한 음식점에 대한 정보는 따로 페이지를 만들어 관리한다.

아무래도 깃허브 페이지로 배포하다보니 서버가 없어서 이것은 local Stroage기능을 이용할 것이다.

 

 

 

상세 경로

경로	보여주는 컴포넌트
/ /home	Home.js
/home/location/:category /home/menu/:category	Home.js + Location.js + ByCategory.js Home.js + Menu.js + ByCategory.js
/bookmark	Bookmark.js
/profile	Profile.js
/search	Search.js
/:id	Detail.js

+로 되어있는건 중첩라우트로 구현할 것이다.

 

import {BrowserRouter ,Routes, Route} from 'react-router-dom'
import Header from './components/Home_components/Header'
import Footer from './components/Home_components/Footer'
import Home from './page/Home';
import Bookmark from './page/Bookmark';
import Detail from './page/Detail'
import Profile from './page/Profile'
import Search from './page/Search';

function App() {
  return (
    <BrowserRouter>
      <Header/>
      <Routes>
        <Route path = "/bookmark" element = {<Bookmark/>}/>
        <Route path = "/:id" element = {<Detail/>}/>
        <Route path = "/profile" element = {<Profile/>} />
        <Route path = "/search" element = {<Search/>}/>
        
        <Route path = "/" element = {<Home/>}/>
        <Route path = "/home/*" element = {<Home/>}/>
      </Routes>
      <Footer/>
    </BrowserRouter>
    
  );
}

export default App;

경로설정 끝! 

---

다음 포스팅은 프로그램의 첫페이지인 Home에 대해서 적어보자!(이게 내파트임)