졸업작품 14일차

오늘의 잔디

---

✅ [캘린더 프로젝트]

📌 오늘 목표

• Kakao 로그인 기능을 웹 앱에 연동
• 로그인한 사용자 기준으로 일정 등록 및 삭제 기능 유지
• 기존 JWT 기반 일반 로그인과 카카오 로그인 병행 지원

---

1️⃣ Kakao Developers 설정

• 애플리케이션 등록

• 플랫폼 → Web 추가

  • 사이트 도메인: http://127.0.0.1:8081

• JavaScript 키 발급 후 HTML에 적용

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
  Kakao.init('발급받은_JavaScript_KEY');
</script>

---

2️⃣ 로그인 화면 개선

• 기존 login.html에 "카카오로 로그인" 버튼 추가
• 스타일 변경: 노란색 배경, 검정 글씨로 카카오 스타일 반영

<button id="kakao-login-btn" class="kakao-login-button">카카오로 로그인</button>

.kakao-login-button {
  background-color: #FEE500;
  color: #000;
  font-weight: bold;
}

---

3️⃣ login.js에 카카오 로그인 처리 로직 구현

Kakao.Auth.login({
  success: function(authObj) {
    Kakao.API.request({
      url: '/v2/user/me',
      success: function(res) {
        const kakaoId = res.id;
        const nickname = res.properties?.nickname || "KakaoUser";

        fetch(`http://localhost:8080/api/auth/kakao-login?kakaoId=${kakaoId}&nickname=${encodeURIComponent(nickname)}`, {
          method: "POST"
        })
        .then(res => res.text())
        .then(token => {
          localStorage.setItem("token", token);
          alert(`${nickname}님 로그인 성공!`);
          window.location.href = "/index.html";
        });
      }
    });
  }
});

---

4️⃣ 백엔드 (AuthController.java)에 카카오 로그인 API 추가

@PostMapping("/kakao-login")
public ResponseEntity<String> kakaoLogin(@RequestParam("kakaoId") String kakaoId,
                                         @RequestParam("nickname") String nickname) {
    String username = "kakao_" + kakaoId;
    Optional<User> optionalUser = userRepository.findByUsername(username);
    User user = optionalUser.orElseGet(() -> {
        User newUser = new User();
        newUser.setUsername(username);
        newUser.setPassword("kakao_dummy_password"); // 의미 없는 값
        return userRepository.save(newUser);
    });

    String token = JwtUtil.createToken(user.getUsername());
    return ResponseEntity.ok(token);
}

---

5️⃣ 카카오 로그인 후 일정 등록 & 삭제 테스트 성공

• kakao_123456789 형식의 유저로 DB에 등록됨
• 로그인 후 JWT 토큰 발급 → localStorage에 저장 → 캘린더 페이지 진입 가능
• 일정 등록 / 삭제 기능도 정상 동작 확인

---

⚠️ 내일 할 일

• 카카오 세션 자동 로그인 방지

  • Kakao.Auth.logout() 적용해 다른 사용자 로그인 테스트 가능하게 만들기

• 카카오 연결 해제 (unlink) 기능 추가 여부 결정

---

필요하면 .md 파일로도 저장해드릴 수 있어요!
내일 이어서 진행할 준비도 완료입니다 :)