Merge pull request #262 from samtuap/feat/260

feat: 자잘한 디자인 수정 및 기능 추가

src/views/member/login/MemberSignUp.vue

@@ -3,14 +3,16 @@
         <v-card class="modal" style="align-items: center; text-align: center; height: 130px; padding-bottom: 20px; 
         overflow-y: hidden;">
             <v-card-text style="margin-top:10px;">회원가입이 완료되었습니다.</v-card-text>
-            <v-btn @click="handleCloseModal(true)" class="submit-btn" style="border-radius: 50px; width: 100px; margin-bottom:8px">닫기</v-btn>
+            <v-btn @click="handleCloseModal(true)" class="submit-btn"
+                style="border-radius: 50px; width: 100px; margin-bottom:8px; margin-top:-30px;">닫기</v-btn>
         </v-card>
     </v-dialog>
 
     <v-dialog v-model="errorModal" max-width="300px">
         <v-card class="modal" style="align-items: center; text-align: center;">
             <v-card-text>회원가입 중 오류가 발생했습니다. <br /> 다시 시도해주세요.</v-card-text>
-            <v-btn @click="handleCloseModal(false)" class="submit-btn" width="100px" style="border-radius: 50px; margin-bottom: 20px;">닫기</v-btn>
+            <v-btn @click="handleCloseModal(false)" class="submit-btn" width="100px"
+                style="border-radius: 50px; margin-bottom: 20px;">닫기</v-btn>
         </v-card>
     </v-dialog>
 
@@ -25,26 +27,29 @@
             </div>
             <div class="form-group">
                 <label for="phone">전화번호</label>
-                <input type="tel" id="phone" v-model="phone" placeholder="전화번호를 입력하세요" required />
+                <input type="text" id="phone" v-model="phone" @input="formatPhone" placeholder="전화번호를 입력하세요" required />
             </div>
             <div class="form-group">
                 <label for="email">이메일</label>
                 <span style="text-align: left;">{{ email }}</span>
             </div>
             <div class="form-group">
                 <label for="zipcode">우편번호</label>
-                <input type="text" readonly id="zipcode" v-model="zipcode" placeholder="우편번호를 입력하세요 (ex. 03045)" required />
+                <input type="text" readonly id="zipcode" v-model="zipcode" placeholder="우편번호를 입력하세요 (ex. 03045)"
+                    required />
             </div>
             <div class="form-group">
                 <input type="button" class="find-postal" @click="execDaumPostcode" value="우편번호 찾기" />
             </div>
             <div class="form-group">
                 <label for="address">주소</label>
-                <input type="text" readonly id="address" v-model="address" placeholder="도로명 주소를 입력하세요 (ex.  서울 동작구 보라매로)" required />
+                <input type="text" readonly id="address" v-model="address"
+                    placeholder="도로명 주소를 입력하세요 (ex.  서울 동작구 보라매로)" required />
             </div>
             <div class="form-group">
                 <label for="address-detail">상세 주소</label>
-                <input type="text" id="address-detail" v-model="addressDetail" placeholder="상세 주소를 입력하세요 (ex. 401호)" required ref="addressDetail" />
+                <input type="text" id="address-detail" v-model="addressDetail" placeholder="상세 주소를 입력하세요 (ex. 401호)"
+                    required ref="addressDetail" />
             </div>
             <button type="submit" class="submit-btn">회원 가입 하기</button>
         </form>
@@ -80,7 +85,7 @@ export default {
                 email: this.email,
                 socialType: this.socialType // 소셜 타입 추가
             };
