Merge branch 'dev' of https://github.com/Moaguide-develop/moaguide_front

 into dev

.gitignore

@@ -37,4 +37,4 @@ next-env.d.ts
 .env
 # Sentry Config File
 .env.sentry-build-plugin
-todo
+todo

cypress.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
+    chromeWebSecurity: false, // Cross-Origin 제한 해제
+
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/login.cy.ts

@@ -0,0 +1,10 @@
+export function logintest() {
+  cy.visit('/sign');
+  cy.get('input[type="email"]').type('moaguide1');
+  cy.get('input[type="password"]').type('qwer1234!');
+  cy.get('.submit').click();
+
+  // 로그인 성공 후 세션 유지 확인
+  cy.url().should('not.include', '/sign');
+  // cy.getCookie('access_token').should('exist');
+}

cypress/e2e/paymentIndex.cy.ts

@@ -0,0 +1,42 @@
+describe('PaymentIndex Component', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/api/payment-status', { fixture: 'paymentStatus.json' }).as(
+      'getPaymentStatus'
+    );
+    cy.visit('/payment');
+  });
+
+  it('renders payment benefits correctly', () => {
+    // Check that the header and subscription benefits are rendered
+    cy.get('.text-heading2').contains('구독 시작하기');
+    cy.get('.text-body7').should('have.length', 4);
+  });
+
+  it('allows selecting a subscription option', () => {
+    // Click on the first subscription option and check that it is selected
+    cy.get('[data-testid="subscription-option"]').first().click();
+    cy.get('[data-testid="subscription-option"]')
+      .first()
+      .should('have.class', 'border-normal');
+  });
+
+  it('redirects to the correct page based on login status', () => {
+    // Mock logged-in state
+    cy.setCookie('access_token', 'validToken');
+    cy.get('.cta-button').click();
+    cy.url().should('include', '/payment/check');
+
+    // Mock logged-out state
+    cy.clearCookie('access_token');
+    cy.get('.cta-button').click();
+    cy.url().should('include', '/sign');
+  });
+
+  it('handles back button click', () => {
+    // Check that clicking the back button navigates to the previous page
+    cy.get('.back-button').click();
+    cy.url().should('not.include', '/payment');
+  });
+});
+
+export {};

cypress/e2e/paymentTest.cy.ts/paymentcycle.cy.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+import { logintest } from '../login.cy';
+
+describe('Full Payment Flow', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/api/payment-status', { fixture: 'paymentStatus.json' }).as(
+      'getPaymentStatus'
+    );
+    cy.intercept('GET', '/api/issubscribed', { subscribed: false }).as('getIsSubscribed');
+    // cy.setCookie('access_token', 'your-mock-token');
+  });
+
+  it('completes a full payment flow', () => {
+    logintest();
+    cy.visit('/payment');
+    cy.wait(3000);
+    cy.contains('div', '첫 달 무료체험하기').should('exist').click();
+    cy.url().should('include', '/payment/check');
+    cy.get('.subscribed_check').click();
+    cy.wait(1500);
+    cy.get('.payment_start').click();
+    cy.wait(3000);
+
+    //토스 페이먼츠 결제 테스트
+
+    cy.get('#__tosspayments_payment-gateway_iframe__')
+      // .should('exist')
+      .then(($iframe) => {
+        const body = $iframe.contents().find('body');
+        cy.log(body.html());
+        cy.wrap(body)
+          .should('not.be.empty')
+          .within(() => {
+            cy.get('input[aria-label="카드번호 1 ~ 4 자리"]').type('6243');
+            cy.get('input[aria-label="카드번호 5 ~ 8 자리"]').type('6303');
+            cy.get('input[aria-label="카드번호 9 ~ 12 자리"]').type('1763');
+            cy.get('input[aria-label="카드번호 13 ~ 16 자리"]').type('5652');
+            cy.get('input[aria-label="카드 유효기간"]').type('0825');
+            cy.get('input[aria-label="주민등록번호 생년월일"]').type('010310');
+            cy.get('input[aria-label="주민등록번호 성별"]').type('3');
+            cy.get('input[type="checkbox"]').check();
+            cy.contains('button', '다음').click();
+          });
+      });
+
+    cy.url().should('include', '/payment/check/confirm/successloading');
+    cy.get('p').contains('결제가 진행중입니다...').should('exist');
+  });
+});
+export {};

