diff --git a/src/axios-interceptor.js b/src/axios-interceptor.js
index 7071d24..39caef9 100644
--- a/src/axios-interceptor.js
+++ b/src/axios-interceptor.js
@@ -1,52 +1,50 @@
 import axios from "axios"
 import sweetAlert from './util/modal.js'
 
-var apiClient = null;
+var apiClient = null
     apiClient = axios.create({
         // baseURL: "//" + "192.168.1.116:8881/codesparring",
         baseURL: import.meta.env.VITE_BACK_URL,
         withCredentials: true
-    });
+    })
 
 apiClient.interceptors.request.use(
     function (config) {
     //   config.headers["Content-Type"] = "application/json";
     //   config.headers["Content-Type"] = "multipart/form-data";
-      config.headers["Authorization"] = `Bearer ${sessionStorage.getItem('accessToken')}`;
-      return config;
+      config.headers["Authorization"] = `Bearer ${sessionStorage.getItem('accessToken')}`
+      return config
     }
 )
 
 
 
 apiClient.interceptors.response.use(res => {
-        if (!(res.status === 200 || res.status === 201 || res.status === 204)) throw new Error();
-        if (res.data.errors) throw new Error(res.data.errors);
+        if (!(res.status === 200 || res.status === 201 || res.status === 204)) throw new Error()
+        if (res.data.errors) throw new Error(res.data.errors)
 
-        return res;
+        return res
     }
 
     ,async (error) => {
         if (error.response?.status === 401) {
             sweetAlert.warning("로그인이 필요합니다", '', '로그인창으로 가기').then(() =>{
-            window.location.href='/login';
+            window.location.href='/login'
             })
         }
         if (error.response?.status === 403) {
-            console.error("403 Forbidden 에러 발생 :", error.response);
+            console.error("403 Forbidden 에러 발생 :", error.response)
             sweetAlert.error("권한이 없습니다", '', '뒤로 가기').then(() =>{
-            window.history.back();
+            window.history.back()
           })
         }
 
         if (error.response?.status === 500) {
             console.error("500 Internal Server Error 발생 :", error.response)
-            sweetAlert.error("오류가 발생했습니다", '', '닫기').then(() =>{
-                // window.history.back();
+            sweetAlert.error(error.response.data.errors[0], '', '닫기').then(() =>{
             })
-
         }
-        return Promise.reject(error);
+        return Promise.reject(error)
     }
 
 //     ,async (error) => {
@@ -94,4 +92,4 @@ apiClient.interceptors.response.use(res => {
 //    }
 );
 
-export {apiClient};
\ No newline at end of file
+export {apiClient}
\ No newline at end of file
diff --git a/src/components/admin/AdminReportPage.vue b/src/components/admin/AdminReportPage.vue
index 1a49ec8..5c1ed92 100644
--- a/src/components/admin/AdminReportPage.vue
+++ b/src/components/admin/AdminReportPage.vue
@@ -26,7 +26,6 @@
             <AddReportComment v-if="reportModal" id="report-popup" @close-modal="offReportModal"
                 :reportNo="selectedReportNo" @report-deleted="handleReportDeleted"></AddReportComment>
 
-            {{ totalPage }} : {{ startPage }} : {{ endPage }}
             <div v-if="!reportModal" id="report-page">
                 <button v-if="startPage > 1" class="page-bt" id="prev" @click="pgPrevClick">◀</button>&nbsp;
                 <button v-for="pg in endPage - startPage + 1" :key="pg"
@@ -34,10 +33,8 @@
                     :id="'pg' + (startPage + pg - 1)" @click="pgClick">
                     {{ startPage + pg - 1 }}
                 </button>&nbsp;
-                <button v-if="endPage < totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
+                <button v-if="endPage < totalPages" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
             </div>
-
-
         </div>
     </main>
 </template>
@@ -54,12 +51,11 @@ export default {
             currentPage: 1,
             startPage: '',
             endPage: '',
-            totalPage: '',
+            totalPages: '',
             reportModal: false,
         }
     },
     mounted() {
-        console.log(this.$route.params.filter)
         const filter = this.$route.params.filter
         if (filter == 'all') {
             const onBt = document.getElementById('report-all')
@@ -83,12 +79,13 @@ export default {
                 .then((res) => {
                     console.log(res.data)
                     this.reportList = res.data.content
-                    this.totalPage = res.data.totalPages
-                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1;
-                    this.endPage = Math.ceil(res.data.totalElements / 10);
+                    this.totalPages = res.data.totalPages
+                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1
+                    this.endPage = Math.min(this.startPage + 4, this.totalPages)
+
                 })
                 .catch((error) => {
-                    console.error('Error fetching reports:', error.message);
+                    console.error('Error fetching reports:', error.message)
                     // alert('신고목록을 조회할 수 없습니다')
                 })
         } else if (filter == 'unprocessed') {
@@ -112,23 +109,22 @@ export default {
                 })
                 .then((res) => {
                     this.reportList = res.data.content
-                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1;
-                    this.endPage = Math.ceil(res.data.totalElements / 10);
-                    this.totalPage = res.data.totalPages;
-
+                    this.totalPages = res.data.totalPages
+                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1
+                    this.endPage = Math.min(this.startPage + 4, this.totalPages)
                 })
                 .catch(() => {
-                    window.history.back()
+                    console.error('Error fetching reports:', error.message)
                 })
+
         }
     },
     methods: {
         handleReportDeleted() {
-            const index = this.reportList.findIndex((report) => report.reportNo === this.selectedReportNo);
+            const index = this.reportList.findIndex((report) => report.reportNo === this.selectedReportNo)
             if (index !== -1) {
-                this.reportList.splice(index, 1);
+                this.reportList.splice(index, 1)
             }
-
         },
         allReport() {
             location.href = '/admin/report/all/1'
@@ -138,32 +134,32 @@ export default {
         },
         searchReport(e) {
             if (this.reportModal) {
-                if (e.target.id == 'search-icon') return;
-                const onBt = document.getElementById('report-all');
-                onBt.style.opacity = '100%';
-                this.reportModal = false;
+                if (e.target.id == 'search-icon') return
+                const onBt = document.getElementById('report-all')
+                onBt.style.opacity = '100%'
+                this.reportModal = false
             } else {
                 if (e.target.id == 'search-icon') {
-                    const onBt = document.getElementById('report-all');
-                    onBt.style.opacity = '50%';
-                    const offBt = document.getElementById('report-upc');
-                    offBt.style.opacity = '50%';
-                    this.reportModal = false;
-
-                    const searchText = document.getElementById('search-text').value;
-                    const filteredReports = this.reportList.filter(report => report.reportNo == searchText);
-                    this.reportList = filteredReports;
+                    const onBt = document.getElementById('report-all')
+                    onBt.style.opacity = '50%'
+                    const offBt = document.getElementById('report-upc')
+                    offBt.style.opacity = '50%'
+                    this.reportModal = false
+
+                    const searchText = document.getElementById('search-text').value
+                    const filteredReports = this.reportList.filter(report => report.reportNo == searchText)
+                    this.reportList = filteredReports
                 }
             }
         },
 
-
         pgClick(e) {
-            const pg = parseInt(e.target.id.replace("pg", ""));
-            this.currentPage = pg;
+            const pg = parseInt(e.target.id.replace("pg", ""))
+            this.currentPage = pg
             const filter = this.$route.params.filter
             location.href = '/admin/report/' + filter + '/' + this.currentPage
         },
+
         pgPrevClick() {
             this.currentPage = Math.floor(((this.currentPage - 1) / 5)) * 5
             const filter = this.$route.params.filter
@@ -178,24 +174,25 @@ export default {
         formatReportType(reportType) {
             switch (reportType) {
                 case 1:
-                    return '테스트케이스 추가요청';
+                    return '테스트케이스 추가요청'
                 case 2:
-                    return '문제 오류 제보';
+                    return '문제 오류 제보'
                 case 3:
-                    return '기타';
+                    return '기타'
             }
         },
         reportView(report) {
             console.log(report.reportNo)
-            this.selectedReportNo = report.reportNo;
+            this.selectedReportNo = report.reportNo
             this.reportModal = true
         },
         offReportModal() {
             this.reportModal = false
         },
     }
-};
+}
 </script>
+
 <style scoped>
 #layout {
     width: 100%;
diff --git a/src/components/profile/ProfileCheck.vue b/src/components/profile/ProfileCheck.vue
index 6160c9b..cc69bc1 100644
--- a/src/components/profile/ProfileCheck.vue
+++ b/src/components/profile/ProfileCheck.vue
@@ -1,8 +1,210 @@
 <template>
-    <div>profile-check</div>
+    <div class="container">
+        <div class="profile-check-title">내 정보 확인</div>
+        <div class="profile-icon-container">
+            <img id="profile-icon" :src="'/images/icon/' + loginMember.memberProfileImg + '.png'" alt="profile" />
+        </div>
+
+        <div class="member-id-container">{{ loginMember.memberId }}</div>
+
+        <div class="memberLevel-container">
+            <span class="mini-title">레벨</span>
+            <div class="content-container">
+                <div id="exp-container">
+                <div id="my-level">Lv. {{ loginMember.memberLevel }}</div>
+                <div class="progress col-sm-8">
+                    <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" role="progressbar"
+                        aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
+                        :style="'width: ' + loginMember.memberExp + '%'">
+                        <span id="my-exp">{{ loginMember.memberExp }} / 100</span>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+        <div class="member-tier-container">
+            <span class="mini-title">랭크</span>
+            <div class="content-container">
+                <img class="rank-tier-icon" :src="'/images/rank/' + loginMember.memberTier.toLowerCase() + '.png'"
+                    alt="my-tier" />
+                <div v-if="loginMember.memberTier == 'BRONZE'" style="color: var(--bronze-color)">
+                    {{ loginMember.memberTier }}
+                </div>
+                <div v-else-if="loginMember.memberTier == 'SILVER'" style="color: var(--silver-color)">
+                    {{ loginMember.memberTier }}
+                </div>
+                <div v-else-if="loginMember.memberTier == 'GOLD'" style="color: var(--silver-color)">
+                    {{ loginMember.memberTier }}
+                </div>
+                <div v-else-if="loginMember.memberTier == 'PLATINUM'" style="color: var(--platinum-color)">
+                    {{ loginMember.memberTier }}
+                </div>
+                <div v-else>
+                    {{ loginMember.memberTier }}
+                </div>
+                <div>{{ loginMember.tierPoint }} pt</div>
+            </div>
+        </div>
+
+        <div class="member-name-container">
+            <span class="mini-title">닉네임</span>
+            <div class="content-container">
+                <span id="mini-name">{{ loginMember.memberName }}</span>
+            </div>
+        </div>
+        <div class="member-info-container">
+            <span class="mini-title">소개</span>
+            <div class="content-container">
+                <textarea id="input-box" type="text" v-model="loginMember.memberInfo"></textarea>
+            </div>
+        </div>
+    </div>
 </template>
+
 <script>
+import { apiClient } from '@/axios-interceptor'
 export default {
-    name: 'ProfileCheck'
+    name: 'ProfileCheck',
+    data() {
+        return {
+            loginMember: {
+                memberId: '',
+                memberName: '',
+                memberInfo: '',
+                memberProfileImg: 0,
+                memberLevel: 0,
+                memberExp: 0,
+                memberTier: '',
+                tierPoint: 0,
+            }
+        }
+    },
+    mounted() {
+        apiClient
+            .get(`${this.backURL}/member/my`,{
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+            .then((response) => {
+                this.loginMember = response.data
+            })
+    }
+
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container {
+    display: grid;
+    grid-template-columns: 0.8fr 1.1fr 0.45fr 2.4fr 0.8fr;
+    grid-template-rows: 0.12fr 0.05fr 0.25fr 0.3fr 0.25fr 0.3fr 0.1fr;
+    gap: 0px 0px;
+    grid-template-areas:
+        "profile-check-title profile-check-title profile-check-title profile-check-title profile-check-title"
+        ". profile-icon-container . . ."
+        ". profile-icon-container . memberLevel-container ."
+        ". profile-icon-container . member-tier-container ."
+        ". profile-icon-container . member-name-container ."
+        ". member-id-container . member-info-container ."
+        ". . . . .";
+    padding: 20px;
+}
+
+.profile-check-title {
+    grid-area: profile-check-title;
+    font-size: 20px;
+}
+
+.profile-icon-container {
+    grid-area: profile-icon-container;
+}
+
+#profile-icon {
+    width: 200px;
+    height: 200px;
+    margin-top: 20px;
+}
+
+.memberLevel-container {
+    grid-area: memberLevel-container;
+}
+
+.mini-title {
+    font-size: 1.4rem;
+}
+
+.member-tier-container {
+    grid-area: member-tier-container;
+}
+
+.member-tier-container > .content-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.content-container {
+    margin-top: 5px;
+}
+
+.rank-tier-icon {
+    width: 36px;
+}
+
+#exp-container {
+    width: 100%;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+#my-level {
+    padding-right: 12px;
+
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+#exp-container>.progress {
+    margin-left: 4px;
+    min-width: 180px;
+    width: 75%;
+    height: 28px;
+
+    position: relative;
+
+    background-color: var(--main2-color);
+}
+
+#my-exp {
+    position: absolute;
+    right: 0;
+    left: 0;
+
+    color: var(--main5-color);
+}
+
+.member-id-container {
+    grid-area: member-id-container;
+    font-size: 1.3rem;
+    text-align: center;
+}
+
+.member-name-container {
+    grid-area: member-name-container;
+}
+
+.member-info-container {
+    grid-area: member-info-container;
+}
+
+#input-box {
+    width: 370px;
+    height: 200px;
+    background-color: transparent;
+    color: var(--main5-color);
+    border: none;
+}
+</style>
diff --git a/src/components/profile/ProfileEdit.vue b/src/components/profile/ProfileEdit.vue
index 3f94907..66667f8 100644
--- a/src/components/profile/ProfileEdit.vue
+++ b/src/components/profile/ProfileEdit.vue
@@ -1,8 +1,343 @@
 <template>
-    <div>profile-edit</div>
+    <div class="container">
+        <div class="profile-edit-title">내 정보 수정</div>
+
+        <div class="profile-icon-container">
+            <div id="profile-input">
+                <img id="profile-icon" :src="'/images/icon/' + editedProfileImg + '.png'" alt="profile" />
+            </div>
+            <button id="change-button" @click="profileImgView">변경하기</button>
+        </div>
+        <div v-if="profileModal" id="back-off" @click="offProfileModal"></div>
+        <ProfileImgPopup v-if="profileModal" id="profile-popup" @close-modal="offProfileModal"
+            @selected="updateEditedProfileImg" v-model="editedProfileImg"></ProfileImgPopup>
+
+        <div class="memberName-container">
+            <span class="mini-title">닉네임 변경</span>
+            <div class="content-container">
+                <input class="input-box" type="text" v-model="editedMemberName">
+                <button id="dck-button" @click="btNameDupchkClickHandler">닉네임 중복확인</button>
+            </div>
+            <span id="info-info" style="font-size:0.9rem">*추후 변경가능</span>
+        </div>
+
+        <div class="memberPwd-container">
+            <span class="mini-title">비밀번호 변경</span>
+            <div class="content-container">
+                <input class="input-box" type="password" placeholder="문자, 숫자, 특수문자 포함 8~20자" v-model="editedMemberPwd">
+            </div>
+        </div>
+
+        <div class="memberPwdck-container">
+            <span class="mini-title">비밀번호 확인</span>
+            <div class="content-container">
+                <input class="input-box" type="password" v-model="checkPwd" placeholder="비밀번호를 다시 입력해주세요">
+            </div>
+        </div>
+
+        <div class="memberInfo-container">
+            <span class="mini-title">소개 변경</span>
+            <div class="content-container">
+                <textarea class="input-box" id="info-box" type="text" v-model="editedMemberInfo"></textarea>
+            </div>
+        </div>
+        <div class="button-container">
+            <button id="edit-bt" @click="editInfo">제출</button>
+            <button id="cancle-bt" @click="create">취소</button>
+        </div>
+    </div>
 </template>
 <script>
+import { apiClient } from '@/axios-interceptor'
+import sweetAlert from '../../util/modal.js'
+import ProfileImgPopup from './ProfileImgPopup.vue'
 export default {
-    name: 'ProfileEdit'
+    name: 'AddReport',
+    props: ['profileNo'],
+    components: { ProfileImgPopup },
+    data() {
+        return {
+            loginMember: {
+                memberProfileImg: 0,
+                memberName: '',
+                memberInfo: ''
+            },
+            profileModal: false,
+            editedProfileImg: 0,
+            editedMemberName: '',
+            editedMemberPwd: null,
+            editedMemberInfo: '',
+            checkPwd: null,
+        }
+    },
+    mounted() {
+        this.create()
+    },
+    methods: {
+        create() {
+            apiClient
+                .get(`${this.backURL}/member/my`, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then((response) => {
+                    this.loginMember = response.data
+                    this.editedProfileImg = this.loginMember.memberProfileImg
+                    this.editedMemberName = this.loginMember.memberName
+                    this.editedMemberInfo = this.loginMember.memberInfo
+                })
+        },
+        offProfileModal() {
+            this.profileModal = false
+        },
+        profileImgView() {
+            this.profileModal = true
+        },
+        updateEditedProfileImg(index) {
+            console.log(index)
+            this.editedProfileImg = index
+        },
+        btNameDupchkClickHandler() {
+            if (this.editedMemberName === this.loginMember.memberName) {
+                sweetAlert.warning("변경할 닉네임을 입력해주세요", '', '닫기')
+                return
+            }
+            const nameRegExp = /^[a-zA-Z0-9가-힣]{3,10}$/
+            if (!nameRegExp.test(this.editedMemberName)) {
+                sweetAlert.warning("3~10자의  한글, 숫자, 영어만 \n 사용 가능합니다", '', '닫기')
+                return
+            }
+
+            const url = `${this.backURL}/auth/chkDupName?memberName=${this.editedMemberName}`
+            apiClient
+                .get(url, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                })
+                .then(response => {
+                    const isDuplicate = response.data
+                    if (!isDuplicate) {
+                        sweetAlert.success("사용 가능한 닉네임입니다", '', '닫기')
+                    } else {
+                        sweetAlert.warning("이미 사용중인 닉네임입니다", '', '닫기')
+                    }
+                })
+                .catch(error => {
+                    console.error(error)
+                    sweetAlert.warning("서버 오류가 발생했습니다", '', '닫기')
+                })
+        },
+        editInfo() {
+            const data = {
+                memberPwd: this.editedMemberPwd === '' ? null : this.editedMemberPwd,
+                memberName: null,
+                memberInfo: null,
+                memberProfileImg: null,
+            }
+            if (!(this.editedMemberName === this.loginMember.memberName)) {
+                data.memberName = this.editedMemberName
+            }
+            if (this.editedMemberPwd != null && this.editedMemberPwd != '') {
+                console.log("data.memberPwd1", data.memberPwd)
+                const pwdRegExp = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/
+                if (!pwdRegExp.test(this.editedMemberPwd)) {
+                    sweetAlert.warning("비밀번호는 8~20자의 영문 \n 대/소문자, 숫자, 특수문자를 \n 포함해야 합니다", '', '닫기')
+                    return
+                }
+                if (this.editedMemberPwd != this.checkPwd) {
+                    sweetAlert.warning("비밀번호 확인을 다시 입력해주세요", '', '닫기')
+                    return
+                }
+                data.memberPwd = this.editedMemberPwd
+            }
+            if (!(this.editedProfileImg === this.loginMember.memberProfileImg)) {
+                data.memberProfileImg = this.editedProfileImg
+            }
+
+            if (!(this.editedMemberInfo === this.loginMember.memberInfo)) {
+                data.memberInfo = this.editedMemberInfo
+            }
+
+            if (data.memberPwd === null && data.memberName === null && data.memberInfo === null && data.memberProfileImg === null) {
+                sweetAlert.warning("변경 사항이 없습니다", '', '닫기')
+                return
+            }
+            apiClient
+                .put(`${this.backURL}/member/my`, data, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(response => {
+                    console.log(response)
+                    sweetAlert.success("내 정보 수정이 완료되었습니다", "", "확인")
+                })
+                .catch(error => {
+                    sweetAlert.warning(error.response.data.errors[0], "", "확인")
+                })
+        },
+    }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container {
+    display: grid;
+    grid-template-columns: 0.8fr 1.1fr 0.45fr 2.4fr 0.8fr;
+    grid-template-rows: 0.12fr 0.05fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
+    grid-row-gap: 10px;
+    grid-template-areas:
+        "profile-edit-title profile-edit-title profile-edit-title profile-edit-title profile-edit-title"
+        ". profile-icon-container . . ."
+        ". profile-icon-container . memberName-container ."
+        ". profile-icon-container . memberPwd-container ."
+        ". profile-icon-container . memberPwdck-container ."
+        ". . . memberInfo-container ."
+        "button-container button-container button-container button-container button-container";
+    padding: 20px;
+}
+
+.profile-edit-title {
+    grid-area: profile-edit-title;
+    font-size: 20px;
+}
+
+.profile-icon-container {
+    grid-area: profile-icon-container;
+}
+
+#profile-icon {
+    width: 200px;
+    height: 200px;
+    margin-top: 10px;
+}
+
+#change-button {
+    font-size: 1rem;
+    width: 200px;
+    border: 1px solid;
+    border-radius: 10px;
+    height: 30px;
+    margin-top: 10px;
+    color: var(--main1-color);
+    background-color: var(--main4-color);
+    border-color: var(--main4-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
+}
+
+.input-box {
+    margin-right: 10px;
+    height: 34px;
+    border-radius: 3px;
+    width: 310px;
+}
+
+#info-box {
+    width: 370px;
+    height: 140px;
+}
+
+.mini-title {
+    font-size: 1.3rem;
+}
+
+.memberName-container {
+    grid-area: memberName-container;
+}
+
+#dck-button {
+    position: absolute;
+    border: 1px solid;
+    border-radius: 10px;
+    height: 32px;
+    font-size: 16px;
+    width: 130px;
+    color: var(--main1-color);
+    background-color: var(--main4-color);
+    border-color: var(--main4-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
+}
+
+.memberPwd-container {
+    grid-area: memberPwd-container;
+}
+
+.memberPwdck-container {
+    grid-area: memberPwdck-container;
+}
+
+.memberInfo-container {
+    grid-area: memberInfo-container;
+}
+
+.button-container {
+    grid-area: button-container;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.button-container > button {
+    border: 1px solid;
+    border-radius: 10px;
+    width: 60px;
+    height: 40px;
+    color: var(--main1-color);
+    gap: 10px;
+}
+
+#cancle-bt {
+    background-color: var(--red-color);
+    border-color: var(--red-color);
+
+    &:hover {
+        background-color: var(--red-hover-color);
+        border-color: var(--red-hover-color);
+    }
+}
+
+#edit-bt {
+    background-color: var(--main4-color);
+    border-color: var(--main4-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
+}
+
+#profile-popup {
+    padding: 10px;
+    position: fixed;
+    background-color: var(--main1-color);
+    border: 8px solid var(--main5-color);
+    border-radius: 10px;
+    width: 500px;
+    height: 250px;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
+
+#back-off {
+    width: 100%;
+    height: 100%;
+    display: fixed;
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/member/ProfileImgPopup.vue b/src/components/profile/ProfileImgPopup.vue
similarity index 71%
rename from src/views/member/ProfileImgPopup.vue
rename to src/components/profile/ProfileImgPopup.vue
index d443bca..e2934b6 100644
--- a/src/views/member/ProfileImgPopup.vue
+++ b/src/components/profile/ProfileImgPopup.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="popup-container" v-if="showPopup">
     <div class="icon-container" id="iconContainer">
-      <div v-for="i in 10" :key="i" class="icon" @click="selectProfileImage(i - 1)">
-        <img :src="'/images/icon/' + (i - 1) + '.png'" :alt="'Icon ' + (i - 1)" />
+      <div v-for="i in 10" :key="i" class="icon" @click="selectProfileImage(i-1)">
+        <img :src="'/images/icon/' + (i - 1) + '.png'" :alt="'Icon ' + (i - 1)"/>
       </div>
     </div>
-    <button class="close-button" @click="closePopup">프로필 변경 닫기</button>
+      <button class="close-button" @click="closePopup">프로필 변경 닫기</button>
+
   </div>
 </template>
 
 <script>
 export default {
   name: 'ProfileImgPopup',
-  // props: ["pImg"],
   data() {
     return {
-      showPopup: true
+      showPopup: true,
     }
   },
   methods: {
     closePopup() {
-      this.$emit('close')
+      this.showPopup = false
+      this.$emit('close-modal')
     },
     selectProfileImage(index) {
-      console.log('Selected profile image:', index)
       this.$emit('selected', index)
       this.closePopup()
-    }
+    },
   }
 }
 </script>
@@ -37,7 +37,7 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: var(--main2-color);
+  background-color: var(--white-color);
   padding: 15px;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -76,5 +76,13 @@ body {
 .close-button {
   margin-top: 8px;
   padding: 5px;
+  color: var(--main1-color);
+    background-color: var(--main4-color);
+    border-color: var(--main4-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/profile/ProfileRemove.vue b/src/components/profile/ProfileRemove.vue
new file mode 100644
index 0000000..b161eac
--- /dev/null
+++ b/src/components/profile/ProfileRemove.vue
@@ -0,0 +1,186 @@
+<template>
+    <div class="remove-object" @click="close - modal">
+        <div class="remove-box">
+            <div class="profile-remove-title">회 원 탈 퇴</div>
+            <div class="remove-content">회원탈퇴 완료 시 당사 사이트 이용 권한이 소멸되며, 이용자의 정보는 복구가 불가능합니다.</div>
+            <div class="remove-box flex-container">
+                <input type="checkbox" id="confirmCheckbox" v-model="confirmChecked"> 위 내용을
+                확인하였습니다.
+            </div>
+            <div class="remove-title">
+                <div id="remove-id">아이디 : {{ loginMember.memberId }}</div>
+            </div>
+            <div id="remove-pwd">비밀번호 :
+                <input id="remove-pwd-input" type="password" v-model="password" placeholder="비밀번호를 입력하세요">
+            </div>
+            <div id="bt-area">
+                <div></div>
+                <div class="button-container">
+                    <button id="add-bt" :disabled="!confirmChecked" :class="{ 'disabled-btn': !confirmChecked }"
+                        @click="submitRemove">탈퇴</button>
+                    <button id="cancle-bt" @click="$emit('close-modal')">취소</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { apiClient } from '@/axios-interceptor'
+import sweetAlert from '../../util/modal.js'
+export default {
+    name: 'ProfileRemove',
+    data() {
+        return {
+            loginMember: {
+                memberId: '',
+            },
+            password: '',
+            confirmChecked: false
+        }
+    },
+    mounted() {
+        apiClient
+            .get(`${this.backURL}/member/my`)
+            .then((response) => {
+                this.loginMember = response.data
+            })
+    },
+    methods: {
+        closeModal() {
+            this.$emit('close-modal')
+        },
+
+        submitRemove() {
+            const url = `${this.backURL}/member/my/withdraw`
+            const data = {
+                memberPwd: this.password
+            }
+            apiClient
+                .put(url, data, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(() => {
+                    sweetAlert.success("회원탈퇴가 완료되었습니다", "", "확인").then(() => {
+                        window.sessionStorage.removeItem('accessToken')
+                        window.location.href = '/login'
+                    })
+
+                })
+                .catch((error) => {
+                    sweetAlert.warning(error.response.data.errors[0], "", "확인")
+                })
+
+
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.remove-object {
+    max-width: 600px;
+    margin: 20px auto;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5rem;
+    color: var(--main5-color);
+    cursor: default;
+}
+
+.remove-box {
+    margin-bottom: 10px;
+}
+
+.remove-title {
+    display: inline;
+    margin-bottom: 5px;
+    width: 120px;
+    padding-top: 3px;
+    text-align: center;
+}
+
+.profile-remove-title {
+    text-align: center;
+    align-items: center;
+    padding-bottom: 10px;
+    font-size: 1.9rem;
+}
+
+.remove-content {
+    font-size: 1.5rem;
+    border: 1px solid black;
+    border-radius: 5px;
+    text-align: center;
+}
+
+#remove-id,
+#remove-pwd {
+    font-size: 1.3rem;
+    justify-content: center;
+    text-align: center;
+}
+
+#remove-pwd-input {
+    width: 199px;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+.flex-container {
+    display: flex;
+    gap: 8px;
+    font-size: 1.3rem;
+    justify-content: center;
+    padding-top: 10px
+}
+
+.button-container {
+    grid-area: button-container;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    padding-top: 10px;
+}
+
+
+button {
+    border: 1px solid;
+    border-radius: 10px;
+    width: 60px;
+    height: 40px;
+    color: var(--white-color);
+}
+
+#cancle-bt {
+    background-color: var(--main4-hover-color);
+    border-color: var(--main4-hover-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
+}
+
+#add-bt {
+    background-color: var(--red-color);
+    border-color: var(--red-color);
+
+    &:hover {
+        background-color: var(--red-hover-color);
+        border-color: var(--red-hover-color);
+
+    }
+}
+
+#add-bt:disabled {
+    background-color: var(--main2-color);
+    border-color: var(--main2-color);
+    cursor: not-allowed;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/AddReport.vue b/src/components/report/AddReport.vue
index 7a2c959..48c6d0b 100644
--- a/src/components/report/AddReport.vue
+++ b/src/components/report/AddReport.vue
@@ -19,9 +19,9 @@
         </div>
         <div id="bt-area">
             <div></div>
-            <div>
-                <button id="cancle-bt" @click="$emit('close-modal')">취소</button>
+            <div class="button-container">
                 <button id="add-bt" @click="addReprot">제출</button>
+                <button id="cancle-bt" @click="$emit('close-modal')">취소</button>
             </div>
         </div>
     </div>
@@ -41,19 +41,19 @@ export default {
   },
   methods: {
     closeModal() {
-      this.$emit('close-modal');
+      this.$emit('close-modal')
     },
     addReprot() {
         if (!this.reportType) {
         sweetAlert.warning('신고사유을 선택해주세요!', '', '확인')(() =>{
-            this.$refs.reportTypeInput.focus();
-            return;
+            this.$refs.reportTypeInput.focus()
+            return
             })
         }
         if (!this.reportContent) {
         sweetAlert.warning('신고내용을 입력해주세요!', '', '확인')(() =>{
-            this.$refs.reportContentInput.focus();
-            return;
+            this.$refs.reportContentInput.focus()
+            return
             })
         }
         const url=`${this.backURL}/report`
@@ -70,7 +70,7 @@ export default {
                 })
                 .then(() => {
                     sweetAlert.success("신고제출이 완료되었습니다", "", "확인")
-                    this.$emit('close-modal');
+                    this.$emit('close-modal')
                 }).catch(()=>{
                     sweetAlert.warning("신고제출이 실패하였습니다", "", "확인")
         })
@@ -129,9 +129,11 @@ textarea.report-title {
     gap: 8px;
 }
 
-#bt-area {
+.button-container {
+    grid-area: button-container;
     display: flex;
     justify-content: center;
+    gap: 10px;
 }
 
 button {
@@ -145,7 +147,6 @@ button {
 #cancle-bt {
     background-color: var(--red-color);
     border-color: var(--red-color);
-    margin-right: 10px;
 
     &:hover {
         background-color: var(--red-hover-color);
diff --git a/src/components/report/AddReportComment.vue b/src/components/report/AddReportComment.vue
index ca21f9d..a6893bf 100644
--- a/src/components/report/AddReportComment.vue
+++ b/src/components/report/AddReportComment.vue
@@ -1,14 +1,15 @@
 <template>
-    <div class="report-object" @click="close - modal">
+    <div class="report-object" @click="close-modal">
         <div class="report-box">
-            <div class="report-title">문제번호</div>
-            <div class="report-title" id="report-content">{{ reportDetail.quizNo }}</div>
+            <div class="report-title" @click="redirectToQuizDetail">문제번호</div>
+            <div class="report-title" id="report-content" @click="redirectToQuizDetail">{{ reportDetail.quizNo }}</div>
             <div class="report-title">신고자</div>
             <div class="report-title" id="report-content">{{ reportDetail.memberName }}</div>
         </div>
         <div class="report-box flex-container">
             <div class="report-title">신고사유</div>
-            <select class="report-title" id="report-reason" :disabled="true" v-model="reportDetail.reportType" style="background-color: transparent;">
+            <select class="report-title" id="report-reason" :disabled="true" v-model="reportDetail.reportType"
+                style="background-color: transparent;">
                 <option value="1">테스트케이스 추가요청</option>
                 <option value="2">문제 오류</option>
                 <option value="3">기타</option>
@@ -16,7 +17,8 @@
         </div>
         <div class="report-box flex-container">
             <div class="report-title">신고내용</div>
-            <textarea v-model="reportDetail.reportContent" class="report-title" readonly style="background-color: transparent;"></textarea>
+            <textarea v-model="reportDetail.reportContent" class="report-title" readonly
+                style="background-color: transparent;"></textarea>
         </div>
         <div class="report-box flex-container">
             <div class="report-title">조치내역</div>
@@ -25,7 +27,7 @@
         </div>
         <div id="bt-area">
             <div></div>
-            <div>
+            <div class="button-container">
                 <button id="edit-bt" @click="editReport">수정</button>
                 <button id="delete-bt" @click="deleteReport">삭제</button>
                 <button id="cancle-bt" @click="$emit('close-modal')">취소</button>
@@ -55,11 +57,15 @@ export default {
         }
     },
     mounted() {
-        this.readReport();
+        this.readReport()
     },
     methods: {
+        redirectToQuizDetail() {
+            const quizNo = this.reportDetail.quizNo
+            location.href = '/quiz/' + quizNo
+        },
         closeModal() {
-            this.$emit('close-modal');
+            this.$emit('close-modal')
         },
         readReport() {
             apiClient
@@ -69,16 +75,16 @@ export default {
                     }
                 })
                 .then((response) => {
-                    console.log('Report Detail:', response.data);
+                    console.log('Report Detail:', response.data)
                     this.reportDetail = response.data
                     this.editedReportComment = this.reportDetail.reportComment
                 })
                 .catch((error) => {
-                    console.error('Error fetching report details:', error.message);
+                    console.error('Error fetching report details:', error.message)
                 })
         },
         editReport() {
-            const url = `${this.backURL}/admin/report/${this.reportNo}`;
+            const url = `${this.backURL}/admin/report/${this.reportNo}`
             const data = {
                 reportComment: this.editedReportComment
             }
@@ -90,7 +96,7 @@ export default {
                 })
                 .then(() => {
                     sweetAlert.success("신고조치가 완료되었습니다", "", "확인")
-                    this.$emit('close-modal');
+                    this.$emit('close-modal')
                 }).catch(() => {
                     sweetAlert.warning("신고조치가 실패하였습니다", "", "확인")
                 })
@@ -99,32 +105,28 @@ export default {
             sweetAlert.question("삭제 확인", "신고를 삭제하시겠습니까?", "네", "아니오")
                 .then((result) => {
                     if (result.isConfirmed) {
-                        const url = `${this.backURL}/admin/report/${this.reportNo}`;
+                        const url = `${this.backURL}/admin/report/${this.reportNo}`
                         return apiClient
                             .delete(url, {
                                 headers: {
                                     'Content-Type': 'application/json'
                                 }
-                            });
+                            })
                     } else {
-                        throw new Error("삭제가 취소되었습니다");
+                        throw new Error("삭제가 취소되었습니다")
                     }
                 })
                 .then(() => {
-                    sweetAlert.success("신고조치가 완료되었습니다", "", "확인");
-                    this.$emit('report-deleted');
-                    this.$emit('close-modal');
+                    sweetAlert.success("신고조치가 완료되었습니다", "", "확인")
+                    this.$emit('report-deleted')
+                    this.$emit('close-modal')
                 })
                 .catch((error) => {
                     if (error.message !== "삭제가 취소되었습니다") {
-                        sweetAlert.warning("신고조치가 실패하였습니다", "", "확인");
+                        sweetAlert.warning("신고조치가 실패하였습니다", "", "확인")
                     }
-                });
+                })
         }
-
-
-
-
     }
 }
 </script>
@@ -157,7 +159,7 @@ export default {
 
 #report-content {
     font-size: 1.2rem;
-    padding: 30px;
+    padding: 25px;
 }
 
 select.report-title,
@@ -183,9 +185,11 @@ textarea.report-title#report-answer {
     gap: 8px;
 }
 
-#bt-area {
+.button-container {
+    grid-area: button-container;
     display: flex;
     justify-content: center;
+    gap: 10px;
 }
 
 button {
diff --git a/src/views/admin/AdminPage.vue b/src/views/admin/AdminPage.vue
index 67a1f27..40a6b3c 100644
--- a/src/views/admin/AdminPage.vue
+++ b/src/views/admin/AdminPage.vue
@@ -3,7 +3,6 @@
       <div class="header">
         <div class="header-text">관리자페이지</div>
       </div>
-  
       <div class="content-box">
         <div class="index-bar">
           <div class="quiz-page" id="quiz-page" @click="OnQuizPage">문제 조회</div>
diff --git a/src/views/member/Login.vue b/src/views/member/Login.vue
index 2d21d8f..5741f03 100644
--- a/src/views/member/Login.vue
+++ b/src/views/member/Login.vue
@@ -2,60 +2,65 @@
   <div id="logoOff"></div>
   <div class="video-background">
     <video autoplay muted loop id="myVideo">
-      <source src="/images/login/mainBackGround.mp4" type="video/mp4" />
+      <source src="/images/login/mainBackGround.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
 
     <div class="login">
       <div class="action-buttons">
-        <img src="/images/login/join.png" alt="join" class="join" @click="signUpForm()" />
+        <img src="/images/login/join.png" alt="join" class="join" @click="signUpForm()">
+
       </div>
-      <form id="joinForm" class="action-buttons">
+      <form id="joinForm" class="action-buttons" @keyup.enter="loginFormSubmitHandler">
         <table>
           <tr>
             <td>
-              <h2 style="margin-bottom: 5px">ID&nbsp;</h2>
+              <h2 style="margin-bottom: 5px;">ID&nbsp;</h2>
             </td>
             <td>
-              <span style="top: -3px">
-                <input type="text" name="id" id="i" v-model="id" />
+              <span style="top: -3px;">
+                <input type="text" name="id" id="i" v-model="id">
               </span>
             </td>
           </tr>
           <tr>
             <td>
-              <h2 style="margin-top: 5px">PW&nbsp;&nbsp;</h2>
+              <h2 style="margin-top: 5px;">PW&nbsp;&nbsp;</h2>
             </td>
             <td>
-              <span style="top: 3px">
-                <input type="password" name="pwd" id="p" v-model="pwd" />
+              <span style="top: 3px;">
+                <input type="password" name="pwd" id="p" v-model="pwd">
               </span>
             </td>
           </tr>
         </table>
         <div class="action-buttons">
-          <img
-            src="/images/login/start.png"
-            alt="start"
-            class="start"
-            @click="loginFormSubmitHandler()"
-          />
+          <img src="/images/login/start.png" alt="start" class="start" @click="loginFormSubmitHandler()">
         </div>
       </form>
+
     </div>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import sweetAlert from '../../util/modal.js'
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     return {
       id: '',
-      pwd: ''
+      pwd: '',
+    }
+  },
+  mounted() {
+    const accessToken = sessionStorage.getItem("accessToken")
+    if (accessToken) {
+      this.$router.replace("/") // 메인 페이지의 경로로 수정
     }
   },
+
   methods: {
     signUpForm() {
       location.href = '/signup'
@@ -73,23 +78,22 @@ export default {
           headers: {
             'Content-Type': 'application/json'
           },
-          withCredentials: true
+          withCredentials: true,
+
         })
-        .then((responseData) => {
-          console.log(responseData)
+        .then(responseData => {
           // Access Token을 세션 스토리지에 저장
-          console.log(responseData.data.accessToken)
-          console.log(responseData.data.refreshToken)
-          sessionStorage.setItem('accessToken', responseData.data.accessToken)
-          // localStorage.setItem("accessToken", responseData.data.accessToken);
+          sessionStorage.setItem("accessToken", responseData.data.accessToken)
           location.href = '/'
         })
         .catch((error) => {
           console.error('Error:', error)
+          sweetAlert.warning("로그인 정보를 다시 확인하세요", "", "확인")
         })
     }
-  }
+  },
 }
+
 </script>
 <style scoped>
 #logoOff {
@@ -178,4 +182,4 @@ input {
 span {
   position: relative;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/member/MyPage.vue b/src/views/member/MyPage.vue
index 40cb790..29d6d83 100644
--- a/src/views/member/MyPage.vue
+++ b/src/views/member/MyPage.vue
@@ -3,7 +3,6 @@
     <div class="header">
       <div class="header-text">마이페이지</div>
     </div>
-
     <div class="content-box">
       <div class="index-bar">
         <div class="index" id="profile-page" @click="movePage">내 정보 확인</div>
@@ -11,16 +10,10 @@
         <div class="index" id="code-page" @click="movePage">제출한 코드</div>
         <div class="index" id="rank-history" @click="movePage">랭크 전적</div>
         <div id="etc-bt">
-          <img
-            src="../../../public/images/admin/home.png"
-            class="home-bt"
-            alt="home"
-            @click="movePage"
-          />
-          <button id="unregister">회원 탈퇴</button>
+          <img src="../../../public/images/admin/home.png" class="home-bt" alt="home" @click="movePage" />
+          <button id="unregister" @click="onRemoveModal">회원 탈퇴</button>
         </div>
       </div>
-
       <div class="content-area">
         <ProfileCheck v-if="this.myProfile"></ProfileCheck>
         <ProfileEdit v-if="this.profileEdit"></ProfileEdit>
@@ -28,6 +21,9 @@
         <RankHistory v-if="this.rankHistory"></RankHistory>
       </div>
     </div>
+
+    <div v-if="removeModal" id="back-off" @click="offRemoveModal"></div>
+    <ProfileRemove v-if="removeModal" id="remove-popup" @close-modal="offRemoveModal" />
   </main>
 </template>
 <script>
@@ -35,31 +31,75 @@ import ProfileCheck from '../../components/profile/ProfileCheck.vue'
 import ProfileEdit from '../../components/profile/ProfileEdit.vue'
 import MyCode from '../../components/profile/MyCode.vue'
 import RankHistory from '../../components/profile/RankHistory.vue'
+import ProfileRemove from '../../components/profile/ProfileRemove.vue'
+
+import { apiClient } from '@/axios-interceptor'
+import sweetAlert from '../../util/modal.js'
 
 export default {
   name: 'MyPage',
-  components: { ProfileCheck, ProfileEdit, MyCode, RankHistory },
+  components: { ProfileCheck, ProfileEdit, MyCode, RankHistory, ProfileRemove },
   data() {
     return {
       memberNo: '',
       myProfile: true,
       profileEdit: false,
       myCode: false,
-      rankHistory: false
+      rankHistory: false,
+      removeModal: false,
+      loginMember: {
+        memberNo: 0,
+        authority: '',
+      }
+
     }
   },
   methods: {
     movePage(e) {
-        const viewName=e.target.id
-        if(viewName=='profile-page') location.href='/profile/check/'+this.memberNo
-        else if(viewName=='profile-edit-page') location.href='/profile/edit/'+this.memberNo
-        else if(viewName=='code-page') location.href='/profile/code/'+this.memberNo
-        else if(viewName=='rank-history') location.href='/profile/rank/'+this.memberNo
-        else location.href='/'
+      const viewName = e.target.id
+      if (viewName == 'profile-page') location.href = '/profile/check/' + this.memberNo
+      else if (viewName == 'profile-edit-page') location.href = '/profile/edit/' + this.memberNo
+      else if (viewName == 'code-page') location.href = '/profile/code/' + this.memberNo
+      else if (viewName == 'rank-history') location.href = '/profile/rank/' + this.memberNo
+      else location.href = '/'
+    },
+    offRemoveModal() {
+      this.removeModal = false
+    },
+    onRemoveModal() {
+      this.removeModal = true
+    },
+
+    getLoginNo() {
+      apiClient
+        .get(`${this.backURL}/member/my`, {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+        .then((response) => {
+          console.log('HTTP 응답:', response)
+          this.loginMember = response.data
+          this.memberNo = this.$route.params.memberNo
+
+          if (this.loginMember.authority == "ROLE_ADMIN") {
+            return
+          }
+
+          if (this.loginMember.memberNo != this.memberNo) {
+            sweetAlert.error("권한이 없습니다", '', '뒤로 가기').then(() => {
+              window.history.back()
+            })
+          }
+        })
+        .catch((error) => {
+          sweetAlert.error(error.response.data.errors[0], '', '닫기')
+        })
     }
   },
   mounted() {
-    this.memberNo=this.$route.params.memberNo
+    this.getLoginNo()
+    this.memberNo = this.$route.params.memberNo
     const viewName = this.$route.params.viewName
     this.myProfile = false
     this.profileEdit = false
@@ -204,4 +244,29 @@ export default {
     color: var(--white-color);
   }
 }
+
+#remove-popup {
+  padding: 10px;
+  position: fixed;
+  background-color: var(--white-color);
+  border: 8px solid var(--red-color);
+  border-radius: 10px;
+  width: 700px;
+  height: 330px;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+}
+
+#back-off {
+  width: 100%;
+  height: 100%;
+  display: fixed;
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 </style>
diff --git a/src/views/member/Signup.vue b/src/views/member/Signup.vue
index 6b5619f..31ede80 100644
--- a/src/views/member/Signup.vue
+++ b/src/views/member/Signup.vue
@@ -1,772 +1,483 @@
 <template>
-  <div id="logoOff"></div>
-  <div class="logo">
-    <img id="main-logo" src="/images/logo.gif" alt="logo" @click="gotoLogin" />
-  </div>
-  <form class="signup" v-on:submit.prevent="signupFormSubmitHandler">
-    <div class="content">
-      <section>
-        <div class="divImg"></div>
-        <div class="info" id="info-profileImg">
-          <div id="profile-input">
-            <img
-              :src="'/images/icon/' + memberProfileImg + '.png'"
-              :alt="'Icon ' + memberProfileImg"
-              class="profile-icon"
-            />
-            <button @click="openProfilePopup" type="button">변경</button>
-            <ProfileImgPopup
-              v-if="isProfilePopupOpen"
-              @selected="handleSelectedProfileImage"
-              @close="closeProfilePopup"
-            />
-          </div>
-        </div>
-
-        <div class="info" id="info-id">
-          <div id="id-input">
-            <input
-              class="box"
-              type="text"
-              name="id"
-              id="i"
-              v-model="c.id"
-              placeholder="아이디 입력 (6~20자)"
-              @input="validateId"
-              @focus="clearAllErrMsg"
-            />
-            <button
-              id="id-check"
-              @click="btIdDupchkClickHandler"
-              :disabled="!isIdValid"
-              type="button"
-            >
-              중복 확인
-            </button>
-          </div>
-          <div
-            class="error-msg"
-            :class="{
-              invalid: errMsg.id.invalid,
-              fail: errMsg.id.fail,
-              success: errMsg.id.success
-            }"
-          >
-            {{ errMsg.id.invalid || errMsg.id.fail || errMsg.id.success }}
-          </div>
-        </div>
-
-        <div class="info" id="info-pwd">
-          <input
-            class="box"
-            type="password"
-            name="pwd"
-            id="p"
-            v-model="c.pwd"
-            ref="p"
-            placeholder="비밀번호 입력 (문자, 숫자, 특수문자 포함 8~20자)"
-            @input="checkPwdValidHandler"
-            @focus="clearAllErrMsg"
-          />
-          <div
-            class="error-msg"
-            :class="{
-              invalid: errMsg.pwd.invalid,
-              fail: errMsg.pwd.fail,
-              success: errMsg.pwd.success
-            }"
-          >
-            {{ errMsg.pwd.invalid || errMsg.pwd.fail || errMsg.pwd.success }}
-          </div>
-        </div>
-
-        <div class="info" id="info-pwdRe">
-          <input
-            class="box"
-            type="password"
-            id="pwdRe"
-            v-model="pwdRe"
-            @input="checkPwdReHandler"
-            placeholder="비밀번호 재입력"
-            @focus="clearAllErrMsg"
-          />
-          <div
-            class="error-msg"
-            :class="{
-              invalid: errMsg.pwdRe.invalid,
-              fail: errMsg.pwdRe.fail,
-              success: errMsg.pwdRe.success
-            }"
-          >
-            {{ errMsg.pwdRe.invalid || errMsg.pwdRe.fail || errMsg.pwdRe.success }}
-          </div>
-        </div>
+    <div id="logoOff"></div>
+    <div class="logo">
+        <img id="main-logo" src="/images/logo.gif" alt="logo" @click="gotoLogin">
+    </div>
 
-        <div class="info" id="info-id">
-          <div id="id-input">
-            <input
-              class="box"
-              type="text"
-              name="nick"
-              id="n"
-              v-model="c.nick"
-              placeholder="닉네임 입력 (추후변경가능)"
-              @input="validateNick"
-              @focus="clearAllErrMsg"
-            />
-            <button
-              id="nick-check"
-              @click="btNickDupchkClickHandler"
-              :disabled="!isNickValid"
-              type="button"
-            >
-              중복 확인
-            </button>
-          </div>
-          <div
-            class="error-msg"
-            :class="{
-              invalid: errMsg.nick.invalid,
-              fail: errMsg.nick.fail,
-              success: errMsg.nick.success
-            }"
-          >
-            {{ errMsg.nick.invalid || errMsg.nick.fail || errMsg.nick.success }}
-          </div>
+    <form class="signup" v-on:submit.prevent="signupFormSubmitHandler">
+        <div class="content">
+            <section>
+                <div class="divImg">
+                </div>
+                <div class="info" id="info-profileImg">
+                    <div id="profile-input">
+                        <img :src="'images/icon/' + (memberProfileImg) + '.png'" :alt="'Icon ' + (memberProfileImg)"
+                            class="profile-icon" />
+                        <button @click="onProfileModal" type="button">변경</button>
+                    </div>
+                </div>
+                <div v-if="profileModal" id="back-off" @click="offProfileModal"></div>
+                <ProfileImgPopup v-if="profileModal" @selected="handleSelectedProfileImage"
+                    @close-modal="offProfileModal" />
+
+                <div class="info" id="info-id">
+                    <div id="id-input">
+                        <input class="box" type="text" name="id" id="i" v-model="c.id" placeholder="아이디 입력 (4~15자)" />
+                        <button id="id-check" @click="btIdDupchkClickHandler" type="button">중복확인</button>
+                    </div>
+                </div>
+
+                <div class="info" id="info-pwd">
+                    <input class="box" type="password" name="pwd" id="p" v-model="c.pwd"
+                        placeholder="비밀번호 입력 (문자, 숫자, 특수문자 포함 8~20자)" />
+                </div>
+
+                <div class="info" id="info-pwdRe">
+                    <input class="box" type="password" id="pwdRe" v-model="pwdRe" placeholder="비밀번호 재입력">
+                </div>
+
+                <div class="info" id="info-id">
+                    <div id="id-input">
+                        <input class="box" type="text" name="memberName" id="n" v-model="c.name"
+                            placeholder="닉네임 입력 (추후 변경 가능)" />
+                        <button id="name-check" @click="btNameDupchkClickHandler" type="button">중복확인</button>
+                    </div>
+                </div>
+                <div class="info" id="info-introduction">
+                    <textarea class="box" type="text" name="intro" id="intro" v-model="intro"
+                        placeholder="소개(자신에 대해 알려주세요)"></textarea>
+                </div>
+            </section>
+
+            <p for="privacy-checkbox" class="info" id="privacy-agreement">
+                ※ 개인정보 수집 및 이용 동의 ※<br>
+                코드스파링은 이용자 식별을 위해 아이디와 비밀번호를 수집하고 있으며, 게임 탈퇴 시까지 이용합니다.
+            </p>
+            <div id="info-agree">
+                <input type="checkbox" id="privacy-checkbox" v-model="agreeCheck">
+                위의 내용에 동의합니다.
+            </div>
+            <button id="submit" :disabled="!agreeCheck" :class="{ 'disabled-btn': !agreeCheck }">가입하기</button>
+            <div class="exist">
+                <span>이미 회원이신가요?</span>
+                <router-link to="/login">로그인 하러가기</router-link>
+            </div>
         </div>
-        <div class="info" id="info-introduction">
-          <textarea
-            class="box"
-            type="text"
-            name="intro"
-            id="intro"
-            v-model="intro"
-            placeholder="소개(자신에 대해 알려주세요)"
-            @focus="clearAllErrMsg"
-          ></textarea>
-        </div>
-      </section>
-      <p for="privacy-checkbox" class="info" id="privacy-agreement">
-        ※ 개인정보 수집 및 이용 동의 ※<br />
-        코드스파링은 이용자 식별을 위해 아이디와 비밀번호를 수집하고 있으며, 게임 탈퇴 시까지
-        이용합니다.
-      </p>
-      <div id="info-agree">
-        <!-- <input type="checkbox" id="privacy-checkbox" v-model="privacyAgreed" @click="clearAllErrMsg"> -->
-        <input type="checkbox" id="privacy-checkbox" v-model="privacyAgreed" />
-        위의 내용에 동의합니다.
-      </div>
-
-      <!-- :disabled="!isFormValid" -->
-      <!-- <button disabled="false"> {{ flag }}</button> -->
-      <!-- <button id="submit" :disabled="!flag">가입하기</button> -->
-      <button id="submit">가입하기</button>
-
-      <!-- <button id="submit" @click="checkForm" @focus="clearAllErrMsg" type="submit">가입하기</button> -->
-      <!-- <div id="result-fail">{{ resultFailMsg }}</div> -->
-      <div class="exist">
-        <span>이미 회원이신가요?</span>
-        <router-link :to="`${this.backURL}/auth/login`">로그인 하러가기</router-link>
-      </div>
-    </div>
-  </form>
+    </form>
 </template>
 
 <script>
-import ProfileImgPopup from './ProfileImgPopup.vue'
 import { apiClient } from '@/axios-interceptor'
+import sweetAlert from '../../util/modal.js'
+import ProfileImgPopup from '../../components/profile/ProfileImgPopup.vue'
+
 export default {
-  name: 'Signup',
-  components: { ProfileImgPopup },
-  data() {
-    return {
-      pwdRe: '',
-      intro: 'hi',
-      c: {
-        id: 'test',
-        pwd: '',
-        name: ''
-      },
-      errMsg: {
-        id: {
-          invalid: '',
-          success: '',
-          fail: ''
+    name: "Signup",
+    components: { ProfileImgPopup },
+    data() {
+        return {
+            pwdRe: null,
+            intro: '',
+            c: {
+                id: null,
+                pwd: null,
+                name: null,
+            },
+            memberProfileImg: 0,
+            profileModal: false,
+            agreeCheck: false,
+        }
+    },
+    methods: {
+        offProfileModal() {
+            this.profileModal = false
         },
-        pwd: {
-          invalid: '',
-          success: '',
-          fail: ''
+        onProfileModal() {
+            this.profileModal = true
         },
-        pwdRe: {
-          invalid: '',
-          success: '',
-          fail: ''
+        handleSelectedProfileImage(index) {
+            this.memberProfileImg = index
+            this.onProfileModal()
+        },
+        gotoLogin() {
+            this.$router.push('/login')
         },
-        nick: {
-          invalid: '',
-          success: '',
-          fail: ''
-        }
-      },
-      privacyAgreed: false,
-      memberProfileImg: 0,
-      isProfilePopupOpen: false,
-      isIdValid: false,
-      isNickValid: false,
-      isPwdValid: false,
-      flag: false
-    }
-  },
-  computed: {},
-  methods: {
-    test() {
-      this.privacyAgreed = !this.privacyAgreed
-      this.clearAllErrMsg()
-    },
-    isFormValid() {
-      // alert("isFormValid")
-      const valid = this.privacyAgreed && this.isIdValid && this.isNickValid
-      // console.log(" isFormValid",  this.privacyAgreed, this.isIdValid,  this.isNickValid)
-      return valid
-    },
-    openProfilePopup() {
-      this.isProfilePopupOpen = this.isProfilePopupOpen ? false : true
-    },
-    closeProfilePopup() {
-      this.isProfilePopupOpen = false
-    },
-    handleSelectedProfileImage(index) {
-      this.memberProfileImg = index
-      this.closeProfilePopup()
-    },
-    gotoMain() {
-      location.href = '/'
-    },
-    gotoLogin() {
-      location.href = '/login'
-    },
 
-    clearAllErrMsg() {
-      console.log('clearAllErrMsg before call isFormValid privacyAgreed=', this.privacyAgreed)
-      this.flag = this.isFormValid()
+        btIdDupchkClickHandler() {
+            const idRegExp = /^[a-zA-Z0-9]{4,15}$/
+            if (!idRegExp.test(this.c.id)) {
+                sweetAlert.warning("4~15자의 영문 소문자와 숫자만 사용 가능합니다", '', '닫기')
+                return
+            }
+
+            const url = `${this.backURL}/auth/chkDupId?memberId=${this.c.id}`
+            apiClient
+                .get(url, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                })
+                .then(response => {
+                    const isDuplicate = response.data
+                    if (!isDuplicate) {
+                        sweetAlert.success("사용 가능한 아이디입니다", '', '닫기')
+                    } else {
+                        sweetAlert.warning("이미 사용중인 아이디입니다", '', '닫기')
+                    }
+                })
+                .catch(error => {
+                    console.error(error)
+                    sweetAlert.warning(error.response.data.errors[0], '', '닫기')
+                })
+        },
 
-      Object.keys(this.errMsg).forEach((field) => {
-        if (this.errMsg[field].invalid === '' && this.errMsg[field].fail === '') {
-          this.errMsg[field].success = ''
+        btNameDupchkClickHandler() {
+            const nameRegExp = /^[a-zA-Z0-9]{4,15}$/
+            if (!nameRegExp.test(this.c.name)) {
+                sweetAlert.warning("4~15자의 영문 소문자와 숫자만 사용 가능합니다", '', '닫기')
+                return
+            }
+
+            const url = `${this.backURL}/auth/chkDupName?memberName=${this.c.name}`
+            apiClient
+                .get(url, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                })
+                .then(response => {
+                    const isDuplicate = response.data
+                    if (!isDuplicate) {
+                        sweetAlert.success("사용 가능한 닉네임입니다", '', '닫기')
+                    } else {
+                        sweetAlert.warning("이미 사용중인 닉네임입니다", '', '닫기')
+                    }
+                })
+                .catch(error => {
+                    console.error(error)
+                    sweetAlert.warning("서버 오류가 발생했습니다", '', '닫기')
+                })
+        },
+        signupFormSubmitHandler(e) {
+            if(this.c.id == null || this.c.id ==''
+                || this.c.name == null || this.c.name == '') {
+                    sweetAlert.warning("누락된 항목이 있습니다", '', '닫기')
+                    return
+                }
+
+            const pwdRegExp = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/
+            if (!pwdRegExp.test(this.c.pwd)) {
+                sweetAlert.warning("비밀번호는 8~20자의 영문 \n 대/소문자, 숫자, 특수문자를 \n 포함해야 합니다", '', '닫기')
+                return
+            }
+            if (this.c.pwd != this.pwdRe) {
+                sweetAlert.warning("비밀번호 확인을 다시 입력해주세요", '', '닫기')
+                return
+            }
+            const data = {
+                memberInfo: this.intro === '' ? null : this.intro,
+                memberId: this.c.id,
+                memberPwd: this.c.pwd,
+                memberName: this.c.name,
+                memberProfileImg: this.memberProfileImg
+            }
+            apiClient
+                .post(`${this.backURL}/auth/signup`, data, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(response => {
+                    console.log(response)
+                    sweetAlert.success("가입에 성공했습니다", '', '닫기').then(() => {
+                        location.href = '/login'
+                    })
+                })
+                .catch(error => {
+                    sweetAlert.warning(error.response.data.errors[0], '', '닫기')
+                    return
+                })
         }
-      })
-      console.log('clearAllErrMsg after call isFormValid privacyAgreed=', this.privacyAgreed)
-    },
 
-    validateId() {
-      const idRegExp = /^[a-zA-Z0-9]{5,20}$/
-      this.isIdValid = false
-      if (!idRegExp.test(this.c.id)) {
-        this.errMsg.id.invalid = '5~20자의 영문 소문자와 숫자만 사용 가능합니다'
-        this.errMsg.id.success = ''
-        this.errMsg.id.fail = ''
-      } else {
-        this.errMsg.id.invalid = ''
-        this.errMsg.id.fail = ''
-        this.errMsg.id.success = '아이디 중복 확인을 해주세요'
-        this.isIdValid = true
-        this.isIdCheck = false
-      }
-    },
-    btIdDupchkClickHandler() {
-      const url = `${this.backURL}/auth/chkDupId?memberId=${this.c.id}`
-      console.log(url)
-      apiClient
-        .post(url, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        .then((response) => {
-          const isDuplicate = response.data
-          if (!isDuplicate) {
-            this.errMsg.id.success = '사용 가능한 아이디입니다'
-            this.errMsg.id.fail = ''
-            this.isIdCheck = true
-          }
-        })
-        .catch((error) => {
-          this.errMsg.id.fail = error.response.data.errors[0]
-          this.errMsg.id.success = ''
-          this.isIdValid = false
-          this.isIdCheck = false
-        })
-    },
-
-    checkPwdValidHandler() {
-      const pwdRegExp = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/
-      let isPwdValid = false // 비밀번호 유효성 여부
-      if (!pwdRegExp.test(this.c.pwd)) {
-        // 비밀번호가 유효성 검사를 통과하지 못한 경우
-        this.errMsg.pwd.invalid = '8~20자의 영문 대/소문자, 숫자, 특수문자를 포함해야 합니다.'
-        this.errMsg.pwd.success = ''
-        this.errMsg.pwd.fail = ''
-      } else {
-        // 비밀번호가 유효성 검사를 통과한 경우
-        this.errMsg.pwd.invalid = ''
-        this.errMsg.pwd.success = '사용 가능한 비밀번호입니다'
-        this.errMsg.pwd.fail = ''
-        isPwdValid = true
-      }
-      return isPwdValid
-    },
 
-    checkPwdReHandler() {
-      let pwdVal = this.c.pwd
-      let pwdReVal = this.pwdRe
-      if (pwdReVal !== '') {
-        if (pwdVal !== pwdReVal) {
-          // 비밀번호와 재입력 값이 일치하지 않는 경우
-          this.errMsg.pwdRe.invalid = '비밀번호가 일치하지 않습니다.'
-          this.errMsg.pwdRe.success = ''
-          this.errMsg.pwd.fail = ''
-        } else {
-          // 비밀번호 재입력이 유효한 경우
-          this.errMsg.pwdRe.invalid = ''
-          this.errMsg.pwd.fail = ''
-          this.errMsg.pwdRe.success = '비밀번호가 일치합니다.'
-        }
-      } else {
-        // 비밀번호 재입력 필드가 비어 있는 경우
-        this.errMsg.pwdRe.invalid = '비밀번호를 다시 입력해주세요.'
-        this.errMsg.pwdRe.success = ''
-        this.errMsg.pwd.fail = ''
-      }
-    },
 
-    validateNick() {
-      const nickRegExp = /^[a-zA-Z0-9]{5,20}$/
-      this.isNickValid = false
-      if (!nickRegExp.test(this.c.nick)) {
-        this.errMsg.nick.invalid = '5~20자의 영문 소문자와 숫자만 사용 가능합니다'
-        this.errMsg.nick.success = ''
-        this.errMsg.nick.fail = ''
-      } else {
-        this.errMsg.nick.invalid = ''
-        this.errMsg.nick.fail = ''
-        this.errMsg.nick.success = '닉네임 중복 확인을 해주세요'
-        this.isNickValid = true
-      }
-    },
 
-    btNickDupchkClickHandler() {
-      const url = `${this.backURL}/auth/chkDupName?memberName=${this.c.nick}`
-      apiClient
-        .post(url, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        .then((response) => {
-          const isDuplicate = response.data
-          console.log(response)
-          if (!isDuplicate) {
-            this.errMsg.nick.success = '사용 가능한 닉네임입니다'
-            this.errMsg.nick.fail = ''
-          }
-        })
-        .catch((error) => {
-          this.errMsg.nick.fail = this.errMsg.nick.fail = error.response.data.errors[0]
-          this.errMsg.nick.success = ''
-          this.isNickValid = false
-          console.error(error)
-        })
-    },
-    checkForm() {
-      if (this.c.id == null || !this.isIdValid) {
-        alert('아이디를 확인하세요')
-        return
-      }
-      if (!this.isIdCheck) {
-        alert('아이디 중복체크를 하세요')
-        return
-      }
-      if (this.c.pwd == null || this.c.pwd.trim() === '') {
-        alert('비밀번호를 확인하세요')
-        return
-      }
-      if (this.pwdRe == null || this.pwdRe.trim() === '' || this.c.pwd == this.pwdRe) {
-        alert('비밀번호 재입력을 확인하세요')
-        return
-      }
-
-      if (this.c.nick == null || this.c.nick.trim() === '' || !this.isNickValid) {
-        alert('닉네임을 확인하세요')
-        return
-      }
-      if (!this.privacyAgreed) {
-        alert('개인정보 수집 및 이용에 동의해주세요')
-        return
-      }
-      // this.signupFormSubmitHandler();
-    },
-    signupFormSubmitHandler(e) {
-      let data = {
-        memberInfo: this.intro,
-        memberId: this.c.id,
-        memberPwd: this.c.pwd,
-        memberName: this.c.nick,
-        memberProfileImg: this.memberProfileImg
-      }
-      // JSON.stringify(data)
-      apiClient
-        .post(`${this.backURL}/auth/signup`, data, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        .then((response) => {
-          console.log(response)
-          alert('가입에 성공했습니다')
-          location.href = '/login'
-        })
-        .catch((error) => {
-          // alert(error.message)
-          alert(error.response.data.errors[0]) // 서버에서 전송한 예외 객체
-        })
     }
-  }
+
 }
 </script>
 
 <style scoped>
 #logoOff {
-  width: 100%;
-  height: 100px;
-  z-index: 1;
-  position: absolute;
-  background-color: var(--main1-color);
+    width: 100%;
+    height: 100px;
+    z-index: 1;
+    position: absolute;
+    background-color: var(--main1-color);
 }
 
 .logo {
-  text-align: center;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
 }
 
 #main-logo {
-  width: 150px;
-  cursor: pointer;
+    width: 150px;
+    cursor: pointer;
 }
 
-/* COMMON */
 body {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  min-height: 850px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--main5-color);
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    min-height: 850px;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--main5-color);
 }
 
 button {
-  background-color: var(--main4-color);
-  color: var(--main1-color);
-  cursor: pointer;
-  border: none;
-  box-sizing: border-box;
-  font-weight: 400;
-  transition: 0.1s;
+    background-color: var(--main4-color);
+    color: var(--main1-color);
+    cursor: pointer;
+    border: none;
+    box-sizing: border-box;
+    font-weight: 400;
+    transition: .1s;
 }
 
 button:focus-visible {
-  outline: 0px solid;
-  background-color: var(--main4-color);
+    outline: 0px solid;
+    background-color: var(--main4-color);
 }
 
 button:hover {
-  outline: 0px solid;
-  background-color: var(--main4-hover-color);
-}
-
-button:disabled {
-  background-color: var(--main1-color);
-  color: var(--main2-color);
+    outline: 0px solid;
+    background-color: var(--main4-hover-color);
 }
 
 .info {
-  margin-bottom: 22px;
+    margin-bottom: 22px;
 }
 
-/* box shape input field */
 .box {
-  width: 100%;
-  height: 50px;
-  box-sizing: border-box;
-  padding: 5px 0 5px 15px;
-  border-radius: 4px;
-  border: 1px solid var(--main1-color);
-  color: var(--main5-color);
-  font-weight: 400;
-  font-size: 0.9rem;
+    width: 100%;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 5px 0 5px 15px;
+    border-radius: 4px;
+    border: 1px solid var(--main1-color);
+    color: var(--main5-color);
+    font-weight: 400;
+    font-size: 0.9rem;
 }
 
 .box::placeholder {
-  color: var(--main2-color);
+    color: var(--main2-color);
 }
 
 .box:focus {
-  outline: 1px solid var(--main2-color);
-}
-
-/* error msg */
-.info .error-msg {
-  position: absolute;
-  font-size: 11px;
-  color: var(--red-color);
-  margin: 0px 0 0 10px;
+    outline: 1px solid var(--main2-color);
 }
 
-.info .error-msg.success {
-  color: var(--green-color);
-}
 
-/* select box */
 select.box {
-  margin-left: 5px;
-  padding-left: 10px;
-  color: var(--main1-color);
+    margin-left: 5px;
+    padding-left: 10px;
+    color: var(--main1-color);
 }
 
+
 option {
-  font-size: 16px;
+    font-size: 16px;
 }
 
-/* signup */
 .signup {
-  position: relative;
-  margin-top: 500px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  width: 450px;
-  height: 980px;
-  min-width: 450px;
-  margin: auto;
-
-  border: 1px solid var(--main2-color);
-  border-radius: 40px;
-  box-shadow: 1px 1px 12px var(--main2-color);
-  box-sizing: border-box;
-
-  z-index: 3;
-
-  top: 100px;
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 450px;
+    height: 866px;
+    min-width: 450px;
+    margin: auto;
+    border: 1px solid var(--main2-color);
+    border-radius: 40px;
+    box-shadow: 1px 1px 12px var(--main2-color);
+    box-sizing: border-box;
+    z-index: 3;
+    top: 85px;
+    margin-bottom: 114px;
 }
 
 .content {
-  width: 80%;
-  flex-direction: column;
-  align-items: center;
+    width: 80%;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
 
 /* HEADER */
 header {
-  width: 100%;
+    width: 100%;
 }
 
 header h2 {
-  display: inline;
-  font-size: 25px;
-  font-weight: 700;
-  margin-bottom: 3px;
+    display: inline;
+    font-size: 25px;
+    font-weight: 700;
+    margin-bottom: 3px;
 }
 
 /* SECTION */
 section {
-  margin: 50px 0 25px 0;
+    margin: 50px 0 25px 0;
 }
 
 /* SECTION - ID */
 .info#info-id #id-input {
-  position: relative;
+    position: relative;
 }
 
 .info#info-id button {
-  position: absolute;
-  width: 90px;
-  height: 40px;
-  top: 15px;
-  bottom: 0;
-  right: 5px;
-  margin: auto 0;
-  border-radius: 3px;
-  box-shadow: 1px 1px 12px var(--main2-color);
-  font-size: 14px;
-}
-
-/* SECTION - info-nick*/
-.info#info-id #nick-check {
-  position: absolute;
-  width: 90px;
-  height: 40px;
-  top: 0;
-  bottom: 0;
-  right: 5px;
-  margin: auto 0;
-  border-radius: 3px;
-  box-shadow: 1px 1px 12px var(--main2-color);
-  font-size: 14px;
+    position: absolute;
+    width: 90px;
+    height: 40px;
+    top: 15px;
+    bottom: 0;
+    right: 5px;
+    margin: auto 0;
+    border-radius: 3px;
+    box-shadow: 1px 1px 12px var(--main2-color);
+    font-size: 14px;
+}
+
+.info#info-id #name-check {
+    position: absolute;
+    width: 90px;
+    height: 40px;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    margin: auto 0;
+    border-radius: 3px;
+    box-shadow: 1px 1px 12px var(--main2-color);
+    font-size: 14px;
 }
 
+
 /* SECTION - introduction */
 .info#info-introduction .box {
-  height: 70px;
+    height: 70px;
+    margin-bottom: -10px;
 }
 
 /* SECTION - privacy */
 #privacy-agreement {
