proof_today.html

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<!-- 커스터마이징한 axiosInstace 들고있는 파일 -->
<script src="/custom_axios.js"></script>

오늘의 인증하기</br>

<form id='proofForm'>
    인증 내용 : <input name="content" type="text" placeholder="인증 메세지 입력"></input> </br>
    인증샷 첨부 : <input name="proof_images" type="file" multiple> </br>
</form>


<button id="proofButton">인증하기</button>

<script>

    // 인증하기 버튼이 눌렸을때
    $('#proofButton').click(function() {
        // 폼데이터에는 id로 찾은 객체에서도 0번째로 명시.
        const form = new FormData($('#proofForm')[0])

        // 인증하려는 프로젝트가 어떤 프로젝트인지 id를 (주소창에서) 추출
        // 주소창의 데이터를 분석해주는 클래스를 변수에 담자.
        let searchParams = new URLSearchParams(window.location.search)
        // 주소창에 project_id가 뭐라고 적혀있는지 찾아서 저장.
        let projectId = searchParams.get('project_id')

        // 주소창에서 받아낸 프로젝트 id를 폼에 추가.
        form.append('project_id', projectId)

        // 이 폼데이터를 서버에 post - /project_proof 로 전송 => axios
        axiosInstance.post('/project_proof', form)
            .then(function (res) {
                
                console.log(res)
                alert('오늘의 인증을 완료했습니다.')
                // 프로젝트 상세보기 화면으로 복귀.
                // 몇번프로젝트를 봐야하는지는 주소에 적혀있던 값 재활용
                location.href = `project_detail.html?id=${projectId}`

            })
            .catch(function (error) {
                // 실패시 error의 응답에 담긴 message를 얼럿으로
                alert(error.response.data.message)
            })
    })
    

</script>