cypress/fixtures/isSubscribed.json

@@ -0,0 +1,3 @@
+{
+  "subscribed": true
+}

cypress/fixtures/paymentStatus.json

@@ -0,0 +1,4 @@
+{
+  "status": "success",
+  "message": "Payment status retrieved successfully"
+}

next.config.mjs

@@ -8,7 +8,6 @@ const bundleAnalyzer = withBundleAnalyzer({
 });
 const nextConfig = {
   reactStrictMode: false,
-  styledComponents: true,
   output: 'standalone',
   experimental: { instrumentationHook: true },
 
@@ -47,42 +46,20 @@ const nextConfig = {
   }
 };
 
-export default withSentryConfig(bundleAnalyzer(nextConfig), {
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options
-
+const SentryWebpackPluginOptions = {
   org: 'moaguide',
   project: 'javascript-nextjs',
-
-  // Only print logs for uploading source maps in CI
+  authToken: process.env.SENTRY_AUTH_TOKEN,
   silent: !process.env.CI,
-
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
   widenClientFileUpload: true,
-
-  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  sourcemaps: {
+    deleteSourcemapsAfterUpload: true
+  },
   reactComponentAnnotation: {
     enabled: true
   },
-
-  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  tunnelRoute: '/monitoring',
-
-  // Hides source maps from generated client bundles
-  hideSourceMaps: true,
-
-  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  hideSourceMaps: false,
   disableLogger: true,
-
-  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-  // See the following for more information:
-  // https://docs.sentry.io/product/crons/
-  // https://vercel.com/docs/cron-jobs
   automaticVercelMonitors: true
-});
+};
+export default withSentryConfig(bundleAnalyzer(nextConfig), SentryWebpackPluginOptions);

package.json

@@ -8,7 +8,7 @@
     "start": "next start -p 80",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "analyze": "cross-env ANALYZE=true next build",