-  border: 1px solid var(--main5-color);
-  border-radius: 4px;
-  text-align: center;
-  padding: 8px;
-  margin-bottom: 0;
-  font-size: 14px;
+    border: 1px solid var(--main5-color);
+    border-radius: 4px;
+    text-align: center;
+    padding: 8px;
+    margin-bottom: 0;
+    font-size: 14px;
 }
 
 #info-agree {
-  align-items: center;
-  text-align: center;
-  padding-top: 5px;
+    align-items: center;
+    text-align: center;
+    padding-top: 8px;
+
 }
 
-/* SUBMIT */
 button#submit {
-  width: 100%;
-  height: 45px;
-  border-radius: 3px;
-  box-shadow: 2px 2px 4px var(--main4-color);
-  font-size: 15px;
+    width: 100%;
+    height: 45px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 4px var(--main5-color);
+    font-size: 15px;
+    margin-top: 10px;
+    background-color: var(--main5-hover-color);
+    border-color: var(--main5-hover-color);
 }
 
-/* RESULT */
-#result-fail {
-  width: 100%;
-  /* height: 20px; */
-  height: 15px;
-  margin-bottom: 5px;
-  text-align: center;
-  color: var(--red-color);
-  font-size: 13px;
+button#submit:disabled {
+    background-color: var(--main2-color);
+    border-color: var(--main2-color);
+    cursor: not-allowed;
 }
 
