[Deploy]: 주문정보 하드코딩 수정 (2.0.5)

.gitignore

@@ -25,4 +25,6 @@ dist-ssr
 *.sw?
 
 .env
-*.pem
+*.pem
+# Sentry Config File
+.env.sentry-build-plugin

src/App.tsx

@@ -182,8 +182,7 @@ function App() {
         <InformationBox
           title="Q. 저는 코딩을 하나도 모르는 새내기인데, 따라갈 수 있나요?"
           description="A. 당연하죠!"
-          description2="기초 스터디는 개발에 처음 입문하는 사람들을 위해서 만들어진 커리큘럼으로 강의가 진행돼요. 학습자 분들이 차근차근 따라올 수 있게끔 주차별 미션과 담당 멘토를 통해 도와드릴 예정이니, 부담갖지 않으셔도 돼요!
-          스터디에 참여하지 못하더라도, 사람들과 네트워킹하며 친분을 쌓아가는 것도 언제든지 환영입니다!"
+          description2="기초 스터디는 개발에 처음 입문하는 사람들을 위해서 만들어진 커리큘럼으로 강의가 진행돼요. 학습자 분들이 차근차근 따라올 수 있게끔 주차별 미션과 담당 멘토를 통해 도와드릴 예정이니, 부담갖지 않으셔도 돼요! 스터디에 참여하지 못하더라도, 사람들과 네트워킹하며 친분을 쌓아가는 것도 언제든지 환영입니다!"
         />
         <InformationBox
           title="Q. 다른 동아리, 학회와 병행 가능한가요?"

src/apis/member/memberType.ts

@@ -14,6 +14,7 @@ export interface CurrentRecruitmentType {
     endDate: string;
     open: boolean;
   };
+  feeName: string;
   fee: number;
   roundType: 'FIRST' | 'SECOND';
   roundTypeValue: string;

src/components/payments/PaymentItemBox.tsx

@@ -1,15 +1,41 @@
 import { Flex, Text } from '@/components/common/Wrapper';
 import Box from 'wowds-ui/Box';
 import { useProductBase } from '@/hooks/zustand/useProduct';
+import memberApi from '@/apis/member/memberApi';
+import { useQuery } from '@tanstack/react-query';
+import LoadingSpinner from '../common/LoadingSpinner';
+import { useEffect } from 'react';
 
 export const PaymentItemBox = () => {
-  const { name, strAmount } = useProductBase();
+  const { name, strAmount, setName, setAmount } = useProductBase();
+  const { data: member, isLoading } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
+
+  useEffect(() => {
+    if (member) {
+      setName(member.currentRecruitmentRound.feeName);
+      setAmount(member.currentRecruitmentRound.fee);
+    }
+  }, [member, setAmount, setName]);
+
   return (
-    <Flex justify="flex-start" direction="column" align="flex-start" gap="sm">
-      <Text typo="h2" color="black">
-        결제 항목
-      </Text>
-      <Box text={name} subText={`금액 ${strAmount}원`} status="success" />
-    </Flex>
+    <>
+      {isLoading || !member ? (
+        <LoadingSpinner />
+      ) : (
+        <Flex
+          justify="flex-start"
+          direction="column"
+          align="flex-start"
+          gap="sm">
+          <Text typo="h2" color="black">
+            결제 항목
+          </Text>
+          <Box text={name} subText={`금액 ${strAmount}원`} status="success" />
+        </Flex>
+      )}
+    </>
   );
 };

src/constants/environment.ts

@@ -5,6 +5,6 @@ export const {
   VITE_ACCESS_TOKEN: ACCESS_TOKEN,
   VITE_CLIENT_KEY: CLIENT_KEY,
   REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY: SECURE_KEY,
-  SENTRY_DSN_KEY: SENTRY_DSN_KEY,
+  VITE_SENTRY_DSN_KEY: VITE_SENTRY_DSN_KEY,
   SENTRY_AUTH_TOKEN: SENTRY_AUTH_TOKEN
 } = import.meta.env;

src/hooks/zustand/useProduct.ts

@@ -2,20 +2,24 @@ import { create } from 'zustand';
 import { useShallow } from 'zustand/react/shallow';
 
 type ProductStore = {
-  name: string;
+  name: string | null;
   amount: number;
   totalAmount: number;
   discount: number;
   issuedCouponId: number | null;
+  setName: (name: string) => void;
+  setAmount: (amount: number) => void;
   setDiscount: (discount: number, couponId: number) => void;
 };
 
 export const useProductStore = create<ProductStore>((set) => ({
-  name: '2024년 1학기 정회원 회비',
+  name: null,
   amount: 20000,
   totalAmount: 20000,
   discount: 0,
   issuedCouponId: null,
+  setName: (name) => set({ name }),
+  setAmount: (amount) => set({ amount }),
   setDiscount: (newDiscount, couponId) =>
     set((state) => ({
       discount: newDiscount,
@@ -26,17 +30,21 @@ export const useProductStore = create<ProductStore>((set) => ({
 }));
 
 export const useProductBase = () => {
-  const { name, amount } = useProductStore(
+  const { name, amount, setName, setAmount } = useProductStore(
     useShallow((state) => ({
       name: state.name,
-      amount: state.amount
+      amount: state.amount,
+      setName: state.setName,
+      setAmount: state.setAmount
     }))
   );
 
   return {
     name,
     amount,
-    strAmount: amount.toLocaleString()
+    strAmount: amount.toLocaleString(),
+    setName,
+    setAmount
   };
 };
 

src/main.tsx

@@ -1,16 +1,17 @@
-import sentry from '@utils/sentry';
+/* eslint-disable import/namespace */
 import * as Sentry from '@sentry/react';
+import sentry from './utils/sentry';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
 import BottomSheetProvider from './components/provider/BottomSheetProvider';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Routers } from '@/routes';
 import { GlobalStyle } from '@/styles';
 import { Global } from '@emotion/react';
 import { ToastContainer } from 'react-toastify';
 import './styles/styles.scss';
-
 try {
   sentry.initSentry();
 } catch (error: unknown) {

src/utils/sentry.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/namespace */
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import {
@@ -6,34 +7,31 @@ import {
   useLocation,
   useNavigationType
 } from 'react-router-dom';
-import { SENTRY_DSN_KEY } from '@/constants/environment';
+import { VITE_SENTRY_DSN_KEY } from '@/constants/environment';
 
 const setSentry = () => {
   function initSentry() {
-    if (process.env.NODE_ENV === 'development') return;
-
     Sentry.init({
-      environment: process.env.VERCEL_ENV,
-      dsn: SENTRY_DSN_KEY,
+      environment: process.env.NODE_ENV,
+      dsn: VITE_SENTRY_DSN_KEY,
       tracesSampleRate: 1.0,
+      tracePropagationTargets: [
+        'localhost',
+        /^https:\/\/(?:dev-|local-)?onboarding\.gdschongik\.com(?:\/.*)/,
+        /^https:\/\/(?:dev-)?api\.gdschongik\.com(?:\/.*)/
+      ],
       integrations: [
+        Sentry.browserTracingIntegration(),
         Sentry.reactRouterV6BrowserTracingIntegration({
           useEffect,
           useLocation,
           useNavigationType,
           createRoutesFromChildren,
           matchRoutes
         }),
-        // eslint-disable-next-line import/namespace
         Sentry.replayIntegration()
       ],
 
-      tracePropagationTargets: [
-        /^https:\/\/onboarding.gdschongik.com\/?.*$/,
-        /^https:\/\/api\.gdschongik\.com\/?.*$/,
-        /^https:\/\/dev-onboarding.gdschongik.com\/?.*$/,
-        /^https:\/\/dev-api\.gdschongik\.com\/?.*$/
-      ],
       replaysSessionSampleRate: 0.1,
       replaysOnErrorSampleRate: 1.0
     });

vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
-
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 
 // https://vitejs.dev/config/
@@ -10,13 +9,17 @@ export default defineConfig({
     react(),
     tsconfigPaths(),
     sentryVitePlugin({
-      org: process.env.SENTRY_ORG_NAME,
-      project: process.env.SENTRY_PROJECT_NAME,
-      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: process.env.VITE_SENTRY_ORG_NAME,
+      project: process.env.VITE_SENTRY_PROJECT_NAME,
+      authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
       sourcemaps: {
         assets: './dist/**',
         filesToDeleteAfterUpload: '**/*.map'
       }
+    }),
+    sentryVitePlugin({
+      org: 'gdsc-hongik',
+      project: 'wow-onboarding'
     })
   ],
   build: {