[팀 프로젝트] - 펫 상점(개밥집) 사용 API

2Quals발표.pdf

0.43MB

모달창 플러그인

모달창은
브라우저 프로그램 자체에서 새 창을 띄우는 팝업창 과는 달리
같은 창 내부에서 상위 레이어를 띄우는 방식을 사용하는 창

모달창은 원래 화면과 분리되는 요소여서 시각적으로 분리.
그래서 모달창을 제외한 배경을 어둡게하는 경우가 많음
모달창에는 닫기버튼을 포함하기도 하지만 저희는 배경부분을 누르면 자동으로 닫히도록
설정

1. 모달창 html
    반복되는 구조 중에서 두개 정도 가져옴
    핑크색 상자는 menu option이라는 하나의 옵션
    하늘색 상자는 옵션의 이미지를 뜻
    이 이미지는 저희 팀이 타케팅한 사이트의 이미지를 가져와 사용
    그리고 남색 상자는 옵션과 관련된 설명
    이렇게 2개의 구성으로 이루어진 menu option이 반복되어
    하나의 모달창을 채우게 됨

2. 모달창 js
    더보기를 누르면 모달창을 띄우고 
    모달창 외의 넘치는 배경은 hidden으로 숨김

    보여지지 않게 되면 넘치는 배경을 auto로 다시 원래대로 돌아오게 만듦.

-------------------------------------------------

이메일 API 
- 이메일 인증 혹은 이메일 영수증 발송에 사용되는 api
사용가능한 프로토콜 3가지 존재
- IMAP4(Internet Message Access Protocol
-SMTP(Simple Mail Transfer Protocol << 
-POP3(Post Office Protocol3)

>> SMTP 방식 사용
기본적으로 mail.jar 파일을 필요
>> 구매 시 영수증 발송하는 용도로 사용하려고 했음
하지만 현재 구현하지 못했으므로 이번 발표 후 추후에 구현
 
1. 이메일 api의 인증 부분
    인증 부분에서는 구글 계정과 구글 앱 번호를 쓰는 란 존재
    본인의 구글 계정과 앱 번호를 입력하고 비밀번호 인증에 사용하는 패스워드인증값에 
    new해서 저장 후, 이 값을 돌려줌

2. 메일을 보내는 파트
    속성값인 P를 선언 해
    사용할 SMTP 서버와, 포트번호, 사용할 프로토콜 넘버등을 담음.

    앞에서 선언해준 java 인증의 MyAuthentication()을 new해서 auth에 저장 후
    메일 서버와 세션을 관리해주는 Session에 속성값p와 인증키값 auth를 넣어주고
    그 session을 메일 메시지 정보와 내용을 담는 MimeMessage의 msg값에 넣음
 
    보내는 사람의 닉네임과 적용할 나라의 글자를 설정해주고
    보내는 날짜도 설정

    보내는 사람 설정
    보내는 사람의 이메일주소와 이름을 넣어 메일에 세팅

    받는 사람 설정
    받는 사람의 이메일 주소와 보낼 이메일의 제목(Subject), 내용(text)을 저장
    그리고 메일을 보냄

    만약 메일을 발송했는데, 
    메일주소가 올바르지 않으면  
    파란색 상자의 메일주소를 입력해달라는 에러 메세지를 보내는 사람에게 보내게 되고

    메세지 내용에 이상이 있을 경우에는
    메일을 제대로 입력해달라는 에러메세지를 보내는 사람의 메일에 들어옴

    그리고 지원하지 않는 인코딩 방식일 때는 단계별로 에러를 호출하라고 지시

    동작 부분

    동작 부분은 메일을 보내기 위한 GmailSend를 gs로 선언하여
    수신자의 이메일, 제목, 내용을 GmailSet에 담아 저장

    이 과정을 거쳐 이메일을 발송

 

>> 펫샵 웹 구현 : https://github.com/Rhoyoorim/teamproject.git