Commit @7a4b07b0f90c9d15bb42d54f5131c66975cb2518

박민혁 09-06

240906 박민혁 회원가입 로그인 대시보드 수정

@7a4b07b0f90c9d15bb42d54f5131c66975cb2518

8942fab

7a4b07b

client/views/Join.vue

--- client/views/Join.vue

+++ client/views/Join.vue


                   <p class="title" for="username">아이디</p>
                   <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
                </div>
-               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
+               <p class="title2 flex align-center mb20 help" for="username" v-if="!isUserIdValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자를 조합하여 주세요 (6자리 이상)</em>
+               </p>
+               <p class="title2 flex align-center mb20 help" for="username" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">사용 가능한 아이디입니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
                   <p class="title" for="password">비밀번호</p>
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
+               <p class="title2 mb20 flex align-center help" for="password" v-if="!isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="password" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 유효합니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
-                  <p class="title" for="password">비밀번호 확인</p>
-                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
+                  <p class="title" for="passwordCheck">비밀번호 확인</p>
+                  <input type="password" id="passwordCheck" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck"
+                  v-if="!isPasswordMatched || !isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">비밀번호가 일치하지 않습니다.</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 일치합니다.</em>
+               </p>
                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">이름</p>
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">

                </div>
                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">학교</p>
-                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">학년</option>
-                     </select>
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">반</option>
-                     </select>
-                     <select name="" id="" class="data-wrap">
-                        <option value="">번호</option>
-                     </select>
-
+                  <div class="search-wrap" style="width: 100%;">
+                     <input type="text" placeholder="검색하세요." disabled v-model="userIns">
+                     <button @click="buttonSearch" type="button" title="위원회 검색">
+                        <img src="../resources/img/look_t.png" alt="">
+                     </button>
+                  </div>
+               </div>
+               <div class="mb30 flex justify-between align-center">
+                  <div class="flex justify-between align-center" style="width: 100%;">
+                     <p class="title" for="username"></p>
+                     <input style="width: 12rem;" type="text" id="username" v-model="userGrade" placeholder="학년">
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="userClass"
+                        placeholder="반">
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="userNumber"
+                        placeholder="번호">
                   </div>
                </div>
                <div class="flex justify-end align-center mb10">

                   <p class="title" for="username">아이디</p>
                   <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
                </div>
-               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
+               <p class="title2 flex align-center mb20 help" for="username" v-if="!isUserIdValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자를 조합하여 주세요 (6자리 이상)</em>
+               </p>
+               <p class="title2 flex align-center mb20 help" for="username" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">사용 가능한 아이디입니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
                   <p class="title" for="password">비밀번호</p>
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
+               <p class="title2 mb20 flex align-center help" for="password" v-if="!isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="password" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 유효합니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
-                  <p class="title" for="password">비밀번호 확인</p>
-                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
+                  <p class="title" for="passwordCheck">비밀번호 확인</p>
+                  <input type="password" id="passwordCheck" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck"
+                  v-if="!isPasswordMatched || !isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">비밀번호가 일치하지 않습니다.</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 일치합니다.</em>
+               </p>
                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">이름</p>
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">

                <div class="flex justify-between mb20">
                   <p class="title " for="username"><em class="yellow">학생 정보</em></p>
                   <div class="flex justify-end align-center mb10">
-                     <img src="../resources/img/img192_78p.png" alt="">
+                     <img src="../resources/img/img192_78p.png" alt="" @click="openModal">
                      <p class="title2 ml10" for="password">자녀 추가하기</p>
                   </div>
+               </div>
+               <div v-if="students.length > 0" class="flex justify-between mb20">
+                  <table class="table-wrap">
+                     <thead style="text-align: center; ">
+                        <tr>
+                           <th>자녀 이름</th>
+                           <th>자녀 아이디</th>
+                        </tr>
+                     </thead>
+                     <tbody>
+                        <tr v-for="(student, index) in students">
+                           <td>{{ student.userNm }}</td>
+                           <td>{{ student.loginId }}</td>
+                        </tr>
+                     </tbody>
+                  </table>
                </div>
                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">학교</p>
                   <div class="search-wrap" style="width: 100%;">
-                     <input type="text" placeholder="검색하세요.">
+                     <input type="text" placeholder="검색하세요." disabled v-model="userIns">
                      <button @click="buttonSearch" type="button" title="위원회 검색">
                         <img src="../resources/img/look_t.png" alt="">
                      </button>
-                  </div>
-               </div>
-               <div class="mb30 flex justify-between align-center">
-                  <p class="title" for="username">학생 정보</p>
-                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">학년</option>
-                     </select>
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">반</option>
-                     </select>
-                     <select name="" id="" class=" data-wrap">
-                        <option value="">번호</option>
-                     </select>
-
                   </div>
                </div>
                <div class="flex justify-end align-center mb10">

                   <p class="title" for="username">아이디</p>
                   <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
                </div>
