마이페이지 완료, 아이디/비밀번호찾기->준비중, 각 타입별 소셜 제외 일반회원가입 완료

backend/app/Controllers/Mypage.php

@@ -123,35 +123,39 @@ class Mypage extends ResourceController
 
             // 업데이트할 데이터
             $data = [];
-            
+
             // 공통 필드
-            if (isset($request['NAME'])) {
-                $data['NAME'] = $request['NAME'];
-            }
             if (isset($request['EMAIL'])) {
                 $data['EMAIL'] = $request['EMAIL'];
             }
-            if (isset($request['PHONE'])) {
-                $data['PHONE'] = $request['PHONE'];
-            }
-            if (isset($request['SNS_TYPE'])) {
-                $data['SNS_TYPE'] = $request['SNS_TYPE'];
-            }
-            if (isset($request['SNS_LINK_ID'])) {
-                $data['SNS_LINK_ID'] = $request['SNS_LINK_ID'];
-            }
             if (isset($request['PASSWORD']) && !empty($request['PASSWORD'])) {
                 $data['PASSWORD'] = password_hash($request['PASSWORD'], PASSWORD_DEFAULT);
             }
-            
+
             // 인플루언서 전용 필드
-            if (($memberType === 'INFLUENCER' || $memberType === 'I') && isset($request['NICK_NAME'])) {
-                $data['NICK_NAME'] = $request['NICK_NAME'];
+            if (($memberType === 'INFLUENCER' || $memberType === 'I')) {
+                if (isset($request['PHONE'])) {
+                    $data['PHONE'] = $request['PHONE'];
+                }
+                if (isset($request['NICK_NAME'])) {
+                    $data['NICK_NAME'] = $request['NICK_NAME'];
+                }
+                if (isset($request['SNS_TYPE'])) {
+                    $data['SNS_TYPE'] = $request['SNS_TYPE'];
+                }
+                if (isset($request['SNS_LINK_ID'])) {
+                    $data['SNS_LINK_ID'] = $request['SNS_LINK_ID'];
+                }
             }
-            
+
             // 벤더/브랜드 전용 필드
-            if (($memberType !== 'INFLUENCER' && $memberType !== 'I') && isset($request['COMPANY_NAME'])) {
-                $data['COMPANY_NAME'] = $request['COMPANY_NAME'];
+            if (($memberType !== 'INFLUENCER' && $memberType !== 'I')) {
+                if (isset($request['COMPANY_NAME'])) {
+                    $data['COMPANY_NAME'] = $request['COMPANY_NAME'];
+                }
+                if (isset($request['HP'])) {
+                    $data['HP'] = $request['HP'];
+                }
             }
 
             if (empty($data)) {

components/common/header.vue

@@ -99,7 +99,7 @@
     }
     //console.error(currentUser)
     if (memberType === 'INFLUENCER'){
-      userName.value = currentUser?.NICK_NAME || currentUser?.NAME;
+      userName.value = currentUser?.NICK_NAME || currentUser?.NAME || currentUser?.name;
     } else {
       userName.value =  currentUser?.companyName;
     }
@@ -177,6 +177,12 @@
           parentMenuId: "menu05",
           menuName: "고객센터",
           linkType: "/view/common/cs",
+        },
+        {
+          menuId: "menu06",
+          parentMenuId: "menu06",
+          menuName: "마이페이지",
+          linkType: "/view/common/mypage",
         }
       );
     } else{
@@ -246,6 +252,12 @@
           parentMenuId: "menu05",
           menuName: "고객센터",
           linkType: "/view/common/cs",
+        },
+        {
+          menuId: "menu06",
+          parentMenuId: "menu06",
+          menuName: "마이페이지",
+          linkType: "/view/common/mypage",
         }
       );
     }

pages/auth/join.vue

@@ -107,18 +107,21 @@
               placeholder=""
               class="custom-input"
               v-model="form.formValue8"
+              :maxlength="4"
             ></v-text-field>
             -
             <v-text-field
               placeholder="1234"
               class="custom-input"
               v-model="form.formValue9"
+              :maxlength="4"
             ></v-text-field>
             -
             <v-text-field
               placeholder="5678"
               class="custom-input"
               v-model="form.formValue10"
+              :maxlength="4"
             ></v-text-field>
           </div>
 
@@ -167,7 +170,7 @@
             ></v-text-field>
             <v-btn
               v-if="!useStore.getSnsTempData?.ID"
-              class="ml-2 custom-btn mini btn-white"
+              class="ml-2 custom-btn mini btn-purple"
               @click="checkIdVendor"
               >중복확인</v-btn
             >
@@ -229,18 +232,21 @@
               placeholder=""
               class="custom-input"
               v-model="formVendor.formValue8"
