• 마커 클릭시 호출된 커스텀 오버레이의 닫기버튼이 작동되지않음
• 마커 마우스 오버시 한가지의 마커만 이미지 변경됨
• 마커 마우스 오버시 다른마커들에 가려져 보임(오버레이 동일)
• 커스텀 오버레이를 하나만 표출

1. 지도 불러오기(key연결)

<div id="review"></div>
    <div id="map"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ad32e4cc626799cc0ad5db80f46f316a">
</script>

<script>
var mapContainer = document.getElementById('map'),// 지도를 표시할 div 
    mapOption = { 
        // 북구청앞 좌표 고정
        center: new kakao.maps.LatLng(35.173956643954675, 126.9191938589476), // 지도의 중심좌표
        level: 5 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>

2. marker 생성

// 마커를 표시할 위치와 title 객체 배열입니다
// 이후 리뷰에 저장된 주소로 객체 생성
var positions = [
    {
        title: '스타벅스 전남대', 
        latlng: new kakao.maps.LatLng(35.1747707, 126.914430)
        // 마커 좌표로 가게 추가
    },
    {
        title: '투썸 전남대', 
        latlng: new kakao.maps.LatLng(35.1751410, 126.915340)
        // 마커 좌표로 가게 추가
    },
    {
        title: '시작 스터디카페', 
        latlng: new kakao.maps.LatLng(35.1774862, 126.917885)
        // 마커 좌표로 가게 추가
    }
];

// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
// 보관된 리뷰 개수만큼 마커 생성
for (var i = 0; i < positions.length; i ++) {

    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new kakao.maps.Size(24, 35); 

    // 마커 이미지를 생성합니다    
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage // 마커 이미지 
    });
}

3. 커스텀 오버레이 생성

// 커스텀 오버레이에 표시할 내용입니다     
// HTML 문자열 또는 Dom Element 입니다 

// 오버레이 컨텐츠 작성
var content = '<div class="overlaybox">' +
    '    <span class="boxtitle">스타벅스 전남대'+
            ***********닫기 위치 수정(임시 margin)
    '    <span class="close" id="close" onclick="closeOverlay()" title="닫기">닫기</span>'+
    '    </span>'+
    '    <div class="first">' +
    '    </div>' +
    '    <ul>' +
    '        <li class="up">' +
    '            <span class="number">오픈시간</span>' +
    '            <span class="title">09:00</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">마감시간</span>' +
    '            <span class="title">17:30</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">위치</span>' +
    '            <span class="title">광주 북구 호동로 65</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">리뷰 수</span>' +
    '            <span class="title">7</span>' +
    '            <span class="arrow down"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '    </ul>' +
    '</div>';
// 커스텀 오버레이가 표시될 위치입니다 >> 연결된주소값으로 수정
var position = new kakao.maps.LatLng(35.1774862, 126.917885);

// 커스텀 오버레이를 생성합니다
var customOverlay = new kakao.maps.CustomOverlay({
    position: position,
    content: content,
    xAnchor: 0.3,
    yAnchor: 0.91
});

// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
    customOverlay.setMap(map);
});

// 커스텀 오버레이를 지도에 표시합니다(클릭 이벤트시 실행할거기때문에 필요X)
//customOverlay.setMap(map);

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
function closeOverlay() {
    customOverlay.setMap(null);     
}

4. 추가 사항

• 화면 상 보이지 않는 마커 추척
• 디폴트 위치 수정
• JSP로 옮기기
• 좌표 > 주소 바꾸기

• Design Pattern : 소프트웨어 설계에 있어 공통된 문제들에 대한 표준적인 해결책
• MVC : 시각적으로 보여지는 부분과 데이터를 처리하는 부분을 분리하여 유연한 구조를 설계

2. MVC 기본구조

Model : 뷰에 출력할 데이터를 담아둠 (실행에 직접적 관여 X)

View : 모델에 담겨있는 데이터를 사용해서 화면에 그리는 일을 하는데, HTML을 생성하는 부분

Controller : HTTP 요청을 받아서 파라미터를 검증하고, 비즈니스 로직을 실행합니다. 그리고 뷰에 전달할 결과 데이터를 조회해서 모델에 담습니다.

3. MVC 종류

