diff --git a/package.json b/package.json index d32ba917..72f6fb71 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@amplitude/analytics-browser": "^2.9.3", + "@amplitude/plugin-session-replay-browser": "^1.6.13", "@sopt-makers/colors": "^3.0.1", "@sopt-makers/fonts": "^2.0.1", "@sopt-makers/icons": "^1.0.4", diff --git a/src/App.tsx b/src/App.tsx index 0c02a8ee..8cc0265f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ -import { init } from '@amplitude/analytics-browser'; +import { add, init } from '@amplitude/analytics-browser'; +import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'; import { colors } from '@sopt-makers/colors'; import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; @@ -112,6 +113,14 @@ const App = () => { if (!isAmplitudeInitialized) { init(import.meta.env.VITE_AMPLITUDE_API_KEY); setIsAmplitudeInitialized(true); + + const sessionReplayTracking = sessionReplayPlugin({ + // Set sample rate (required) + // sampleRate of 1 captures 100% of all sessions - not advisable for production environment + sampleRate: 0.7, + }); + + add(sessionReplayTracking); } }, [isAmplitudeInitialized]); diff --git a/src/common/components/Checkbox/index.tsx b/src/common/components/Checkbox/index.tsx index e3cd64f5..ba9ba5e5 100644 --- a/src/common/components/Checkbox/index.tsx +++ b/src/common/components/Checkbox/index.tsx @@ -30,7 +30,7 @@ const Checkbox = ({ ...(required && { required: '필수 동의 항목이에요.' }), })} type="checkbox" - className={hiddenCheckbox} + className={`amp-unmask ${hiddenCheckbox}`} {...checkboxElementProps} /> diff --git a/src/common/components/Select/index.tsx b/src/common/components/Select/index.tsx index 1e191829..57905561 100644 --- a/src/common/components/Select/index.tsx +++ b/src/common/components/Select/index.tsx @@ -16,6 +16,8 @@ import { import { SelectBoxProps } from './type'; const SelectBox = ({ label, name, options, size = 'sm', required, ...inputElementProps }: SelectBoxProps) => { + const ampUnmask = name === 'part' || name === 'knownPath'; + const { register, formState, clearErrors, getValues, setValue, setError } = useFormContext(); const { errors } = formState; @@ -41,7 +43,7 @@ const SelectBox = ({ label, name, options, size = 'sm', required, ...inputElemen ({ return (