+              :maxlength="4"
             ></v-text-field>
             -
             <v-text-field
               placeholder="1234"
               class="custom-input"
               v-model="formVendor.formValue9"
+              :maxlength="4"
             ></v-text-field>
             -
             <v-text-field
               placeholder="5678"
               class="custom-input"
               v-model="formVendor.formValue10"
+              :maxlength="4"
             ></v-text-field>
           </div>
 
@@ -379,7 +385,7 @@
   /************************
    *    import
    ************************/
-      const { $log, $toast } = useNuxtApp();
+      const { $log, $toast, $eventBus } = useNuxtApp();
 
   /************************
    *    layout setting
@@ -434,14 +440,6 @@
         text: "네이버 블로그",
         value: "naverblog",
       },
-      {
-        text: "네이버 카페",
-        value: "navercafe",
-      },
-      {
-        text: "스마트스토어",
-        value: "smartstore",
-      },
     ], // 소셜 채널 아이템
     formValue7: "", // 소셜 ID 또는 주소
     formValue8: "010", // 휴대폰1
@@ -652,11 +650,30 @@
       }
     }
 
-    // 회원가입 확인 팝업
-    if (!confirm("회원가입을 진행하시겠습니까?")) {
-      return;
-    }
+    let param = {
+      id: "회원가입",
+      title: "회원가입",
+      content: "회원가입을 진행하시겠습니까?",
+      yes: {
+        text: "확인",
+        isProc: true,
+        param: "",
+      },
+      no: {
+        text: "취소",
+        isProc: false,
+      },
+    };
+    
+    // 현재 회원가입 타입 저장
+    currentJoinType.value = id_type;
+    
+    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
+    return;
+  };
 
+  // 실제 회원가입 처리 함수
+  const processJoinMember = async (id_type) => {
     let _req = "";
     let _api = "";
     if (id_type === "influence") {
@@ -713,26 +730,26 @@
           // SNS 가입일 경우
           useStore.setTempData("");
           setTimeout(() => {
-            //useUtil.setPageMove("/");
+            useUtil.setPageMove("/");
           }, 1500);
           return;
         }
         
         // 일반 회원가입 완료 후 메인페이지로 이동
         setTimeout(() => {
-          //useUtil.setPageMove("/");
+          useUtil.setPageMove("/");
         }, 1500);
       })
       .catch((error) => {
         if (error.response) {
-          console.log("status:", error.response.status, "data:", error.response.data);
+          //console.log("status:", error.response.status, "data:", error.response.data);
           // 안전하게 errCode, message 접근
           const errData = error.response.data || {};
           const errCode = errData.errCode || errData.errorCode || errData.code || "";
           const errMsg = errData.message || "알 수 없는 오류가 발생했습니다.";
-          console.log("errCode:", errCode, "message:", errMsg);
+          //console.log("errCode:", errCode, "message:", errMsg);
         } else {
-          console.log("error:", error.message, error.code);
+          //console.log("error:", error.message, error.code);
         }
         if (error.response?.status) {
           fnLoginSet(error.response.data.messages.message);
@@ -744,9 +761,11 @@
       });
   };
 
+  // 현재 회원가입 타입을 저장하는 변수
+  let currentJoinType = ref('');
+
   // 개인정보 약관 모달 함수들
   const handlePrivacyModal = (event) => {
-    console.log('개인정보 약관 클릭됨');
     event.preventDefault();
     showPrivacyModal.value = true;
     // 체크 상태 초기화 (모달에서 동의해야만 체크됨)
@@ -771,7 +790,6 @@
 
   // 제3자 정보 제공 모달 함수들
   const handleThirdPartyModal = (event) => {
-    console.log('제3자 정보 제공 클릭됨');
     event.preventDefault();
     showThirdPartyModal.value = true;
     // 체크 상태 초기화 (모달에서 동의해야만 체크됨)
@@ -828,6 +846,12 @@
       form.value.formValue12 = useStore.getSnsTempData.EMAIL;
       form.value.formValue11 = "direct"; // 이메일 직접입력으로 설정
     }
+
+    // 팝업 확인 이벤트 리스너
+    $eventBus.off('회원가입_PROC_YES');
+    $eventBus.on('회원가입_PROC_YES', () => {
+      processJoinMember(currentJoinType.value);
+    });
   });
 </script>
 

pages/index.vue

@@ -117,8 +117,8 @@
             >
           </div>
           <div class="join--btn--wrap">
-            <v-btn class="custom-btn text--btn">아이디 찾기</v-btn>
-            <v-btn class="custom-btn text--btn">비밀번호 찾기</v-btn>
+            <v-btn class="custom-btn text--btn" @click="showComingSoon">아이디 찾기</v-btn>
+            <v-btn class="custom-btn text--btn" @click="showComingSoon">비밀번호 찾기</v-btn>
             <v-btn class="custom-btn text--btn" @click="location('join')">회원가입</v-btn>
           </div>
           <div class="short--login--wrap" v-if="loginForm.loginType == 'influence'">
@@ -555,6 +555,18 @@
    *    Methods
    ************************/
 