-               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
+               <p class="title2 flex align-center mb20 help" for="username" v-if="!isUserIdValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자를 조합하여 주세요 (6자리 이상)</em>
+               </p>
+               <p class="title2 flex align-center mb20 help" for="username" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">사용 가능한 아이디입니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
                   <p class="title" for="password">비밀번호</p>
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
+               <p class="title2 mb20 flex align-center help" for="password" v-if="!isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="password" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 유효합니다.</em>
+               </p>
+
                <div class="flex justify-between align-center mb10">
-                  <p class="title" for="password">비밀번호 확인</p>
-                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
+                  <p class="title" for="passwordCheck">비밀번호 확인</p>
+                  <input type="password" id="passwordCheck" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
                </div>
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck"
+                  v-if="!isPasswordMatched || !isPasswordValid">
+                  <img src="../resources/img/img194_78p.png" alt="">
+                  <em class="gray ml10">비밀번호가 일치하지 않습니다.</em>
+               </p>
+               <p class="title2 mb20 flex align-center help" for="passwordCheck" v-else>
+                  <img src="../resources/img/img193_78p.png" alt="">
+                  <em class="green ml10">비밀번호가 일치합니다.</em>
+               </p>
                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">이름</p>
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">

                <div class="mb30 flex justify-between align-center">
                   <p class="title" for="username">학교</p>
                   <div class="search-wrap" style="width: 100%;">
-                     <input type="text" placeholder="검색하세요.">
+                     <input type="text" placeholder="검색하세요." disabled v-model="userIns">
                      <button @click="buttonSearch" type="button" title="위원회 검색">
                         <img src="../resources/img/look_t.png" alt="">
                      </button>
                   </div>
                </div>
                <div class="mb30 flex justify-between align-center">
-                  <p class="title" for="username">학교</p>
-                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">학년</option>
-                     </select>
-                     <select name="" id="" class="mr10 data-wrap">
-                        <option value="">반</option>
-                     </select>
-                     <select name="" id="" class="data-wrap">
-                        <option value="">번호</option>
-                     </select>
-
-                  </div>
+                  <p class="title" for="username">이메일</p>
+                  <input type="text" id="username" v-model="email" placeholder="이메일을 입력하세요.">
                </div>
                <div class="flex justify-end align-center mb10">
                   <input type="checkbox" class="ui-checkbox mr10">

       </div>
    </div>
    <div v-show="searchOpen" class="popup-wrap">
-      <div class="popup-box ">
+      <div class="popup-box" style="width: 70rem;  margin: 0 auto;">
          <div class="flex justify-between mb30">
             <p class="popup-title">학교 검색</p>
             <button type="button" class="popup-close-btn" @click="closeBtn">

          <div class="mb30 flex justify-between align-center">
             <p class="title1" for="username" style="width: 12rem;">시/도</p>
             <div class="search-wrap flex justify-end" style="width: 100%;">
-               <select name="" id="" class="mr10 data-wrap">
-                  <option value="">시</option>
-               </select>
-               <select name="" id="" class=" data-wrap">
-                  <option value="">도</option>
+               <input type="text" placeholder="시도명을 정확하게 입력하세요. (EX : 서울특별시, 경기도)" v-model="searchCity">
+            </div>
+         </div>
+         <div class="mb10 flex justify-between align-center">
+            <p class="title1" for="username" style="width: 12rem;">학교급</p>
+            <div class="search-wrap" style="width: 100%;">
+               <select name="" id="" class="mr10 data-wrap" v-model="searchLevel">
+                  <option value="초등학교">초등학교</option>
+                  <option value="중학교">중학교</option>
+                  <option value="고등학교">고등학교</option>
                </select>
             </div>
          </div>
          <div class="mb10 flex justify-between align-center">
             <p class="title1" for="username" style="width: 12rem;">학교명</p>
             <div class="search-wrap" style="width: 100%;">
-               <input type="text" placeholder="검색하세요.">
-               <button @click="buttonSearch" type="button" title="위원회 검색">
+               <input type="text" placeholder="학교명을 입력하세요." v-model="searchSchoolName">
+               <button @click="searchSchool" type="button" title="위원회 검색">
                   <img src="../resources/img/look_t.png" alt="">
                </button>
             </div>
          </div>
-         <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img
-               src="../resources/img/img194_78p.png" alt=""><em class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p>
+         <div v-if="schools.length > 0" style="max-height: 400px; overflow-y: auto;">
+            <table class="table-wrap">
+               <thead style="text-align: center; ">
+                  <tr>
+                     <th>선택</th>
+                     <th>학교명</th>
+                     <th>학교종류</th>
+                     <th>시도명</th>
+                  </tr>
+               </thead>
+               <tbody>
+                  <tr v-for="(school, index) in schools" :key="school.SD_SCHUL_CODE">
+                     <td>
+                        <input type="radio" name="selectedSchool" :value="school" v-model="selectedSchool">
+                     </td>
+                     <td>{{ school.SCHUL_NM }}</td>
+                     <td>{{ school.SCHUL_KND_SC_NM }}</td>
+                     <td>{{ school.LCTN_SC_NM }}</td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+         <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"
+            v-if="schools.length === 0">
+            <img src="../resources/img/img194_78p.png" alt="">
+            <em class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em>
+         </p>
          <div class="flex justify-center ">