- MODEL 1

• JSP에서 출력과 로직을 전부 컨트롤 (Web 어플리케이션을 개발할 때 JSP만 사용하는 설계 방법)
• 

- MODEL 2

• JSP 에서는 출력만 처리(View와 Controller를 명확하게 분리)
• View만 JSP, Model과 Controller는 java파일로 생성

- MODEL1 VS MODEL2

4. Model에 db추가

• ojdbc8파일 찾은 후 WEBAPP > WEB-INF > lib 안에 붙여넣기

5. Model1 이클립스 구조(회원가입,로그인)

• 
• DTO 구조

  package Model;
  

public class DTO {

// 사용하고자 하는 데이터의 설계를 정리하는 부분

private String id;
private String pw;
private String name;

// 생성자 메소드 - 회원가입용
public DTO(String id, String pw, String name) {
    this.id=id;
    this.pw=pw;
    this.name=name;
}

// setter / getter 메소드 생성(Alt+Shift+S)
public String getId() {
    return id;
}

public void setId(String id) {
    this.id = id;
}

public String getPw() {
    return pw;
}

public void setPw(String pw) {
    this.pw = pw;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

}

- DAO 구조
```java
package Model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DAO {

    // 데이터베이스 연결을 위한 로직 작업

    Connection conn=null;//(1-2) 전역변수 작업
    PreparedStatement psmt = null;//(2)
    ResultSet rs = null;//(2)import 작업

    int result= 0; // 결과값 전체적으로 사용하기위한 전역변수 선언

    // 1. 데이터베이스 연결 메소드 만들기(만든 후 try/catch 로 잡아주기)
    public void getCon( ) {
        try {
            // 1-1 드라이버 연결
            Class.forName("oracle.jdbc.driver.OracleDriver");
            // 1-3 심부름꾼 권한 부여
            String db_url ="jdbc:oracle:thin:@localhost:1521:xe";
            String db_id ="c##오라클ID";
            String db_pw ="오라클 비밀번호";
            // 1-2 왔다갔다 할 수 있는 심부름꾼 생성(import작업!)
            //conn- 전역에서 사용해야하기때문에 전역변수 미리선언
            conn = DriverManager.getConnection(db_url,db_id,db_pw);

        // *catch문 Exception 통일후 하나만 작성가능*
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    // 2. DB 연결을 종료하는 메소드 -> 사용 객체의 역순으로 닫기!
    public void close() {
        // rs,psmt,conn이 사용됐다면 null값이 아니기때문에
        //여기서도 try/catch 사용try안으로 if문넣기
            try {
                if(rs != null) {
                rs.close();
                }if(psmt != null) {
                    psmt.close();
                }if(conn != null) {
                        conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
    }


    // 3. 회원가입을 위한 메소드 생성
    public int join(DTO dto) {
        // getCon 연결
        getCon();
        // 무엇이 들어올지 모르기때문에 일단 ? 채워넣기
        String sql = "INSERT INTO MEMBERINFO VALUES(?,?,?)";
        // sql 문법 작성에서도 문제될수도 있으니 try/catch 사용
        try {
            // 심부름꾼 일시키기
            psmt =conn.prepareStatement(sql);
            // ? 값을 채워줘야 하니 데이터 집어넣는 작업
            // dto안에 3개 있기때문에 각각 집어넣기 위한 작업
            psmt.setString(1,dto.getId());
            psmt.setString(2,dto.getPw());
            psmt.setString(3,dto.getName());

            // sql 실행 메소드
            // - excuteQuery() : 데이터가 바뀌지않는다면,ex)조회(select).. 
            // - excuteUpdate() : 데이터가 바뀐다면, ex)삽입,수정,삭제..
            result =psmt.executeUpdate();// int형으로 결과값 확인가능
            // 회원가입 위한 메소드 join 실행하기위해 result 사용,지역변수이기 때문에미리 result 선언해주기
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //catch 기준으로 추가(닫아줘야하기때문)
        finally {
            close();
        }
        return result;//맨 마지막에 선언

    }

    // 1. 드라이버 동적로딩 -> Class.forName()
    // 2. DB 연결  
    // 3. SQL문 작성 및 전송
    // 4. 사용 객체 닫아주기

}