[Feat] amplitude session replay 추가 (#332)

* feat: session replay 기능 추가

* feat: 마스킹 처리

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",

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]);
 

src/common/components/Checkbox/index.tsx

@@ -30,7 +30,7 @@ const Checkbox = <T extends FieldValues>({
               ...(required && { required: '필수 동의 항목이에요.' }),
             })}
             type="checkbox"
-            className={hiddenCheckbox}
+            className={`amp-unmask ${hiddenCheckbox}`}
             {...checkboxElementProps}
           />
           <span className={checkmark[errors && errors[name] ? 'error' : 'default']} />

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
         <input
           id={name}
           type="text"
-          className={selectVariant[errors?.[name] ? 'error' : 'selected']}
+          className={`${ampUnmask ? 'amp-unmask' : ''} ${selectVariant[errors?.[name] ? 'error' : 'selected']}`}
           role="combobox"
           readOnly
           {...inputElementProps}

src/common/components/Textarea/components/Input/index.tsx

@@ -45,7 +45,7 @@ const Input = <T extends FieldValues>({
   return (
     <div className={container}>
       <textarea
-        className={`${textareaStyle[state]} ${textareaHeight[textareaSize]}`}
+        className={`amp-unmask ${textareaStyle[state]} ${textareaHeight[textareaSize]}`}
         {...register(name, {
           ...(required && { required: '필수 입력 항목이에요.' }),
           maxLength: {

src/views/ApplyPage/components/DefaultSection/index.tsx

@@ -81,7 +81,11 @@ const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
           <label
             htmlFor="picture"
             className={profileLabelVar[disabled ? 'disabled' : errors.picture ? 'error' : 'default']}>
-            {hasImage ? <img src={image || pic} alt="지원서 프로필 사진" className={profileImage} /> : <IconUser />}
+            {hasImage ? (
+              <img src={image || pic} alt="지원서 프로필 사진" className={`amp-block ${profileImage}`} />
+            ) : (
+              <IconUser />
+            )}
             {errors.picture && <p className={errorText}>{errors.picture?.message as string}</p>}
           </label>
         </div>

src/views/ApplyPage/components/FileInput/index.tsx

@@ -119,7 +119,7 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
         {...register(`file${id}`)}
         onChange={(e) => handleFileChange(e, id)}
         ref={inputRef}
-        className={fileInput}
+        className={`amp-unmask ${fileInput}`}
         disabled={
           disabled ||
           isReview ||

src/views/dialogs/SubmitDialog/index.tsx

@@ -56,7 +56,12 @@ const SubmitDialog = forwardRef<HTMLDialogElement, SubmitDialogProps>(
         </ol>
         <div className={checkboxContainer}>
           <label className={checkboxWrapper}>
-            <input type="checkbox" checked={isChecked} className={hiddenCheckbox} onChange={handleCheck} />
+            <input
+              type="checkbox"
+              checked={isChecked}
+              className={`amp-unmask ${hiddenCheckbox}`}
+              onChange={handleCheck}
+            />
             <span className={checkmark} />
             <span>확인했습니다.</span>
           </label>

yarn.lock

@@ -13,7 +13,7 @@
     "@amplitude/plugin-page-view-tracking-browser" "^2.2.17"
     tslib "^2.4.1"
 
-"@amplitude/analytics-client-common@^2.2.4":
+"@amplitude/analytics-client-common@>=1 <3", "@amplitude/analytics-client-common@^2.2.4":
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-2.2.4.tgz#8c64304b26bbbd9788a09d0d7fd7a30807314971"
   integrity sha512-+zOW3/Yb4LzK1DfhFCnSOcb8vgeZgIQffLM6yrgzKGedtQOnwDQeKTDI3aaMzckXQPVcJs1M6bJcT/l5TmAkDw==
@@ -28,15 +28,26 @@
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-connector/-/analytics-connector-1.5.0.tgz#89a78b8c6463abe4de1d621db4af6c62f0d62b0a"
   integrity sha512-T8mOYzB9RRxckzhL0NTHwdge9xuFxXEOplC8B1Y3UX3NHa3BLh7DlBUZlCOwQgMc2nxDfnSweDL5S3bhC+W90g==
 
-"@amplitude/analytics-core@^2.3.0":
+"@amplitude/analytics-core@>=1 <3", "@amplitude/analytics-core@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-2.3.0.tgz#bab54d8acbb825496b51c1f1b4b9482f0533891f"
   integrity sha512-Knafvocs29cPOHM3GHyBkP4nXUrh/oXnj2fULoSyh/03Bt63UPoyQCNS/EtQB/dOUhapTP35ZU9yZnrY+jvndQ==
   dependencies:
     "@amplitude/analytics-types" "^2.6.0"
     tslib "^2.4.1"
 
-"@amplitude/analytics-types@^2.6.0":
+"@amplitude/analytics-remote-config@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-remote-config/-/analytics-remote-config-0.3.3.tgz#113f1adcf6920d50c785849b23baac742f45e174"
+  integrity sha512-FZt4lbFNwhy7EeOcF2jwtCc3Zwo1Semit4PqNOlgacavp53zz3BMu1cfpVDnv6YDyczhYfs/qDxPGbqiRPNpNw==
+  dependencies:
+    "@amplitude/analytics-client-common" ">=1 <3"
+    "@amplitude/analytics-core" ">=1 <3"
+    "@amplitude/analytics-types" ">=1 <3"
+    idb "^8.0.0"
+    tslib "^2.4.1"
+
+"@amplitude/analytics-types@>=1 <3", "@amplitude/analytics-types@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.6.0.tgz#00d1957d3f5eecb85e00ef4a1b2f65c497967d46"
   integrity sha512-7MSENvLCTGjec7K45JT+RcOuoPTCvq1MMq/HRLiQK/BMR4taX7f/uXldEc8b//o+ZZP45IBqFroR7Bl8LwJQrQ==
@@ -50,6 +61,64 @@
     "@amplitude/analytics-types" "^2.6.0"
     tslib "^2.4.1"
 
+"@amplitude/plugin-session-replay-browser@^1.6.13":
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-session-replay-browser/-/plugin-session-replay-browser-1.6.13.tgz#39e80955ff92bf0b6e74801fd56791f761a17fcb"
+  integrity sha512-oS/s8IpOzD8RQtDheqnSwCTse1eoJF28P5YRiSa673odTZO/mzRlPlg3Zk36DZpjxoWEdMN0egOvjXKowEoZ3g==
+  dependencies:
+    "@amplitude/analytics-client-common" ">=1 <3"
+    "@amplitude/analytics-core" ">=1 <3"
+    "@amplitude/analytics-types" ">=1 <3"
+    "@amplitude/session-replay-browser" "^1.12.1"
+    idb-keyval "^6.2.1"
+    tslib "^2.4.1"
+
+"@amplitude/rrdom@^2.0.0-alpha.18":
+  version "2.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@amplitude/rrdom/-/rrdom-2.0.0-alpha.18.tgz#999f606e187b0fcfaa9d59aea4a0ceb41d19975d"
+  integrity sha512-0ZPSfujGyjhn+o32ToLDqQp94Y9kMNuxfZzntAHT1aRhz0o7KV+AR7tjmL3J6Gb7zGZKdIJxpjB6PJXebqDXOw==
+  dependencies:
+    "@amplitude/rrweb-snapshot" "^2.0.0-alpha.18"
+
+"@amplitude/rrweb-snapshot@^2.0.0-alpha.18":
+  version "2.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@amplitude/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.18.tgz#173c5eb37e64eff8c35aa748e14aa445d639644c"
+  integrity sha512-/lL1Zm4uzQdvwYcVsrRKBR/uPxC8+NPB12vcqGU9Q00FHKgQJYTcnq61QTAl7WiM2ovPRCF4s091Vjv1NqVZwA==
+
+"@amplitude/rrweb-types@^2.0.0-alpha.18":
+  version "2.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@amplitude/rrweb-types/-/rrweb-types-2.0.0-alpha.18.tgz#c9df9ca0d3d49161c8182f9ecb66c1670e45b4e6"
+  integrity sha512-Qfoz6Bn8OZnu0scbVK3yqz0N1P2E4bKzq+r1rKkWp9M7GcDBg02n73eSIpH9ebN+/X8zGbv0PK/4FUfdcA2cjA==
+  dependencies:
+    "@amplitude/rrweb-snapshot" "^2.0.0-alpha.18"
+
+"@amplitude/rrweb@^2.0.0-alpha.14":
+  version "2.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@amplitude/rrweb/-/rrweb-2.0.0-alpha.18.tgz#473333227416b9d79cc395f382c676774c091acd"
+  integrity sha512-kOL1fpmJqftvgRygeQzQ/xZQnVDCjTfKnSUTJdDpiy14CKZDB81X4I/RFM8oO5x9VgPXdkj45wJ79u4V7PSZRw==
+  dependencies:
+    "@amplitude/rrdom" "^2.0.0-alpha.18"
+    "@amplitude/rrweb-snapshot" "^2.0.0-alpha.18"
+    "@amplitude/rrweb-types" "^2.0.0-alpha.18"
+    "@types/css-font-loading-module" "0.0.7"
+    "@xstate/fsm" "^1.4.0"
+    base64-arraybuffer "^1.0.1"
+    fflate "^0.4.4"
+    mitt "^3.0.0"
+
+"@amplitude/session-replay-browser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@amplitude/session-replay-browser/-/session-replay-browser-1.12.1.tgz#4768e9706ebbb0ac45618072b2cb054128ec7ff4"
+  integrity sha512-zbj4c8DcibJb/U131OjKxxaGhDtcrTn5ZhD7vcr+Uw5wrqEyvIwBJzQl7rQ5bZ4drSTlK6zXlQJhlGwD5G84gQ==
+  dependencies:
+    "@amplitude/analytics-client-common" ">=1 <3"
+    "@amplitude/analytics-core" ">=1 <3"
+    "@amplitude/analytics-remote-config" "^0.3.3"
+    "@amplitude/analytics-types" ">=1 <3"
+    "@amplitude/rrweb" "^2.0.0-alpha.14"
+    idb "^8.0.0"
+    tslib "^2.4.1"
+
 "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -1241,6 +1310,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/css-font-loading-module@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz#2f98ede46acc0975de85c0b7b0ebe06041d24601"
+  integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==
+
 "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -1499,6 +1573,11 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.0"
 
+"@xstate/fsm@^1.4.0":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.6.5.tgz#f599e301997ad7e3c572a0b1ff0696898081bea5"
+  integrity sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1673,6 +1752,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2386,6 +2470,11 @@ faye-websocket@0.11.4:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fflate@^0.4.4:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -2669,11 +2758,21 @@ http-parser-js@>=0.5.1:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
   integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
+idb-keyval@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.1.tgz#94516d625346d16f56f3b33855da11bfded2db33"
+  integrity sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==
+
 idb@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
 
+idb@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-8.0.0.tgz#33d7ed894ed36e23bcb542fb701ad579bfaad41f"
+  integrity sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==
+
 ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -3097,6 +3196,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mitt@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mlly@^1.4.2, mlly@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.7.0.tgz#587383ae40dda23cadb11c3c3cc972b277724271"