-            <button type="button" title="글쓰기" class="new-btn mr10">
+            <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
                취소
             </button>
-            <button type="button" title="글쓰기" class="new-btn">
-               등록
+            <button type="button" title="글쓰기" class="new-btn" @click="selectSchool">
+               학교선택 / Select School
             </button>
+         </div>
+      </div>
+   </div>
+   <div v-show="showModal" class="popup-wrap">
+      <div class="popup-box" style="width: 70rem;  margin: 0 auto;">
+         <div class="find-form mt30">
+            <div v-if="!searchResult">
+               <div class="mb20 flex justify-between align-center">
+                  <p class="title2" for="username" style="width: 12rem;">자녀 이름</p>
+                  <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요."
+                     style="width: 45rem;">
+               </div>
+               <div class="mb30 flex justify-between align-center">
+                  <p class="title2" for="username" style="width: 12rem;">자녀 전화번호</p>
+                  <div class="flex justify-between align-center"><input class="data-wrap" style="width: 14rem;"
+                        type="text" id="username" v-model="findTel1">
+                     <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
+                        v-model="findTel2">
+                     <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
+                        v-model="findTel3">
+                  </div>
+               </div>
+               <div class="flex justify-center ">
+                  <button type="button" title="글쓰기" class="new-btn mr10" @click="closeModal">
+                     취소
+                  </button>
+                  <button @click="findId" type="button" title="글쓰기" class="new-btn">
+                     찾기
+                  </button>
+               </div>
+            </div>
+            <div v-else>
+               <div class="flex justify-center mt30">
+                  <p class="title2">자녀 찾기가 완료 되었습니다.</p>
+               </div>
+               <table class="table-wrap mt30 mb30">
+                  <tr>
+                     <td class="thead">이름</td>
+                     <td>{{ findUserInfo.userNm }}</td>
+                  </tr>
+                  <tr>
+                     <td class="thead">아이디</td>
+                     <td>{{ findUserInfo.loginId }}</td>
+                  </tr>
+               </table>
+               <div class="flex justify-center ">
+                  <button @click="closeModal" type="button" title="글쓰기" class="new-btn">
+                     추가하기
+                  </button>
+               </div>
+            </div>
          </div>
       </div>
    </div>

          tel1: '',
          tel2: '',
          tel3: '',
+         findUserNm: '',
+         findTel1: '',
+         findTel2: '',
+         findTel3: '',
+         userGrade: '',
+         userClass: '',
+         userNumber: '',
+         userIns: '',
          email: null,
          selectedTab: 'tab1', // 초기 선택 탭
          showModal: false,
          searchOpen: false,
+         searchCity: '',
+         searchLevel: '초등학교', // 기본값 설정
+         searchSchoolName: '',
+         schools: [],
+         students: [],
+         selectedSchool: null, // 선택된 학교
+         searchResult: false,
+         findUserInfo: {},
       }
    },
    methods: {

          } else if (vm.selectedTab === 'tab3') {
             auth = 'TEACHER'
          }
-         
+
          axios({
             url: "/auth/insertUser.json",
             method: "post",

                authcd: auth
             },
          }).then(function (response) {
-            if(response.data.status === 'success'){
+            if (response.data.status === 'success') {
                alert("회원가입에 성공했습니다!")
                vm.goToApp();
             } else {

             }
          }).catch(function (error) {
          });
-         
+
       },
+      // 학교 찾기
+      searchSchool() {
+         if (!this.searchSchoolName) {
+            alert("학교명을 입력해주세요!");
+            return;
+         }
+
+         axios({
+            url: "https://open.neis.go.kr/hub/schoolInfo",
+            method: "get",
+            params: {
+               KEY: "51f16da8aa344339a49812c23bcedb24", // 인증키를 넣어주세요
+               Type: "json",
+               pIndex: 1,
+               pSize: 100,
+               SCHUL_NM: this.searchSchoolName,
+               LCTN_SC_NM: this.searchCity,
+               SCHUL_KND_SC_NM: this.searchLevel
+            },
+         }).then(response => {
+            const data = response.data.schoolInfo;
+            if (data && data[1] && data[1].row) {
+               this.schools = data[1].row; // 학교 정보를 schools에 저장
+            } else {
+               alert("검색된 학교가 없습니다");
+               this.schools = []; // 결과가 없을 경우 빈 배열로 초기화
+            }
+         }).catch(error => {
+            console.error(error);
+         });
+      },
+      selectSchool() {
+         if (this.selectedSchool) {
+            this.userIns = this.selectedSchool.SCHUL_NM; // 선택된 학교 이름 정보를 userIns에 저장
+            this.closeBtn(); // 팝업 닫기
+         } else {
+            alert("학교를 선택해 주세요.");
+         }
+      },
+      // 자녀 찾기
+      findId() {
+         const vm = this;
+
+         const telno = vm.findTel1 + '-' + vm.findTel2 + '-' + vm.findTel3;
+
+         axios({
+            url: "/auth/findId.json",
+            method: "post",
+            data: {
+               telno: telno,
+               userNm: vm.findUserNm,
+            },
+         }).then(function (response) {
+            vm.findUserInfo = response.data;
+            vm.searchResult = true;
+         }).catch(function (error) {
+            alert("등록되지 않은 자녀입니다!");
+            console.log(error);
+         });
+      },
+
       goToApp() {
          this.$router.push('/Login.page');
       },
