✨ 아이폰 가로 모드 추가 (#54)

* feat: 아이폰 사이즈 동적 조정 훅 수정
* feat: 유틸리티 버튼 위치 수정
* feat: 아이폰 회전 기능 추가

src/app/layout/iPhone/hooks/useUtilityIPhone.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+const IPHONE_MIN_SIZE = 60;
+const IPHONE_INIT_SIZE = 80;
+const IPHONE_MAX_SIZE = 100;
+
+const IPHONE_PROTRAIT_MODE = 0; // 세로 모드
+const IPHONE_LANDSCAPE_MODE = -90; // 가로 모드
+
+/**
+ * iPhone 레이아웃의 크기를 동적으로 변경하는 훅입니다.
+ * @returns iPhone 레이아웃의 참조와 사이즈 변경 핸들러
+ */
+export const useUtilityIPhone = () => {
+  const iPhoneSizeRef = useRef<number>(IPHONE_INIT_SIZE);
+  const iPhoneModeRef = useRef<number>(IPHONE_PROTRAIT_MODE);
+  const iPhoneLayoutRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--iphone-size',
+      `${IPHONE_INIT_SIZE}%`,
+    );
+
+    document.documentElement.style.setProperty(
+      '--iphone-mode',
+      `${IPHONE_PROTRAIT_MODE}deg`,
+    );
+  }, []);
+
+  const changeStyle = () => {
+    if (iPhoneLayoutRef.current) {
+      iPhoneLayoutRef.current.style.height = `${iPhoneSizeRef.current}%`;
+      document.documentElement.style.setProperty(
+        '--iphone-size',
+        `${iPhoneSizeRef.current}%`,
+      );
+    }
+  };
+
+  const handleSizeUp = () => {
+    if (iPhoneSizeRef.current >= IPHONE_MAX_SIZE) return;
+
+    iPhoneSizeRef.current += 1;
+    changeStyle();
+  };
+
+  const handleSizeDown = () => {
+    if (iPhoneSizeRef.current <= IPHONE_MIN_SIZE) return;
+
+    iPhoneSizeRef.current -= 1;
+    changeStyle();
+  };
+
+  const handleRotate = () => {
+    if (iPhoneModeRef.current === IPHONE_PROTRAIT_MODE) {
+      // 가로 모드로 변경
+      iPhoneModeRef.current = IPHONE_LANDSCAPE_MODE;
+      document.documentElement.style.setProperty(
+        '--iphone-mode',
+        `${IPHONE_LANDSCAPE_MODE}deg`,
+      );
+    } else {
+      // 세로 모드로 변경
+      iPhoneModeRef.current = IPHONE_PROTRAIT_MODE;
+      document.documentElement.style.setProperty(
+        '--iphone-mode',
+        `${IPHONE_PROTRAIT_MODE}deg`,
+      );
+    }
+  };
+
+  return { iPhoneLayoutRef, handleRotate, handleSizeUp, handleSizeDown };
+};

src/app/layout/iPhone/ui/IPhoneLayout.scss

@@ -25,6 +25,9 @@
       /* 아이폰 이미지의 비율 설정 */
       aspect-ratio: 256 / 538;
       height: var(--iphone-size);
+      rotate: var(--iphone-mode);
+
+      transition: rotate 1.5s;
 
       .iPhone-status {
         /* children의 크기를 아이폰 화면 크기에 맞게 설정 */
@@ -55,15 +58,15 @@
       .iPhone-utility-container {
         position: absolute;
         left: 50%;
-        bottom: 2%;
+        bottom: calc(2% + (var(--iphone-size) - 80%) * 0.025);
         transform: translateX(-50%);
 
         display: flex;
         align-items: center;
         gap: 24px;
 
         .size-down-btn,
-        .retry-btn,
+        .rotation-btn,
         .size-up-btn {
           width: 40px;
           height: 40px;

src/app/layout/iPhone/ui/IPhoneLayout.tsx

@@ -5,13 +5,14 @@
 
 import { Outlet } from 'react-router-dom';
 
-import { useDynamicSize } from '../hooks/useDynamicSize';
+import { useUtilityIPhone } from '../hooks/useUtilityIPhone';
 
 import iPhoneStatus from '/assets/image/iPhone_status.png';
 import './IPhoneLayout.scss';
 
 export const IPhoneLayout = () => {
-  const { iPhoneLayoutRef, handleSizeDown, handleSizeUp } = useDynamicSize();
+  const { iPhoneLayoutRef, handleSizeDown, handleRotate, handleSizeUp } =
+    useUtilityIPhone();
 
   return (
     <div className='root-layout'>
@@ -25,7 +26,7 @@ export const IPhoneLayout = () => {
           <button className='size-down-btn' onClick={handleSizeDown}>
             -
           </button>
-          <button className='retry-btn' onClick={() => location.reload()} />
+          <button className='rotation-btn' onClick={handleRotate} />
           <button className='size-up-btn' onClick={handleSizeUp}>
             +
           </button>