+  const showComingSoon = () => {
+    $eventBus.emit('OPEN_CONFIRM_POP_UP', {
+      id: 'coming-soon',
+      title: '안내',
+      content: '준비중입니다.',
+      yes: {
+        text: '확인',
+        isProc: false
+      }
+    });
+  };
+
   const fnLoginSet = (__MSG) => {
     let param = {
       id: pageId,

pages/view/common/mypage/index.vue

@@ -8,7 +8,7 @@
             {{ getMemberTypeName(userInfo.memberType) === "인플루언서" ? '❤️' : '💜' }}
           </div>
           <div class="profile-info">
-            <h2>{{ userInfo.name }}</h2>
+            <h2>{{ userInfo.companyName || userInfo.nickName || userInfo.name }}</h2>
             <span class="member-type-badge">{{ getMemberTypeName(userInfo.memberType) }}</span>
           </div>
           <button 
@@ -43,7 +43,7 @@
               <label>전화번호</label>
               <span>{{ myInfo.phone || '미등록' }}</span>
             </div>
-            <div class="info-row">
+            <div class="info-row" v-if="userInfo.memberType === 'INFLUENCER'">
               <label>SNS</label>
               <span>{{ myInfo.sns_type || '미등록' }} {{ myInfo.sns_link || '미등록' }}</span>
             </div>
@@ -82,14 +82,23 @@
                 class="edit-input"
               />
             </div>
-            <div class="info-row">
+            <div class="info-row email-row" v-if="userInfo.memberType !== 'INFLUENCER'">
               <label>이메일</label>
-              <input 
-                type="email" 
-                v-model="editForm.email"
-                placeholder="이메일을 입력하세요"
-                class="edit-input"
-              />
+              <div class="email-container">
+                <input 
+                  type="text" 
+                  v-model="editForm.emailLocal"
+                  placeholder="이메일"
+                  class="edit-input email-local"
+                />
+                <span>@</span>
+                <input 
+                  type="text" 
+                  v-model="editForm.emailDomain"
+                  placeholder="이메일"
+                  class="edit-input email-local"
+                />
+              </div>
             </div>
             <div class="info-row" v-if="userInfo.memberType !== 'INFLUENCER'">
               <label>회사명</label>
@@ -100,16 +109,35 @@
                 class="edit-input"
               />
             </div>
-            <div class="info-row">
+            <div class="info-row phone-row">
               <label>전화번호</label>
-              <input 
-                type="tel" 
-                v-model="editForm.phone"
-                placeholder="전화번호를 입력하세요"
-                class="edit-input"
-              />
+              <div class="phone-container">
+                <input 
+                  type="tel" 
+                  v-model="editForm.phone1"
+                  placeholder="010"
+                  class="edit-input phone-part"
+                  maxlength="3"
+                />
+                <span>-</span>
+                <input 
+                  type="tel" 
+                  v-model="editForm.phone2"
+                  placeholder="1234"
+                  class="edit-input phone-part"
+                  maxlength="4"
+                />
+                <span>-</span>
+                <input 
+                  type="tel" 
+                  v-model="editForm.phone3"
+                  placeholder="5678"
+                  class="edit-input phone-part"
+                  maxlength="4"
+                />
+              </div>
             </div>
-            <div class="info-row sns--row">
+            <div class="info-row sns--row" v-if="userInfo.memberType === 'INFLUENCER'">
               <label>SNS</label>
               <select v-model="editForm.snsType" class="edit-input">
                 <option value="">선택하세요</option>
@@ -117,9 +145,7 @@
                 <option value="instagram">인스타그램</option>
                 <option value="naver">네이버 블로그</option>
                 <option value="tiktok">틱톡</option>
-                <option value="facebook">페이스북</option>
                 <option value="twitter">트위터</option>
-                <option value="blog">개인 블로그</option>
               </select>
               <div class="edit-input-container">
                 <input 
@@ -222,9 +248,12 @@ import "@vuepic/vue-datepicker/dist/main.css";
   const editForm = ref({
     name: '',
     nickName: '',
-    email: '',
+    emailLocal: '',
+    emailDomain: null,
     companyName: '',
-    phone: '',
+    phone1: '',
+    phone2: '',
+    phone3: '',
     snsType: '',
     snsLink: '',
     newPassword: '',
@@ -255,12 +284,21 @@ import "@vuepic/vue-datepicker/dist/main.css";
       isEditMode.value = false;
     } else {
       // 편집 시작 - 현재 값으로 폼 초기화
+      const currentEmail = myInfo.value.email || userInfo.value.email || '';
+      const [emailLocal, emailDomain] = currentEmail.includes('@') ? currentEmail.split('@') : [currentEmail, ''];
+      
+      const currentPhone = myInfo.value.phone || userInfo.value.phone || '';
+      const phoneParts = currentPhone.split('-');
+      
       editForm.value = {
         name: myInfo.value.name || userInfo.value.name,
         nickName: myInfo.value.nickName || '',
-        email: myInfo.value.email || userInfo.value.email,
+        emailLocal: emailLocal,
+        emailDomain: emailDomain || null,
         companyName: userInfo.value.companyName || '',
-        phone: myInfo.value.phone || userInfo.value.phone,
+        phone1: phoneParts[0] || '',
+        phone2: phoneParts[1] || '',
+        phone3: phoneParts[2] || '',
         snsType: myInfo.value.sns_type || '',
         snsLink: myInfo.value.sns_link || '',
         newPassword: '',
@@ -292,26 +330,35 @@ import "@vuepic/vue-datepicker/dist/main.css";
     let req = {
       MEMBER_TYPE: useAtStore.auth.memberType,
       MEMBER_SEQ: useAtStore.auth.seq,
-      EMAIL: editForm.value.email,
-      PHONE: editForm.value.phone,
+      EMAIL: `${editForm.value.emailLocal}@${editForm.value.emailDomain || ''}`,
+      COMPANY_NAME: editForm.value.companyName,
       SNS_TYPE: editForm.value.snsType,
       SNS_LINK_ID: editForm.value.snsLink
     }
-
+    
     // 패스워드가 입력된 경우에만 추가
     if (editForm.value.newPassword.trim()) {
       req.PASSWORD = editForm.value.newPassword;
     }
-
+    
+    // 전화번호 조합
+    const combinedPhone = `${editForm.value.phone1}-${editForm.value.phone2}-${editForm.value.phone3}`;
+    
     // 인플루언서인 경우 닉네임 추가
     if (userInfo.value.memberType === 'INFLUENCER') {
+      req.PHONE = combinedPhone;
       req.NICK_NAME = editForm.value.nickName;
     }
 
+    // 인플루언서/벤더&브랜드사 테이블 내 연락처 컬럼명이 상이해 별도로 처리
+    if (userInfo.value.memberType !== 'INFLUENCER') {
+      req.HP = combinedPhone;
+    }
+
     useAxios().post('/mypage/update', req).then(async (res) => {
       // 로컬 데이터 업데이트
-      myInfo.value.email = editForm.value.email;
-      myInfo.value.phone = editForm.value.phone;
+      myInfo.value.email = `${editForm.value.emailLocal}@${editForm.value.emailDomain || ''}`;
+      myInfo.value.phone = combinedPhone;
       myInfo.value.sns_type = editForm.value.snsType;
       myInfo.value.sns_link = editForm.value.snsLink;
       
@@ -320,11 +367,17 @@ import "@vuepic/vue-datepicker/dist/main.css";
       }
 
       // 스토어도 업데이트
-      useAtStore.auth.email = editForm.value.email;
-      useAtStore.auth.phone = editForm.value.phone;
+      useAtStore.auth.email = `${editForm.value.emailLocal}@${editForm.value.emailDomain || ''}`;
+      useAtStore.auth.phone = combinedPhone;
+      if (userInfo.value.memberType !== 'INFLUENCER') {
+        useAtStore.auth.companyName = editForm.value.companyName;
+      }
 
       $toast.success('프로필이 성공적으로 수정되었습니다.');
       isEditMode.value = false;
+      
+      // 페이지 새로고침 (F5)
+      location.reload();
     })
   };
 
@@ -365,11 +418,11 @@ import "@vuepic/vue-datepicker/dist/main.css";
         myInfo.value.id = res.data.ID;
         myInfo.value.name = res.data.NAME;
         myInfo.value.nickName = res.data.NICK_NAME;
-        myInfo.value.phone = res.data.PHONE;
+        myInfo.value.phone = res.data.PHONE || res.data.HP;
         myInfo.value.sns_type = res.data.SNS_TYPE;
         myInfo.value.sns_link = res.data.SNS_LINK_ID;
         myInfo.value.email = res.data.EMAIL;
-        myInfo.value.regDate = res.data.REGDATE;
+        myInfo.value.regDate = res.data.REGDATE || res.data.REG_DATE;
     })
   };
 
@@ -646,5 +699,33 @@ import "@vuepic/vue-datepicker/dist/main.css";
   font-size: 1rem;
 }
 
+/* 이메일 입력 스타일 */
+.email-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.email-local {
+  width: 20%;
+}
+
+.email-domain {
+}
+
+/* 전화번호 입력 스타일 */
+.phone-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 20%;
+}
+
+.phone-part {
+  flex: 1;
+  text-align: center;
+}
+
 
 </style>