+      openModal() {
+         this.showModal = true;
+      },
       closeModal() {
+         if (Object.keys(this.findUserInfo).length > 0) {
+            const isDuplicate = this.students.some(student => student.loginId === this.findUserInfo.loginId);
+
+            if (!isDuplicate) {
+               this.students.push(this.findUserInfo);
+            } else {
+               alert("이미 추가된 학생입니다.");
+            }
+         }
+         this.searchResult = false;
+         this.findUserInfo = null;
          this.showModal = false;
       },
       buttonSearch() {

 
       },
    },
+   computed: {
+      isUserIdValid() {
+         // 사용자 아이디 유효성 검사 (예: 6자 이상, 영어와 숫자)
+         const regex = /^[a-zA-Z0-9]{6,}$/;
+         return regex.test(this.userId);
+      },
+      isPasswordValid() {
+         // 비밀번호 유효성 검사 (예: 6자 이상, 영문, 숫자, 특수문자 포함)
+         const regex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/;
+         return regex.test(this.password);
+      },
+      isPasswordMatched() {
+         // 비밀번호 확인 일치 여부
+         return this.password === this.passwordCheck;
+      }
+   },
+
    components: {
       SvgIcon
    },

8942fab

7a4b07b

client/views/Login.vue

--- client/views/Login.vue

+++ client/views/Login.vue


                <img src="../resources/img/icon1.png" alt="" class="mr20">
                <h2> 로그인 하기</h2>
             </div>
-            <form @submit.prevent="submitForm" class="login-form ">
+            <div class="login-form ">
                <div class="mb30">
                   <p class="mb15 title" for="username">아이디</p>
                   <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">

                   <p class="mb15 title" for="password">비밀번호</p>
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
                </div>
-               <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png"
+               <button class="login-btn mt50" type="submit" @click="submitForm"><img src="../resources/img/button.png"
                      alt="">
                   <p>로그인</p>
                </button>

                      <p class="underline title2" @click="goToPage('Join')">회원가입</p>
                   </button>
                </div>
-            </form>
+            </div>
          </div>
       </div>
    </div>
    <div v-show="searchOpen" class="popup-wrap">
-      <div class="popup-box ">
+      <div class="popup-box" style="width: 70rem;  margin: 0 auto;">
          <div class="flex justify-end mb10">
             <!-- <p class="popup-title">학교 검색</p> -->
             <button type="button" class="popup-close-btn" @click="closeBtn">

             </label>
             <label class="mr20 title1">
                <input type="radio" v-model="selectedTab" value="tab2" />
-               비밀번호 찾기
+               비밀번호 변경
             </label>
          </div>
          <!-- 아이디 찾기 -->
          <div class="find-form mt30" v-if="selectedTab === 'tab1'">
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">이름</p>
-               <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요.">
+               <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요."  style="width: 45rem;" >
             </div>
             <div class="mb30 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">전화번호</p>
-               <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap"
-                     style="width: 12rem;" type="text" id="username" v-model="findTel1">
+               <div class="flex justify-between align-center"><input class="data-wrap"
+                     style="width: 14rem;" type="text" id="username" v-model="findTel1">
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
                      v-model="findTel2">
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"

                </button>
             </div>
          </div>
-         <!-- 비밀번호 찾기 -->
+         <!-- 비밀번호 변경 -->
          <div class="find-form mt30" v-else-if="selectedTab === 'tab2'">
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">아이디</p>
-               <input class="data-wrap" type="text" id="username" v-model="changeUserNm" placeholder="아이디를 입력하세요.">
+               <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요." style="width: 45rem;" >
             </div>
             <div class="mb20 flex justify-between align-center">
-               <p class="title2" for="username" style="width: 12rem;">변경할 비밀번호</p>
-               <input class="data-wrap" type="text" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요.">
+               <p class="title2" for="username" style="width: 14rem;">변경할 비밀번호</p>
+               <input class="data-wrap" type="password" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
             </div>
-            <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
-                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
             <div class="mb20 flex justify-between align-center">
                <p class="title2" for="username" style="width: 12rem;">비밀번호 확인</p>
-               <input class="data-wrap" type="text" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요.">
+               <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
             </div>
             <div class="flex justify-center ">
                <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">

          findTel2: '',
          findTel3: '',
          findUserInfo : {},
+         changeLoginId:'',
+         changeUserPw: '',
+         changeUserPwCheck: '',
       }
    },
    methods: {

          });
       },
 
