[200116] mission005

[eastjun-dev]

🏪 가게 찾기

• 전국의 가게를 조회할 수 있는 웹페이지를 만듭니다.

기본 요구사항

1. 메인 화면을 구현합니다.

• 메인 화면에는 검색창, 검색된 갯수, 검색목록, 페이지로 구성됩니다.

2. 가게 검색 기능을 구현합니다.

• 화면 상단의 검색창에서 가게를 검색할 수 있습니다.
• 검색어 입력 후, enter 키를 누르거나 검색 버튼을 클릭 시 검색됩니다.
• 검색된 목록은 번호, 가게명, 주소로 구성됩니다.

3. 페이지를 구현합니다.

• 검색목록은 한페이지당 10개씩 구성됩니다.
• 페이지는 한번에 5개까지 볼 수 있으며, 이전과 다음버튼으로 이동가능합니다.

추가 요구사항

1. 검색 히스토리

• 검색 히스토리에 있는 검색어를 클릭하면 다시 검색됩니다.
• 최근 검색어 5개까지 보여줍니다.
• 검색 히스토리는 중복되지 않습니다.
• 검색 히스토리는 localStorage에 저장되며, 첫 실행시 저장된 최근 검색어를 불러옵니다.

2. 검색 결과가 느린 경우 처리방법

• 검색 결과가 느리게 나오도록 설정합니다.
• 결과가 나올때까지 로딩 효과 등으로 사용자에게 알리며, 오작동하지 않도록 합니다.

3. 카카오맵 API를 사용하여 Modal UI로 표시

• 검색결과 목록 중 하나를 선택하여 클릭하면 Modal UI에 카카오맵이 표시됩니다.
  ([191226] mission003 #8 미션3에서 사용한 UI를 참조)
• 카카오맵에서 가게 주소로 검색한 결과가 표시되며 가게명이름으로 마커 📍가 표시됩니다.
• ESC를 누르거나 Modal UI가 아닌 곳을 누르면 창이 닫힙니다.

가게찾기 API 사용방법

가게찾기 API 불러오기

• API 설명 : https://floating-harbor-78336.herokuapp.com
• API : https://floating-harbor-78336.herokuapp.com/fastfood
• 불러오기(기본값 : page=1, perPage=10, searchKeyword="")
  fetch('https://floating-harbor-78336.herokuapp.com/fastfood').then()...
  예시(판교를 검색하고, 페이지당 10개목록을 표시할 때 1페이지 목록보기)
  fetch('https://floating-harbor-78336.herokuapp.com/fastfood?searchKeyword=판교&perPage=10&page=1').then()...
• json 형식

{
    "list": [
        {
            "name": 가게명,
            "addr": 가게주소,
        }
    ],
    "total": 총 갯수
}

카카오맵 API 사용방법

일반설명

• http://apis.map.kakao.com/web/guide/
• 실제 지도를 그리는 Javascript API를 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=05384f5ffa79058c52233387b2b1142b"></script>
 - 지도를 띄우는 코드 작성
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표(필수속성).
	level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

• API 키 : 05384f5ffa79058c52233387b2b1142b

주소로 장소 표시하는 예시

• http://apis.map.kakao.com/web/sample/addr2coord/
• 위 링크의 아래쪽 javascript + html 예시코드를 참고하여주세요.
• 코드주석의 괄호 3군데(APP KEY, 주소입력, 가게명 입력위치)를 참고하시면서 코드를 수정해주세요.

// (아래에 APP KEY를 넣어주세요)
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=05384f5ffa79058c52233387b2b1142b&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다 (아래에 가게 주소가 입력되게 해주세요)
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
        // (아래에 가게명이 입력되게 해 주세요)
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>' 
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});    

주의사항

• 카카오맵 API는 등록된 도메인 주소에서만 작동합니다.
• 현재 https://127.0.0.1:5500 으로 도메인 등록이 되어있는데 변경이 필요한 분은 알려주세요.
• 카카오맵에 주소 결과가 없는 경우에는 마커가 표시되지 않을 수 있습니다.

기타

템플릿

• 템플릿과, css 파일은 브랜치 sample/mission005에 업로드하였으니 참고하세요.

참고

• 자바스크립트 프론트엔드 프로젝트 가이드 책
• 수업때 추가미션 사항

👨‍💻 Reviewer Match 👩‍💻

코드리뷰 가이드

Reviewee

Reviewer x 3

@eastjun

@YongHoonJJo @s280493 @HoseokNa

@YongHoonJJo

@eastjun @StellaKim1230 @amorfati0310

@StellaKim1230

@YongHoonJJo @ganeodolu @HoseokNa

@ganeodolu

@YongHoonJJo @StellaKim1230 @amorfati0310

@s280493

@eastjun @ganeodolu @amorfati0310

@amorfati0310

@ganeodolu @s280493 @HoseokNa

@HoseokNa

@eastjun @StellaKim1230 @s280493

미션을 확인하시고 개선이 필요한 부분이 있으면 알려주세요!!