From 322ff0ef4f3e3b68f1126b9db1459d2c0adb2d8f Mon Sep 17 00:00:00 2001 From: BangDori <44726494+BangDori@users.noreply.github.com> Date: Sat, 1 Jun 2024 21:17:38 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Release=20v1.2.0=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rename: iPhone.svg to iphone.svg * feat: 오타 수정 * feat: update v1.2.0 * rename: iPhone.svg to iphone.svg * feat: 업데이트 기능 문서 반영 --- README.ko.md | 1 + README.md | 1 + package.json | 2 +- .../assets/{iPhone.svg => iphone.svg} | 0 .../src/ui/control-box/hooks/useRotate.tsx | 12 +++---- src/lib/ui/control-box/ControlBox.css | 15 ++++---- src/lib/ui/control-box/ControlBox.tsx | 12 +++++-- src/lib/ui/control-box/assets/iPhone.svg | 14 -------- src/lib/ui/control-box/assets/iphone.svg | 20 +++++++++++ src/lib/ui/control-box/assets/laptop.svg | 23 +++++++----- src/lib/ui/control-box/assets/minus.svg | 13 ++++--- src/lib/ui/control-box/assets/plus.svg | 13 ++++--- src/lib/ui/control-box/assets/rotation.svg | 12 +++++++ src/lib/ui/control-box/hooks/index.ts | 2 ++ src/lib/ui/control-box/hooks/useRotate.tsx | 35 +++++++++++++++++++ src/lib/ui/iPhone-layout/IPhoneLayout.css | 3 ++ src/lib/ui/iPhone-layout/IPhoneLayout.tsx | 4 +-- .../{useLaoyutMode.tsx => useLayoutMode.tsx} | 2 +- 18 files changed, 132 insertions(+), 52 deletions(-) rename playground/src/ui/control-box/assets/{iPhone.svg => iphone.svg} (100%) delete mode 100644 src/lib/ui/control-box/assets/iPhone.svg create mode 100644 src/lib/ui/control-box/assets/iphone.svg create mode 100644 src/lib/ui/control-box/assets/rotation.svg create mode 100644 src/lib/ui/control-box/hooks/index.ts create mode 100644 src/lib/ui/control-box/hooks/useRotate.tsx rename src/lib/ui/iPhone-layout/hooks/{useLaoyutMode.tsx => useLayoutMode.tsx} (80%) diff --git a/README.ko.md b/README.ko.md index 3cf39c6..a546d19 100644 --- a/README.ko.md +++ b/README.ko.md @@ -16,6 +16,7 @@ $ yarn add react-iphone-layout --dev - **웹 뷰 지원**: iPhone을 웹에 최적화하여 원활한 웹 뷰를 제공합니다. - **동적 iPhone 뷰 크기 조정**: iPhone 뷰의 크기를 동적으로 조정할 수 있습니다. - **실시간 보기 전환**: 제어 박스를 통해 iPhone 뷰와 노트북 뷰를 실시간으로 확인하여 다양한 장치에서 레이아웃을 원활하게 테스트하고 최적화할 수 있습니다. +- **회전 기능**: iPhone 화면의 회전 기능을 제공합니다. (내부 콘텐츠는 회전되지 않습니다) ## 시작하기 diff --git a/README.md b/README.md index c5ae069..c2c46f2 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 57a5ac4..3593359 100644 --- a/package.json +++ b/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 ", diff --git a/playground/src/ui/control-box/assets/iPhone.svg b/playground/src/ui/control-box/assets/iphone.svg similarity index 100% rename from playground/src/ui/control-box/assets/iPhone.svg rename to playground/src/ui/control-box/assets/iphone.svg diff --git a/playground/src/ui/control-box/hooks/useRotate.tsx b/playground/src/ui/control-box/hooks/useRotate.tsx index 7cc8172..7c98138 100644 --- a/playground/src/ui/control-box/hooks/useRotate.tsx +++ b/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` ); } }; diff --git a/src/lib/ui/control-box/ControlBox.css b/src/lib/ui/control-box/ControlBox.css index 95a8442..4bb9dad 100644 --- a/src/lib/ui/control-box/ControlBox.css +++ b/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, diff --git a/src/lib/ui/control-box/ControlBox.tsx b/src/lib/ui/control-box/ControlBox.tsx index b5a039e..15d97fe 100644 --- a/src/lib/ui/control-box/ControlBox.tsx +++ b/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 = ({ minSize, maxSize ); + const { handleRotate } = useRotate(); if (mode === "laptop") { return ( @@ -40,7 +43,7 @@ export const ControlBox: React.FC = ({ className="iPhone-active-btn" onClick={() => handleChangeMode("iPhone")} > - + ); @@ -65,6 +68,9 @@ export const ControlBox: React.FC = ({ > +
  • + +
    • diff --git a/src/lib/ui/control-box/assets/iPhone.svg b/src/lib/ui/control-box/assets/iPhone.svg deleted file mode 100644 index 66deb9a..0000000 --- a/src/lib/ui/control-box/assets/iPhone.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/src/lib/ui/control-box/assets/iphone.svg b/src/lib/ui/control-box/assets/iphone.svg new file mode 100644 index 0000000..ed0e072 --- /dev/null +++ b/src/lib/ui/control-box/assets/iphone.svg @@ -0,0 +1,20 @@ + + + + diff --git a/src/lib/ui/control-box/assets/laptop.svg b/src/lib/ui/control-box/assets/laptop.svg index bb0a3f7..6bb24c8 100644 --- a/src/lib/ui/control-box/assets/laptop.svg +++ b/src/lib/ui/control-box/assets/laptop.svg @@ -1,19 +1,24 @@ - - + + diff --git a/src/lib/ui/control-box/assets/minus.svg b/src/lib/ui/control-box/assets/minus.svg index 5fafc0f..6f3b7a9 100644 --- a/src/lib/ui/control-box/assets/minus.svg +++ b/src/lib/ui/control-box/assets/minus.svg @@ -1,4 +1,9 @@ - - - - + + + \ No newline at end of file diff --git a/src/lib/ui/control-box/assets/plus.svg b/src/lib/ui/control-box/assets/plus.svg index 5c9ce16..b1e4caf 100644 --- a/src/lib/ui/control-box/assets/plus.svg +++ b/src/lib/ui/control-box/assets/plus.svg @@ -1,5 +1,10 @@ - - - - + + + diff --git a/src/lib/ui/control-box/assets/rotation.svg b/src/lib/ui/control-box/assets/rotation.svg new file mode 100644 index 0000000..f41040a --- /dev/null +++ b/src/lib/ui/control-box/assets/rotation.svg @@ -0,0 +1,12 @@ + + + diff --git a/src/lib/ui/control-box/hooks/index.ts b/src/lib/ui/control-box/hooks/index.ts new file mode 100644 index 0000000..92a5ff9 --- /dev/null +++ b/src/lib/ui/control-box/hooks/index.ts @@ -0,0 +1,2 @@ +export { useResize } from "./useResize"; +export { useRotate } from "./useRotate"; diff --git a/src/lib/ui/control-box/hooks/useRotate.tsx b/src/lib/ui/control-box/hooks/useRotate.tsx new file mode 100644 index 0000000..7c98138 --- /dev/null +++ b/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 }; +}; diff --git a/src/lib/ui/iPhone-layout/IPhoneLayout.css b/src/lib/ui/iPhone-layout/IPhoneLayout.css index eac19f1..f5ff302 100644 --- a/src/lib/ui/iPhone-layout/IPhoneLayout.css +++ b/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 { diff --git a/src/lib/ui/iPhone-layout/IPhoneLayout.tsx b/src/lib/ui/iPhone-layout/IPhoneLayout.tsx index 6dab710..94d9786 100644 --- a/src/lib/ui/iPhone-layout/IPhoneLayout.tsx +++ b/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 ( <> diff --git a/src/lib/ui/iPhone-layout/hooks/useLaoyutMode.tsx b/src/lib/ui/iPhone-layout/hooks/useLayoutMode.tsx similarity index 80% rename from src/lib/ui/iPhone-layout/hooks/useLaoyutMode.tsx rename to src/lib/ui/iPhone-layout/hooks/useLayoutMode.tsx index 13e1e32..bdbf90d 100644 --- a/src/lib/ui/iPhone-layout/hooks/useLaoyutMode.tsx +++ b/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") => {