feat: 인앱 브라우저 스타일 컴포넌트 추가 및 적용

- InAppBrowser.styles.ts 파일 생성 및 스타일 컴포넌트 정의
- 인앱 브라우저 컴포넌트에서 기존 HTML 요소를 스타일 컴포넌트로 변경하여 가독성 및 유지보수성 향상

Author: Cllaude99

apps/web/src/components/InAppBrowser/InAppBrowser.styles.ts

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: ${({ theme }) => theme.palette.gray['gray-9']};
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  text-align: center;
+`;
+
+const Title = styled.p`
+  color: ${({ theme }) => theme.palette.common.white};
+  ${({ theme }) => theme.typography.title.display1};
+`;
+
+const Description = styled.p`
+  color: ${({ theme }) => theme.palette.gray['gray-2']};
+  ${({ theme }) => theme.typography.title['subhead2']};
+`;
+
+const StoreButton = styled.button`
+  margin-top: 16px;
+  padding: 12px 24px;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
+  ${({ theme }) => theme.typography.title.subhead1};
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.gray['gray-2']};
+  }
+`;
+
+export { Container, Content, Title, Description, StoreButton };

apps/web/src/components/InAppBrowser/index.tsx

@@ -1,5 +1,6 @@
 import useInAppBrowserDetect from '@/hooks/useInAppBrowserDetect';
 import { ReactNode, useEffect } from 'react';
+import * as S from './InAppBrowser.styles';
 
 interface InAppBrowserDetectProps {
   children: ReactNode;
@@ -44,21 +45,21 @@ const InAppBrowserDetect = ({ children }: InAppBrowserDetectProps) => {
     })();
 
     return (
-      <div>
-        <div>
-          <p>{userBrowserName} 인앱브라우저에서는</p>
-          <p>일부 기능 이용이 제한됩니다.</p>
-          <p>외부 브라우저로 이동중입니다...</p>
-          <button
+      <S.Container>
+        <S.Content>
+          <S.Title>{userBrowserName} 인앱브라우저에서는</S.Title>
+          <S.Description>일부 기능 이용이 제한됩니다.</S.Description>
+          <S.Description>외부 브라우저로 이동중입니다...</S.Description>
+          <S.StoreButton
             onClick={(e) => {
               e.preventDefault();
               moveToStore();
             }}
           >
             {storeName}에서 설치하기
-          </button>
-        </div>
-      </div>
+          </S.StoreButton>
+        </S.Content>
+      </S.Container>
     );
   }