-    "cypress:open": "cypress open"
+    "cypress": "cypress open"
   },
   "dependencies": {
     "@sentry/nextjs": "8",

src/app/layout.tsx

@@ -14,13 +14,13 @@ import NaverAnalytics from '@/lib/NaverAnalytics';
 import AuthWrapper from '@/components/common/AuthWrapper';
 import ToastProvider from '@/providers/ToastProvider';
 import RefreshTokenWrapper from '@/components/common/RefreshTokenWrapper';
+import * as Sentry from '@sentry/nextjs';
 
 declare global {
   interface Window {
     kakao: any;
   }
 }
-
 const pretendard = localFont({
   src: '../static/fonts/PretendardVariable.woff2',
   display: 'swap',
@@ -55,6 +55,11 @@ export const metadata: Metadata = {
   }
 };
 
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1.0 // 조정 가능
+});
+
 export default function RootLayout({
   children
 }: Readonly<{

src/app/learning/detail/[articleId]/page.tsx

@@ -0,0 +1,17 @@
+import Navbar from '@/components/common/Navbar';
+import ArticleDetailClientWrapper from '@/components/learning/article/ArticleDetailClientWrapper';
+
+interface PageProps {
+  params: { articleId: string };
+}
+
+export default function ArticleDetailPage({ params }: PageProps) {
+  const articleId = params.articleId;
+
+  return (
+    <>
+      <Navbar />
+      <ArticleDetailClientWrapper articleId={Number(articleId)} />
+    </>
+  );
+}

src/app/mypage/cardmanagement/success/page.tsx

@@ -18,11 +18,11 @@ export default function CardRegisterSuccess() {
             <h2 className="text-3xl font-semibold text-normal">
               카드 등록에 성공했습니다.
             </h2>
-            <p className="text-gray-500 mt-4 font-semibold">등록 내역</p>
+            {/* <p className="text-gray-500 mt-4 font-semibold">등록 내역</p>
 
             <p className="text-body4  text-gray400 max-w-lg mx-auto mt-2">
               주문 ID: {orderId || ''}
-            </p>
+            </p> */}
             <div className="mt-8">
               <button
                 className="w-full bg-normal hover:shadow-lg text-white rounded-xl px-4 py-2.5"

src/app/page.tsx

@@ -8,6 +8,12 @@ import { useAuthStore } from '@/store/userAuth.store';
 import { useMemberStore } from '@/store/user.store';
 import { setCookie } from '@/utils/cookie';
 import { setToken } from '@/utils/localStorage';
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1.0 // 조정 가능
+});
 
 const HomePage = () => {
   const { setIsLoggedIn } = useAuthStore();
@@ -18,22 +24,22 @@ const HomePage = () => {
     const urlParams = new URLSearchParams(window.location.search);
     const userParam = urlParams.get('user');
     const accessToken = urlParams.get('access');
-  
+
     if (userParam && accessToken) {
       try {
         const parsedUser = JSON.parse(decodeURIComponent(userParam));
-        
-        const user = JSON.parse(parsedUser.user); 
+
+        const user = JSON.parse(parsedUser.user);
         setToken(accessToken);
-  
+
         setMember({
           memberEmail: user.email,
           memberNickName: user.nickname,
           memberPhone: user.phoneNumber,
           loginType: user.loginType,
           marketing: user.marketing
         });
-  
+
         setIsLoggedIn(true);
         router.push('/');
       } catch (error) {
@@ -50,4 +56,4 @@ const HomePage = () => {
   );
 };
 
-export default HomePage;
+export default HomePage;

src/app/payment/(payment)/PaymentIndex.tsx

@@ -1,9 +1,11 @@
 'use client';
 import { getCookie } from '@/utils/cookie';
+import { isfirstpaymentcheck } from '@/utils/isfirstpaymentcheck';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 const PaymentIndex = () => {
+  const isfirst = isfirstpaymentcheck();
   const router = useRouter();
   const [isActive, setIsActive] = useState('first');
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -62,19 +64,19 @@ const PaymentIndex = () => {
           className={`w-full rounded-[12px] px-[20px] py-[22px] flex items-center justify-between border-2 cursor-pointer
         ${isActive === 'first' ? 'border-normal' : 'border-gray100'}
         `}>
-          <div className="text-heading4 text-normal">1개월 구독 + 1개월</div>
+          <div className="text-heading4 text-normal">1개월 구독</div>
           <div className="flex flex-col gap-2 items-end">
             <div className="text-body7 text-gray300 line-through">₩ 10,000</div>
-            <div className="text-heading4 ">₩ 9,900</div>
-            <div className="text-body7 text-gray500">₩ 9,900/월</div>
+            <div className="text-heading4 ">₩ 4,900</div>
+            <div className="text-body7 text-gray500">₩ 4,900/월</div>
           </div>
         </div>
       </div>
       {/* 버튼 */}
       <div
         onClick={handleClick}
         className="cursor-pointer my-10 py-[18px] w-full rounded-[12px] flex items-center justify-center bg-gradient2 text-title1 text-white">
-        첫 달 무료체험하기
+        {isfirst ? '첫 달 무료 체험하기' : '4,900원 결제하기'}
       </div>
     </div>
   );

src/app/payment/(payment)/TossPaymentsCardWidget.tsx

@@ -33,7 +33,7 @@ const TossPaymentsCardWidget = () => {
 
     try {
       await payment?.requestBillingAuth({
-        method: 'CARD', // 자동결제(빌링)는 카드만 지원합니다
+        method: 'CARD',
         successUrl: window.location.origin + `/payment/check/confirm/successloading`,
         failUrl: window.location.origin + '/payment/check/confirm/fail',