diff --git a/backend/controllers/featureController.js b/backend/controllers/featureController.js
index 15bc09c..bab3cee 100644
--- a/backend/controllers/featureController.js
+++ b/backend/controllers/featureController.js
@@ -1,4 +1,4 @@
-const { Feature, ClubFeature, Club } = require('../models');
+const { Feature, ClubFeature, Club, ClubSubscription, SubscriptionPlan, SubscriptionPlanFeature } = require('../models');
 const { Op } = require('sequelize');
 
 // 전체 기능 목록 조회
@@ -20,7 +20,7 @@ exports.getFeatures = async (req, res) => {
 // 사용 가능한 기능 목록 조회
 exports.getAvailableFeatures = async (req, res) => {
   try {
-    const { clubId } = req.query;
+    const { clubId } = req.body;
     
     if (!clubId) {
       return res.status(400).json({ message: '클럽 ID가 필요합니다.' });
@@ -47,10 +47,40 @@ exports.getAvailableFeatures = async (req, res) => {
 
     const activeFeatureIds = activeFeatures.map(af => af.featureId);
 
-    // 기능 목록에 활성화 상태 추가
+    // 현재 구독 중인 플랜에 포함된 기능 조회
+    const { ClubSubscription, SubscriptionPlan, SubscriptionPlanFeature } = require('../models');
+    
+    // 현재 활성화된 구독 조회
+    const activeSubscription = await ClubSubscription.findOne({
+      where: {
+        clubId,
+        status: 'active',
+        endDate: {
+          [Op.gt]: new Date()
+        }
+      },
+      attributes: ['planId']
+    });
+
+    let planFeatureIds = [];
+    
+    // 현재 구독 플랜이 있는 경우, 해당 플랜에 포함된 기능 ID 목록 조회
+    if (activeSubscription) {
+      const planFeatures = await SubscriptionPlanFeature.findAll({
+        where: {
+          planId: activeSubscription.planId
+        },
+        attributes: ['featureId']
+      });
+      
+      planFeatureIds = planFeatures.map(pf => pf.featureId);
+    }
+
+    // 기능 목록에 활성화 상태 및 플랜 포함 여부 추가
     const formattedFeatures = features.map(feature => ({
       ...feature.toJSON(),
-      isActive: activeFeatureIds.includes(feature.id)
+      isActive: activeFeatureIds.includes(feature.id),
+      isIncludedInPlan: planFeatureIds.includes(feature.id)
     }));
 
     res.json(formattedFeatures);
@@ -63,7 +93,7 @@ exports.getAvailableFeatures = async (req, res) => {
 // 활성화된 기능 목록 조회
 exports.getActiveFeatures = async (req, res) => {
   try {
-    const { clubId } = req.query;
+    const { clubId } = req.body;
     
     if (!clubId) {
       return res.status(400).json({ message: '클럽 ID가 필요합니다.' });
@@ -80,10 +110,19 @@ exports.getActiveFeatures = async (req, res) => {
         model: Feature,
         attributes: ['name', 'description']
       }],
-      attributes: ['id', 'featureId', 'purchaseDate', 'expiryDate']
+      attributes: ['id', 'featureId', 'createdAt', 'expiryDate']
     });
 
-    res.json(activeFeatures);
+    // createdAt을 purchaseDate로 매핑
+    const formattedFeatures = activeFeatures.map(feature => ({
+      id: feature.id,
+      featureId: feature.featureId,
+      purchaseDate: feature.createdAt,
+      expiryDate: feature.expiryDate,
+      Feature: feature.Feature
+    }));
+
+    res.json(formattedFeatures);
   } catch (error) {
     console.error('활성화된 기능 목록 조회 오류:', error);
     res.status(500).json({ message: '활성화된 기능 목록을 가져오는 중 오류가 발생했습니다.' });
@@ -93,7 +132,7 @@ exports.getActiveFeatures = async (req, res) => {
 // 기능 구매 내역 조회
 exports.getFeaturePayments = async (req, res) => {
   try {
-    const { clubId } = req.query;
+    const { clubId } = req.body;
     
     if (!clubId) {
       return res.status(400).json({ message: '클럽 ID가 필요합니다.' });
@@ -105,29 +144,41 @@ exports.getFeaturePayments = async (req, res) => {
       },
       include: [{
         model: Feature,
-        attributes: ['name']
+        attributes: ['name', 'price']
       }],
       attributes: [
         'id', 
         'featureId', 
-        'purchaseDate', 
+        'createdAt', 
         'expiryDate', 
-        'amount', 
-        'duration',
-        'status'
+        'enabled'
       ],
-      order: [['purchaseDate', 'DESC']]
+      order: [['createdAt', 'DESC']]
     });
 
-    const formattedPayments = payments.map(payment => ({
-      id: payment.id,
-      featureName: payment.feature.name,
-      purchaseDate: payment.purchaseDate,
-      expiryDate: payment.expiryDate,
-      amount: payment.amount,
-      duration: payment.duration,
-      status: payment.status
-    }));
+    // 기간 계산 (월 단위)
+    const calculateDuration = (startDate, endDate) => {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      const diffTime = Math.abs(end - start);
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      return Math.ceil(diffDays / 30); // 대략적인 월 수 계산
+    };
+
+    const formattedPayments = payments.map(payment => {
+      const duration = calculateDuration(payment.createdAt, payment.expiryDate);
+      const amount = payment.Feature.price * duration;
+      
+      return {
+        id: payment.id,
+        featureName: payment.Feature.name,
+        purchaseDate: payment.createdAt,
+        expiryDate: payment.expiryDate,
+        amount: amount,
+        duration: duration,
+        status: payment.enabled ? 'active' : 'inactive'
+      };
+    });
 
     res.json(formattedPayments);
   } catch (error) {
@@ -172,27 +223,32 @@ exports.purchaseFeature = async (req, res) => {
       return res.status(400).json({ message: '이미 활성화된 기능입니다.' });
     }
 
-    // 구매 금액 계산 (duration에 따른 할인 적용 가능)
-    const amount = feature.price * duration;
-
-    // 기능 구매 기록 생성
-    const purchaseDate = new Date();
+    // 만료일 계산
     const expiryDate = new Date();
-    expiryDate.setMonth(expiryDate.getMonth() + duration);
+    expiryDate.setMonth(expiryDate.getMonth() + parseInt(duration));
 
     const clubFeature = await ClubFeature.create({
       clubId,
       featureId,
-      purchaseDate,
       expiryDate,
-      amount,
-      duration,
-      status: 'active'
+      enabled: true
     });
 
+    // 응답용 객체 생성
+    const purchaseInfo = {
+      id: clubFeature.id,
+      clubId: clubFeature.clubId,
+      featureId: clubFeature.featureId,
+      purchaseDate: clubFeature.createdAt,
+      expiryDate: clubFeature.expiryDate,
+      amount: feature.price * parseInt(duration),
+      duration: parseInt(duration),
+      status: 'active'
+    };
+
     res.json({
       message: '기능 구매가 완료되었습니다.',
-      purchaseInfo: clubFeature
+      purchaseInfo
     });
   } catch (error) {
     console.error('기능 구매 오류:', error);
diff --git a/backend/controllers/publicController.js b/backend/controllers/publicController.js
index 3b69880..2193083 100644
--- a/backend/controllers/publicController.js
+++ b/backend/controllers/publicController.js
@@ -21,6 +21,17 @@ exports.publicEventEntry = async (req, res) => {
     if (event.status === '취소') {
       return res.status(403).json({ message: '취소된 이벤트입니다.' });
     }
+    
+    // 클럽의 구독 활성 여부 확인
+    const clubSubscription = await sequelize.models.ClubSubscription.findOne({
+      where: { clubId: event.clubId, status: 'active' },
+      include: [{ model: sequelize.models.SubscriptionPlan }]
+    });
+    
+    // 구독이 비활성화된 경우 접근 제한
+    if (!clubSubscription) {
+      return res.status(403).json({ message: '클럽의 구독이 비활성화되어 이벤트에 접근할 수 없습니다. 클럽 관리자에게 문의하세요.' });
+    }
 
     let token = null;
     let isAuthenticated = false;
@@ -248,6 +259,26 @@ exports.addPublicGuest = async (req, res) => {
     const event = await Event.findOne({ where: { publicHash } });
     if (!event) return res.status(404).json({ message: '이벤트를 찾을 수 없습니다.' });
     if (event.status === '취소') return res.status(403).json({ message: '취소된 이벤트입니다.' });
+    
+    // 클럽의 회원 수와 구독 플랜의 최대 회원 수 확인
+    const memberCount = await Member.count({ where: { clubId: event.clubId } });
+    
+    // 클럽의 구독 정보 가져오기
+    const clubSubscription = await sequelize.models.ClubSubscription.findOne({
+      where: { clubId: event.clubId, status: 'active' },
+      include: [{ model: sequelize.models.SubscriptionPlan }]
+    });
+    
+    // 구독 플랜이 있고 회원 수가 최대치를 초과하는 경우
+    if (clubSubscription && clubSubscription.SubscriptionPlan) {
+      const maxMembers = clubSubscription.SubscriptionPlan.maxMembers;
+      if (memberCount >= maxMembers) {
+        return res.status(403).json({ 
+          message: `회원 수가 구독 플랜의 최대 허용 인원(${maxMembers}명)을 초과했습니다. 구독 업그레이드가 필요합니다.` 
+        });
+      }
+    }
+    
     // publicAuth 미들웨어로 인증됨
     const member = await Member.create({
       name,
diff --git a/backend/controllers/subscriptionController.js b/backend/controllers/subscriptionController.js
index 277c62f..b46173b 100644
--- a/backend/controllers/subscriptionController.js
+++ b/backend/controllers/subscriptionController.js
@@ -1,4 +1,4 @@
-const { SubscriptionPlan, SubscriptionPlanFeature, ClubSubscription, Feature, Club, User } = require('../models');
+const { SubscriptionPlan, SubscriptionPlanFeature, ClubSubscription, Feature, Club, User, PaymentRequest } = require('../models');
 
 // 전체 구독 목록 조회
 exports.getClubSubscriptions = async (req, res) => {
@@ -45,6 +45,29 @@ exports.getSubscriptionPlans = async (req, res) => {
   }
 };
 
+// 플랜 상세 정보 조회 (포함된 기능 포함)
+exports.getPlanDetail = async (req, res) => {
+  try {
+    const { planId } = req.params;
+    
+    const plan = await SubscriptionPlan.findByPk(planId, {
+      include: [{
+        model: Feature,
+        through: { attributes: ['status'] }
+      }]
+    });
+    
+    if (!plan) {
+      return res.status(404).json({ message: '해당 플랜을 찾을 수 없습니다.' });
+    }
+    
+    res.json(plan);
+  } catch (error) {
+    console.error('Error in getPlanDetail:', error);
+    res.status(500).json({ message: '플랜 상세 정보 조회 중 오류가 발생했습니다.' });
+  }
+};
+
 // 구독 플랜 생성
 exports.createSubscriptionPlan = async (req, res) => {
   try {
@@ -192,7 +215,7 @@ exports.subscribeClub = async (req, res) => {
 // 클럽의 현재 구독 정보 조회
 exports.getClubSubscription = async (req, res) => {
   try {
-    const { clubId } = req.params;
+    const { clubId } = req.body;
     
     const subscription = await ClubSubscription.findOne({
       where: { clubId, status: 'active' },
@@ -238,7 +261,9 @@ exports.getCurrentSubscription = async (req, res) => {
       planId: subscription.SubscriptionPlan.id,
       status: subscription.status,
       startDate: subscription.startDate,
-      endDate: subscription.expiryDate
+      endDate: subscription.endDate,
+      planPrice: subscription.SubscriptionPlan.price,
+      price: subscription.price
     });
   } catch (error) {
     console.error('Error in getCurrentSubscription:', error);
@@ -267,7 +292,368 @@ exports.getSubscriptionPayments = async (req, res) => {
     })));
   } catch (error) {
     console.error('Error in getSubscriptionPayments:', error);
-    res.status(500).json({ message: '결제 내역 조회 중 오류가 발생했습니다.' });
+    res.status(500).json({ message: '구독 결제 내역 조회 중 오류가 발생했습니다.' });
+  }
+};
+
+// 플랜 변경과 추가 기능을 함께 처리
+exports.changeWithFeatures = async (req, res) => {
+  try {
+    const { 
+      clubId, 
+      currentPlanId, 
+      newPlanId, 
+      isUpgrade,
+      refundAmount,
+      proRatedNewPlanPrice,
+      planPriceDifference,
+      features,
+      totalFeaturesPrice,
+      finalAmount,
+      remainingDays
+    } = req.body;
+    
+    // 클럽과 구독 정보 확인
+    const club = await Club.findByPk(clubId);
+    if (!club) {
+      return res.status(404).json({ message: '클럽을 찾을 수 없습니다.' });
+    }
+    
+    const currentSubscription = await ClubSubscription.findOne({
+      where: { 
+        clubId, 
+        planId: currentPlanId, 
+        status: 'active' 
+      }
+    });
+    
+    if (!currentSubscription) {
+      return res.status(404).json({ message: '현재 활성화된 구독을 찾을 수 없습니다.' });
+    }
+    
+    const newPlan = await SubscriptionPlan.findByPk(newPlanId);
+    if (!newPlan) {
+      return res.status(404).json({ message: '선택한 플랜을 찾을 수 없습니다.' });
+    }
+    
+    // 트랜잭션 시작
+    const transaction = await sequelize.transaction();
+    
+    try {
+      if (isUpgrade) {
+        // 업그레이드: 현재 구독 업데이트
+        currentSubscription.planId = newPlanId;
+        currentSubscription.price = newPlan.price;
+        await currentSubscription.save({ transaction });
+        
+        // 결제 기록 생성
+        await Payment.create({
+          clubId,
+          amount: planPriceDifference,
+          description: `플랜 업그레이드: ${currentPlanId} -> ${newPlanId}`,
+          status: 'completed',
+          paymentDate: new Date()
+        }, { transaction });
+      } else {
+        // 다운그레이드: 다음 결제일에 적용될 구독 생성
+        await ClubSubscription.create({
+          clubId,
+          planId: newPlanId,
+          status: 'pending',
+          startDate: currentSubscription.endDate,
+          endDate: new Date(new Date(currentSubscription.endDate).setMonth(
+            new Date(currentSubscription.endDate).getMonth() + 1
+          )),
+          price: newPlan.price
+        }, { transaction });
+      }
+      
+      // 추가 기능 처리
+      if (features && features.length > 0) {
+        for (const feature of features) {
+          // 현재 구독 만료일 계산
+          const expiryDate = new Date(currentSubscription.endDate);
+          
+          // 1개월 초과 구독인 경우 해당 기간만큼 추가
+          if (feature.duration > 1) {
+            expiryDate.setMonth(expiryDate.getMonth() + feature.duration - 1);
+          }
+          
+          // 기능 구매 기록 생성
+          await ClubFeature.create({
+            clubId,
+            featureId: feature.featureId,
+            expiryDate,
+            enabled: true
+          }, { transaction });
+          
+          // 기능 결제 기록 생성
+          await Payment.create({
+            clubId,
+            amount: feature.price,
+            description: `추가 기능 구매: ${feature.featureId} (${feature.duration}개월)`,
+            status: 'completed',
+            paymentDate: new Date()
+          }, { transaction });
+        }
+      }
+      
+      // 트랜잭션 커밋
+      await transaction.commit();
+      
+      res.json({ 
+        message: '플랜 변경 및 추가 기능 구매가 완료되었습니다.',
+        isUpgrade,
+        planChanged: true,
+        featuresAdded: features.length > 0,
+        totalAmount: finalAmount
+      });
+      
+    } catch (error) {
+      // 트랜잭션 롤백
+      await transaction.rollback();
+      throw error;
+    }
+    
+  } catch (error) {
+    console.error('플랜 변경 및 추가 기능 구매 오류:', error);
+    res.status(500).json({ message: '처리 중 오류가 발생했습니다.' });
+  }
+};
+
+// 토스페이먼츠 결제 요청 생성
+exports.requestPayment = async (req, res) => {
+  try {
+    const {
+      clubId,
+      planId,
+      features,
+      totalAmount,
+      planDuration,
+      planChange,
+      currentPlanId,
+      isUpgrade,
+      successUrl,
+      failUrl
+    } = req.body;
+    
+    if (!clubId || !totalAmount) {
+      return res.status(400).json({ message: '필수 데이터가 누락되었습니다.' });
+    }
+    
+    // 클럽 정보 확인
+    const club = await Club.findByPk(clubId);
+    if (!club) {
+      return res.status(404).json({ message: '클럽을 찾을 수 없습니다.' });
+    }
+    
+    // 결제 정보 저장
+    const paymentInfo = await PaymentRequest.create({
+      clubId,
+      planId: planId || null,
+      currentPlanId: currentPlanId || null,
+      isUpgrade: isUpgrade || false,
+      planDuration: planDuration || 1,
+      features: features ? JSON.stringify(features) : null,
+      totalAmount,
+      status: 'pending',
+      orderId: `order_${Date.now()}_${clubId}`,
+      planChange: planChange || false
+    });
+    
+    // 토스페이먼츠에 전송할 데이터 구성
+    const paymentData = {
+      orderId: paymentInfo.orderId,
+      amount: totalAmount,
+      orderName: planId ? `구독 플랜: ${planDuration}개월` : '추가 기능 구매',
+      customerName: club.name,
+      successUrl: successUrl || `${process.env.FRONTEND_URL}/payment/success`,
+      failUrl: failUrl || `${process.env.FRONTEND_URL}/payment/fail`,
+      customerEmail: req.user.email
+    };
+    
+    res.json({
+      paymentData,
+      clientKey: process.env.TOSS_PAYMENTS_CLIENT_KEY
+    });
+    
+  } catch (error) {
+    console.error('결제 요청 생성 오류:', error);
+    res.status(500).json({ message: '결제 요청 생성 중 오류가 발생했습니다.' });
+  }
+};
+
+// 결제 성공 처리
+exports.processPaymentSuccess = async (req, res) => {
+  try {
+    const { orderId, paymentKey, amount } = req.query;
+    
+    // 결제 요청 정보 조회
+    const paymentRequest = await PaymentRequest.findOne({ where: { orderId } });
+    if (!paymentRequest) {
+      return res.status(404).json({ message: '결제 정보를 찾을 수 없습니다.' });
+    }
+    
+    // 금액 확인
+    if (paymentRequest.totalAmount !== parseInt(amount)) {
+      return res.status(400).json({ message: '결제 금액이 일치하지 않습니다.' });
+    }
+    
+    // 토스페이먼츠 API로 결제 승인 요청
+    const tossPaymentsSecretKey = process.env.TOSS_PAYMENTS_SECRET_KEY;
+    const encryptedSecretKey = Buffer.from(`${tossPaymentsSecretKey}:`).toString('base64');
+    
+    const response = await axios({
+      method: 'post',
+      url: 'https://api.tosspayments.com/v1/payments/confirm',
+      headers: {
+        Authorization: `Basic ${encryptedSecretKey}`,
+        'Content-Type': 'application/json'
+      },
+      data: {
+        orderId,
+        amount,
+        paymentKey
+      }
+    });
+    
+    // 결제 요청 상태 업데이트
+    paymentRequest.status = 'completed';
+    paymentRequest.paymentKey = paymentKey;
+    paymentRequest.paymentData = JSON.stringify(response.data);
+    await paymentRequest.save();
+    
+    // 트랜잭션 시작
+    const transaction = await sequelize.transaction();
+    
+    try {
+      // 플랜 변경 처리
+      if (paymentRequest.planId) {
+        if (paymentRequest.planChange) {
+          if (paymentRequest.isUpgrade) {
+            // 업그레이드: 현재 구독 업데이트
+            const currentSubscription = await ClubSubscription.findOne({
+              where: { 
+                clubId: paymentRequest.clubId, 
+                planId: paymentRequest.currentPlanId, 
+                status: 'active' 
+              }
+            });
+            
+            if (currentSubscription) {
+              currentSubscription.planId = paymentRequest.planId;
+              await currentSubscription.save({ transaction });
+            }
+          } else {
+            // 다운그레이드: 다음 결제일에 적용될 구독 생성
+            const currentSubscription = await ClubSubscription.findOne({
+              where: { 
+                clubId: paymentRequest.clubId, 
+                planId: paymentRequest.currentPlanId, 
+                status: 'active' 
+              }
+            });
+            
+            if (currentSubscription) {
+              await ClubSubscription.create({
+                clubId: paymentRequest.clubId,
+                planId: paymentRequest.planId,
+                status: 'pending',
+                startDate: currentSubscription.endDate,
+                endDate: new Date(new Date(currentSubscription.endDate).setMonth(
+                  new Date(currentSubscription.endDate).getMonth() + paymentRequest.planDuration
+                )),
+                price: (await SubscriptionPlan.findByPk(paymentRequest.planId))?.price || 0
+              }, { transaction });
+            }
+          }
+        } else {
+          // 새 구독 생성
+          const startDate = new Date();
+          const endDate = new Date();
+          endDate.setMonth(endDate.getMonth() + paymentRequest.planDuration);
+          
+          await ClubSubscription.create({
+            clubId: paymentRequest.clubId,
+            planId: paymentRequest.planId,
+            status: 'active',
+            startDate,
+            endDate,
+            price: (await SubscriptionPlan.findByPk(paymentRequest.planId))?.price || 0
+          }, { transaction });
+        }
+      }
+      
+      // 추가 기능 처리
+      if (paymentRequest.features) {
+        const features = JSON.parse(paymentRequest.features);
+        
+        for (const feature of features) {
+          const expiryDate = new Date();
+          expiryDate.setMonth(expiryDate.getMonth() + (feature.duration || paymentRequest.planDuration));
+          
+          await ClubFeature.create({
+            clubId: paymentRequest.clubId,
+            featureId: feature.featureId,
+            expiryDate,
+            enabled: true
+          }, { transaction });
+        }
+      }
+      
+      // 결제 기록 생성
+      await Payment.create({
+        clubId: paymentRequest.clubId,
+        amount: paymentRequest.totalAmount,
+        description: paymentRequest.planId 
+          ? `구독 플랜 ${paymentRequest.planDuration}개월` 
+          : '추가 기능 구매',
+        status: 'completed',
+        paymentDate: new Date(),
+        paymentMethod: response.data.method || 'card',
+        paymentKey
+      }, { transaction });
+      
+      // 트랜잭션 커밋
+      await transaction.commit();
+      
+      // 성공 페이지로 리디렉션
+      res.redirect(`${process.env.FRONTEND_URL}/payment/success?orderId=${orderId}`);
+      
+    } catch (error) {
+      // 트랜잭션 롤백
+      await transaction.rollback();
+      console.error('결제 처리 오류:', error);
+      res.redirect(`${process.env.FRONTEND_URL}/payment/fail?message=결제는 성공했지만 처리 중 오류가 발생했습니다.`);
+    }
+    
+  } catch (error) {
+    console.error('결제 성공 처리 오류:', error);
+    res.redirect(`${process.env.FRONTEND_URL}/payment/fail?message=결제 처리 중 오류가 발생했습니다.`);
+  }
+};
+
+// 결제 실패 처리
+exports.processPaymentFail = async (req, res) => {
+  try {
+    const { orderId, message } = req.query;
+    
+    // 결제 요청 정보 조회 및 업데이트
+    if (orderId) {
+      const paymentRequest = await PaymentRequest.findOne({ where: { orderId } });
+      if (paymentRequest) {
+        paymentRequest.status = 'failed';
+        paymentRequest.failReason = message || '사용자가 결제를 취소했습니다.';
+        await paymentRequest.save();
+      }
+    }
+    
+    // 실패 페이지로 리디렉션
+    res.redirect(`${process.env.FRONTEND_URL}/payment/fail?message=${encodeURIComponent(message || '결제가 취소되었습니다.')}`);
+    
+  } catch (error) {
+    console.error('결제 실패 처리 오류:', error);
+    res.redirect(`${process.env.FRONTEND_URL}/payment/fail?message=결제 취소 처리 중 오류가 발생했습니다.`);
   }
 };
 
diff --git a/backend/models/PaymentRequest.js b/backend/models/PaymentRequest.js
new file mode 100644
index 0000000..6fc49e7
--- /dev/null
+++ b/backend/models/PaymentRequest.js
@@ -0,0 +1,82 @@
+const { DataTypes } = require('sequelize');
+const { sequelize } = require('../config/database');
+
+const PaymentRequest = sequelize.define('PaymentRequest', {
+  id: {
+    type: DataTypes.INTEGER,
+    primaryKey: true,
+    autoIncrement: true,
+    comment: '결제 요청 고유 ID'
+  },
+  clubId: {
+    type: DataTypes.INTEGER,
+    allowNull: false,
+    comment: '클럽 ID'
+  },
+  planId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    comment: '선택한 구독 플랜 ID'
+  },
+  currentPlanId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    comment: '현재 구독 중인 플랜 ID'
+  },
+  isUpgrade: {
+    type: DataTypes.BOOLEAN,
+    defaultValue: false,
+    comment: '업그레이드 여부 (true: 업그레이드, false: 다운그레이드 또는 신규)'
+  },
+  planDuration: {
+    type: DataTypes.INTEGER,
+    defaultValue: 1,
+    comment: '구독 기간 (개월 단위)'
+  },
+  features: {
+    type: DataTypes.TEXT,
+    allowNull: true,
+    comment: '추가 기능 목록 (JSON 문자열)'
+  },
+  totalAmount: {
+    type: DataTypes.INTEGER,
+    allowNull: false,
+    comment: '총 결제 금액 (원)'
+  },
+  status: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    defaultValue: 'pending',
+    comment: '결제 상태 (pending: 대기, success: 성공, failed: 실패, cancelled: 취소)'
+  },
+  orderId: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true,
+    comment: '주문 고유 ID'
+  },
+  paymentKey: {
+    type: DataTypes.STRING,
+    allowNull: true,
+    comment: '결제 서비스 제공자의 결제 키'
+  },
+  paymentData: {
+    type: DataTypes.TEXT,
+    allowNull: true,
+    comment: '결제 관련 추가 데이터 (JSON 문자열)'
+  },
+  planChange: {
+    type: DataTypes.BOOLEAN,
+    defaultValue: false,
+    comment: '플랜 변경 여부 (true: 플랜 변경, false: 신규 구독 또는 기능만 추가)'
+  },
+  failReason: {
+    type: DataTypes.STRING,
+    allowNull: true,
+    comment: '결제 실패 사유'
+  }
+}, {
+  timestamps: true
+});
+
+module.exports = PaymentRequest;
diff --git a/backend/models/index.js b/backend/models/index.js
index 717116f..60dfe82 100644
--- a/backend/models/index.js
+++ b/backend/models/index.js
@@ -16,6 +16,7 @@ const SubscriptionPlanFeature = require('./SubscriptionPlanFeature');
 const ClubSubscription = require('./ClubSubscription');
 const ActivityLog = require('./activityLog');
 const EventTeamMember = require('./EventTeamMember');
+const PaymentRequest = require('./PaymentRequest');
 
 // 모델 동기화 함수
 const syncModels = async () => {
@@ -52,6 +53,7 @@ const db = {
   ClubSubscription,
   ActivityLog,
   EventTeamMember,
+  PaymentRequest,
 };
 Object.values(db).forEach(model => {
   if (model.associate) model.associate(db);
@@ -75,5 +77,6 @@ module.exports = {
   ClubSubscription,
   ActivityLog,
   EventTeamMember,
+  PaymentRequest,
   syncModels
 };
diff --git a/backend/routes/subscriptionRoutes.js b/backend/routes/subscriptionRoutes.js
index 8fe9e5f..13fc40a 100644
--- a/backend/routes/subscriptionRoutes.js
+++ b/backend/routes/subscriptionRoutes.js
@@ -1,23 +1,32 @@
 const express = require('express');
 const router = express.Router();
 const subscriptionController = require('../controllers/subscriptionController');
-const authMiddleware = require('../middleware/auth');
+const { authenticateJWT } = require('../middleware/authMiddleware');
 // 구독 목록 조회
-router.get('/', authMiddleware, subscriptionController.getClubSubscriptions);
+router.get('/', authenticateJWT, subscriptionController.getClubSubscriptions);
 
 // 구독 플랜 관리 (관리자 전용)
-router.get('/plans', authMiddleware, subscriptionController.getSubscriptionPlans);
-router.post('/plans', authMiddleware, subscriptionController.createSubscriptionPlan);
-router.put('/plans/:id', authMiddleware, subscriptionController.updateSubscriptionPlan);
-router.delete('/plans/:id', authMiddleware, subscriptionController.deleteSubscriptionPlan);
-router.get('/plans/:planId/subscriptions', authMiddleware, subscriptionController.getPlanSubscriptions);
+router.get('/plans', authenticateJWT, subscriptionController.getSubscriptionPlans);
+router.post('/plans', authenticateJWT, subscriptionController.createSubscriptionPlan);
+router.put('/plans/:id', authenticateJWT, subscriptionController.updateSubscriptionPlan);
+router.delete('/plans/:id', authenticateJWT, subscriptionController.deleteSubscriptionPlan);
+router.get('/plans/:planId/subscriptions', authenticateJWT, subscriptionController.getPlanSubscriptions);
+
+// 플랜 상세 정보 조회 (포함된 기능 포함)
+router.get('/plans/:planId', authenticateJWT, subscriptionController.getPlanDetail);
 
 // 클럽 구독 관리
-router.post('/subscribe', authMiddleware, subscriptionController.subscribeClub);
-router.get('/clubs/:clubId', authMiddleware, subscriptionController.getClubSubscription);
+router.post('/subscribe', authenticateJWT, subscriptionController.subscribeClub);
+router.post('/clubs', authenticateJWT, subscriptionController.getClubSubscription);
 
 // 클럽 구독 정보 및 결제 내역 (POST, 클럽 기준)
-router.post('/current', authMiddleware, subscriptionController.getCurrentSubscription);
-router.post('/payments', authMiddleware, subscriptionController.getSubscriptionPayments);
+router.post('/current', authenticateJWT, subscriptionController.getCurrentSubscription);
+router.post('/payments', authenticateJWT, subscriptionController.getSubscriptionPayments);
+router.post('/change-with-features', authenticateJWT, subscriptionController.changeWithFeatures);
+
+// 토스페이먼츠 결제 관련 라우트
+router.post('/payment/request', authenticateJWT, subscriptionController.requestPayment);
+router.post('/payment/success', subscriptionController.processPaymentSuccess);
+router.post('/payment/fail', subscriptionController.processPaymentFail);
 
 module.exports = router;
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6ddd0e2..4ddb06a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "@fullcalendar/vue3": "^6.1.15",
         "@primeuix/themes": "^1.0.3",
         "@primevue/themes": "^4.3.3",
+        "@tosspayments/payment-sdk": "^1.9.1",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "axios": "^1.8.2",
@@ -1459,6 +1460,45 @@
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "license": "MIT"
     },
+    "node_modules/@tosspayments/payment__types": {
+      "version": "1.69.0",
+      "resolved": "https://registry.npmjs.org/@tosspayments/payment__types/-/payment__types-1.69.0.tgz",
+      "integrity": "sha512-EbU36vLEWfhRpX/g4V0DyRiUmTkNeeVDYjJamD9aJiLmRbLl9PVdXi5QOQTMYma2RGRgA8drHY4yDMsjvKFwCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tosspayments/sdk-constants": "^0.2.2"
+      }
+    },
+    "node_modules/@tosspayments/payment-sdk": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@tosspayments/payment-sdk/-/payment-sdk-1.9.1.tgz",
+      "integrity": "sha512-OzDG2kOGOrb5JRvprR8R/mQzXFNnLW/6X09uLY1KF4+O7ASu6LrMoFCERd+WeAJMtRAARkclGDcJ/GSu+OHzzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tosspayments/payment__types": "1.69.0"
+      }
+    },
+    "node_modules/@tosspayments/sdk-constants": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@tosspayments/sdk-constants/-/sdk-constants-0.2.2.tgz",
+      "integrity": "sha512-qTIcD9JnVtN65/yiW5sPAlvK5fpQtDluv4IEyslubncbQLQKE+ePSnGZU1fLNPxcchv6QTnwmgj9Ndm6EN/Ymg==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^2.11.2"
+      }
+    },
+    "node_modules/@tosspayments/sdk-constants/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1b17d80..da89795 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "@fullcalendar/vue3": "^6.1.15",
     "@primeuix/themes": "^1.0.3",
     "@primevue/themes": "^4.3.3",
+    "@tosspayments/payment-sdk": "^1.9.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "axios": "^1.8.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 73e57b9..4e21c96 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -86,11 +86,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, provide } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, provide, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import AppHeader from './components/AppHeader.vue';
-import AppPublicLayout from './layouts/AppPublicLayout.vue';
 import apiClient from './services/api';
+import authService from './services/authService';
+import { useClubStore } from './stores/clubStore';
+import AppPublicLayout from './layouts/AppPublicLayout.vue';
+import AppHeader from './components/AppHeader.vue';
 
 const route = useRoute();
 const layoutComponent = computed(() => route.meta.layout === 'public' ? AppPublicLayout : 'div');
@@ -98,7 +100,9 @@ const isPublicLayout = computed(() => {
   // 라우트 meta.layout이 public이거나, 경로가 /public/로 시작하면 public 레이아웃으로 간주
   return route.meta.layout === 'public' || route.path.startsWith('/public/');
 });
-import authService from './services/authService';
+
+// 클럽 스토어 초기화
+const clubStore = useClubStore();
 
 // 상태 변수
 const user = ref(null);
@@ -188,16 +192,21 @@ const fetchClubs = async () => {
 const fetchClubInfo = async () => {
   if (isPublicLayout.value) return;
   try {
-    const response = await apiClient.post(`/api/club`, { clubId: selectedClubId.value ?? clubs.value[0].id });
+    // 클럽 스토어를 통해 클럽 정보 가져오기
+    const clubId = selectedClubId.value ?? (clubs.value.length > 0 ? clubs.value[0].id : null);
+    if (!clubId) return;
+    
+    const clubData = await clubStore.fetchClubById(clubId);
 
-    if (response.data) {
+    if (clubData) {
       selectedClub.value = {
-        id: response.data.id,
-        name: response.data.name,
-        location: response.data.location,
+        id: clubData.id,
+        name: clubData.name,
+        location: clubData.location,
+        subscription: clubData.subscription || null
       };
-      memberCount.value = response.data.memberCount;
-      ownerName.value = response.data.ownerName;
+      memberCount.value = clubData.memberCount;
+      ownerName.value = clubData.ownerName;
     }
   } catch (error) {
     console.error('클럽 정보 가져오기 오류:', error);
@@ -287,7 +296,16 @@ const loadMenuItems = async () => {
           });
 
         menuItems.value = groupMenus;
-        singleMenuItems.value = singleMenus;
+        
+        // 구독관리 메뉴 하드코딩으로 추가
+        singleMenuItems.value = [
+          ...singleMenus,
+          {
+            label: '구독관리',
+            icon: 'pi pi-credit-card',
+            to: '/club/subscription'
+          }
+        ];
       } else {
         menuItems.value = [];
         singleMenuItems.value = [];
diff --git a/frontend/src/components/event/EventDetailsDialog.vue b/frontend/src/components/event/EventDetailsDialog.vue
index 98973df..5fdbf09 100644
--- a/frontend/src/components/event/EventDetailsDialog.vue
+++ b/frontend/src/components/event/EventDetailsDialog.vue
@@ -12,7 +12,7 @@
         <Tab value="기본정보"><i class="pi pi-info-circle mr-2" />기본정보</Tab>
         <Tab value="참가자 관리"><i class="pi pi-users mr-2" />참가자 관리</Tab>
         <Tab value="점수 관리"><i class="pi pi-chart-bar mr-2" />점수 관리</Tab>
-        <Tab value="팀 편성"><i class="pi pi-sitemap mr-2" />팀 편성</Tab>
+        <Tab v-if="hasTeamFeature" value="팀 편성"><i class="pi pi-sitemap mr-2" />팀 편성</Tab>
       </TabList>
       <TabPanels>
       <!-- 기본 정보 탭 -->
@@ -77,7 +77,7 @@
           />
         </TabPanel>
         <!-- 팀 편성 탭 -->
-        <TabPanel value="팀 편성">
+        <TabPanel v-if="hasTeamFeature" value="팀 편성">
           <TeamGeneration :participants="confirmedParticipants" :teams="teams" @save-teams="handleSaveTeams" />
         </TabPanel>
       </TabPanels>
@@ -105,6 +105,8 @@ const props = defineProps({
   getStatusName: { type: Function, required: true },
   getStatusSeverity: { type: Function, required: true },
   formatDate: { type: Function, required: true },
+  // 팀 기능 사용 권한 여부
+  hasTeamFeature: { type: Boolean, default: false },
 
   // (권장) 상태명이 매칭 안 될 경우 실제 상태 문자열 반환
   // getStatusName 함수 예시:
@@ -139,11 +141,16 @@ const hideDialog = () => {
 // 팀 생성 결과 저장
 const teams = ref([]);
 
-// 이벤트 상세 다이얼로그가 열릴 때마다 팀 목록 불러오기
+// 이벤트 상세 다이얼로그가 열릴 때마다 팀 목록 불러오기 (팀 기능 사용 권한이 있는 경우에만)
 watch(() => eventModel.value.id, async (eventId) => {
-  if (eventId) {
-    const latestTeams = await teamService.getTeams(eventId);
-    teams.value = latestTeams;
+  if (eventId && props.hasTeamFeature) {
+    try {
+      const latestTeams = await teamService.getTeams(eventId);
+      teams.value = latestTeams;
+    } catch (error) {
+      console.error('팀 정보를 불러오는 중 오류가 발생했습니다:', error);
+      teams.value = [];
+    }
   }
 }, { immediate: true });
 
@@ -166,6 +173,12 @@ import { useToast } from 'primevue/usetoast';
 const toast = useToast();
 
 async function handleSaveTeams(savedTeams) {
+  // 팀 기능 사용 권한이 없는 경우 저장하지 않음
+  if (!props.hasTeamFeature) {
+    toast.add({ severity: 'error', summary: '권한 없음', detail: '팀 기능을 사용할 수 있는 권한이 없습니다.', life: 3000 });
+    return;
+  }
+  
   const eventId = eventModel.value.id;
   try {
     await teamService.saveTeams(eventId, savedTeams);
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 4e2edd8..604bfab 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -23,6 +23,10 @@ const UserClubCreate = () => import('@/views/club/ClubCreate.vue');
 // 구독 관리 컴포넌트 import
 const ClubSubscriptionManagement = () => import('@/views/club/subscription/SubscriptionManagement.vue');
 
+// 결제 관련 컴포넌트 import
+const PaymentSuccess = () => import('@/views/payment/PaymentSuccess.vue');
+const PaymentFail = () => import('@/views/payment/PaymentFail.vue');
+
 const EventPublicPage = () => import('@/views/event/EventPublicPage.vue');
 
 const routes = [
@@ -137,6 +141,20 @@ const routes = [
     name: 'UserClubCreate', 
     component: () => import('@/views/club/ClubCreate.vue'),
     meta: { requiresAuth: true }
+  },
+  
+  // 결제 관련 경로
+  {
+    path: '/payment/success',
+    name: 'PaymentSuccess',
+    component: PaymentSuccess,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/payment/fail',
+    name: 'PaymentFail',
+    component: PaymentFail,
+    meta: { requiresAuth: true }
   }
 ];
 
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index fcedce1..0d149a0 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -37,9 +37,42 @@ apiClient.interceptors.response.use(
     if (error.response && error.response.status === 401) {
       // 로컬 스토리지에서 토큰 제거
       localStorage.removeItem('token');
-      // 로그인 페이지로 리디렉션
-      window.location.href = '/login';
+      localStorage.removeItem('user');
+      
+      // 현재 페이지가 이미 로그인 페이지가 아닌 경우에만 리디렉션
+      const currentPath = window.location.pathname;
+      if (currentPath !== '/login') {
+        // 로그인 페이지로 리디렉션
+        window.location.href = '/login';
+      }
     }
+    
+    // 403 에러 (권한 없음) 처리
+    if (error.response && error.response.status === 403) {
+      // 구독 관련 오류 메시지인지 확인
+      const errorMessage = error.response.data?.error || '';
+      if (errorMessage.includes('기능을 사용할 수 없습니다') || 
+          errorMessage.includes('권한이 없습니다')) {
+        
+        // 사용자에게 구독 안내 표시
+        import('primevue/usetoast').then(({ useToast }) => {
+          const toast = useToast();
+          toast.add({
+            severity: 'warn',
+            summary: '권한 없음',
+            detail: '해당 기능을 사용하려면 구독이 필요합니다. 구독 페이지로 이동합니다.',
+            life: 5000
+          });
+        });
+        
+        // 3초 후 구독 페이지로 이동
+        setTimeout(() => {
+          const clubId = localStorage.getItem('clubId');
+          window.location.href = `/club/subscription`;
+        }, 3000);
+      }
+    }
+    
     return Promise.reject(error);
   }
 );
diff --git a/frontend/src/services/eventService.js b/frontend/src/services/eventService.js
index dabae8e..f3bd499 100644
--- a/frontend/src/services/eventService.js
+++ b/frontend/src/services/eventService.js
@@ -19,8 +19,13 @@ export default {
       const response = await apiClient.post('/api/club/events', { clubId });
       return response.data;
     } catch (error) {
-      if (error.response && error.response.data && error.response.data.message) {
-        throw new Error(error.response.data.message);
+      // 원래 오류 객체 그대로 전달하여 HTTP 상태 코드 확인 가능하게 함
+      if (error.response) {
+        console.error('이벤트 목록 오류:', {
+          status: error.response.status,
+          data: error.response.data
+        });
+        throw error;
       }
       throw error;
     }
diff --git a/frontend/src/stores/clubStore.js b/frontend/src/stores/clubStore.js
index 3c795bd..9c49e9b 100644
--- a/frontend/src/stores/clubStore.js
+++ b/frontend/src/stores/clubStore.js
@@ -6,7 +6,9 @@ export const useClubStore = defineStore('club', {
     clubs: [],
     selectedClub: null,
     loading: false,
-    error: null
+    error: null,
+    subscription: null,
+    subscriptionFeatures: []
   }),
 
   actions: {
@@ -22,13 +24,43 @@ export const useClubStore = defineStore('club', {
         this.loading = false;
       }
     },
+    
+    // 클럽의 구독 정보 가져오기
+    async fetchClubSubscription(clubId) {
+      try {
+        const response = await apiClient.post('/api/subscriptions/clubs', { clubId });
+        this.subscription = response.data;
+        // 구독 기능 정보 처리
+        if (response.data && response.data.SubscriptionPlan && response.data.SubscriptionPlan.Features) {
+          this.subscriptionFeatures = response.data.SubscriptionPlan.Features;
+        }
+        
+        return response.data;
+      } catch (error) {
+        console.error('구독 정보를 가져오는 중 오류가 발생했습니다:', error);
+        this.subscription = null;
+        this.subscriptionFeatures = [];
+        return null;
+      }
+    },
 
     async fetchClubById(clubId) {
       this.loading = true;
       try {
-        const response = await apiClient.post(`/api/club`, { clubId });
-        this.selectedClub = response.data;
-        return response.data;
+        // 클럽 정보와 구독 정보를 동시에 가져오기
+        const [clubResponse, subscriptionResponse] = await Promise.all([
+          apiClient.post(`/api/club`, { clubId }),
+          this.fetchClubSubscription(clubId)
+        ]);
+        
+        // 클럽 정보와 구독 정보 합치기
+        const clubData = clubResponse.data;
+        if (subscriptionResponse) {
+          clubData.subscription = subscriptionResponse;
+          clubData.subscriptionFeatures = subscriptionResponse.SubscriptionPlan?.Features || [];
+        }
+        this.selectedClub = clubData;
+        return clubData;
       } catch (error) {
         this.error = error.response?.data?.message || '클럽 정보를 가져오는데 실패했습니다.';
         throw error;
@@ -44,5 +76,26 @@ export const useClubStore = defineStore('club', {
     clearSelectedClub() {
       this.selectedClub = null;
     }
+  },
+
+  getters: {
+    // 현재 구독 정보 가져오기
+    getCurrentSubscription() {
+      return this.subscription;
+    },
+    
+    // 특정 기능 사용 권한 확인
+    hasFeature() {
+      return (featureCode) => {
+        if (!this.subscriptionFeatures || this.subscriptionFeatures.length === 0) {
+          return false;
+        }
+        return this.subscriptionFeatures.some(feature => 
+          feature.code === featureCode && feature.status === 'active'
+        );
+      };
+    },
+    
+
   }
 });
diff --git a/frontend/src/views/club/EventManagement.vue b/frontend/src/views/club/EventManagement.vue
index f25913c..d2a1ea0 100644
--- a/frontend/src/views/club/EventManagement.vue
+++ b/frontend/src/views/club/EventManagement.vue
@@ -83,6 +83,7 @@
       :getStatusSeverity="getStatusSeverity"
       :formatDate="formatDate"
       :availableMembers="clubMembers"
+      :hasTeamFeature="hasTeamFeature"
       @edit="editFromDetails"
       @hide="hideDialog"
       @participant-updated="fetchEvents"
@@ -105,11 +106,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useRoute } from 'vue-router';
 import { useClubStore } from '@/stores/clubStore';
 import eventService from '@/services/eventService';
+import apiClient from '@/services/api';
 import dayjs from 'dayjs';
 import clubService from '@/services/clubService';
 import ScoreManagement from '@/components/event/ScoreManagement.vue';
@@ -142,6 +144,9 @@ const filters = ref({
   startDate: { value: null, matchMode: 'equals' }
 });
 
+// 팀 기능 사용 권한 여부
+const hasTeamFeature = computed(() => clubStore.hasFeature('team_create'));
+
 // 이벤트 유형 옵션
 const eventTypeOptions = [
   { name: '정기전', value: '정기전' },
@@ -156,17 +161,22 @@ const clubMembers = ref([]);
 
 // 이벤트 목록 가져오기
 const fetchEvents = async () => {
-  loading.value = true;
   try {
-    const response = await eventService.getEvents(clubId.value);
-    events.value = response;
+    loading.value = true;
+    const data = await eventService.getEvents(clubId.value);
+    events.value = data;
   } catch (error) {
-    toast.add({
-      severity: 'error',
-      summary: '오류',
-      detail: '이벤트 목록을 가져오는데 실패했습니다.',
-      life: 3000
-    });
+    console.error('이벤트 목록 로드 실패:', error);
+    
+    // 403 오류는 중앙에서 처리하민로 여기서는 기타 오류만 처리
+    if (!error.response) {
+      toast.add({
+        severity: 'error',
+        summary: '오류',
+        detail: '이벤트 목록을 불러오는 데 실패했습니다.',
+        life: 3000
+      });
+    }
   } finally {
     loading.value = false;
   }
diff --git a/frontend/src/views/club/subscription/SubscriptionManagement.vue b/frontend/src/views/club/subscription/SubscriptionManagement.vue
index 239c4d7..80f9611 100644
--- a/frontend/src/views/club/subscription/SubscriptionManagement.vue
+++ b/frontend/src/views/club/subscription/SubscriptionManagement.vue
@@ -10,60 +10,482 @@
         <p><strong>상태:</strong> {{ currentSubscription.status }}</p>
         <p><strong>시작일:</strong> {{ formatDate(currentSubscription.startDate) }}</p>
         <p><strong>만료일:</strong> {{ formatDate(currentSubscription.endDate) }}</p>
-      </div>
-    </div>
-
-    <!-- 구독 플랜 목록 -->
-    <div class="subscription-plans">
-      <h3>이용 가능한 플랜</h3>
-      <div class="plans-grid">
-        <div v-for="plan in plans" :key="plan.id" class="plan-card">
-          <h4>{{ plan.name }}</h4>
-          <p class="price">월 {{ formatPrice(plan.price) }}원</p>
-          <ul class="features">
-            <li v-for="feature in plan.features" :key="feature.id">
-              {{ feature.name }}
+        <p v-if="currentSubscription.planPrice"><strong>월 구독료:</strong> {{ formatPrice(currentSubscription.planPrice) }}원</p>
+        <div v-if="activeFeatures.length > 0">
+          <p><strong>활성화된 추가 기능:</strong></p>
+          <ul class="active-features-list">
+            <li v-for="feature in activeFeatures" :key="feature.featureId">
+              {{ getFeatureName(feature.featureId) }} (만료일: {{ formatDate(feature.expiryDate) }})
             </li>
           </ul>
+        </div>
+        <p><strong>총 결제 금액:</strong> {{ formatPrice(calculateTotalPrice()) }}원/월</p>
+      </div>
+    </div>
+
+    <!-- 구독 플랜 변경 섹션 -->
+    <div class="subscription-section">
+      <div class="section-header">
+        <h3>구독 플랜 {{ currentSubscription ? '변경' : '선택' }}</h3>
+        <button 
+          class="toggle-btn" 
+          @click="showPlans = true"
+        >
+          플랜 {{ currentSubscription ? '변경하기' : '선택하기' }}
+        </button>
+      </div>
+
+      <div v-if="showPlans || isSelectingPlan" class="plans-grid">
+        <div 
+          v-for="plan in plans" 
+          :key="plan.id" 
+          class="plan-card"
+          :class="{ 'selected': selectedPlan?.id === plan.id, 'current': isCurrentPlan(plan.id) }"
+          @click="selectPlan(plan)"
+        >
+          <div class="plan-header">
+            <h4>{{ plan.name }}</h4>
+            <p class="price">월 {{ formatPrice(plan.price) }}원</p>
+          </div>
+          
+          <div class="plan-description">
+            <p>{{ plan.description || '해당 플랜에 대한 설명이 없습니다.' }}</p>
+          </div>
+          
+          <div class="plan-details">
+            <div class="plan-detail-item">
+              <span class="detail-label">최대 회원수:</span>
+              <span class="detail-value">{{ plan.maxMembers || '제한 없음' }}</span>
+            </div>
+            <div class="plan-detail-item">
+              <span class="detail-label">구독 기간:</span>
+              <span class="detail-value">월간</span>
+            </div>
+          </div>
+          
+          <div class="plan-features">
+            <h5>포함된 기능</h5>
+            <ul class="features">
+              <li v-for="feature in plan.Features" :key="feature.id" class="feature-item">
+                <i class="pi pi-check"></i>
+                <div class="feature-info">
+                  <span class="feature-name">{{ feature.name }}</span>
+                  <span class="feature-description">{{ feature.description }}</span>
+                </div>
+              </li>
+              <li v-if="!plan.Features || plan.Features.length === 0" class="no-features">
+                <i class="pi pi-info-circle"></i> 포함된 기능이 없습니다.
+              </li>
+            </ul>
+          </div>
+          
           <button 
-            class="subscribe-btn"
-            :disabled="isCurrentPlan(plan.id)"
-            @click="subscribeToPlan(plan.id)">
-            {{ isCurrentPlan(plan.id) ? '현재 이용중' : '구독하기' }}
+            class="select-plan-btn" 
+            :class="{ 'current-plan': isCurrentPlan(plan.id) }" 
+            @click="handlePlanSelection(plan)"
+          >
+            {{ isCurrentPlan(plan.id) ? '현재 이용중' : '선택하기' }}
           </button>
         </div>
       </div>
+
+      <div v-if="selectedPlan && selectedPlan.id !== (currentSubscription?.planId || null)" class="selected-plan-info">
+        <h4>선택한 플랜: {{ selectedPlan.name }}</h4>
+        <div class="plan-price-details">
+          <p class="plan-price">
+            <span class="monthly-price">월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원</span>
+            <span v-if="selectedPlanDuration > 1" class="discount-badge">
+              {{ getDurationDiscount(selectedPlanDuration) }}% 할인
+            </span>
+          </p>
+          <p v-if="selectedPlanDuration > 1" class="discounted-monthly-price">
+            할인된 월 가격: {{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원
+          </p>
+          <p v-if="selectedPlanDuration > 1" class="total-duration-price">
+            {{ selectedPlanDuration }}개월 총액: <span class="total-price">{{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원</span>
+            <span class="payment-note">(한 번에 결제)</span>
+          </p>
+        </div>
+        
+        <div class="plan-description">
+          <p>{{ selectedPlan.description || '해당 플랜에 대한 설명이 없습니다.' }}</p>
+        </div>
+        
+        <div class="plan-details">
+          <div class="plan-detail-item">
+            <span class="detail-label">최대 회원수:</span>
+            <span class="detail-value">{{ selectedPlan.maxMembers || '제한 없음' }}</span>
+          </div>
+          
+          <!-- 구독 기간 선택 옵션 -->
+          <div class="plan-detail-item subscription-duration">
+            <span class="detail-label">구독 기간:</span>
+            <div class="duration-selector">
+              <button 
+                v-for="duration in [1, 3, 6, 12]" 
+                :key="duration" 
+                :class="['duration-btn', selectedPlanDuration === duration ? 'active' : '']" 
+                @click="selectedPlanDuration = duration"
+              >
+                {{ duration }}개월
+                <span v-if="duration > 1" class="discount-badge">
+                  {{ getDurationDiscount(duration) }}% 할인
+                </span>
+              </button>
+            </div>
+            <p class="duration-info">
+              * 장기 구독(3, 6, 12개월)은 한 번에 전체 기간 금액을 결제합니다.
+            </p>
+          </div>
+        </div>
+        
+        <div class="plan-features">
+          <h5>포함된 기능</h5>
+          <div class="features-container">
+            <div v-for="feature in selectedPlan.Features" :key="feature.id" class="feature-item">
+              <i class="pi pi-check"></i>
+              <div class="feature-info">
+                <span class="feature-name">{{ feature.name }}</span>
+                <span class="feature-description">{{ feature.description }}</span>
+              </div>
+            </div>
+            <div v-if="!selectedPlan.Features || selectedPlan.Features.length === 0" class="no-features">
+              <i class="pi pi-info-circle"></i> 포함된 기능이 없습니다.
+            </div>
+          </div>
+        </div>
+        
+        <!-- 플랜 변경 옵션 -->
+        <div class="plan-change-options" v-if="currentSubscription">
+          <h5>플랜 변경 옵션</h5>
+          
+          <div class="option-selector">
+            <label v-if="isUpgrade">
+              <input type="radio" v-model="changeOption" value="immediate" />
+              즉시 적용 (금액 차액 정산)
+            </label>
+            
+            <label v-if="!isUpgrade">
+              <input type="radio" v-model="changeOption" value="nextBilling" />
+              다음 결제일부터 적용 (현재 플랜 유지)
+            </label>
+          </div>
+          
+          <div v-if="changeOption === 'immediate' && isUpgrade" class="price-calculation">
+            <p>현재 플랜: {{ currentSubscription.planName }} (월 {{ formatPrice(currentSubscription.planPrice) }}원)</p>
+            <p>
+              선택한 플랜: {{ selectedPlan.name }} 
+              <span class="price-details">
+                월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원
+                <span v-if="selectedPlanDuration > 1" class="discount-info">
+                  ({{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용)
+                </span>
+              </span>
+            </p>
+            <p v-if="selectedPlanDuration > 1" class="duration-total">
+              {{ selectedPlanDuration }}개월 총액: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원
+            </p>
+            <p>남은 기간: {{ remainingDays }}일</p>
+            <p>현재 플랜 남은 기간 환불액: {{ formatPrice(refundAmount) }}원</p>
+            <p>새 플랜 결제액: {{ formatPrice(proRatedNewPlanPrice) }}원</p>
+            <p class="subtotal">플랜 변경 차액: {{ formatPrice(planPriceDifference) }}원</p>
+          </div>
+          
+          <div v-if="changeOption === 'nextBilling' && !isUpgrade" class="price-calculation">
+            <p>현재 플랜: {{ currentSubscription.planName }} (월 {{ formatPrice(currentSubscription.planPrice) }}원)</p>
+            <p>
+              선택한 플랜: {{ selectedPlan.name }} 
+              <span class="price-details">
+                월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원
+                <span v-if="selectedPlanDuration > 1" class="discount-info">
+                  ({{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용)
+                </span>
+              </span>
+            </p>
+            <p v-if="selectedPlanDuration > 1" class="duration-total">
+              {{ selectedPlanDuration }}개월 총액: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원
+            </p>
+            <p>적용 시점: 다음 결제일 ({{ formatDate(nextBillingDate) }})</p>
+            <p class="note">* 현재 구독 기간이 종료될 때까지 현재 플랜이 유지됩니다.</p>
+          </div>
+        </div>
+        
+        <div class="plan-actions">
+          <button class="primary-btn" @click="selectPlanAndContinue">선택 후 추가 기능 선택하기</button>
+          <button class="cancel-btn" @click="cancelPlanSelection">취소</button>
+        </div>
+      </div>
     </div>
 
-    <!-- 기능 구매 섹션 -->
-    <div class="features-section">
-      <h3>추가 기능</h3>
-      <div class="features-grid">
-        <div v-for="feature in availableFeatures" :key="feature.id" class="feature-card">
+    <!-- 추가 기능 선택 섹션 -->
+    <div class="subscription-section">
+      <div class="section-header">
+        <h3>추가 기능 선택</h3>
+        <button 
+          class="toggle-btn" 
+          @click="showAdditionalFeatures = true"
+        >
+          기능 추가하기
+        </button>
+      </div>
+      
+      <!-- 선택한 플랜 정보 표시 -->
+      <div v-if="showAdditionalFeatures && (selectedPlan || currentSubscription)" class="selected-plan-summary">
+        <h4>선택한 플랜 정보</h4>
+        <div class="plan-info">
+          <p class="plan-name">{{ selectedPlan ? selectedPlan.name : currentSubscription.planName }}</p>
+          <p class="plan-duration">구독 기간: {{ selectedPlanDuration }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}</p>
+          <p class="plan-price" v-if="selectedPlan">총 가격: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원 <span v-if="selectedPlanDuration > 1" class="payment-note">(한 번에 결제)</span></p>
+          <p class="plan-price" v-else>현재 월 구독료: {{ formatPrice(currentSubscription.planPrice) }}원</p>
+          <p v-if="selectedPlan && selectedPlanDuration > 1" class="plan-monthly-price">할인된 월 가격: {{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원/월</p>
+        </div>
+      </div>
+
+      <div v-if="showAdditionalFeatures" class="features-grid">
+        <div 
+          v-for="feature in availableFeatures.filter(f => f.price)" 
+          :key="feature.id" 
+          class="feature-card"
+          :class="{ 
+            'selected': selectedFeatures.some(f => f.id === feature.id),
+            'active': isFeatureActive(feature.id),
+            'included-in-plan': feature.isIncludedInPlan,
+            'included-in-selected-plan': isFeatureIncludedInSelectedPlan(feature.id)
+          }"
+        >
+          <div class="feature-badge" v-if="isFeatureActive(feature.id)">사용중</div>
+          <div class="feature-badge plan-badge" v-if="feature.isIncludedInPlan">플랜 포함</div>
           <div class="feature-header">
             <h4>{{ feature.name }}</h4>
-            <span class="feature-status" :class="{ 'active': isFeatureActive(feature.id) }">
-              {{ isFeatureActive(feature.id) ? '사용중' : '미사용' }}
-            </span>
           </div>
           <p class="description">{{ feature.description }}</p>
-          <p class="price">{{ formatPrice(feature.price) }}원</p>
-          <div class="duration-select" v-if="!isFeatureActive(feature.id)">
-            <select v-model="feature.selectedDuration">
-              <option value="1">1개월</option>
-              <option value="3">3개월</option>
-              <option value="6">6개월</option>
-              <option value="12">12개월</option>
-            </select>
+          <p class="price">
+            <template v-if="feature.price">월 {{ formatPrice(feature.price) }}원</template>
+            <template v-else>기본기능</template>
+          </p>
+          
+          <!-- 추가 기능 선택 가능한 경우 -->
+          <div v-if="shouldShowFeatureActions(feature)" class="feature-actions">
+            <div class="feature-info">
+              <p class="duration-info">구독 기간: {{ selectedPlanDuration || 1 }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}</p>
+              <p class="price-info">총 금액: {{ formatPrice(calculateFeaturePriceWithDuration(feature, selectedPlanDuration || 1)) }}원</p>
+            </div>
+            <button 
+              class="feature-btn"
+              @click="toggleFeatureSelection(feature)"
+            >
+              {{ selectedFeatures.some(f => f.id === feature.id) ? '선택 취소' : '선택하기' }}
+            </button>
+          </div>
+          
+          <!-- 이미 활성화된 기능 -->
+          <div v-else-if="isFeatureActive(feature.id)" class="feature-active-info">
+            <p>만료일: {{ getFeatureExpiryDate(feature.id) }}</p>
+          </div>
+          
+          <!-- 선택한 플랜에 포함된 기능 -->
+          <div v-else-if="isFeatureIncludedInSelectedPlan(feature.id)" class="feature-included-info">
+            <p>현재 선택한 플랜에 포함된 기능입니다.</p>
+          </div>
+          
+          <!-- 현재 구독 플랜에 포함된 기능 -->
+          <div v-else-if="feature.isIncludedInPlan" class="feature-included-info">
+            <p>현재 구독 플랜에 포함된 기능입니다.</p>
           </div>
-          <button 
-            class="feature-btn"
-            :disabled="isFeatureActive(feature.id)"
-            @click="purchaseFeature(feature)">
-            {{ isFeatureActive(feature.id) ? '이용중' : '구매하기' }}
-          </button>
         </div>
       </div>
+
+      <div v-if="showAdditionalFeatures && (selectedPlan || currentSubscription)" class="selected-features-summary">
+        <h4>선택 요약</h4>
+        
+        <!-- 추가 기능 선택 요약 -->
+        <div v-if="selectedFeatures.length > 0">
+          <h5>추가 기능</h5>
+          <div class="features-container">
+            <div v-for="feature in selectedFeatures" :key="feature.id" class="feature-item selected-feature-item">
+              <div class="feature-info">
+                <span class="feature-name">{{ feature.name }}</span>
+                <span class="feature-price">
+                  <span v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)">
+                    {{ selectedPlanDuration || 1 }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}
+                  </span>
+                  <span v-else>
+                    남은 구독 기간({{ remainingDays }}일)
+                  </span>
+                  <strong>{{ formatPrice(calculateFeaturePrice(feature)) }}원</strong>
+                </span>
+              </div>
+              <button class="remove-btn" @click="removeFeature(feature.id)">제거</button>
+            </div>
+          </div>
+          <div class="summary-total">
+            <p>추가 기능 총액: {{ formatPrice(calculateSelectedFeaturesTotal()) }}원
+              <span v-if="!selectedPlan || isCurrentPlan(selectedPlan.id)" class="calculation-note">(남은 구독 기간 {{ remainingDays }}일 기준 일할 계산)</span>
+            </p>
+          </div>
+        </div>
+        
+        <!-- 포함된 기능 표시 -->
+        <div v-if="selectedPlan && selectedPlan.Features && selectedPlan.Features.length > 0" class="included-features">
+          <h5>플랜에 포함된 기능</h5>
+          <div class="features-container">
+            <div v-for="feature in selectedPlan.Features" :key="feature.id" class="feature-item included-feature-item">
+              <i class="pi pi-check"></i>
+              <div class="feature-info">
+                <span class="feature-name">{{ feature.name }}</span>
+                <span v-if="feature.description" class="feature-description">{{ feature.description }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 총 결제 금액 -->
+        <div class="final-total">
+          <p>총 결제 금액: {{ formatPrice(selectedPlan ? calculatePlanTotalPrice(selectedPlan) + calculateSelectedFeaturesTotal() : calculateSelectedFeaturesTotal()) }}원
+            <span v-if="(!selectedPlan || isCurrentPlan(selectedPlan.id)) && selectedFeatures.length > 0" class="calculation-note">(추가 기능은 남은 구독 기간 기준 일할 계산)</span>
+          </p>
+        </div>
+        
+        <div class="summary-actions">
+          <button class="primary-btn" @click="proceedToPayment">결제 진행하기</button>
+          <button class="secondary-btn" @click="showPlans = true; isSelectingPlan = true; showAdditionalFeatures = false">플랜 다시 선택하기</button>
+          <button class="cancel-btn" @click="cancelFeatureSelection">취소</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 결제 섹션 -->
+    <div v-if="showPaymentSection" class="payment-section">
+      <!-- 결제 요약 -->
+      <div class="payment-summary">
+        <h4>결제 요약</h4>
+        <div class="summary-items">
+          <!-- 플랜 변경 요약 -->
+          <div v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)" class="summary-item">
+            <span class="item-label">선택한 플랜:</span>
+            <span class="item-value">{{ selectedPlan.name }}</span>
+            <span class="item-price">
+              {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원/월
+              <span v-if="selectedPlanDuration > 1" class="discount-tag">
+                ({{ getDurationDiscount(selectedPlanDuration) }}% 할인)
+              </span>
+            </span>
+          </div>
+          
+          <!-- 구독 기간 -->
+          <div v-if="selectedPlan && selectedPlanDuration > 1" class="summary-item duration-item">
+            <span class="item-label">구독 기간:</span>
+            <span class="item-value">{{ selectedPlanDuration }}개월</span>
+            <span class="item-price">{{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원 <span class="payment-note">(한 번에 결제)</span></span>
+          </div>
+          
+          <!-- 할인된 월 가격 -->
+          <div v-if="selectedPlan && selectedPlanDuration > 1" class="summary-item discounted-monthly">
+            <span class="item-label">할인된 월 가격:</span>
+            <span class="item-value">월 평균</span>
+            <span class="item-price">{{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원/월</span>
+          </div>
+          
+          <!-- 플랜 변경 관련 금액 -->
+          <template v-if="selectedPlan && !isCurrentPlan(selectedPlan.id) && currentSubscription">
+            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change">
+              <span class="item-label">현재 플랜 환불액:</span>
+              <span class="item-value">남은 {{ remainingDays }}일 기준</span>
+              <span class="item-price">-{{ formatPrice(refundAmount) }}원</span>
+            </div>
+            
+            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change">
+              <span class="item-label">새 플랜 결제액:</span>
+              <span class="item-value">남은 {{ remainingDays }}일 기준</span>
+              <span class="item-price">{{ formatPrice(proRatedNewPlanPrice) }}원</span>
+            </div>
+            
+            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change subtotal">
+              <span class="item-label">플랜 변경 차액:</span>
+              <span class="item-value"></span>
+              <span class="item-price">{{ formatPrice(planPriceDifference) }}원</span>
+            </div>
+            
+            <div v-if="!isUpgrade && changeOption === 'nextBilling'" class="summary-item plan-change note">
+              <span class="item-label">다운그레이드:</span>
+              <span class="item-value">다음 결제일({{ formatDate(nextBillingDate) }})부터 적용</span>
+              <span class="item-price">0원</span>
+            </div>
+          </template>
+          
+          <!-- 추가 기능 요약 -->
+          <div v-if="selectedFeatures.length > 0" class="feature-section-header">
+            <span>추가 기능</span>
+          </div>
+          
+          <div v-for="feature in selectedFeatures" :key="feature.id" class="summary-item">
+            <span class="item-label">기능:</span>
+            <span class="item-value">
+              {{ feature.name }}
+              <span v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)">
+                ({{ feature.selectedDuration }}개월)
+              </span>
+              <span v-else class="calculation-note">
+                (남은 {{ remainingDays }}일 기준 일할 계산)
+              </span>
+            </span>
+            <span class="item-price">{{ formatPrice(calculateProRatedFeaturePrice(feature)) }}원</span>
+          </div>
+          
+          <div v-if="selectedFeatures.length > 0" class="summary-item subtotal">
+            <span class="item-label">추가 기능 총액:</span>
+            <span class="item-value">
+              <span v-if="!selectedPlan || isCurrentPlan(selectedPlan.id)" class="calculation-note">
+                (남은 구독 기간 기준 일할 계산)
+              </span>
+            </span>
+            <span class="item-price">{{ formatPrice(totalFeaturesPrice) }}원</span>
+          </div>
+          
+          <!-- 총 결제금액 -->
+          <div class="summary-total">
+            <div class="total-header">
+              <span class="total-label">총 결제금액:</span>
+              <span class="total-price">{{ formatPrice(finalAmount) }}원</span>
+            </div>
+            <div v-if="(!selectedPlan || isCurrentPlan(selectedPlan.id)) && selectedFeatures.length > 0" class="calculation-summary">
+              <span class="calculation-note">
+                추가 기능은 남은 구독 기간 {{ remainingDays }}일 기준으로 일할 계산되었습니다.
+              </span>
+            </div>
+            <div v-if="selectedPlanDuration > 1" class="discount-summary">
+              <span class="discount-info">
+                {{ selectedPlanDuration }}개월 구독 {{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용됨
+              </span>
+              <span class="payment-note">
+                (장기 구독은 한 번에 결제되며, 총 금액에 할인이 적용됩니다)
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="payment-method">
+        <h4>결제 방법</h4>
+        <p class="payment-info">결제 버튼을 클릭하면 토스페이먼츠 결제 창이 열리며, 다양한 결제 수단을 선택할 수 있습니다.</p>
+      </div>
+
+      <div class="payment-agreement">
+        <label>
+          <input type="checkbox" v-model="paymentAgreement" />
+          결제 진행 및 서비스 이용약관에 동의합니다.
+        </label>
+      </div>
+
+      <div class="payment-actions">
+        <button 
+          class="payment-btn" 
+          :disabled="!paymentAgreement"
+          @click="processPayment"
+        >
+          결제하기
+        </button>
+        <button class="cancel-btn" @click="cancelPayment">취소</button>
+      </div>
     </div>
 
     <!-- 기능 구매 내역 -->
@@ -121,7 +543,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import apiClient from '@/services/api';
 
@@ -135,13 +557,32 @@ const availableFeatures = ref([]);
 const featurePayments = ref([]);
 const activeFeatures = ref([]);
 
+// UI 상태 관리
+const showPlans = ref(false);
+const showAdditionalFeatures = ref(false); // 초기에는 기능 목록 표시하지 않음
+const showPaymentSection = ref(false);
+const isSelectingPlan = ref(false);
+const selectedPlan = ref(null);
+const selectedFeatures = ref([]);
+const paymentAgreement = ref(false);
+
+// 플랜 변경 관련 변수
+const changeOption = ref('immediate'); // 기본값은 업그레이드일 경우 즉시 적용, 다운그레이드일 경우 다음 결제일 적용
+
+// 구독 기간 관련 변수
+const selectedPlanDuration = ref(1); // 기본값은 1개월
+
+// 결제 관련 상태
+
 // 날짜 포맷팅
 const formatDate = (date) => {
+  if (!date) return '-';
   return new Date(date).toLocaleDateString('ko-KR');
 };
 
 // 가격 포맷팅
 const formatPrice = (price) => {
+  if (price === undefined || price === null) return '0';
   return price.toLocaleString('ko-KR');
 };
 
@@ -152,18 +593,70 @@ const isCurrentPlan = (planId) => {
 
 // 기능이 활성화되어 있는지 확인
 const isFeatureActive = (featureId) => {
-  return activeFeatures.value.some(f => 
-    f.featureId === featureId && new Date(f.expiryDate) > new Date()
-  );
+  return activeFeatures.value.some(f => f.featureId === featureId);
+};
+
+// 기능 이름 가져오기
+const getFeatureName = (featureId) => {
+  const feature = availableFeatures.value.find(f => f.id === featureId);
+  return feature ? feature.name : '알 수 없는 기능';
+};
+
+// 기능 만료일 가져오기
+const getFeatureExpiryDate = (featureId) => {
+  const feature = activeFeatures.value.find(f => f.featureId === featureId);
+  return feature ? formatDate(feature.expiryDate) : '-';
+};
+
+// 기능이 현재 선택한 플랜에 포함되어 있는지 확인
+const isFeatureIncludedInSelectedPlan = (featureId) => {
+  if (!selectedPlan.value) return false;
+  if (!selectedPlan.value.Features) return false;
+  return selectedPlan.value.Features.some(f => f.id === featureId);
+};
+
+// 추가 기능 표시 여부 확인 (활성화 또는 플랜에 포함된 기능은 비활성화)
+const shouldShowFeatureActions = (feature) => {
+  // 현재 활성화된 기능은 비활성화
+  if (isFeatureActive(feature.id)) return false;
+  
+  // 현재 사용 중인 플랜에 포함된 기능은 비활성화
+  if (feature.isIncludedInPlan) return false;
+  
+  // 선택한 플랜에 포함된 기능은 비활성화
+  if (isFeatureIncludedInSelectedPlan(feature.id)) return false;
+  
+  return true;
 };
 
 // 현재 구독 정보 로드
 const loadCurrentSubscription = async () => {
   try {
     const response = await apiClient.post('/api/subscriptions/current', { clubId: clubId.value });
+    
+    // 플랜에 포함된 기능 정보 가져오기
+    if (response.data && response.data.planId) {
+      try {
+        const planResponse = await apiClient.get(`/api/subscriptions/plans/${response.data.planId}`);
+        if (planResponse.data && planResponse.data.Features) {
+          response.data.planFeatures = planResponse.data.Features;
+        }
+      } catch (planError) {
+        console.error('플랜 상세 정보 로드 실패:', planError);
+        // 플랜 정보 로드 실패 시 기본 값 설정
+        response.data.planFeatures = [];
+      }
+    }
+    
     currentSubscription.value = response.data;
+    
+    // 현재 구독 플랜에 포함된 기능 표시 업데이트
+    if (availableFeatures.value.length > 0) {
+      updateFeaturesIncludedInCurrentPlan();
+    }
   } catch (error) {
     console.error('구독 정보 로드 실패:', error);
+    currentSubscription.value = null;
   }
 };
 
@@ -190,16 +683,31 @@ const loadPayments = async () => {
 // 사용 가능한 기능 목록 로드
 const loadAvailableFeatures = async () => {
   try {
-    const response = await apiClient.post('/api/features/available', { clubId: clubId.value });
+    const response = await apiClient.get('/api/features');
     availableFeatures.value = response.data.map(feature => ({
       ...feature,
-      selectedDuration: 1
+      selectedDuration: 1,
+      isIncludedInPlan: false // 초기에는 false로 설정
     }));
+    
+    // 현재 구독 플랜이 있는 경우, 포함된 기능 표시 업데이트
+    updateFeaturesIncludedInCurrentPlan();
   } catch (error) {
-    console.error('기능 목록 로드 실패:', error);
+    console.error('추가 기능 로드 오류:', error);
   }
 };
 
+// 현재 구독 플랜에 포함된 기능 표시 업데이트
+const updateFeaturesIncludedInCurrentPlan = () => {
+  if (!currentSubscription.value || !currentSubscription.value.planFeatures) return;
+  
+  const includedFeatureIds = currentSubscription.value.planFeatures.map(f => f.id);
+  
+  availableFeatures.value.forEach(feature => {
+    feature.isIncludedInPlan = includedFeatureIds.includes(feature.id);
+  });
+};
+
 // 활성화된 기능 목록 로드
 const loadActiveFeatures = async () => {
   try {
@@ -220,18 +728,452 @@ const loadFeaturePayments = async () => {
   }
 };
 
-// 플랜 구독
+// 플랜 선택 처리
+const handlePlanSelection = (plan) => {
+  // 현재 이용중인 플랜을 다시 선택한 경우
+  if (isCurrentPlan(plan.id)) {
+    // 결제 요약 초기화
+    selectedPlan.value = null;
+    selectedPlanDuration.value = 1;
+    isSelectingPlan.value = false;
+    showPaymentSection.value = false;
+    
+    // 현재 구독 플랜에 포함된 기능 표시로 되돌리기
+    updateFeaturesIncludedInCurrentPlan();
+    return;
+  }
+  
+  // 다른 플랜 선택의 경우 기존 함수 호출
+  selectPlan(plan);
+};
+
+// 플랜 선택 함수
+const selectPlan = async (plan) => {
+  try {
+    // 플랜에 포함된 기능 정보 가져오기
+    const planResponse = await apiClient.get(`/api/subscriptions/plans/${plan.id}`);
+    if (planResponse.data && planResponse.data.Features) {
+      plan.Features = planResponse.data.Features;
+    }
+  } catch (error) {
+    console.error('플랜 상세 정보 로드 실패:', error);
+    // 오류가 발생해도 기본 플랜 정보는 유지
+    if (!plan.Features) {
+      plan.Features = [];
+    }
+  }
+  
+  selectedPlan.value = plan;
+  isSelectingPlan.value = true;
+};
+
+// 플랜 선택 후 추가 기능 선택으로 이동
+const selectPlanAndContinue = () => {
+  isSelectingPlan.value = false;
+  showPlans.value = false;
+  showAdditionalFeatures.value = true;
+  
+  // 선택한 플랜에 포함된 기능 표시 업데이트
+  updateFeatureSelectionBasedOnSelectedPlan();
+};
+
+// 플랜 선택 취소
+const cancelPlanSelection = () => {
+  selectedPlan.value = null;
+  selectedPlanDuration.value = 1;
+  isSelectingPlan.value = false;
+  showPlans.value = false;
+  
+  // 현재 구독 플랜에 포함된 기능 표시로 되돌리기
+  updateFeaturesIncludedInCurrentPlan();
+};
+
+// 선택한 플랜에 따라 기능 선택 상태 업데이트
+const updateFeatureSelectionBasedOnSelectedPlan = () => {
+  if (!selectedPlan.value || !selectedPlan.value.Features) return;
+  
+  const includedFeatureIds = selectedPlan.value.Features.map(f => f.id);
+  
+  // 이미 선택한 기능 중 플랜에 포함된 기능 제거
+  selectedFeatures.value = selectedFeatures.value.filter(f => !includedFeatureIds.includes(f.id));
+};
+
+// 기능 선택 토글
+const toggleFeatureSelection = (feature) => {
+  const index = selectedFeatures.value.findIndex(f => f.id === feature.id);
+  if (index === -1) {
+    selectedFeatures.value.push({
+      ...feature,
+      selectedDuration: parseInt(feature.selectedDuration)
+    });
+  } else {
+    selectedFeatures.value.splice(index, 1);
+  }
+};
+
+// 기능 제거
+const removeFeature = (featureId) => {
+  const index = selectedFeatures.value.findIndex(f => f.id === featureId);
+  if (index !== -1) {
+    selectedFeatures.value.splice(index, 1);
+  }
+};
+
+// 기능 선택 취소
+const cancelFeatureSelection = () => {
+  selectedFeatures.value = [];
+  showAdditionalFeatures.value = false;
+};
+
+// 플랜 기간에 따른 할인율 계산
+const getDurationDiscount = (duration) => {
+  duration = parseInt(duration) || 1;
+  if (duration === 3) return 5;
+  else if (duration === 6) return 10;
+  else if (duration === 12) return 20;
+  return 0;
+};
+
+// 플랜 월 가격 계산 (할인 없음)
+const calculatePlanMonthlyPrice = (plan) => {
+  if (!plan || !plan.price) return 0;
+  return plan.price;
+};
+
+// 플랜 총 가격 계산 (기간과 할인 적용)
+const calculatePlanTotalPrice = (plan) => {
+  if (!plan || !plan.price) return 0;
+  // 기본 가격 (월 가격 * 기간)
+  const basePrice = plan.price * (selectedPlanDuration.value || 1);
+  // 할인율 계산
+  const discount = getDurationDiscount(selectedPlanDuration.value) / 100;
+  // 총 가격에 할인 적용
+  return basePrice * (1 - discount);
+};
+
+// 할인된 월 가격 계산 (표시용)
+const calculateDiscountedMonthlyPrice = (plan) => {
+  if (!plan || !plan.price) return 0;
+  // 총 가격을 기간으로 나누어 할인된 월 가격 계산
+  const totalPrice = calculatePlanTotalPrice(plan);
+  const duration = selectedPlanDuration.value || 1;
+  return totalPrice / duration;
+};
+
+// 플랜 기간에 따른 추가 기능 가격 계산
+// 월 구독 기준 일수 상수 정의
+const DAYS_PER_MONTH = 30;
+
+// 일할 계산을 위한 일일 요금 계산 함수
+const calculateDailyRate = (monthlyPrice) => {
+  return monthlyPrice / DAYS_PER_MONTH;
+};
+
+// 기간에 따른 기능 가격 계산 (할인 적용)
+const calculateFeaturePriceWithDuration = (feature, duration) => {
+  if (!feature || !feature.price) return 0;
+  // 기본 가격 (월 가격 * 기간)
+  const basePrice = feature.price * (parseInt(duration) || 1);
+  // 할인율 계산
+  const discount = getDurationDiscount(parseInt(duration) || 1) / 100;
+  // 총 가격에 할인 적용
+  return basePrice * (1 - discount);
+};
+
+// 추가 기능 가격 계산 (현재 구독 기간에 맞게 계산)
+const calculateFeaturePrice = (feature) => {
+  if (!feature || !feature.price) return 0;
+  
+  // 플랜을 변경하는 경우는 선택한 기간으로 계산
+  if (selectedPlan.value && !isCurrentPlan(selectedPlan.value.id)) {
+    return calculateFeaturePriceWithDuration(feature, selectedPlanDuration.value || 1);
+  }
+  
+  // 플랜 변경 없이 기능만 추가하는 경우는 남은 구독 기간에 맞게 계산
+  const dailyRate = calculateDailyRate(feature.price);
+  
+  // 남은 기간에 대한 가격 계산 (일수에 따라 정확히 계산)
+  return Math.floor(dailyRate * remainingDays.value);
+};
+
+// 선택한 추가 기능 총액 계산
+const calculateSelectedFeaturesTotal = () => {
+  return selectedFeatures.value.reduce((total, feature) => {
+    return total + calculateFeaturePrice(feature);
+  }, 0);
+};
+
+// 현재 총 결제 금액 계산
+const calculateTotalPrice = () => {
+  const planPrice = currentSubscription.value?.planPrice || 0;
+  const activeFeatureTotal = 0; // 활성화된 기능의 월 금액 계산 (추후 구현)
+  
+  return planPrice + activeFeatureTotal;
+};
+
+// 업그레이드인지 다운그레이드인지 확인
+const isUpgrade = computed(() => {
+  if (!currentSubscription.value || !selectedPlan.value) return false;
+  return selectedPlan.value.price > currentSubscription.value.planPrice;
+});
+
+// 남은 기간 계산
+const remainingDays = computed(() => {
+  if (!currentSubscription.value) return 0;
+  const today = new Date();
+  const endDate = new Date(currentSubscription.value.endDate);
+  const diffTime = endDate - today;
+  return Math.max(0, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
+});
+
+// 다음 결제일 계산
+const nextBillingDate = computed(() => {
+  if (!currentSubscription.value) return new Date();
+  return currentSubscription.value.endDate;
+});
+
+// 현재 플랜 환불액 (정확한 일할 계산)
+const refundAmount = computed(() => {
+  if (!currentSubscription.value) return 0;
+  
+  // 일단위 가격 계산
+  const dailyRate = calculateDailyRate(currentSubscription.value.planPrice);
+  
+  // 남은 기간에 대한 환불액 계산 (정수로 내림)
+  return Math.floor(dailyRate * remainingDays.value);
+});
+
+// 새 플랜 일할 계산 금액 (할인 및 일할 계산 적용)
+const proRatedNewPlanPrice = computed(() => {
+  if (!selectedPlan.value) return 0;
+  
+  // 월 가격에 할인을 적용
+  const monthlyPrice = calculatePlanMonthlyPrice(selectedPlan.value);
+  
+  // 일단위 가격 계산
+  const dailyRate = calculateDailyRate(monthlyPrice);
+  
+  // 남은 기간에 대한 결제액 계산 (정수로 내림)
+  return Math.floor(dailyRate * remainingDays.value);
+});
+
+// 플랜 가격 차액
+const planPriceDifference = computed(() => {
+  if (!selectedPlan.value || !currentSubscription.value) return 0;
+  
+  // 업그레이드이고 즉시 적용인 경우
+  if (isUpgrade.value && changeOption.value === 'immediate') {
+    // 새 플랜 결제액에서 현재 플랜 환불액을 차감 (정수로 내림)
+    return Math.floor(proRatedNewPlanPrice.value - refundAmount.value);
+  }
+  
+  // 다운그레이드나 다음 결제일 적용인 경우
+  return 0;
+});
+
+// 추가 기능 일할 계산 가격
+const calculateProRatedFeaturePrice = (feature) => {
+  if (!feature || !feature.price) return 0;
+  
+  const fullPrice = calculateFeaturePrice(feature);
+  
+  // 1개월 구독이고 남은 기간이 기준 일수 미만인 경우에만 일할 계산
+  if (feature.selectedDuration === 1 && remainingDays.value < DAYS_PER_MONTH) {
+    const dailyRate = calculateDailyRate(fullPrice);
+    return dailyRate * remainingDays.value;
+  }
+  
+  return fullPrice;
+};
+
+// 추가 기능 총액
+const totalFeaturesPrice = computed(() => {
+  return selectedFeatures.value.reduce((total, feature) => {
+    return total + calculateProRatedFeaturePrice(feature);
+  }, 0);
+});
+
+// 최종 결제 금액
+const finalAmount = computed(() => {
+  // 플랜 변경이 있는 경우
+  if (selectedPlan.value && !isCurrentPlan(selectedPlan.value.id)) {
+    // 업그레이드이고 즉시 적용인 경우
+    if (isUpgrade.value && changeOption.value === 'immediate') {
+      // 3개월 이상 구독인 경우 총 금액에서 환불액을 빼야 함
+      if (selectedPlanDuration.value > 1) {
+        // 플랜 총 금액 - 환불액 + 추가 기능 가격 (10원 단위로 절삭)
+        const amount = calculatePlanTotalPrice(selectedPlan.value) - refundAmount.value + totalFeaturesPrice.value;
+        return Math.floor(amount / 10) * 10;
+      } else {
+        // 1개월 구독은 기존과 동일하게 차액 계산 (10원 단위로 절삭)
+        const amount = planPriceDifference.value + totalFeaturesPrice.value;
+        return Math.floor(amount / 10) * 10;
+      }
+    } 
+    // 다운그레이드나 다음 결제일부터 적용인 경우 추가 기능만 계산
+    else if (!isUpgrade.value || changeOption.value === 'nextBilling') {
+      // 10원 단위로 절삭
+      return Math.floor(totalFeaturesPrice.value / 10) * 10;
+    }
+    // 새로운 구독인 경우 플랜 총액 계산
+    else {
+      // 10원 단위로 절삭
+      const amount = calculatePlanTotalPrice(selectedPlan.value) + totalFeaturesPrice.value;
+      return Math.floor(amount / 10) * 10;
+    }
+  } 
+  // 플랜 변경이 없고 추가 기능만 있는 경우
+  else {
+    // 10원 단위로 절삭
+    return Math.floor(totalFeaturesPrice.value / 10) * 10;
+  }
+});
+
+// 총 결제 금액 계산
+const calculateTotalPaymentAmount = () => {
+  return finalAmount.value;
+};
+
+// 결제 화면으로 진행
+const proceedToPayment = () => {
+  if (selectedFeatures.value.length === 0 && (!selectedPlan.value || isCurrentPlan(selectedPlan.value.id))) {
+    alert('구매할 플랜이나 기능을 선택해주세요.');
+    return;
+  }
+  
+  showPaymentSection.value = true;
+  showAdditionalFeatures.value = false;
+  showPlans.value = false;
+};
+
+// 결제 취소
+const cancelPayment = () => {
+  showPaymentSection.value = false;
+  paymentAgreement.value = false;
+};
+
+// 토스페이먼츠 결제 처리
+const processPayment = async () => {
+  try {
+    // 결제 정보 준비
+    const paymentRequestData = {
+      clubId: clubId.value,
+      planChange: selectedPlan.value && selectedPlan.value.id !== (currentSubscription.value?.planId || null),
+      planId: selectedPlan.value?.id,
+      currentPlanId: currentSubscription.value?.planId,
+      isUpgrade: isUpgrade.value,
+      planDuration: selectedPlanDuration.value || 1,
+      features: selectedFeatures.value.map(f => ({
+        featureId: f.id,
+        duration: selectedPlanDuration.value || 1,
+        price: calculateProRatedFeaturePrice(f)
+      })),
+      totalAmount: Math.round(finalAmount.value),
+      successUrl: `${window.location.origin}/payment/success`,
+      failUrl: `${window.location.origin}/payment/fail`
+    };
+    
+    // 결제 요청 API 호출
+    const response = await apiClient.post('/api/subscriptions/payment/request', paymentRequestData);
+    
+    // 토스페이먼츠 SDK 초기화
+    const tossPayments = await loadTossPaymentsSDK();
+    
+    // 결제 창 열기 - 결제 방법을 미리 지정하지 않고 토스페이먼츠 결제 창에서 선택하도록 함
+    await tossPayments.requestPayment({
+      ...response.data.paymentData,
+      customerEmail: localStorage.getItem('userEmail') || '',
+      customerName: localStorage.getItem('userName') || ''
+    });
+    
+  } catch (error) {
+    console.error('결제 처리 실패:', error);
+    
+    // 결제 창을 닫은 경우 예외 처리 (POPUP_CLOSED 오류)
+    if (error.code === 'POPUP_CLOSED' || error.message?.includes('closed') || error.message?.includes('닫')) {
+      console.log('결제 창이 닫혔습니다. 다시 시도해주세요.');
+      return; // 사용자가 의도적으로 창을 닫은 경우 알림 표시하지 않음
+    }
+    
+    // 그 외 오류는 알림 표시
+    alert(error.response?.data?.message || '결제 처리 중 오류가 발생했습니다.');
+  }
+};
+
+// 토스페이먼츠 SDK 로드
+const loadTossPaymentsSDK = () => {
+  return new Promise((resolve, reject) => {
+    try {
+      // 기존 스크립트 제거 (재사용 문제 해결을 위해)
+      const existingScript = document.querySelector('script[src="https://js.tosspayments.com/v1/payment-widget"]');
+      if (existingScript) {
+        existingScript.remove();
+      }
+      
+      // 스크립트 로드
+      const script = document.createElement('script');
+      script.src = 'https://js.tosspayments.com/v1/payment-widget';
+      script.onload = () => {
+        if (window.TossPayments) {
+          const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
+          const tossPayments = window.TossPayments(clientKey);
+          resolve(tossPayments);
+        } else {
+          reject(new Error('페이먼츠 SDK를 찾을 수 없습니다.'));
+        }
+      };
+      script.onerror = () => {
+        reject(new Error('페이먼츠 SDK 로드 실패'));
+      };
+      document.head.appendChild(script);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+// 결제 성공 처리
+const handlePaymentSuccess = async (orderId) => {
+  try {
+    // 데이터 다시 로드
+    await Promise.all([
+      loadCurrentSubscription(),
+      loadActiveFeatures(),
+      loadFeaturePayments(),
+      loadPayments()
+    ]);
+    
+    // 상태 초기화
+    selectedPlan.value = null;
+    selectedFeatures.value = [];
+    paymentAgreement.value = false;
+    showPaymentSection.value = false;
+    showPlans.value = false;
+    showAdditionalFeatures.value = false;
+    changeOption.value = isUpgrade.value ? 'immediate' : 'nextBilling';
+    
+    alert('결제가 성공적으로 완료되었습니다.');
+  } catch (error) {
+    console.error('결제 성공 후 처리 오류:', error);
+  }
+};
+
+// 결제 실패 처리
+const handlePaymentFail = (message) => {
+  alert(`결제 실패: ${message || '사용자가 결제를 취소했습니다.'}`);
+};
+
+// 플랜 구독 (기존 기능 - 레거시)
 const subscribeToPlan = async (planId) => {
   try {
     await apiClient.post('/api/subscriptions/subscribe', { planId });
     await loadCurrentSubscription();
-    // TODO: 결제 프로세스 구현
   } catch (error) {
     console.error('구독 신청 실패:', error);
   }
 };
 
-// 기능 구매
+// 기능 구매 (기존 기능 - 레거시)
 const purchaseFeature = async (feature) => {
   try {
     await apiClient.post('/api/features/purchase', {
@@ -264,107 +1206,406 @@ onMounted(async () => {
   padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
+  font-family: 'Noto Sans KR', sans-serif;
+  color: #333;
 }
 
+.subscription-management h2 {
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+  color: #2c3e50;
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 10px;
+}
+
+.subscription-management h3 {
+  font-size: 1.4rem;
+  margin: 0 0 1rem;
+  color: #2c3e50;
+}
+
+.subscription-management h4 {
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  color: #2c3e50;
+}
+
+/* 현재 구독 정보 */
 .current-subscription {
   background: #f8f9fa;
   padding: 20px;
-  border-radius: 8px;
+  border-radius: 12px;
   margin-bottom: 30px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  border-left: 4px solid #0d6efd;
 }
 
+.subscription-info p {
+  margin: 8px 0;
+  line-height: 1.5;
+}
+
+.active-features-list {
+  list-style: none;
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.active-features-list li {
+  margin: 5px 0;
+  position: relative;
+  padding-left: 20px;
+}
+
+.active-features-list li:before {
+  content: '\2713';
+  position: absolute;
+  left: 0;
+  color: #198754;
+  font-weight: bold;
+}
+
+/* 섹션 헤더 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.toggle-btn {
+  background: #0d6efd;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background 0.2s;
+}
+
+.toggle-btn:hover {
+  background: #0b5ed7;
+}
+
+/* 플랜 그리드 */
 .plans-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  gap: 30px;
   margin: 20px 0;
 }
 
 .plan-card {
-  background: white;
-  border: 1px solid #dee2e6;
+  border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
-  text-align: center;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  background-color: #fff;
+  /* 고정 높이 제거하고 최소 높이 설정 */
+  min-height: 500px;
+  /* 카드 내부 요소를 위에서 아래로 배치하기 위한 설정 */
+  justify-content: space-between;
+}
+
+.plan-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.plan-card.selected {
+  border-color: #4CAF50;
+  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+}
+
+.plan-card.current {
+  border-color: #2196F3;
+  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
 }
 
 .plan-card .price {
-  font-size: 1.5em;
+  font-size: 1.2rem;
   color: #0d6efd;
-  margin: 15px 0;
+  margin: 0;
+  font-weight: bold;
+}
+
+.plan-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+  width: 100%;
+}
+
+.plan-description {
+  font-size: 0.9rem;
+  color: #666;
+  line-height: 1.4;
+}
+
+.plan-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #f9f9f9;
+  padding: 10px;
+  border-radius: 6px;
+}
+
+.plan-detail-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+.detail-label {
+  font-weight: 500;
+  color: #555;
+}
+
+.detail-value {
+  color: #333;
+}
+
+.plan-features {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.plan-features h5 {
+  margin: 0;
+  font-size: 1rem;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.features-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 12px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  flex: 1 1 calc(33% - 15px);
+  min-width: 200px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+
+.feature-item:hover {
+  background-color: #f1f3f5;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.feature-item i {
+  color: #4CAF50;
+  margin-right: 10px;
+  margin-top: 3px;
+}
+
+@media (max-width: 768px) {
+  .feature-item {
+    flex: 1 1 100%;
+  }
+}
+
+.feature-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-name {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.feature-description {
+  font-size: 0.9rem;
+  color: #666;
+  margin-top: 2px;
+}
+
+.no-features {
+  color: #999;
+  font-style: italic;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-plan-btn {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: auto; /* 자동 마진으로 버튼을 하단에 고정 */
+  transition: background-color 0.2s;
+  /* 추가 - 모든 버튼이 동일한 높이에 표시되도록 설정 */
+  align-self: flex-end;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.select-plan-btn:hover {
+  background-color: #45a049;
+}
+
+.select-plan-btn.current-plan {
+  background-color: #2196F3;
 }
 
 .features {
   list-style: none;
   padding: 0;
-  margin: 20px 0;
+  text-align: left;
 }
 
 .features li {
   margin: 10px 0;
+  padding-left: 25px;
+  position: relative;
 }
 
-.subscribe-btn {
-  background: #0d6efd;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
+.features li i {
+  position: absolute;
+  left: 0;
+  top: 25px;
+  color: #198754;
 }
 
-.subscribe-btn:disabled {
-  background: #6c757d;
-  cursor: not-allowed;
+.selected-plan-info {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+  border-left: 4px solid #0d6efd;
 }
 
+/* 기능 그리드 */
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  gap: 30px;
   margin: 20px 0;
 }
 
 .feature-card {
-  background: white;
-  border: 1px solid #dee2e6;
+  border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  background-color: #fff;
+  min-height: 400px;
+  justify-content: space-between;
+}
+
+.feature-card.selected {
+  border-color: #4CAF50;
+  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+}
+
+.feature-card.active {
+  border-color: #2196F3;
+  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
+}
+
+.feature-card.included-in-plan {
+  border-color: #9C27B0;
+  box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
+  background-color: rgba(156, 39, 176, 0.05);
+}
+
+.feature-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #2196F3;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.feature-included-info {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: rgba(156, 39, 176, 0.1);
+  border-radius: 4px;
+  color: #9C27B0;
+  font-weight: 500;
 }
 
 .feature-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
-}
-
-.feature-status {
-  font-size: 0.9em;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: #e9ecef;
-}
-
-.feature-status.active {
-  background: #198754;
-  color: white;
+  margin-bottom: 15px;
 }
 
 .description {
   color: #6c757d;
-  margin: 10px 0;
+  margin: 12px 0;
+  min-height: 60px;
+  line-height: 1.5;
+}
+
+.feature-card .price {
+  font-size: 1.4em;
+  color: #0d6efd;
+  margin: 15px 0;
+  font-weight: bold;
+}
+
+.feature-actions {
+  margin-top: 15px;
 }
 
 .duration-select {
-  margin: 10px 0;
+  margin: 15px 0;
+}
+
+.duration-select label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
 }
 
 .duration-select select {
   width: 100%;
-  padding: 8px;
-  border-radius: 4px;
+  padding: 10px;
+  border-radius: 6px;
   border: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+  font-size: 0.95rem;
 }
 
 .feature-btn {
@@ -372,29 +1613,861 @@ onMounted(async () => {
   background: #0d6efd;
   color: white;
   border: none;
-  padding: 10px;
-  border-radius: 4px;
+  padding: 12px;
+  border-radius: 6px;
   cursor: pointer;
+  font-weight: 500;
+  transition: background 0.2s;
 }
 
-.feature-btn:disabled {
-  background: #6c757d;
+.feature-btn:hover {
+  background: #0b5ed7;
+}
+
+.feature-active-info {
+  margin-top: 15px;
+  padding: 10px;
+  background: #e9f7ef;
+  border-radius: 6px;
+  color: #198754;
+}
+
+.selected-plan-info {
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #4CAF50;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.selected-plan-info h4 {
+  margin: 0;
+  color: #333;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.plan-price {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #4CAF50;
+  margin: 0;
+}
+
+.plan-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.plan-change-options {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #4caf50;
+}
+
+.plan-change-options h5 {
+  margin-top: 0;
+  color: #2c3e50;
+  font-size: 1rem;
+  margin-bottom: 15px;
+}
+
+.option-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.option-selector label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.price-calculation {
+  background-color: #fff;
+  padding: 12px;
+  border-radius: 6px;
+  margin-top: 10px;
+  border: 1px solid #e0e0e0;
+}
+
+.price-calculation p {
+  margin: 5px 0;
+  font-size: 0.9rem;
+}
+
+.price-calculation .subtotal {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #e0e0e0;
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.price-calculation .note {
+  font-size: 0.8rem;
+  color: #666;
+  font-style: italic;
+  margin-top: 8px;
+}
+
+.plan-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+/* 선택된 기능 요약 */
+.selected-features-summary {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+  border: 1px solid #dee2e6;
+}
+
+.selected-features-summary h4 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 1.2rem;
+  border-bottom: 2px solid #0d6efd;
+  padding-bottom: 8px;
+}
+
+.selected-features-summary h5 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  color: #555;
+  font-size: 1rem;
+}
+
+.selected-features-summary ul {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 15px;
+}
+
+.selected-features-summary li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.summary-total {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #dee2e6;
+  padding-top: 15px;
+  border-top: 1px solid #dee2e6;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.summary-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+/* 결제 섹션 */
+.payment-section {
+  background: #f8f9fa;
+  padding: 25px;
+  border-radius: 12px;
+  margin: 30px 0;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+}
+
+.payment-summary {
+  margin-bottom: 20px;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.payment-summary h4 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #2c3e50;
+  font-size: 1.2rem;
+  border-bottom: 2px solid #4caf50;
+  padding-bottom: 10px;
+}
+
+.summary-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.summary-item {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.item-label {
+  font-weight: 500;
+  color: #555;
+}
+
+.item-value {
+  color: #333;
+}
+
+.item-price {
+  text-align: right;
+  font-weight: 500;
+}
+
+.feature-included-info {
+  background-color: #e8f5e9;
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+  border-left: 4px solid #2e7d32;
+}
+
+.feature-included-info p {
+  margin: 0;
+  color: #2e7d32;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.feature-included-info p::before {
+  content: '\2713'; /* 체크 마크 */
+  margin-right: 8px;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.feature-card.included-in-selected-plan {
+  border: 2px solid #ed6c02;
+  box-shadow: 0 0 8px rgba(237, 108, 2, 0.2);
+}
+
+.feature-card.included-in-selected-plan .feature-title::after {
+  content: '선택한 플랜에 포함됨';
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 0.8rem;
+  background-color: #ed6c02;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+.plan-change {
+  background-color: #f0f7ff;
+  padding: 8px 10px;
+  border-radius: 6px;
+  margin-left: 15px;
+}
+
+.plan-change.subtotal {
+  background-color: #e3f2fd;
+  font-weight: bold;
+  border-top: 1px dashed #bbdefb;
+  padding-top: 10px;
+}
+
+.plan-change.note {
+  background-color: #fff3e0;
+  font-size: 0.9rem;
+}
+
+.feature-section-header {
+  margin-top: 15px;
+  margin-bottom: 5px;
+  padding-top: 15px;
+  border-top: 1px dashed #ddd;
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.summary-item.subtotal {
+  margin-top: 5px;
+  padding-top: 10px;
+  border-top: 1px dashed #ddd;
+  font-weight: 500;
+}
+
+.summary-total {
+  margin-top: 20px;
+  padding: 15px 10px;
+  border-top: 2px solid #ddd;
+  background-color: #e8f5e9;
+  border-radius: 6px;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.calculation-note {
+  font-size: 0.8em;
+  font-weight: normal;
+  color: #6c757d;
+  margin-left: 5px;
+}
+
+.total-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.discount-summary {
+  margin-top: 8px;
+  padding: 5px 10px;
+  background-color: #fff3e0;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  color: #ed6c02;
+}
+
+.calculation-summary {
+  margin-top: 8px;
+  padding: 5px 10px;
+  background-color: #e8f4fd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.discount-tag {
+  display: inline-block;
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  font-size: 0.8rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 5px;
+  font-weight: 500;
+}
+
+.duration-item {
+  background-color: #f8f9fa;
+  border-left: 3px solid #0d6efd;
+  padding: 10px 15px;
+  margin: 8px 0;
+  border-radius: 4px;
+}
+
+.total-label {
+  color: #2c3e50;
+}
+
+.total-price {
+  color: #2e7d32;
+}
+
+.payment-methods {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+  margin: 15px 0;
+}
+
+.payment-method-item {
+  background: white;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 15px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.payment-method-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.payment-method-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.payment-icon {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.payment-emoji {
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-method-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.selected-feature-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #e8f5e9;
+}
+
+.selected-feature-item .feature-info {
+  flex: 1;
+}
+
+.feature-price {
+  display: block;
+  font-size: 0.9rem;
+  color: #555;
+  margin-top: 3px;
+}
+
+.feature-price strong {
+  color: #2e7d32;
+  margin-left: 5px;
+}
+
+.remove-btn {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  margin-left: 10px;
+  transition: background-color 0.2s;
+}
+
+.remove-btn:hover {
+  background-color: #d32f2f;
+}
+
+.payment-method-item:hover {
+  border-color: #adb5bd;
+}
+
+.payment-method-item.selected {
+  border: 2px solid #0d6efd;
+  background: #e7f1ff;
+}
+
+.payment-icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  margin-bottom: 10px;
+}
+
+.payment-agreement {
+  margin: 20px 0;
+}
+
+.duration-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
+}
+
+.duration-info {
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #0d6efd;
+  background-color: #e6f0ff;
+  padding: 8px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.payment-note {
+  font-size: 0.8rem;
+  color: #2e7d32;
+  margin-left: 5px;
+  font-weight: normal;
+}
+
+.duration-btn {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  cursor: pointer;
+  font-size: 0.9rem;
+  position: relative;
+  transition: all 0.2s;
+  min-width: 80px;
+  text-align: center;
+}
+
+.duration-btn:hover {
+  background-color: #e9ecef;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.duration-btn.active {
+  background-color: #e3f2fd;
+  border-color: #90caf9;
+  font-weight: bold;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 6px rgba(0,105,217,0.2);
+}
+
+.discount-badge {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background-color: #ff6b6b;
+  color: white;
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-weight: bold;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.subscription-duration {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed #ddd;
+}
+
+.feature-info {
+  padding: 8px;
+  background-color: #f0f7ff;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.duration-info {
+  color: #0069d9;
+  font-weight: 500;
+  margin-bottom: 5px;
+}
+
+.price-info {
+  color: #2e7d32;
+  font-weight: 500;
+}
+
+.payment-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.payment-btn {
+  flex: 1;
+  background: #0d6efd;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 1.1rem;
+  transition: background 0.2s;
+}
+
+.payment-btn:hover:not(:disabled) {
+  background: #0b5ed7;
+}
+
+.payment-btn:disabled {
+  background: #adb5bd;
   cursor: not-allowed;
 }
 
+.primary-btn {
+  background-color: #0d6efd;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+  min-width: 120px;
+}
+
+.primary-btn:hover {
+  background-color: #0b5ed7;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.secondary-btn {
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+  min-width: 120px;
+}
+
+.secondary-btn:hover {
+  background-color: #5a6268;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.cancel-btn {
+  background-color: #f8f9fa;
+  color: #212529;
+  border: 1px solid #dee2e6;
+  padding: 10px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.cancel-btn:hover {
+  background-color: #e9ecef;
+  transform: translateY(-2px);
+}
+
+.plan-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.plan-price-details {
+  margin-bottom: 15px;
+}
+
+.plan-price {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 5px;
+}
+
+.monthly-price {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.total-duration-price {
+  font-size: 0.95rem;
+  color: #0d6efd;
+  background-color: #e6f0ff;
+  padding: 5px 10px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.total-price {
+  font-weight: bold;
+  color: #0d6efd;
+}
+
+.discount-info {
+  color: #2e7d32;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.duration-total {
+  background-color: #e8f5e9;
+  padding: 5px 10px;
+  border-radius: 4px;
+  color: #2e7d32;
+  font-weight: 500;
+  margin: 8px 0;
+}
+
+.price-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 10px;
+  font-weight: 500;
+}
+
+.selected-plan-summary {
+  background-color: #f0f7ff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 20px;
+  border-left: 4px solid #0d6efd;
+}
+
+.selected-plan-summary h4 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #0d6efd;
+  font-size: 1.1rem;
+}
+
+.plan-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.plan-name {
+  font-weight: bold;
+  font-size: 1.1rem;
+  color: #333;
+  margin: 0;
+  flex-basis: 100%;
+}
+
+.plan-duration, .plan-price {
+  margin: 0;
+  color: #555;
+  font-size: 0.95rem;
+}
+
+.continue-btn {
+  background: #0d6efd;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.continue-btn:hover {
+  background: #0b5ed7;
+}
+
+/* 기능 구매 내역 및 결제 내역 */
+.feature-history, .payment-history {
+  margin: 30px 0;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 20px;
+  background: white;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 th, td {
-  padding: 12px;
+  padding: 15px;
   text-align: left;
   border-bottom: 1px solid #dee2e6;
 }
 
 th {
-  background: #f8f9fa;
+  background: #f1f3f5;
+  font-weight: 600;
+  color: #495057;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tr:hover td {
+  background-color: #f8f9fa;
+}
+
+/* 반응형 스타일 */
+@media (max-width: 768px) {
+  .plans-grid, .features-grid, .payment-methods {
+    grid-template-columns: 1fr;
+  }
+  
+  .summary-actions, .payment-actions {
+    flex-direction: column;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .toggle-btn {
+    width: 100%;
+  }
+  
+  .selected-features-summary li {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  
+  tr {
+    border: 1px solid #dee2e6;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    padding-left: 50%;
+    text-align: right;
+  }
+  
+  td:before {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    width: 45%;
+    padding-right: 10px;
+    white-space: nowrap;
+    text-align: left;
+    font-weight: bold;
+    content: attr(data-label);
+  }
+  
+  td:last-child {
+    border-bottom: 0;
+  }
 }
 </style>
diff --git a/frontend/src/views/payment/PaymentFail.vue b/frontend/src/views/payment/PaymentFail.vue
new file mode 100644
index 0000000..711c6ce
--- /dev/null
+++ b/frontend/src/views/payment/PaymentFail.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="payment-result fail">
+    <div class="result-container">
+      <div class="icon-container">
+        <i class="pi pi-times-circle"></i>
+      </div>
+      <h1>결제가 취소되었습니다</h1>
+      <p v-if="message">{{ message }}</p>
+      <div class="buttons">
+        <button class="primary-btn" @click="goToSubscription">구독 관리로 이동</button>
+        <button class="secondary-btn" @click="goToHome">홈으로 이동</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+const message = ref('');
+
+onMounted(async () => {
+  // URL에서 메시지 가져오기
+  message.value = route.query.message || '결제가 취소되었습니다.';
+  
+  // 부모 창에 결제 실패 메시지 전달
+  if (window.opener && window.opener.handlePaymentFail) {
+    window.opener.handlePaymentFail(message.value);
+    // 3초 후 창 닫기
+    setTimeout(() => {
+      window.close();
+    }, 3000);
+  }
+});
+
+const goToSubscription = () => {
+  if (window.opener) {
+    window.opener.location.href = '/club/subscription';
+    window.close();
+  } else {
+    router.push('/club/subscription');
+  }
+};
+
+const goToHome = () => {
+  if (window.opener) {
+    window.opener.location.href = '/';
+    window.close();
+  } else {
+    router.push('/');
+  }
+};
+</script>
+
+<style scoped>
+.payment-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f8f9fa;
+}
+
+.result-container {
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.icon-container {
+  margin-bottom: 20px;
+}
+
+.fail .icon-container i {
+  font-size: 80px;
+  color: #f44336;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+p {
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.primary-btn, .secondary-btn {
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.primary-btn {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+}
+
+.primary-btn:hover {
+  background-color: #43a047;
+  transform: translateY(-2px);
+}
+
+.secondary-btn {
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.secondary-btn:hover {
+  background-color: #e9e9e9;
+  transform: translateY(-2px);
+}
+</style>
diff --git a/frontend/src/views/payment/PaymentSuccess.vue b/frontend/src/views/payment/PaymentSuccess.vue
new file mode 100644
index 0000000..d339cc4
--- /dev/null
+++ b/frontend/src/views/payment/PaymentSuccess.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="payment-result success">
+    <div class="result-container">
+      <div class="icon-container">
+        <i class="pi pi-check-circle"></i>
+      </div>
+      <h1>결제가 완료되었습니다</h1>
+      <p>주문번호: {{ orderId }}</p>
+      <div class="buttons">
+        <button class="primary-btn" @click="goToSubscription">구독 관리로 이동</button>
+        <button class="secondary-btn" @click="goToHome">홈으로 이동</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import apiClient from '@/services/api';
+
+const router = useRouter();
+const route = useRoute();
+const orderId = ref('');
+
+onMounted(async () => {
+  // URL에서 주문 ID 가져오기
+  orderId.value = route.query.orderId || '';
+  
+  // 부모 창에 결제 성공 메시지 전달
+  if (window.opener && window.opener.handlePaymentSuccess) {
+    window.opener.handlePaymentSuccess(orderId.value);
+    // 3초 후 창 닫기
+    setTimeout(() => {
+      window.close();
+    }, 3000);
+  }
+});
+
+const goToSubscription = () => {
+  if (window.opener) {
+    window.opener.location.href = '/club/subscription';
+    window.close();
+  } else {
+    router.push('/club/subscription');
+  }
+};
+
+const goToHome = () => {
+  if (window.opener) {
+    window.opener.location.href = '/';
+    window.close();
+  } else {
+    router.push('/');
+  }
+};
+</script>
+
+<style scoped>
+.payment-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f8f9fa;
+}
+
+.result-container {
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.icon-container {
+  margin-bottom: 20px;
+}
+
+.success .icon-container i {
+  font-size: 80px;
+  color: #4caf50;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+p {
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.primary-btn, .secondary-btn {
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.primary-btn {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+}
+
+.primary-btn:hover {
+  background-color: #43a047;
+  transform: translateY(-2px);
+}
+
+.secondary-btn {
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.secondary-btn:hover {
+  background-color: #e9e9e9;
+  transform: translateY(-2px);
+}
+</style>