Merge pull request #169 from dnd-side-project/feat/#168/vercel-analytics

[feat] vercel analytics 적용

Author: maylh

package.json

@@ -34,6 +34,7 @@
     "@stomp/stompjs": "^7.1.1",
     "@supabase/supabase-js": "^2.79.0",
     "@tanstack/react-query": "^5.84.2",
+    "@vercel/analytics": "^1.6.1",
     "axios": "^1.11.0",
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import { BrowserRouter } from 'react-router-dom'
 
+import { Analytics } from '@vercel/analytics/react'
 import { createRoot } from 'react-dom/client'
 
 import { QueryProvider, ThemeProvider } from '@app/providers'
@@ -13,6 +14,7 @@ createRoot(document.getElementById('root')!).render(
     <QueryProvider>
       <ThemeProvider>
         <GlobalStyle />
+        <Analytics />
         <App />
       </ThemeProvider>
     </QueryProvider>

src/main.tsx

@@ -42,7 +42,6 @@ const FeedbackBottomSheet = ({ isOpen, onClose }: FeedbackBottomSheetProps) => {
         <img src={FeedbackImg} alt="feedback" width={206} height={206} />
       </Content>
       <ButtonWrapper>
-        <Label>~ 12/31(수)까지</Label>
         <Button onClick={() => navigate('/feedback')} size="L" state="primary">
           유저테스트 참여하기
         </Button>
@@ -79,17 +78,17 @@ const ButtonWrapper = styled.div`
   flex-direction: column;
 `
 
-const Label = styled.span`
-  position: absolute;
-  top: -18%;
-  right: 12%;
-  background-color: ${({ theme }) => theme.COLOR['gray-700']};
-  color: ${({ theme }) => theme.COLOR['primary-normal']};
-  ${({ theme }) => theme.FONT.caption1};
-  border-radius: 40px;
-  padding: 4px 12px;
-  border: 1px solid ${({ theme }) => theme.COLOR['primary-normal']};
-`
+// const Label = styled.span`
+//   position: absolute;
+//   top: -18%;
+//   right: 12%;
+//   background-color: ${({ theme }) => theme.COLOR['gray-700']};
+//   color: ${({ theme }) => theme.COLOR['primary-normal']};
+//   ${({ theme }) => theme.FONT.caption1};
+//   border-radius: 40px;
+//   padding: 4px 12px;
+//   border: 1px solid ${({ theme }) => theme.COLOR['primary-normal']};
+// `
 
 const Content = styled.div`
   ${flexColCenter}