✨ Release v1.2.0 (#24)

* rename: iPhone.svg to iphone.svg
* feat: 오타 수정
* feat: update v1.2.0
* rename: iPhone.svg to iphone.svg
* feat: 업데이트 기능 문서 반영

README.ko.md

@@ -16,6 +16,7 @@ $ yarn add react-iphone-layout --dev
 - **웹 뷰 지원**: iPhone을 웹에 최적화하여 원활한 웹 뷰를 제공합니다.
 - **동적 iPhone 뷰 크기 조정**: iPhone 뷰의 크기를 동적으로 조정할 수 있습니다.
 - **실시간 보기 전환**: 제어 박스를 통해 iPhone 뷰와 노트북 뷰를 실시간으로 확인하여 다양한 장치에서 레이아웃을 원활하게 테스트하고 최적화할 수 있습니다.
+- **회전 기능**: iPhone 화면의 회전 기능을 제공합니다. (내부 콘텐츠는 회전되지 않습니다)
 
 ## 시작하기
 

README.md

@@ -16,6 +16,7 @@ $ yarn add react-iphone-layout --dev
 - **Web View Support**: Optimize for iPhone on the web to provide a seamless web view.
 - **Dynamic iPhone View Resizing**: You can dynamically adjust the size of the iPhone view.
 - **Real-Time View Switching**: Check the iPhone view and laptop view in real-time through a control box, allowing for seamless testing and optimization of layouts across different devices.
+- **Rotation iPhone**: provide a screen rotation feature for the iPhone. (The internal content does not rotate)
 
 ## Getting Started
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-iphone-layout",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "description": "React iPhone layout in web browser",
   "author": "bangdori <[email protected]>",

playground/src/ui/control-box/hooks/useRotate.tsx

@@ -1,20 +1,20 @@
 import { useEffect, useRef } from "react";
 
-const IPHONE_PROTRAIT_MODE = 0; // 세로 모드
+const IPHONE_PORTRAIT_MODE = 0; // 세로 모드
 const IPHONE_LANDSCAPE_MODE = -90; // 가로 모드
 
 export const useRotate = () => {
-  const iPhoneModeRef = useRef(IPHONE_PROTRAIT_MODE);
+  const iPhoneModeRef = useRef(IPHONE_PORTRAIT_MODE);
 
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--iphone-mode",
-      `${IPHONE_PROTRAIT_MODE}deg`
+      `${IPHONE_PORTRAIT_MODE}deg`
     );
   }, []);
 
   const handleRotate = () => {
-    if (iPhoneModeRef.current === IPHONE_PROTRAIT_MODE) {
+    if (iPhoneModeRef.current === IPHONE_PORTRAIT_MODE) {
       // 가로 모드로 변경
       iPhoneModeRef.current = IPHONE_LANDSCAPE_MODE;
       document.documentElement.style.setProperty(
@@ -23,10 +23,10 @@ export const useRotate = () => {
       );
     } else {
       // 세로 모드로 변경
-      iPhoneModeRef.current = IPHONE_PROTRAIT_MODE;
+      iPhoneModeRef.current = IPHONE_PORTRAIT_MODE;
       document.documentElement.style.setProperty(
         "--iphone-mode",
-        `${IPHONE_PROTRAIT_MODE}deg`
+        `${IPHONE_PORTRAIT_MODE}deg`
       );
     }
   };

src/lib/ui/control-box/ControlBox.css

@@ -21,6 +21,10 @@
 }
 
 .ril-control-list .ril-control-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   width: 40px;
   height: 40px;
 
@@ -35,15 +39,10 @@
   fill: var(--ril-control-focus);
 }
 