-      // 비밀번호 확인하기
+      // 비밀번호 재설정하기
+      changePw() {
+         const vm = this;
+
+         const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/;
+
+         if (!vm.changeLoginId) {
+            alert("아이디가 비어 있습니다!");
+            return;
+         }
+
+         if (!vm.changeUserPw) {
+            alert("비밀번호가 비어 있습니다!");
+            return;
+         }
+
+         if (vm.changeUserPw !== vm.changeUserPwCheck) {
+            alert("비밀번호가 일치하지 않습니다.");
+            return;
+         }
+
+         if (!passwordPattern.test(vm.changeUserPw)) {
+            alert("비밀번호는 영문, 숫자, 특수문자를 조합하여 6자리 이상이어야 합니다.");
+            return;
+         }
+
+
+         axios({
+            url: "/auth/resetPassword.json",
+            method: "post",
+            data: {
+               loginId: vm.changeLoginId,
+               newPassword: vm.changeUserPw,
+            },
+         }).then(function (response) {
+            if (response.data.status === 'success') {
+               alert("비밀번호 변경에 성공했습니다!")
+               vm.selectedTab = 'tab4';
+            } else {
+               alter(response.data.message);
+            }
+
+         }).catch(function (error) {
+            alert("비밀번호 변경에 오류가 발생했습니다!");
+            console.log(error);
+         });
+      },
 
       closeModal() {
          this.showModal = false;

8942fab

7a4b07b

client/views/pages/main/Dashboard.vue

--- client/views/pages/main/Dashboard.vue

+++ client/views/pages/main/Dashboard.vue


 <template>
-  <p class="title1" v-if="state === 'finish'">
+  <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
     오늘 공부를 다했어요! 너무 고생했어요!
   </p>
-  <p class="title1" v-else-if="state === 'notRegistered'">
-    지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?
-  </p>
-  <p class="title1" v-else-if="state === 'noProblem'">
+  <div class="title1" v-else-if="state === 'notRegistered'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
+    <div>
+      <h3>지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</h3>
+    <button type="button" title="바로가기" class="yellow-btn" @click="goToPage2('MyPlan2')">바로가기</button>
+    </div>
+  </div>
+  <p class="title1" v-else-if="state === 'noProblem'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
     교재에 등록된 문제가 없습니다.
   </p>
   <div v-else class="main">

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
               <img :src="labeledItems[0].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }" />
               <img :src="labeledItems[0].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[1] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[0].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
               <img :src="labeledItems[1].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }" />
               <img :src="labeledItems[1].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[2] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[1].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
               <img :src="labeledItems[6].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }" />
               <img :src="labeledItems[6].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[7] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[6].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
               <img :src="labeledItems[5].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }" />
               <img :src="labeledItems[5].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[6] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[5].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
               <img :src="labeledItems[4].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }" />
               <img :src="labeledItems[4].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[5] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[4].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
               <img :src="labeledItems[3].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }" />
               <img :src="labeledItems[3].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[4] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[3].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
               <img :src="labeledItems[2].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }" />
               <img :src="labeledItems[2].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[3] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[2].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
               <img :src="labeledItems[7].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }" />
               <img :src="labeledItems[7].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[8] ? 'block' : 'none' }" />
             </button>
             <p class="long">{{ labeledItems[7].label }}</p>

             </div>
             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
               <img :src="labeledItems[8].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }" />
               <img :src="labeledItems[8].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[9] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[8].label }}</p>

             <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
               data-num="10">
               <img :src="labeledItems[9].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }" />
               <img :src="labeledItems[9].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[10] ? 'block' : 'none' }" />
             </button>
             <p>{{ labeledItems[9].label }}</p>

             <button class="popTxt" v-for="(item, index) in items" :key="index"
               @click="toggleImageAndShowPopup(index, '11')" data-num="11">
               <img :src="labeledItems[10].label.length >= 4
-                  ? item.imgSrc3
-                  : item.imgSrc1
+                ? item.imgSrc3
+                : item.imgSrc1
                 " :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }" />
               <img :src="labeledItems[10].label.length >= 4
-                  ? item.imgSrc4
-                  : item.imgSrc2
+                ? item.imgSrc4
+                : item.imgSrc2
                 " :style="{ display: rabbitCompl[11] ? 'block' : 'none' }" />
             </button>
             <p class="long">{{ labeledItems[10].label }}</p>

 
       if (!book_id || !unit_id) {
         console.error("book_id 또는 unit_id가 설정되지 않았습니다.");
+        this.state = "notRegistered";
         return;
       }
       this.fetchImage(unit_id);

       // this.$router.push({ name: page, query: { unit_id, book_id } });
       this.$router.push({ name: page });
     },
