24년 11월 28일

Developer Note/국비과정 수업내용 정리&저장

24년 11월 28일

DH_PARK 2024. 12. 8. 08:10

구글 캘린더 이벤트 처리

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'/>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.15/index.global.min.js"></script>
		//fullcalendar CDN 사용 , 
    <style>
        .dialog,
        .add-modal
        {
            position: fixed;
            width:350px;
            height: 200px;
            background-color: red;
            z-index:100;
            left:0;right:0;top:0;bottom:0;
            margin:auto;
            border:1px solid;
        }
        .hidden{
            display:none;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        const popupEl = document.querySelector('.dialog');
        const cancelEl = popupEl.querySelector('.cancel');
        cancelEl.addEventListener('click',function(){ //취소버튼 클릭시 이벤트
            popupEl.classList.add('hidden'); //hidden 클래스를 추가해서 숨긴다.
        })

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth', //캘린더 초기 화면 월별 view 로 설정

               googleCalendarApiKey: 'AIzaSyChZZpWB_f-Tn5sMBWTfg8UDLJ-v79Sm8E',
               events: {
               googleCalendarId: '1f94a9a08dfdb514a425e7180619d87248f1f7de25315fdf894f6c8b74406194@group.calendar.google.com'
            },
            //캘린더
    eventClick: function(info) {
    info.jsEvent.preventDefault(); // 클릭이벤트 동작막음

    console.log('info',info);
    console.log('info',info.event.extendedProps); //확장된 속성

    popupEl.classList.remove('hidden'); //숨김 속성 삭제
    popupEl.querySelector('.title').textContent=info.event.title; //title 부분 포함
    popupEl.querySelector('.desc').textContent=info.event.extendedProps.description;
    },

     dateClick: function(info) {  //날짜 클릭시에 
//         alert('Date: ' + info.dateStr);
  //       alert('Resource ID: ' + info.resource.id);
        const addEl = document.querySelector('add-modal'); 
        addEl.classList.remove('hidden'); //모달 창 나타나게 함
        }

    });


          calendar.render();
               });


    </script>

</head>
<body>


<div id='calendar'>  //달력이 있는 창

</div>
<div class="dialog hidden">  //이벤트 모달 창
    <div class="title"></div>
    <div class="desc"></div>
    <div>
        <a href="javascript:void(0)" class="cancel">닫기</a>
    </div>

    <div class="add-modal hidden">
        <form action="/google/cal/post" method="GET">
            <input type="text" name="title" placeholder="TITLE"><br>
            <input type="text" name="desc" placeholder="DESCRIPTION"><br>
            <input type="submit" />

        </form>


    </div>


</div>
</body>
</html>

포트 원 API 활용

포트원이란 ?

결제 대행사의 이름으로 , 이 대행사와 API 를 연동해서 모든 결제 모듈을 이곳에서 쉽고 빠르게 한 번에 관리한다.

장점

포트원 API 하나만으로 여러 결제금융수단 회사들읩결제 수단을 쉽게 사용할 수 있게 한다.
결제수단을 수정/변경 시에 신규개발에 대한 부담이 적다.
가이드가 자세하게 작성되어있어서 개발에 도움이 많이 됨

사용법

포트원 회원가입
개발자센터에서 관리자콘솔을 들어가면 결제연동 탭에 연동정보를 볼 수 있다.
테스트 채널 추가
1. 결제 대행사 선택후에 채널 속성을 정하고 PG 상점 아이디를 선택하면 자동으로 key 번호나 비밀번호가 생성된다.
식별코드 - API Keys 탭에서 식별코드와 API key , API Secret 키 확인
개발자 센터에서 단건조회를 해보기로 한다
1. 단건조회를 하기 위해서는 인증token 값이 필요하다.
token 값을 발급받기 위해 먼저 getToken Controller 코드를 작성.
1. https://api.iamport.kr/users/getToken 이라는 엔드포인트의 url 을 선언한다.
2. ResponseEntity 객체에 데이터를 담아 json 타입으로 보내야 하므로 Map형태의 데이터를 만들어야 한다.
HttpEntity 객체에 imp_key 와 imp_secret 키 값을 담은 데이터를 담아 ResponseEntity 객체에 담아 return 한다.
1. 요청을 보내면 인증token 이 Response 객체에 담겨져 온다.
```
PortOneController.TokenResponse(code=0, message=null, 
response=PortOneController.Response(access_token=cd90b9b201176c62abebd35c0de52f81f2c92cc9, 
now=1733608544, expired_at=1733610344))
```
이제 이 토큰값을 가지고 단건조회 Controller 를 호출하면 결제내역 정보들을 받아올 수 있다.

  @ResponseBody
    @GetMapping("/getPayments")
    public void getPayments(){
        log.info("GET /portone결제요청 !.,,!!");

        String url = "<https://api.iamport.kr/payments?imp_uid[]=imp_645183837239&merchant_uid[]=INIpayTest>";

        //HTTP 요청 헤더
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Type", "application/json");
        headers.add("Authorization", "Bearer " + tokenResponse.getResponse().getAccess_token());
        //HTTP 요청 파라미터

        //HTTP 엔티티(헤더_파라미터)
        HttpEntity entity = new HttpEntity<>(headers);
        //HTTP 요청 후 응답받기
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity response = restTemplate.exchange(url, HttpMethod.GET,entity, String.class);
        System.out.println(response.getBody());
    }

단건조회 컨트롤러 코드.

에러해결

단건조회를 하는데 자꾸 template 오류가 난다고 에러 로그에 떠서 왜그런가 알아보니 Controller 위에 @ResponseBody 어노테이션을 붙이지 않아서 json 데이터를 자바에서 사용하는 데이터로 받아오지 못해서 제대로 조회가 안되는 것이었다. 그리고 호출 url 부분도 imp_uid 부분에 [] 를 붙여야 정상적으로 url 호출이 되었다. (대체 저 대괄호는 왜 넣는거야;;)

결국 이게 하는 흐름은 다 비슷한것 같다.

HttpHeaders 객체와 body 부분은 Map 에 담아서 HttpEntity 객체에다 데이터를 담고 마지막에 ResponseEntity 객체에 모든 데이터를 담아 넘겨주는 형식이다.

하지만 아직 json 타입에 어떤 값이 담기고 어떤 데이터를 담아야 하는지 헷갈려서 계속 사용해봐야 유연하게 사용할 수 있을것 같다 !

저작자표시 비영리 변경금지

'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글

24년 12월 3일 (0)	2024.12.15
24년 12월 2일 (2)	2024.12.10
24년 11월 27일 (2)	2024.12.05
24년 11월 26일 (1)	2024.12.05
24년 11월 25일 (0)	2024.11.26

현재글24년 11월 28일

끝까지 처음처럼