-            
+
             try {
                 const token = localStorage.getItem("token"); // 저장된 액세스 토큰 가져오기
                 const response = await axios.post(`${process.env.VUE_APP_API_BASE_URL}/member-service/member/sign-up`, memberData, {
@@ -99,6 +104,19 @@ export default {
                 this.errorModal = true;
             }
         },
+        formatPhone() {
+            // 숫자만 남기기
+            let cleaned = ('' + this.phone).replace(/\D/g, '');
+
+            // 포맷 적용
+            if (cleaned.length <= 3) {
+                this.phone = cleaned;
+            } else if (cleaned.length <= 7) {
+                this.phone = `${cleaned.slice(0, 3)}-${cleaned.slice(3)}`;
+            } else {
+                this.phone = `${cleaned.slice(0, 3)}-${cleaned.slice(3, 7)}-${cleaned.slice(7, 11)}`;
+            }
+        },
         handleCloseModal(isSuccessful) {
             if (isSuccessful) {
                 window.location.href = '/'; // 회원가입 성공 시 홈으로 이동
@@ -140,6 +158,7 @@ export default {
     box-shadow: none;
     border-radius: 10px;
 }
+
 .submit-btn {
     margin-left: 10px;
     margin-top: 8px;
@@ -170,19 +189,23 @@ hr {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
-    align-items: center; /* 라벨과 입력필드를 세로 가운데 정렬 */
+    align-items: center;
+    /* 라벨과 입력필드를 세로 가운데 정렬 */
 }
 
 /* 라벨을 왼쪽에 배치하고 넓이를 지정 */
 label {
     width: 30%;
-    text-align: left; /* 왼쪽 정렬 */
+    text-align: left;
+    /* 왼쪽 정렬 */
     margin-right: 10px;
 }
 
 /* 입력 필드를 오른쪽에 배치하고 넓이를 지정 */
-input, span {
-    width: 65%; /* 입력 필드의 넓이를 조절 */
+input,
+span {
+    width: 65%;
+    /* 입력 필드의 넓이를 조절 */
     padding: 10px;
     font-size: 16px;
     border: 1px solid #ddd;
@@ -191,8 +214,10 @@ input, span {
 
 /* 우편번호 찾기 버튼의 스타일 */
 input[type="button"].find-postal {
-    width: 100%; /* 필요한 만큼의 넓이만 차지하도록 설정 */
-    margin-left: 10px; /* 우편번호 입력 필드와 간격을 줌 */
+    width: 100%;
+    /* 필요한 만큼의 넓이만 차지하도록 설정 */
+    margin-left: 10px;
+    /* 우편번호 입력 필드와 간격을 줌 */
     padding: 10px;
     background-color: #FFE2A6;
     font-size: 18px;
@@ -221,4 +246,3 @@ button.submit-btn:hover {
     background-color: #a3a66a;
 }
 </style>
-

src/views/member/myPage/MemberPhoneUpdate.vue

@@ -22,12 +22,15 @@
                 <div class="label" style="padding-bottom: 20px;">
                     <div class="form-group">
                         <label style="font-size: 16px; font-weight: 400; margin-left: 10%;">현재 전화번호&nbsp;&nbsp;&nbsp;</label>
-                        <input type="password" v-model="currentPhone" placeholder="현재 전화번호를 입력하세요." />
+                        <input type="text" v-model="currentPhone" placeholder="현재 전화번호를 입력하세요."
+                               @input="formatPhoneNumber('currentPhone')" maxlength="13" />
                     </div>
                     <div class="form-group">
                         <label style="font-size: 16px; font-weight: 400; margin-left: 10%;">&nbsp;&nbsp;&nbsp;새 전화번호&nbsp;&nbsp;&nbsp;</label>
-                        <input type="password" v-model="newPhone" placeholder="새 전화번호를 입력하세요."/>
+                        <input type="text" v-model="newPhone" placeholder="새 전화번호를 입력하세요."
+                               @input="formatPhoneNumber('newPhone')" maxlength="13" />
                     </div>
+
                 </div>
                 <div class="footer">
                     <div class="update-container">
@@ -136,6 +139,24 @@ export default {
         };
     },
     methods: {
+            formatPhoneNumber(field) {
+            // 전화번호에서 숫자만 추출
+            let phone = this[field].replace(/\D/g, '');
+            
+            // 11자 초과 시 자르기
+            if (phone.length > 11) {
+                phone = phone.slice(0, 11);
+            }
+
+            // 포맷팅 (000-0000-0000 형태로)
+            if (phone.length < 4) {
+                this[field] = phone;
+            } else if (phone.length < 8) {
+                this[field] = `${phone.slice(0, 3)}-${phone.slice(3)}`;
+            } else {
+                this[field] = `${phone.slice(0, 3)}-${phone.slice(3, 7)}-${phone.slice(7)}`;
+            }
+        },
         // 전화번호 변경
         async fetchMemberInfo() {
             this.loading = true;
@@ -155,7 +176,7 @@ export default {
             }
         },
         async handleUpdatePhone() {
-            if (this.currentPhone !== this.memberInfo.phone) {
+            if (this.currentPhone.replace(/\D/g, '') !== this.memberInfo.phone.replace(/\D/g, '')) {    
                 this.modalMessage = "전화번호가 일치하지 않습니다.";
             } else if (!this.newPhone) {
                 this.modalMessage = "변경하실 전화번호를 입력해주세요.";

src/views/member/myPage/MemberSubscribeManage.vue

@@ -78,7 +78,7 @@
     <v-dialog v-model="failModal" max-width="300px">
         <v-card class="modal" style="align-items: center; text-align: center; height: 160px; padding-bottom: 20px; 
         overflow-y: hidden;">
-            <v-card-text style="margin-top: 10%;">⚠️ 결제 수단 등록에 실패했습니다.</v-card-text>
+            <v-card-text style="margin-top: 5%;">⚠️ 결제 수단 등록에 실패했습니다.</v-card-text>
             <v-btn @click="closeWarningAndReload" class="submit-btn">닫기</v-btn>
         </v-card>
     </v-dialog>

src/views/order/coupon/MemberCouponList.vue

@@ -92,7 +92,7 @@ export default {
                 // 유효기간이 지난 쿠폰을 필터링하고 유효기간이 임박한 순서대로 정렬
                 const currentDateTime = new Date();
                 this.couponList = response.data
-                    .filter(coupon => new Date(coupon.expiration) > currentDateTime)
+                    .filter(coupon => new Date(coupon.expiration) > currentDateTime && coupon.useYn === 'N')
                     .sort((a, b) => new Date(a.expiration) - new Date(b.expiration));
                 this.checkIfLastPage();
             } catch (error) {
@@ -194,7 +194,8 @@ export default {
 
 .coupon-name {
     font-size: 12px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
+    margin-top: -15px;
     white-space: pre-wrap; 
     word-wrap: break-word;
     overflow-wrap: break-word;

src/views/order/payment/PaymentView.vue

@@ -450,7 +450,11 @@ export default {
 
             // 할인 가격
             console.log(this.packageProduct);
-            this.discountedPrice = this.packageProduct.discount == undefined ? 0 : this.packageProduct.discount;
+            if (this.packageProduct.discountActive) {
+            this.discountedPrice = this.packageProduct.discount != undefined ? this.packageProduct.discount : 0;
+        } else {
+            this.discountedPrice = 0;
+        }
 
             // totalAmount 계산
             this.totalAmount = this.packageProduct.price - this.discountedPrice;

src/views/product/farm/FarmCreate.vue

@@ -52,7 +52,8 @@
     <!-- 농장 설명 -->
     <div class="farm-intro">
       <h4 class="left-align">농장 설명을 적어주세요.</h4><br />
-      <textarea v-model="farmIntro" class="intro-textarea"></textarea>
+      <textarea v-model="farmIntro" class="intro-textarea" maxlength="50"></textarea>
+      <div class="char-count">{{ farmIntro.length }}/50</div>
     </div>
 
     <!-- 제출 버튼 -->
@@ -628,4 +629,11 @@ export default {
   font-size: 14px;
   color: #666;
 }
+
+.char-count {
+  font-size: 12px;
+  color: #666;
+  text-align: right;
+  margin-top: 5px;
+}
 </style>

src/views/product/farm/FarmInfoUpdate.vue

@@ -57,7 +57,8 @@
         <div class="farm-intro">
             <h4 class="left-align" v-if="isEditing">농장 설명을 적어주세요.</h4><br />
             <!-- 수정하기 버튼을 눌렀을 때만 textarea 보이기 -->
-            <textarea v-model="farmIntro" class="intro-textarea" v-if="isEditing"></textarea>
+            <textarea v-model="farmIntro" class="intro-textarea" v-if="isEditing" maxlength="50"></textarea>
+            <div class="char-count" v-if="isEditing">{{ farmIntro.length }}/50</div>
             <h4 v-if="!isEditing" class="left-align">농장 한 줄 소개</h4>
             <div class="intro-area" v-if="!isEditing">
                 <p v-if="!isEditing">{{ farmIntro }}</p>
@@ -708,4 +709,11 @@ export default {
 .cancel-btn:hover {
   background-color: #c0c0c0;
 }
+
+.char-count {
+    font-size: 12px;
+    color: #666;
+    text-align: right;
+    margin-top: 5px;
+}
 </style>

src/views/product/farm/FarmPackageList.vue

@@ -25,7 +25,7 @@
           <v-card 
             elevation="0" 
             class="v-card" 
-            style="width: 100%; height: 470px; padding: 0px;"
+            style="width: 100%; height: 100%; padding: 0px;"
             @click="goToPackageDetail(packageProduct.packageId)"
           >
             <v-img
@@ -135,6 +135,7 @@ export default {
     };
   },
   mounted() {
+    this.fetchWishlistItems();
     this.farmId = this.$route.params.farmId;
 
     // 스크롤 이벤트 리스너 추가 (debounce 적용)
@@ -148,6 +149,21 @@ export default {
     window.removeEventListener('scroll', this.scrollPagination);
   },
   methods: {
+    async fetchWishlistItems() {
+            try {
+                const memberId = localStorage.getItem('memberId');
+                if (memberId) {
+                    const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/member-service/wishlist`);
+
+                    const wishlistProductIds = response.data.map(product => product.id);
+                    wishlistProductIds.forEach(id => {
+                        this.wishlistItems[id] = true;
+                    });
+                }
+            } catch (error) {
+                console.error('위시리스트 정보를 가져오는데 실패했습니다:', error);
+            }
+        },
     async loadMorePackages() {
       if (this.isLoading || this.isLastPage) return;
 

src/views/product/farm/farmListSample.vue

@@ -38,6 +38,13 @@
 
             <!-- 카테고리 -->
             <v-row class="category-buttons" justify="center">
+                <v-btn class="cat-btn" :class="{ 'active-cat-btn': category === '전체' }" @click="setCategory('전체')">
+                    <div class="icon-text-wrapper">
+                        <img src="all.png" width="50" height="50"
+                            style="margin-bottom: -18px; transform: scale(0.8);"><br />
+                        <span style="font-size: 14px;">전체</span>
+                    </div>
+                </v-btn>
                 <v-btn class="cat-btn" :class="{ 'active-cat-btn': category === '과일' }" @click="setCategory('과일')">
                     <div class="icon-text-wrapper">
                         <img src="https://simg.ssgcdn.com/trans.ssg?src=/cmpt/banner/202403/2024031818080361517067449706_661.png&amp;w=84&amp;h=84&amp;edit=c&amp;t=bd90620ede2db29ee3ac2b9a4faee217e215ee4b"
@@ -296,7 +303,38 @@ export default {
             this.currentPage = 0;
             this.isLastPage = false;
             this.farmList = [];
-            this.onSearch();
+            if (cat === '전체') {
+                this.loadAllFarms();
+            } else {
+                this.onSearch();
+            }
+        },
+        async loadAllFarms() {
+            try {
+                this.isLoading = true;
+                const params = {
+                    page: this.currentPage,
+                    size: this.pageSize,
+                    sort: this.sortOptionMap.get(this.sortOption),
+                };
+
+                const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/product-service/farm/no-auth`, { params });
+                this.farmList = response.data.content;
+                this.isLastPage = response.data.last;
+
+                for (let i = 0; i < this.farmList.length; ++i) {
+                    this.likes.set(this.farmList[i].id, this.farmList[i].isLiked ? 1 : 0);
+                    this.likeCount.set(this.farmList[i].id, this.farmList[i].favoriteCount);
+
+                    const packageResponse = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/product-service/product/no-auth/for-sale/${this.farmList[i].id}`);
+                    this.farmList[i] = { ...this.farmList[i], packages: packageResponse.data.content.slice(0, 10) };
+                }
+
+                this.isLoading = false;
+            } catch (error) {
+                console.error(error);
+                this.isLoading = false;
+            }
         },
         goToPackage(farmId) {
             console.log(`Navigating to package for farm ID: ${farmId}`);

src/views/product/farmNotice/FarmNoticeCreate.vue

@@ -90,7 +90,7 @@
     <v-dialog v-model="alertModal" max-width="260px">
       <v-card class="modal" style="padding: 10px; padding-right: 20px; text-align: center;">
         <v-card-text>{{ alertMessage }}</v-card-text>
-        <v-btn @click="closeAlertModal" class="submit-btn">close</v-btn>
+        <v-btn @click="closeAlertModal" class="submit-btn">닫기</v-btn>
       </v-card>
     </v-dialog>
   </div>