인스타 계정 정보 입력
- 본격적으로 인스타 그램 계정을 추가 하는 작업을 진행할 예정이다.
- 현재는 진짜 인스타 계정을 연결하는게 아닌 임시로 계정을 추가해서 하는 작업을 진행할 예정
- 후에는 test계정까지는 등록이 되게 진행해볼 예정.
- test 계정이 아닌 다른 등록을 할려면 실제로 허가인증이 나야하는데 이게 굉장히 까다롭다...
- 현재는 진짜 인스타 계정을 연결하는게 아닌 임시로 계정을 추가해서 하는 작업을 진행할 예정
# 할일
- 인스타그램 회원정보 입력
- 로그인한 사람만 가능
- 아이디
- 성별
- 인스타 회원정보 폼 처리인스타 계정 정보에서 필요한 것들
- 인스타 id 정보
- 성별
현재 필요하다고 생각하는 것들은 성별 과 인스타 계정의 id 정보 정도가 있다.
- 인스타 계정 등록은 로그인을 한 대상만 가능하게 진행.
@Controller
@RequiredArgsConstructor
@RequestMapping("/instaMember")
public class InstaMemberController {
@PreAuthorize("isAuthenticated()")
@GetMapping("/connect")
public String connect(){
return "/user/instaMember/connect";
}
}connect.html 추가
- 어떻게 만들건지 에 대해서 추가만 진행.
<html layout:decorate="~{layout/layout.html}">
<head>
<title>본인의 인스타그램 정보입력</title>
</head>
<body>
<main layout:fragment="main">
<script>
function ConnectForm__submit(form) {
// username 이(가) 올바른지 체크
form.username.value = form.username.value.trim(); // 입력란의 입력값에 있을지 모르는 좌우공백제거
if (form.username.value.length == 0) {
toastWarning('인스타그램 아이디를 입력해주세요.');
form.username.focus();
return;
}
if (form.username.value.length < 4) {
toastWarning('인스타그램 아이디를 4자 이상 입력해주세요.');
form.username.focus();
return;
}
const $checkedGenderRadioButton = $(form).find("[name=gender]:checked");
if ($checkedGenderRadioButton.length == 0) {
toastWarning('성별을 선택해주세요.');
$(form).find("[name=gender]:first").focus();
return;
}
form.submit(); // 폼 발송
}
</script>
<form th:action method="POST" class="p-10 max-w-sm flex flex-col gap-4"
onsubmit="ConnectForm__submit(this); return false;">
<div>
<input type="text" name="username" autocomplete="off" maxlength="30" placeholder="인스타그램 아이디"
class="input input-bordered">
</div>
<div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">남자</span>
<input type="radio" name="gender" value="M" class="radio focus:bg-red-100">
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">여자</span>
<input type="radio" name="gender" value="W" class="radio focus:bg-red-100">
</label>
</div>
</div>
<div>
<input type="submit" value="정보입력" class="btn btn-primary">
</div>
</form>
</main>
</body>
</html>성별 선택이 안된 경우
- 성별을 선택해달라는 메시지 뜨게
const 뒤에 변수 명에 $가 붙는 이유
- jquery에서 일반적으로 구분하기 위해서 $를 붙이는 것
- 무조건으로 $가 붙은게 jquery를 사용했다는 의미는 아니다.
jquery를 사용하지 않을 때 '$' 식별자 용도 2가지
- document.getElementById() 함수의 바로가기
- 템플릿 스트링
- ${변수명}
connectionForm 추가
@Getter
@AllArgsConstructor
public class ConnectForm {
@NotBlank
@Size(min = 4, max = 30)
private final String username;
@NotBlank
@Size(min=1,max= 1)
private final String gender;
}인스타계정과 멤버는 1대1로 묶여있기 때문에 1대1 연관관계로 추가
member에 추가된 부분
@OneToOne
private InstaMember instaMember;
public void addInstaMember(InstaMember instaMember){
this.instaMember = instaMember;
}- setter 대신에 addInstaMember를 통해서 확실하게 인스타계정을 추가하겠다고 명시
const 뒤 $ 참고 블로그 : https://despiteallthat.tistory.com/133
열심히하자