-.laptop-icon:hover rect {
-  fill: var(--ril-control-focus);
-}
-
-.plus-icon:hover rect,
-.plus-icon:hover line,
-.minus-icon:hover rect,
-.minus-icon:hover line {
+.ril-control-item:hover svg * {
   stroke: var(--ril-control-focus);
+  fill: var(--ril-control-focus);
+  color: var(--ril-control-focus);
 }
 
 .ril-control-list,

src/lib/ui/control-box/ControlBox.tsx

@@ -1,11 +1,13 @@
-import IPhoneIcon from "./assets/iPhone.svg?react";
+import IPhoneIcon from "./assets/iphone.svg?react";
 import LaptopIcon from "./assets/laptop.svg?react";
+import RotationIcon from "./assets/rotation.svg?react";
 import PlusIcon from "./assets/plus.svg?react";
 import MinusIcon from "./assets/minus.svg?react";
 
 import "./ControlBox.css";
 import "./Position.css";
-import { useResize } from "./hooks/useResize";
+import { useResize } from "./hooks";
+import { useRotate } from "./hooks";
 
 interface ControlBoxProps {
   position: "top" | "right" | "bottom" | "left";
@@ -32,6 +34,7 @@ export const ControlBox: React.FC<ControlBoxProps> = ({
     minSize,
     maxSize
   );
+  const { handleRotate } = useRotate();
 
   if (mode === "laptop") {
     return (
@@ -40,7 +43,7 @@ export const ControlBox: React.FC<ControlBoxProps> = ({
           className="iPhone-active-btn"
           onClick={() => handleChangeMode("iPhone")}
         >
-          <IPhoneIcon className="iphone-icon" width="64" height="64" />
+          <IPhoneIcon className="iphone-icon" width="48" height="48" />
         </button>
       </div>
     );
@@ -65,6 +68,9 @@ export const ControlBox: React.FC<ControlBoxProps> = ({
         >
           <LaptopIcon className="laptop-icon" />
         </li>
+        <li className="ril-control-item" onClick={handleRotate}>
+          <RotationIcon className="rotation-icon" />
+        </li>
         <li className="ril-control-item" onClick={handleSizeUp}>
           <PlusIcon className="plus-icon" />
         </li>

src/lib/ui/control-box/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useResize } from "./useResize";
+export { useRotate } from "./useRotate";

src/lib/ui/control-box/hooks/useRotate.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+const IPHONE_PORTRAIT_MODE = 0; // 세로 모드
+const IPHONE_LANDSCAPE_MODE = -90; // 가로 모드
+
+export const useRotate = () => {
+  const iPhoneModeRef = useRef(IPHONE_PORTRAIT_MODE);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--iphone-mode",
+      `${IPHONE_PORTRAIT_MODE}deg`
+    );
+  }, []);
+
+  const handleRotate = () => {
+    if (iPhoneModeRef.current === IPHONE_PORTRAIT_MODE) {
+      // 가로 모드로 변경
+      iPhoneModeRef.current = IPHONE_LANDSCAPE_MODE;
+      document.documentElement.style.setProperty(
+        "--iphone-mode",
+        `${IPHONE_LANDSCAPE_MODE}deg`
+      );
+    } else {
+      // 세로 모드로 변경
+      iPhoneModeRef.current = IPHONE_PORTRAIT_MODE;
+      document.documentElement.style.setProperty(
+        "--iphone-mode",
+        `${IPHONE_PORTRAIT_MODE}deg`
+      );
+    }
+  };
+
+  return { handleRotate };
+};

src/lib/ui/iPhone-layout/IPhoneLayout.css

@@ -21,6 +21,9 @@
 
   aspect-ratio: 256 / 538;
   height: var(--iphone-size);
+  rotate: var(--iphone-mode);
+
+  transition: rotate 1.5s;
 }
 
 .ril-client-area {

src/lib/ui/iPhone-layout/IPhoneLayout.tsx

@@ -3,7 +3,7 @@ import { useInitIPhone } from "./hooks/useInitIPhone";
 import iPhoneStatus from "./assets/iPhone_status.png";
 import { ControlBox } from "../control-box";
 import "./IPhoneLayout.css";
-import { useLaoyutMode } from "./hooks/useLaoyutMode";
+import { useLayoutMode } from "./hooks/useLayoutMode";
 
 interface IPhoneLayoutProps {
   children: React.ReactNode;
@@ -26,7 +26,7 @@ export function IPhoneLayout({
   maxSize = 100,
 }: IPhoneLayoutProps) {
   const { iPhoneLayoutRef, iPhoneSizeRef } = useInitIPhone(defaultSize);
-  const { currentMode, handleChangeMode } = useLaoyutMode(mode);
+  const { currentMode, handleChangeMode } = useLayoutMode(mode);
 
   return (
     <>

src/lib/ui/iPhone-layout/hooks/useLaoyutMode.tsx → src/lib/ui/iPhone-layout/hooks/useLayoutMode.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export const useLaoyutMode = (mode: "iPhone" | "laptop") => {
+export const useLayoutMode = (mode: "iPhone" | "laptop") => {
   const [currentMode, setCurrentMode] = useState<"iPhone" | "laptop">(mode);
 
   const handleChangeMode = (newMode: "iPhone" | "laptop") => {