-/* TO SIGNIN */
 .exist {
-  font-size: 13px;
-  margin-top: 10px;
-  text-align: center;
+    font-size: 13px;
+    margin-top: 10px;
+    text-align: center;
 }
 
 .exist a {
-  margin-left: 3px;
-  text-decoration: none;
-  font-weight: 700;
-  color: var(--main4-color) !important;
-  transition: 0.1s;
+    margin-left: 3px;
+    text-decoration: none;
+    font-weight: 700;
+    color: var(--main4-color) !important;
+    transition: .1s;
 }
 
 .exist a:hover {
-  text-decoration: none;
-  color: var(--main4-hover-color) !important;
+    text-decoration: none;
+    color: var(--main4-hover-color) !important;
 }
 
 /* 프로필 이미지*/
 .profile-icon {
-  width: 180%;
-  height: 100%;
-  object-fit: contain;
-  margin: 0 auto;
+    width: 180%;
+    height: 100%;
+    object-fit: contain;
+    margin: 0 auto;
 }
 
-/* 프로필 이미지 컨테이너 스타일 */
+
 #profile-input {
-  width: 200px;
-  /* 아이콘의 가로 크기 */
-  height: 200px;
-  /* 아이콘의 세로 크기 */
-  border-radius: 50%;
-  /* 원 형태를 만들기 위해 반지름 설정 */
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+
 }
 
 /* 변경 버튼 스타일 */
 #profile-input button {
