Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 코딩방 새로고침시 알림창, 코딩방사이즈 조정 #58

Merged
merged 4 commits into from
Dec 16, 2023
Merged

feat: 코딩방 새로고침시 알림창, 코딩방사이즈 조정 #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3cb670d
feat: 코딩방 새로고침시 알림창, 코딩방사이즈 조정
KANU896 Dec 16, 2023
b61b8d7
Merge branch 'dev' into feat-code
KANU896 Dec 16, 2023
75919d7
fix: 노말모드 모나코 실행쪽 수정
KANU896 Dec 16, 2023
dce6488
Merge branch 'dev' into feat-code
KANU896 Dec 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/components/code/NormalMonaco.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,12 +186,10 @@ export default defineComponent({
},
})
.then(response => {
console.log('여기?111')
this.output = response.data
})
//네트워크에 의한 요청 실패일 경우
.catch(error => {
console.log('여기?')
console.log(error)
alert(error.message)
})
Expand Down
9 changes: 4 additions & 5 deletions src/components/code/RankMonaco.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,6 @@ export default defineComponent({

const quizNo = this.quizNo // 퀴즈번호
const rankNo = this.rankNo // 랭크번호
const memberNo = this.memberNo
const fileContent = this._getValue();

// FormData 객체 생성
Expand Down Expand Up @@ -284,10 +283,10 @@ export default defineComponent({
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data)
console.log(response.data.msg)
})
.catch(error => {
console.log('Server Error:', error);
alert('서버 에러 발생. 자세한 내용은 콘솔을 확인하세요.');
});
})
//네트워크에 의한 요청 실패일 경우
.catch(error => {
Expand Down
196 changes: 113 additions & 83 deletions src/views/code/Normal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
<div id="problem-des-title" class="title">문제설명</div>
<div id="problem-des-container">
<div id="problem-des-content">
<span v-html="replaceNewlines(this.quizContent)"></span>
<textarea
class="readonlyTextarea"
:value="this.quizContent"
readonly></textarea>
</div>
</div>

Expand Down Expand Up @@ -54,33 +57,34 @@

<script>
import Monaco from '../../components/code/NormalMonaco.vue'
import { apiClient } from '@/axios-interceptor'
import {apiClient} from '@/axios-interceptor'
export default {
name: 'normal',
components: { Monaco },
data() {
return {
components: {Monaco},
data(){
return{
quizNo: '',
testcaseNo: '',
testcaseList: [],
quizContent: '',
quizTitle: '',
timerRunning: true,
minutes: 60,
seconds: 0,

}
},
computed: {
formattedTime() {
return `${String(this.minutes).padStart(2, '0')}:${String(this.seconds).padStart(2, '0')}`;
},
},

methods: {
reportButtonClickHandler() {
reportButtonClickHandler(){
//신고팝업창
},
exitButtonClickHandler() {
exitButtonClickHandler(){
this.$router.push({ path: `/` })
},
updateTimer() {
Expand All @@ -100,8 +104,8 @@ export default {
setTimeout(this.updateTimer, 1000); // 1초마다 업데이트

}
if (this.seconds === 0 && this.minutes === 0) {
if (confirm("시간이 초과되어 메인으로 이동합니다")) {
if(this.seconds === 0 && this.minutes === 0){
if(confirm("시간이 초과되어 메인으로 이동합니다")){
this.$router.push({ path: `/` })

}
Expand All @@ -111,90 +115,110 @@ export default {
replaceNewlines(text) {
return text.replace(/\n/g, '<br>');
},
// beforeunload 이벤트 핸들러
beforeUnloadHandler(event) {
// 여기에 알림창을 띄우는 로직 추가
const confirmationMessage = '변경사항이 저장되지 않을 수 있습니다. 정말로 나가시겠습니까?';
event.returnValue = confirmationMessage; // Standard for most browsers
// 알림창에서 확인 버튼을 눌렀을 때 홈으로 이동
const shouldNavigateHome = window.confirm(confirmationMessage);
if (shouldNavigateHome) {
this.$router.push({ path: `/` });
}
return confirmationMessage; // For some older browsers
},


},
created() {
created(){
window.addEventListener('beforeunload', this.beforeUnloadHandler);
//타이머 시작
this.updateTimer();

// room에서 roomNo에 해당하는 quizNo, quizContent 가져오기
const url = `${this.backURL}/room/${this.$router.currentRoute.value.params.roomNo}`
apiClient
.get(url, {
.get(url, {
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
this.quizNo = response.data.quizNo
this.quizContent = response.data.quizContent
this.quizTitle = response.data.quizTitle

const url2 = `${this.backURL}/submit/${this.quizNo}`

apiClient
.get(url2, {
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
this.quizNo = response.data.quizNo
this.quizContent = response.data.quizContent

const url2 = `${this.backURL}/submit/${this.quizNo}`

apiClient
.get(url2, {
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
this.testcaseList = response.data
})
.catch(() => {
alert('테스트케이스 조회에 실패하였습니다')
})
this.testcaseList = response.data
})
.catch(() => {
alert('문제 정보 조회에 실패하였습니다')
.catch(()=>{
alert('테스트케이스 조회에 실패하였습니다')
})
})
.catch(() => {
alert('문제 정보 조회에 실패하였습니다')
})

},
beforeDestroy() {
// 컴포넌트가 파괴되기 전에 이벤트 리스너를 제거하는 것이 좋습니다.
window.removeEventListener('beforeunload', this.beforeUnloadHandler);
},
}

</script>
<style scoped>

#timer-content.timer-expired {
color: red;
color: red;
}

#code-layout {
min-width: 1280px;
height: max-content;
min-width: 1280px;
width: 100vh;
height: 100vh;

display: flex;
justify-content: space-around;
display: flex;
justify-content: space-around;

overflow: visible;
white-space: nowrap;
overflow: visible;
white-space: nowrap;
}

body.flex-container {
body.flex-container{
display: inline-flex;
justify-content: center;
height: 792px;
justify-content: center;
height: 100vh;
padding-bottom: 10px;
}


#code-side-layout {
width: 260px;
padding: 10px;
margin-top: 90px;
margin-right: 10px;
width: 260px;
padding: 10px;
margin-top: 90px;
margin-right: 10px;

display: flex;
flex-direction: column;
align-items: left;
display: flex;
flex-direction: column;
align-items: left;

border: 3px solid var(--main5-color);
border-radius: 10px;
border: 3px solid var(--main5-color);
border-radius: 10px;
}


#problem-des-container {
#problem-des-container{
box-sizing: border-box;
height: 250px;
height: 300px;
margin-bottom: 10px;
background-color: var(--white-color);
border: 3px solid var(--main5-color);
Expand All @@ -203,20 +227,16 @@ body.flex-container {
display: flex;
flex-direction: column;
overflow-y: auto;
word-wrap: break-word;
/* 단어 단위로 자동 줄 바꿈 */
}

#problem-des-content {
#problem-des-content{
box-sizing: border-box;
font-size: 0.8rem;
padding: 8px;
overflow-wrap: break-word;
/* 단어 단위로 자동 줄 바꿈 */
}


#testcase-des-container {
#testcase-des-container{
height: 250px;
margin-bottom: 10px;
background-color: var(--white-color);
Expand All @@ -227,24 +247,22 @@ body.flex-container {
flex-direction: column;
overflow-y: auto;
}

#testcase-des-content {
#testcase-des-content{

font-size: 0.8rem;
padding: 8px
}

.monaco {
width: 760px;
margin-top: 90px;
margin-right: 10px;
margin-right: 10px;
/* margin-left: 10px; */
border: 3px solid var(--main5-color);
border-radius: 10px;

border-radius:10px;
}

.button {
.button{
padding: 8px;
font-size: 1.5rem;

Expand All @@ -258,7 +276,7 @@ body.flex-container {
}
}

#exit {
#exit{
color: var(--main1-color);
background-color: var(--red-color);
border: none;
Expand All @@ -269,7 +287,7 @@ body.flex-container {
}
}

#relative-code-layout {
#relative-code-layout{
width: 260px;
padding: 10px;
margin-top: 90px;
Expand All @@ -284,23 +302,21 @@ body.flex-container {
}


.title {
.title{
padding-left: 10px;
}

#relative-code-container {
#relative-code-container{
/* display: flex; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;


}

#relative-code-content {
#relative-code-content{
width: 200px;
height: 22vh;
height: 26vh;
margin-bottom: 16px;
border: 3px solid var(--main5-color);
border-radius: 10px;
Expand All @@ -311,17 +327,31 @@ body.flex-container {

background-color: var(--white-color);
/* justify-content: space-around; */

}

.testcase-div {
.testcase-div{
background-color: var(--main2-color);
background-clip: content-box;
}

#testcase-hr {
#testcase-hr{
border: 0px;
height: 3px;
background-color: var(--black-color);
margin: 16px 0px 0px
}</style>
margin:16px 0px 0px
}

.readonlyTextarea {
width: 98%;
height: 250px;
overflow: auto;
cursor: default;
outline: none;
border: none;
resize: none;
}
::-webkit-scrollbar {
width: 0;
}

</style>
Loading