diff --git a/src/main/resources/static/JavaScript/admin/create/createSchedule.js b/src/main/resources/static/JavaScript/admin/create/createSchedule.js index 9b66a9d..f8259bf 100644 --- a/src/main/resources/static/JavaScript/admin/create/createSchedule.js +++ b/src/main/resources/static/JavaScript/admin/create/createSchedule.js @@ -41,7 +41,7 @@ function createSchedule() { remove_xhr.onload = function () { if (remove_xhr.status === 200) { if (remove_xhr.responseText === "true") { - alert("현재 DB ROC 맴버가 없습니다.. 관리자에게 문의해주세요??") + alert("현재 DB에 ROC 맴버가 없습니다. 관리자에게 문의해주세요.") window.location.href = "admin?id="+nowUserId; } // 저장 diff --git a/src/main/resources/static/JavaScript/signUp/viewAllInfo.js b/src/main/resources/static/JavaScript/signUp/viewAllInfo.js new file mode 100644 index 0000000..7fc459c --- /dev/null +++ b/src/main/resources/static/JavaScript/signUp/viewAllInfo.js @@ -0,0 +1,226 @@ +function viewAllInfo() { + vewBntOff() + loadingOn() + let nowUser = null; + + //최초 사용자(운영자) 이미 카카오 로그인이 되어있는지 판단. + Kakao.Auth.getStatusInfo(function (statusObj) { + // 만약 사용자가 로그인이 되어 있는 경우 + if (statusObj.status === 'connected') { + nowUser = statusObj.user.kakao_account.email; // 사용자 카카오 id + + // 이 계정이 등록되어 있는 DB 조회하여 판단. + let xhr_check = new XMLHttpRequest(); // REST API 통신을 위한 객체 + let infor = {"id": nowUser} // 서버로 사용자의 카카오 id를 요청하여 DB에 등록되어 있는지 검증한다. + xhr_check.open('POST', '/checkForasking', true); // REST 정의 + xhr_check.setRequestHeader("Content-Type", "application/json"); // 헤더 설정 + xhr_check.send(JSON.stringify(infor)) // REST 요청 + + // REST 응답 + xhr_check.onload = function () { + if (xhr_check.status === 200) { + let results = xhr_check.responseText; // 서버의 payload + + // DB에 등록되지 않은 사용자이므로 경고창 후 로그인 차단 + if (results === "False") { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("You are not registered in the system.\nPlease click the “Join” button to join.") + } + + // 서버에 등록된 ROC 사람인 경우 + else { + viewUserAllInfoFunction(nowUser) + } + } else { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("죄송합니다. 서버에서 매니저님 계정이 존재하는지 확인 중 에러가 발생했습니다.\n재시도 부탁드립니다.") + window.location.href = "/" + } + } + } + + // 사용자가 현재 브라우저에 카카오 로그인이 안되어 있는 경우 + else { + // 사용자 카카오 로그인을 진행한다. + Kakao.Auth.login({ + // 로그인이 성공한 경우 + success: function (authObj) { + Kakao.Auth.setAccessToken(authObj.access_token); // 사용자 처음 로그인시 발급된 토큰으로 설정 + + // 로그인한 사용자 정보 가져오는 REST + let url = 'https://kapi.kakao.com/v2/user/me'; + + // Authorization 헤더 설정 + let headers = new Headers({ + 'Authorization': 'Bearer ' + authObj.access_token + }); + + // fetch 요청 + fetch(url, {method: 'GET', headers: headers}) + .then(response => { + if (!response.ok) { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("죄송합니다. 서버에서 매니저님 계정이 존재하는지 확인 중 에러가 발생했습니다.\n재시도 부탁드립니다.") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(payload => { + nowUser = payload.kakao_account.email; // 사용자 카카오 계정 + + // 이 계정이 등록되어 있는 DB 조회하여 판단. + let xhr_check = new XMLHttpRequest(); // REST API 통신을 위한 객체 + let infor = {"id": nowUser} // 서버로 사용자의 카카오 id를 요청하여 DB에 등록되어 있는지 검증한다. + xhr_check.open('POST', '/checkForasking', true); // REST 정의 + xhr_check.setRequestHeader("Content-Type", "application/json"); // 헤더 설정 + xhr_check.send(JSON.stringify(infor)) // REST 요청 + + // REST 응답 + xhr_check.onload = function () { + if (xhr_check.status === 200) { + let results = xhr_check.responseText; // 서버의 payload + + // DB에 등록되지 않은 사용자이므로 경고창 후 로그인 차단 + if (results === "False") { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("You are not registered in the system.\nPlease click the “Join” button to join.") + } + + // 서버에 등록된 ROC 사람인 경우 + else { + viewUserAllInfoFunction(nowUser) + } + } else { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("죄송합니다. 서버에서 매니저님 계정이 존재하는지 확인 중 에러가 발생했습니다.\n재시도 부탁드립니다.") + window.location.href = "/" + } + } + }) + .catch(error => { + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("카카오 서버 오류, 사용자 정보를 가져오는데 실패했습니다.\n재시도 부탁드립니다.") + window.location.href = "/" + }); + }, + fail: function (err) { // 로그인 실패시 오류 값 반환 + loadingOff() + viewBtnOn() + unlinkWithKakao() + alert("Please agree to join!") + window.location.href = "/" + }, + }) + } + }); +} + +function viewUserAllInfoFunction(nowUser) { + // 모든 사용자의 기본 정보를 가져온다. + let getUserInfoAll_xhr = new XMLHttpRequest() + getUserInfoAll_xhr.open('POST', '/checktypo', true); // REST 정의 + getUserInfoAll_xhr.setRequestHeader("Content-Type", "application/json"); // 해더 설정 + getUserInfoAll_xhr.send(JSON.stringify({"CheckTypo": "CheckTypo"})) // 필요 시 적절히 수정 가능. + getUserInfoAll_xhr.onload = function () { + let rocMembers = JSON.parse(getUserInfoAll_xhr.response) + if (getUserInfoAll_xhr.status === 200 && rocMembers.length !== 0) { + // 각 데이터를 배열로 변환 + const dataArray = Object.entries(rocMembers); + + // 각 요소를 ELEC > CELL > FORM > PACK > COLL > WMS > COMM 순서로 정렬 + dataArray.sort((a, b) => { + const order = { "ELEC": 1, "CELL": 2, "FORM": 3, "PACK": 4, "COLL": 5, "WMS": 6, "COMM": 7, "AE" : 8, "PMO" : 9}; + return order[a[1]] - order[b[1]]; + }); + + // 변경된 데이터를 모달에 추가 + let viewAllBackground = document.createElement('div'); + viewAllBackground.setAttribute("id", "viewAllBackground"); + + let viewAllModalContainer = document.createElement('div'); + viewAllModalContainer.id = 'viewAllModalContainer'; // 위 태그에 id를 부여한다. + viewAllModalContainer.innerHTML = ` +
+
미주 RoC All
+
스케줄 등록 아래 정보로 입력해주세요!
+
+ +
+ `; + + // 변경된 데이터를 모달에 추가 + const viewAllModalInputContainer = viewAllModalContainer.querySelector('#viewAllModalInputContainer'); + let prevProcess = null; // 이전 공정을 저장하는 변수 + + dataArray.forEach(([name, process], index) => { + const pTag = document.createElement('p'); + pTag.textContent = `${process} / ${name}`; + + // 이전 공정이 현재 공정과 다를 때만
태그 추가 + if (prevProcess !== null && prevProcess !== process) { + const brTag = document.createElement('br'); + viewAllModalInputContainer.appendChild(brTag); + } + + viewAllModalInputContainer.appendChild(pTag); + + // 현재 공정을 이전 공정으로 업데이트 + prevProcess = process; + }); + + + // 현재 이 함수가 실행된 html dom에 자식으로 태그를 추가한다. + viewAllBackground.appendChild(viewAllModalContainer) + document.body.appendChild(viewAllBackground); + + document.getElementById('viewAllModalExit').addEventListener('click', function() { + document.body.removeChild(viewAllBackground); + }); + + viewBtnOn() + loadingOff() + } + else if(getUserInfoAll_xhr.status === 200 && rocMembers.length === 0) { + alert("현재 DB에 ROC 맴버가 없습니다. 관리자에게 문의해주세요.") + window.location.href = "admin?id="+nowUser; + } + + else { + viewBtnOn() + loadingOff() + alert("불편을 끼쳐드려 죄송합니다. 시스템에서 ROC member를 찾는 중 오류가 발생했습니다.\n재시도 부탁드립니다.") + unlinkWithKakao() + window.location.href = "/" + } + }; +} + +function viewBtnOn() { + let btn = document.getElementById("viewAllModalExit"); + + if (btn) { + btn.disabled = false; + btn.style.opacity = 1; + } +} + +function vewBntOff() { + let btn = document.getElementById("viewAllModalExit"); + + if (btn) { + btn.disabled = true; + btn.style.opacity = 0.5; + } +} diff --git a/src/main/resources/static/css/login/allInfo.css b/src/main/resources/static/css/login/allInfo.css new file mode 100644 index 0000000..4e389af --- /dev/null +++ b/src/main/resources/static/css/login/allInfo.css @@ -0,0 +1,98 @@ +#viewAllBackground { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); /* 투명도 0.5 */ +} + +#viewAllModalExit { + position: absolute; + top: 10px; + left: 10px; + width: fit-content; + height: fit-content; + padding: 5px; + font-size: 1rem; + color: grey; + cursor: pointer; +} + +#viewAllModalExit::before { + content: "\2716"; /* 유니코드로 "✖" 기호 */ + font-size: 1.5rem; /* 크기 조절 */ + font-weight: 100; /* 얇게 만들기 */ +} + +#viewAllModalContainer { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + flex-direction: column; + justify-content: center; + align-items: center; + display: flex; + + width: 80%; + max-width: 320px; + height: fit-content; + padding-top: 40px; + padding-bottom: 40px; + + border-radius: 20px; + background: #FFF; +} + +#viewAllModalHeader { + width: 100%; + height: fit-content; + max-width: 250px; + flex-shrink: 0; + color: #000; + text-align: center; + font-family: Inter, serif; + font-size: 1.2rem; + font-style: normal; + font-weight: bold; + line-height: normal; +} + +#viewAllModalSection { + margin-top:15px; + width: 100%; + max-width: 250px; + height: fit-content; + + color: #000; + text-align: center; + font-family: Inter, serif; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 1rem; +} + +#viewAllModalInputContainer { + overflow-y: auto; /* 내용이 넘칠 경우 세로 스크롤바 추가 */ + max-height: 200px; /* 스크롤바가 나타날 최대 높이 설정 */ + padding: 15px; /* 더 나은 스타일링을 위한 안쪽 여백 추가 */ + border: 1px solid #ccc; /* 외각 경계선 추가 */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */ + padding-left: 30px; + padding-right: 30px; +} + +#viewAllModalInputContainer p { + margin: 0; /* 문단 내용의 기본 마진 제거 */ + padding: 8px; /* 더 나은 아이템 간격을 위한 안쪽 여백 추가 */ + border-bottom: 1px solid #ddd; /* 더 나은 가시성과 구분을 위한 아이템 간 경계선 추가 */ +} + +@media screen and (max-width: 400px) { + #viewAllModalContainer { + flex-basis: 80%; /* Full width for smaller screens */ + } +} diff --git a/src/main/resources/static/css/login/changeInfo.css b/src/main/resources/static/css/login/changeInfo.css index e3a094a..dcac3af 100644 --- a/src/main/resources/static/css/login/changeInfo.css +++ b/src/main/resources/static/css/login/changeInfo.css @@ -98,7 +98,7 @@ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } @media screen and (max-width: 400px) { - #changeModalInputContainer { + #changeModalContainer { flex-basis: 80%; /* Full width for smaller screens */ } } diff --git a/src/main/resources/static/css/login/login.css b/src/main/resources/static/css/login/login.css index 1656723..0f9d4d9 100644 --- a/src/main/resources/static/css/login/login.css +++ b/src/main/resources/static/css/login/login.css @@ -52,7 +52,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 10px; + gap: 7px; } #header_logo { width: 137px; @@ -67,7 +67,7 @@ line-height: normal; } -#join, #change{ +#join, #change, #view{ width: 50px; height: 15px; color: white; diff --git a/src/main/resources/templates/home/index.html b/src/main/resources/templates/home/index.html index 3b73da8..cf53b10 100644 --- a/src/main/resources/templates/home/index.html +++ b/src/main/resources/templates/home/index.html @@ -15,6 +15,7 @@ + @@ -31,6 +32,7 @@ + @@ -50,6 +52,7 @@
Join Edit + View All
@@ -125,6 +128,14 @@