전문의 회원가입 with JavaMailSender

 

 

프로젝트 초기에 리액트가 아직 익숙하지 않을 때 제일 먼저 했던 작업이었던 만큼 코드가 지저분한거같다.

 

          <div className="mb-1 text-sm font-semibold text-gray-800">아이디</div>
          <div className="flex rounded-lg p-2.5 mb-4 bg-white border border-gray-300 focus-within:border-teal-400">
            <input
              className="w-full h-5 text-sm font-normal text-gray-700 border-none outline-none"
              type="text"
              placeholder="아이디 입력 (4자~20자)의 영어와 숫자만 가능"
              value={id}
              onChange={handleId}
            />
          </div>
          <div className="mb-2 text-xs text-red-500">
            {!idValid && id.length > 0 && (
              <div>사용할 수 없는 아이디입니다</div>
            )}
          </div>

 

css 프레임워크는 테일윈드를 사용했고, 처음에는 어색했지만 지금은 css보다 테일윈드가 훨씬 편한것같다. 그리고 따로 설정없이 반응형이 된다는게 큰 메리트가 있는듯 하다. 

 

각각 칸의 코드는 모두 동일 하다. 타이틀, input 그리고 valid로 에러메세지를 표시했다. 

  const handleId = (e) => {
    setId(e.target.value);
    const regex = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{4,20}$/;
    setIdValid(regex.test(e.target.value));
  };

  const handlePw = (e) => {
    setPw(e.target.value);
    const regex =
      /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+])(?!.*[^a-zA-z0-9$`~!@$!%*#^?&\\(\\)\-_=+]).{8,20}$/;
    setPwValid(regex.test(e.target.value));
  };

아이디와 비밀번호는 정규식을 이용해 유효성검사를 했고, 이메일은 내가맡은 파트가 전문의 회원가입인만큼 의사협회 메일로만 가입할 수 있게 구성했다. 원래는 면허번호를 입력해 인증할 수있는 api를 찾아보려 했지만, 결국 찾지못했다...

시연때 보여주기 위해 내 이메일은 가능하게 만들었다.

 

 

 

자바 메일샌더를 이용해 구현했다,

 

이름 표현을 위해 확인 코드전송을 누르면 

위에 칸에 입력된 이름과 랜덤으로 만든 인증코드를 백서버로 전송한다

 

#이메일 전송객체
package org.ict.atti_boot.doctor.model.dto;

import lombok.Data;

@Data
public class EmailRequest {
    private String email;
    private String code;
    private Long numberOfMembers;
    private String doctorName;
}

#컨트롤러
    @PostMapping("/mail")
    public ResponseEntity<String> sendEmail(@RequestBody EmailRequest request) {
        try {
            request.setNumberOfMembers(doctorService.findAllUserCount());
            doctorService.sendEmail(request);
            return ResponseEntity.ok("Email sent successfully");
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error sending email");
        }
    }

 

유저 수도 보여주기 위해 전체 일반유저수를 계산해 이메일객체에 담는다.

 

    public void sendEmail(EmailRequest request) {
        try {
            MimeMessage message = mailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(message, true, "UTF-8");
            log.info(request.toString());
            helper.setTo(request.getEmail());
            helper.setSubject("Atti에 방문하신걸 진심으로 환영합니다." + request.getDoctorName() + "님");

            // HTML 콘텐츠 작성
            String htmlContent = "<div style=\"background-color: #8ab68a; padding: 40px; margin: 20px auto; border-radius: 40px; max-width: 800px;\">"
                    + "<div style=\"text-align: center; margin-bottom: 40px; color: white;\">"
                    + "<h1>저희 Atti 회원가입을 환영합니다!</h1>"
                    + "</div>"
                    + "<div style=\"display: flex; flex-wrap: wrap; align-items: center;\">"
                    + "<div style=\"flex: 1; padding: 10px; text-align: center;\">"
                    + "<div style=\"background-color: #ffffff; padding: 20px; border-radius: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);\">"
                    + "<p style=\"font-size: 18px; color: #333;\">"
                    + "지금 <strong style=\"color: #ff6f61;\">" + request.getNumberOfMembers() + "</strong>명의 회원이 전문가님의 도움을 기다리고 있어요!"
                    + "</p>"
                    + "<h3 style=\"font-size: 24px; margin-top: 20px;\">"
                    + "인증코드: <strong>" + request.getCode() + "</strong>"
                    + "</h3>"
                    + "</div>"
                    + "</div>"
                    + "<div style=\"flex: 1; text-align: center;\">"
                    + "<img src=\"cid:mailForDoctor\" style=\"width: 80%; height: auto;\" />"
                    + "</div>"
                    + "</div>"
                    + "</div>";

            helper.setText(htmlContent, true);
            // 이미지 첨부 (이미지를 인라인으로 추가)
            helper.addInline("mailForDoctor", new FileSystemResource("src/main/resources/img/mailForDoctor.png"));

            mailSender.send(message);
            log.info("메일전송 완료!");
        } catch (MessagingException e) {
            throw new RuntimeException("Failed to send email", e);
        }
    }

 

 

이제 서비스에서 html 코드를 짜서 보낸다 . 이미지도 보낼 수 있었다는게 신기했던 점

저 메일 모양은 열심히 vs코드로 따로 작성하며 확인한 후 한번에 붙여넣었다. 

근데 결과는 무슨 3급 외국사이트 메일처럼 온거같아서 그렇게 마음에 들진않는다..