+    goToPage2(page, unit_id) {
+      this.$router.push({
+        name: page, query: {
+          unit_id: unit_id,
+        },
+      });
+    },
+
     storeLearningId(labeledItems) {
       this.$store.dispatch("updateLearningData", labeledItems);
       this.$store.dispatch("updateLearningId", labeledItems.learning_id); // 단어장에 사용중..

Add a comment

Open 0
Closed 0

List

...	...	@@ -9,7 +9,7 @@
9	9	<img src="../resources/img/icon1.png" alt="" class="mr20">
10	10	<h2> 로그인 하기</h2>
11	11	</div>
12		- <form @submit.prevent="submitForm" class="login-form ">
	12	+ <div class="login-form ">
13	13	<div class="mb30">
14	14	<p class="mb15 title" for="username">아이디</p>
15	15	<input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
...	...	@@ -18,7 +18,7 @@
18	18	<p class="mb15 title" for="password">비밀번호</p>
19	19	<input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
20	20	</div>
21		- <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png"
	21	+ <button class="login-btn mt50" type="submit" @click="submitForm"><img src="../resources/img/button.png"
22	22	alt="">
23	23	<p>로그인</p>
24	24	</button>
...	...	@@ -30,12 +30,12 @@
30	30	<p class="underline title2" @click="goToPage('Join')">회원가입</p>
31	31	</button>
32	32	</div>
33		- </form>
	33	+ </div>
34	34	</div>
35	35	</div>
36	36	</div>
37	37	<div v-show="searchOpen" class="popup-wrap">
38		- <div class="popup-box ">
	38	+ <div class="popup-box" style="width: 70rem; margin: 0 auto;">
39	39	<div class="flex justify-end mb10">
40	40	<!-- <p class="popup-title">학교 검색</p> -->
41	41	<button type="button" class="popup-close-btn" @click="closeBtn">
...	...	@@ -50,19 +50,19 @@
50	50	</label>
51	51	<label class="mr20 title1">
52	52	<input type="radio" v-model="selectedTab" value="tab2" />
53		- 비밀번호 찾기
	53	+ 비밀번호 변경
54	54	</label>
55	55	</div>
56	56	<!-- 아이디 찾기 -->
57	57	<div class="find-form mt30" v-if="selectedTab === 'tab1'">
58	58	<div class="mb20 flex justify-between align-center">
59	59	<p class="title2" for="username" style="width: 12rem;">이름</p>
60		- <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요.">
	60	+ <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요." style="width: 45rem;" >
61	61	</div>
62	62	<div class="mb30 flex justify-between align-center">
63	63	<p class="title2" for="username" style="width: 12rem;">전화번호</p>
64		- <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap"
65		- style="width: 12rem;" type="text" id="username" v-model="findTel1">
	64	+ <div class="flex justify-between align-center"><input class="data-wrap"
	65	+ style="width: 14rem;" type="text" id="username" v-model="findTel1">
66	66	<p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
67	67	v-model="findTel2">
68	68	<p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
...	...	@@ -78,21 +78,19 @@
78	78	</button>
79	79	</div>
80	80	</div>
81		- <!-- 비밀번호 찾기 -->
	81	+ <!-- 비밀번호 변경 -->
82	82	<div class="find-form mt30" v-else-if="selectedTab === 'tab2'">
83	83	<div class="mb20 flex justify-between align-center">
84	84	<p class="title2" for="username" style="width: 12rem;">아이디</p>
85		- <input class="data-wrap" type="text" id="username" v-model="changeUserNm" placeholder="아이디를 입력하세요.">
	85	+ <input class="data-wrap" type="text" id="username" v-model="changeLoginId" placeholder="아이디를 입력하세요." style="width: 45rem;" >
86	86	</div>
87	87	<div class="mb20 flex justify-between align-center">
88		- <p class="title2" for="username" style="width: 12rem;">변경할 비밀번호</p>
89		- <input class="data-wrap" type="text" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요.">
	88	+ <p class="title2" for="username" style="width: 14rem;">변경할 비밀번호</p>
	89	+ <input class="data-wrap" type="password" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
90	90	</div>
91		- <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
92		- alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
93	91	<div class="mb20 flex justify-between align-center">
94	92	<p class="title2" for="username" style="width: 12rem;">비밀번호 확인</p>
95		- <input class="data-wrap" type="text" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요.">
	93	+ <input class="data-wrap" type="password" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요." style="width: 45rem;" >
96	94	</div>
97	95	<div class="flex justify-center ">
98	96	<button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
...	...	@@ -164,6 +162,9 @@
164	162	findTel2: '',
165	163	findTel3: '',
166	164	findUserInfo : {},
	165	+ changeLoginId:'',
	166	+ changeUserPw: '',
	167	+ changeUserPwCheck: '',
167	168	}
168	169	},
169	170	methods: {
...	...	@@ -264,7 +265,53 @@
264	265	});
265	266	},
266	267
267		- // 비밀번호 확인하기
	268	+ // 비밀번호 재설정하기
	269	+ changePw() {
	270	+ const vm = this;
	271	+
	272	+ const passwordPattern = /^(?=.[a-zA-Z])(?=.\d)(?=.[!@#$%^&])[A-Za-z\d!@#$%^&*]{6,}$/;
	273	+
	274	+ if (!vm.changeLoginId) {
	275	+ alert("아이디가 비어 있습니다!");
	276	+ return;
	277	+ }
	278	+
	279	+ if (!vm.changeUserPw) {
	280	+ alert("비밀번호가 비어 있습니다!");
	281	+ return;
	282	+ }
	283	+
	284	+ if (vm.changeUserPw !== vm.changeUserPwCheck) {
	285	+ alert("비밀번호가 일치하지 않습니다.");
	286	+ return;
	287	+ }
	288	+
	289	+ if (!passwordPattern.test(vm.changeUserPw)) {
	290	+ alert("비밀번호는 영문, 숫자, 특수문자를 조합하여 6자리 이상이어야 합니다.");
	291	+ return;
	292	+ }
	293	+
	294	+
	295	+ axios({
	296	+ url: "/auth/resetPassword.json",
	297	+ method: "post",
	298	+ data: {
	299	+ loginId: vm.changeLoginId,
	300	+ newPassword: vm.changeUserPw,
	301	+ },
	302	+ }).then(function (response) {
	303	+ if (response.data.status === 'success') {
	304	+ alert("비밀번호 변경에 성공했습니다!")
	305	+ vm.selectedTab = 'tab4';
	306	+ } else {
	307	+ alter(response.data.message);
	308	+ }
	309	+
	310	+ }).catch(function (error) {
	311	+ alert("비밀번호 변경에 오류가 발생했습니다!");
	312	+ console.log(error);
	313	+ });
	314	+ },
268	315
269	316	closeModal() {
270	317	this.showModal = false;

...	...	@@ -1,11 +1,14 @@
1	1	<template>
2		- <p class="title1" v-if="state === 'finish'">
	2	+ <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
3	3	오늘 공부를 다했어요! 너무 고생했어요!
4	4	</p>
5		- <p class="title1" v-else-if="state === 'notRegistered'">
6		- 지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?
7		- </p>
8		- <p class="title1" v-else-if="state === 'noProblem'">
	5	+ <div class="title1" v-else-if="state === 'notRegistered'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
	6	+ <div>
	7	+ <h3>지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</h3>
	8	+ <button type="button" title="바로가기" class="yellow-btn" @click="goToPage2('MyPlan2')">바로가기</button>
	9	+ </div>
	10	+ </div>
	11	+ <p class="title1" v-else-if="state === 'noProblem'" style="position: absolute; top: 50%; transform: translate(0, -50%);">
9	12	교재에 등록된 문제가 없습니다.
10	13	</p>
11	14	<div v-else class="main">
...	...	@@ -26,12 +29,12 @@
26	29	</div>
27	30	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
28	31	<img :src="labeledItems[0].label.length >= 4
29		- ? item.imgSrc3
30		- : item.imgSrc1
	32	+ ? item.imgSrc3
	33	+ : item.imgSrc1
31	34	" :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }" />
32	35	<img :src="labeledItems[0].label.length >= 4
33		- ? item.imgSrc4
34		- : item.imgSrc2
	36	+ ? item.imgSrc4
	37	+ : item.imgSrc2
35	38	" :style="{ display: rabbitCompl[1] ? 'block' : 'none' }" />
36	39	</button>
37	40	<p>{{ labeledItems[0].label }}</p>
...	...	@@ -43,12 +46,12 @@
43	46	</div>
44	47	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
45	48	<img :src="labeledItems[1].label.length >= 4
46		- ? item.imgSrc3
47		- : item.imgSrc1
	49	+ ? item.imgSrc3
	50	+ : item.imgSrc1
48	51	" :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }" />
49	52	<img :src="labeledItems[1].label.length >= 4
50		- ? item.imgSrc4
51		- : item.imgSrc2
	53	+ ? item.imgSrc4
	54	+ : item.imgSrc2
52	55	" :style="{ display: rabbitCompl[2] ? 'block' : 'none' }" />
53	56	</button>
54	57	<p>{{ labeledItems[1].label }}</p>
...	...	@@ -62,12 +65,12 @@
62	65	</div>
63	66	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
64	67	<img :src="labeledItems[6].label.length >= 4
65		- ? item.imgSrc3
66		- : item.imgSrc1
	68	+ ? item.imgSrc3
	69	+ : item.imgSrc1
67	70	" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }" />
68	71	<img :src="labeledItems[6].label.length >= 4
69		- ? item.imgSrc4
70		- : item.imgSrc2
	72	+ ? item.imgSrc4
	73	+ : item.imgSrc2
71	74	" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }" />
72	75	</button>
73	76	<p>{{ labeledItems[6].label }}</p>
...	...	@@ -79,12 +82,12 @@
79	82	</div>
80	83	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
81	84	<img :src="labeledItems[5].label.length >= 4
82		- ? item.imgSrc3
83		- : item.imgSrc1
	85	+ ? item.imgSrc3
	86	+ : item.imgSrc1
84	87	" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }" />
85	88	<img :src="labeledItems[5].label.length >= 4
86		- ? item.imgSrc4
87		- : item.imgSrc2
	89	+ ? item.imgSrc4
	90	+ : item.imgSrc2
88	91	" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }" />
89	92	</button>
90	93	<p>{{ labeledItems[5].label }}</p>
...	...	@@ -96,12 +99,12 @@
96	99	</div>
97	100	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
98	101	<img :src="labeledItems[4].label.length >= 4
99		- ? item.imgSrc3
100		- : item.imgSrc1
	102	+ ? item.imgSrc3
	103	+ : item.imgSrc1
101	104	" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }" />
102	105	<img :src="labeledItems[4].label.length >= 4
103		- ? item.imgSrc4
104		- : item.imgSrc2
	106	+ ? item.imgSrc4
	107	+ : item.imgSrc2
105	108	" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }" />
106	109	</button>
107	110	<p>{{ labeledItems[4].label }}</p>
...	...	@@ -113,12 +116,12 @@
113	116	</div>
114	117	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
115	118	<img :src="labeledItems[3].label.length >= 4
116		- ? item.imgSrc3
117		- : item.imgSrc1
	119	+ ? item.imgSrc3
	120	+ : item.imgSrc1
118	121	" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }" />
119	122	<img :src="labeledItems[3].label.length >= 4
120		- ? item.imgSrc4
121		- : item.imgSrc2
	123	+ ? item.imgSrc4
	124	+ : item.imgSrc2
122	125	" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }" />
123	126	</button>
124	127	<p>{{ labeledItems[3].label }}</p>
...	...	@@ -130,12 +133,12 @@
130	133	</div>
131	134	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
132	135	<img :src="labeledItems[2].label.length >= 4
133		- ? item.imgSrc3
134		- : item.imgSrc1
	136	+ ? item.imgSrc3
	137	+ : item.imgSrc1
135	138	" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }" />
136	139	<img :src="labeledItems[2].label.length >= 4
137		- ? item.imgSrc4
138		- : item.imgSrc2
	140	+ ? item.imgSrc4
	141	+ : item.imgSrc2
139	142	" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }" />
140	143	</button>
141	144	<p>{{ labeledItems[2].label }}</p>
...	...	@@ -151,12 +154,12 @@
151	154	</div>
152	155	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
153	156	<img :src="labeledItems[7].label.length >= 4
154		- ? item.imgSrc3
155		- : item.imgSrc1
	157	+ ? item.imgSrc3
	158	+ : item.imgSrc1
156	159	" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }" />
157	160	<img :src="labeledItems[7].label.length >= 4
158		- ? item.imgSrc4
159		- : item.imgSrc2
	161	+ ? item.imgSrc4
	162	+ : item.imgSrc2
160	163	" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }" />
161	164	</button>
162	165	<p class="long">{{ labeledItems[7].label }}</p>
...	...	@@ -168,12 +171,12 @@
168	171	</div>
169	172	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
170	173	<img :src="labeledItems[8].label.length >= 4
171		- ? item.imgSrc3
172		- : item.imgSrc1
	174	+ ? item.imgSrc3
	175	+ : item.imgSrc1
173	176	" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }" />
174	177	<img :src="labeledItems[8].label.length >= 4
175		- ? item.imgSrc4
176		- : item.imgSrc2
	178	+ ? item.imgSrc4
	179	+ : item.imgSrc2
177	180	" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }" />
178	181	</button>
179	182	<p>{{ labeledItems[8].label }}</p>
...	...	@@ -186,12 +189,12 @@
186	189	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
187	190	data-num="10">
188	191	<img :src="labeledItems[9].label.length >= 4
189		- ? item.imgSrc3
190		- : item.imgSrc1
	192	+ ? item.imgSrc3
	193	+ : item.imgSrc1
191	194	" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }" />
192	195	<img :src="labeledItems[9].label.length >= 4
193		- ? item.imgSrc4
194		- : item.imgSrc2
	196	+ ? item.imgSrc4
	197	+ : item.imgSrc2
195	198	" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }" />
196	199	</button>
197	200	<p>{{ labeledItems[9].label }}</p>
...	...	@@ -207,12 +210,12 @@
207	210	<button class="popTxt" v-for="(item, index) in items" :key="index"
208	211	@click="toggleImageAndShowPopup(index, '11')" data-num="11">
209	212	<img :src="labeledItems[10].label.length >= 4
210		- ? item.imgSrc3
211		- : item.imgSrc1
	213	+ ? item.imgSrc3
	214	+ : item.imgSrc1
212	215	" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }" />
213	216	<img :src="labeledItems[10].label.length >= 4
214		- ? item.imgSrc4
215		- : item.imgSrc2
	217	+ ? item.imgSrc4
	218	+ : item.imgSrc2
216	219	" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }" />
217	220	</button>
218	221	<p class="long">{{ labeledItems[10].label }}</p>
...	...	@@ -430,6 +433,7 @@
430	433
431	434	if (!book_id \|\| !unit_id) {
432	435	console.error("book_id 또는 unit_id가 설정되지 않았습니다.");
	436	+ this.state = "notRegistered";
433	437	return;
434	438	}
435	439	this.fetchImage(unit_id);
...	...	@@ -667,6 +671,14 @@
667	671	// this.$router.push({ name: page, query: { unit_id, book_id } });
668	672	this.$router.push({ name: page });
669	673	},
	674	+ goToPage2(page, unit_id) {
	675	+ this.$router.push({
	676	+ name: page, query: {
	677	+ unit_id: unit_id,
	678	+ },
	679	+ });
	680	+ },
	681	+
670	682	storeLearningId(labeledItems) {
671	683	this.$store.dispatch("updateLearningData", labeledItems);
672	684	this.$store.dispatch("updateLearningId", labeledItems.learning_id); // 단어장에 사용중..

Delete comment