✨ 아이폰 레이아웃 라이브러리 적용 (#83)

* feat: 아이폰 레이아웃 제거 * chore: react-iphone-layout 라이브러리 추가 * feat: 아이폰 레이아웃 * style: 주석 위치 수정
CollaBu · May 29, 2024 · e30bc1d · e30bc1d
1 parent e5b3403
commit e30bc1d
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 216 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.10.2",
+    "react-iphone-layout": "^1.1.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "6.22.2",
     "react-toastify": "^10.0.5",

diff --git a/src/app/layout/RootLayout.tsx b/src/app/layout/RootLayout.tsx
@@ -1,10 +1,20 @@
+import { IPhoneLayout } from 'react-iphone-layout';
+import 'react-iphone-layout/dist/ReactIPhoneLayout.css';
 import { Outlet } from 'react-router-dom';
+
 import './RootLayout.scss';
 
+/**
+ * 🚨 현재 적용되어 있는 IPhoneLayout은 DEV 모드에서만 활성화되어야 하지만,
+ * 실제 개발 서버에서도 볼 수 있도록 하기 위해 따로 처리하지 않겠습니다.
+ * 하지만 실제 PROD 모드로 배포할 경우에는 <IPhoneLayout />을 제거해주세요.
+ */
 export const RootLayout = () => {
   return (
-    <div className='wrap'>
-      <Outlet />
-    </div>
+    <IPhoneLayout>
+      <div className='wrap'>
+        <Outlet />
+      </div>
+    </IPhoneLayout>
   );
 };
diff --git a/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx b/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx
diff --git a/src/app/layout/iPhone/index.ts b/src/app/layout/iPhone/index.ts
diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.scss b/src/app/layout/iPhone/ui/IPhoneLayout.scss
diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.tsx b/src/app/layout/iPhone/ui/IPhoneLayout.tsx
diff --git a/src/app/layout/iPhone/ui/index.ts b/src/app/layout/iPhone/ui/index.ts
diff --git a/src/app/layout/index.ts b/src/app/layout/index.ts
@@ -1,2 +1 @@
-export { IPhoneLayout } from './iPhone';
 export { RootLayout } from './RootLayout';
diff --git a/src/app/routers/index.tsx b/src/app/routers/index.tsx
@@ -3,17 +3,12 @@ import { createBrowserRouter, RouteObject } from 'react-router-dom';
 import { FeedMainPage } from '@/pages/feed-main';
 import { ProfileMainPage } from '@/pages/profile';
 
-import { IPhoneLayout } from '../layout';
+import { RootLayout } from '../layout';
 
-/**
- * 🚨 현재 iPhone Layout은 DEV 모드에서만 활성화되는 부분이지만,
- * 실제 PROD 환경에서도 볼 수 있도록 하기 위해 따로 처리하지 않겠습니다.
- * 하지만 실제 PROD 모드로 배포할 경우에는 <IPhoneLayout />을 제거하고 <RootLayout />으로 변경해주세요.
- */
 const root: RouteObject[] = [
   {
     path: '/',
-    element: <IPhoneLayout />,
+    element: <RootLayout />,
     children: [
       { index: true, element: <FeedMainPage /> },
       { path: 'users/:userId', element: <ProfileMainPage /> },

diff --git a/yarn.lock b/yarn.lock
@@ -3557,6 +3557,14 @@ react-intersection-observer@^9.10.2:
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz#d5b14f80c9a6bed525becc228db7dccac5d0ec1c"
   integrity sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==
 
+react-iphone-layout@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-iphone-layout/-/react-iphone-layout-1.1.1.tgz#d1cc3e758ce61d33d210d45728f8ae36b4d2e9ac"
+  integrity sha512-Xg6bq7IzSf6tg8hNCKntjSF0s7Ao3+QlqYUEWDgMpHMBvZ209dz7Ezg6EKAErAn16HTxTI9s5dAefY6L8R0Mxg==
+  dependencies:
+    react "^18.2.0"
+    react-dom "^18.2.0"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { IPhoneLayout } from './iPhone';
		export { RootLayout } from './RootLayout';