-  position: relative;
-  bottom: 15px;
-  left: 75px;
-  float: right;
-  width: 200px;
-  border-radius: 3px;
-  box-shadow: 2px 2px 4px var(--main4-color);
+    position: relative;
+    bottom: 15px;
+    left: 75px;
+    float: right;
+    width: 200px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 4px var(--main4-color);
 }
 
 #info-profileImg {
-  margin-bottom: 10px;
-  /* 이미지와 섹션 간격을 조절합니다. */
+    margin-bottom: 10px;
 }
 
 section {
-  margin: 10px 0 25px 0;
-  /* 섹션 간격을 조절합니다. */
+    margin: 10px 0 25px 0;
 }
 
-/* WEB - SMALL SCREEN */
-@media screen and (min-width: 500px) and (max-height: 850px) {
-  body {
-    min-height: 700px;
-  }
-
-  .signup {
-    height: 900px;
-  }
-
-  .content {
-    width: 360px;
-    margin-top: 30px;
-    margin-bottom: 10px;
-  }
-
-  section {
-    margin: 20px 0 0px 0;
-  }
-
-  .info {
-    margin-bottom: 18px;
-  }
-}
-
-/* MOBILE */
-@media screen and (max-width: 500px) {
-  body {
-    min-height: 780px;
-    background-color: var(--white-color);
-  }
-
-  .signup {
-    width: 100vw;
-    height: 700px;
-    border: 0px;
-    box-shadow: none;
-  }
-
-  .content {
-    width: 85vw;
-    min-width: 380px;
-  }
+.divImg>img {
+    width: 100px;
 }
 
-.divImg > img {
-  width: 100px;
+#back-off {
+    width: 100%;
+    height: 100%;
+    display: fixed;
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5);
 }
-</style>
+</style>
\ No newline at end of file