update v1.1.0 (#15)

* chore: svgr library * feat: update version 1.1.0 * chore: 이미지 복사 * chore: build formats 수정 * chore: add start scripts * chore: yarn cache clean 추가 * chore: exclude playground * chore: npmignore 수정 * feat: gitignore 수정 * feat: index.html 추가
InnoReact · May 28, 2024 · a24f1d4 · a24f1d4
1 parent 9102d31
commit a24f1d4
Show file tree

Hide file tree

Showing 27 changed files with 716 additions and 83 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,5 +21,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
-index.html
+*.sw?
diff --git a/.npmignore b/.npmignore
@@ -6,4 +6,7 @@ vite.config.ts
 yarn.lock
 node_modules
 .gitignore
-*.tgz
+*.tgz
+playground
+.github
+.yarn-error.log
diff --git a/package.json b/package.json
@@ -42,8 +42,9 @@
     "./dist/ReactIPhoneLayout.css": "./dist/ReactIPhoneLayout.css"
   },
   "scripts": {
+    "start": "cd playground && yarn dev",
     "dev": "vite",
-    "build": "tsc && vite build && cp -r src/lib/assets dist/lib/assets",
+    "build": "yarn cache clean && tsc && vite build && cp -r src/lib/ui/iPhone-layout/assets dist/lib/ui/iPhone-layout/assets",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prepare": "tsc && vite build",
@@ -65,6 +66,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/playground/.gitignore b/playground/.gitignore
@@ -21,5 +21,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
-index.html
+*.sw?
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React iPhone Layout</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
diff --git a/src/lib/ui/IPhoneLayout.tsx b/src/lib/ui/IPhoneLayout.tsx
diff --git a/src/lib/ui/control-box/ControlBox.css b/src/lib/ui/control-box/ControlBox.css
@@ -0,0 +1,55 @@
+:root {
+  --ril-control-bg: #313a46;
+  --ril-control-basic: #b3b9c4;
+  --ril-control-hover: #bccee4;
+  --ril-control-focus: #fff;
+}
+
+.ril-control-box {
+  padding: 16px 12px;
+
+  width: 40px;
+
+  background-color: var(--ril-control-bg);
+  border-radius: 8px;
+}
+
+.ril-control-box .ril-control-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.ril-control-list .ril-control-item {
+  width: 40px;
+  height: 40px;
+
+  border: 1px solid var(--ril-control-basic);
+  border-radius: 50%;
+
+  cursor: pointer;
+}
+
+.iPhone_focus_mode path,
+.iphone-icon:hover path {
+  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 {
+  stroke: var(--ril-control-focus);
+}
+
+.ril-control-list,
+.ril-control-item {
+  list-style-type: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/lib/ui/control-box/ControlBox.tsx b/src/lib/ui/control-box/ControlBox.tsx
@@ -0,0 +1,77 @@
+import IPhoneIcon from "./assets/iPhone.svg?react";
+import LaptopIcon from "./assets/laptop.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";
+
+interface ControlBoxProps {
+  position: "top" | "right" | "bottom" | "left";
+  mode: "iPhone" | "laptop";
+  iPhoneLayoutRef: React.RefObject<HTMLDivElement>;
+  iPhoneSizeRef: React.MutableRefObject<number>;
+  minSize: number;
+  maxSize: number;
+  handleChangeMode: (newMode: "iPhone" | "laptop") => void;
+}
+
+export const ControlBox: React.FC<ControlBoxProps> = ({
+  position,
+  mode,
+  iPhoneLayoutRef,
+  iPhoneSizeRef,
+  minSize,
+  maxSize,
+  handleChangeMode,
+}) => {
+  const { handleSizeUp, handleSizeDown } = useResize(
+    iPhoneLayoutRef,
+    iPhoneSizeRef,
+    minSize,
+    maxSize
+  );
+
+  if (mode === "laptop") {
+    return (
+      <div className="laptop__mode">
+        <button
+          className="iPhone-active-btn"
+          onClick={() => handleChangeMode("iPhone")}
+        >
+          <IPhoneIcon className="iphone-icon" width="64" height="64" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <aside className={`ril-control-box position__${position}`}>
+      <ul className="ril-control-list">
+        <li
+          className="ril-control-item"
+          onClick={() => handleChangeMode("iPhone")}
+        >
+          <IPhoneIcon
+            className={`iphone-icon ${
+              mode === "iPhone" ? "iPhone_focus_mode" : ""
+            }`}
+          />
+        </li>
+        <li
+          className="ril-control-item"
+          onClick={() => handleChangeMode("laptop")}
+        >
+          <LaptopIcon className="laptop-icon" />
+        </li>
+        <li className="ril-control-item" onClick={handleSizeUp}>
+          <PlusIcon className="plus-icon" />
+        </li>
+        <li className="ril-control-item" onClick={handleSizeDown}>
+          <MinusIcon className="minus-icon" />
+        </li>
+      </ul>
+    </aside>
+  );
+};
diff --git a/src/lib/ui/control-box/Position.css b/src/lib/ui/control-box/Position.css
@@ -0,0 +1,58 @@
+.position__top {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+
+  transform: translate(-50%, -40%) rotate(270deg);
+
+  & svg {
+    transform: rotate(90deg);
+  }
+}
+
+.position__bottom {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+
+  transform: translate(-50%, 40%) rotate(270deg);
+
+  & svg {
+    transform: rotate(90deg);
+  }
+}
+
+.position__left {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+
+  transform: translateY(-50%);
+}
+
+.position__right {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+
+  transform: translateY(-50%);
+}
+
+.laptop__mode {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+}
+
+.laptop__mode .iPhone-active-btn {
+  background: var(--ril-control-bg);
+  padding: 0;
+  margin: 0;
+
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  border: 0;
+
+  cursor: pointer;
+}
diff --git a/src/lib/ui/control-box/assets/iPhone.svg b/src/lib/ui/control-box/assets/iPhone.svg
diff --git a/src/lib/ui/control-box/assets/laptop.svg b/src/lib/ui/control-box/assets/laptop.svg
diff --git a/src/lib/ui/control-box/assets/minus.svg b/src/lib/ui/control-box/assets/minus.svg
diff --git a/src/lib/ui/control-box/assets/plus.svg b/src/lib/ui/control-box/assets/plus.svg
diff --git a/src/lib/hooks/useUtilityIPhone.tsx → src/lib/ui/control-box/hooks/useResize.tsx b/src/lib/hooks/useUtilityIPhone.tsx → src/lib/ui/control-box/hooks/useResize.tsx
@@ -1,20 +1,9 @@
-import { useEffect, useRef } from "react";
-
-export function useUtilityIPhone(
+export const useResize = (
+  iPhoneLayoutRef: React.RefObject<HTMLDivElement>,
+  iPhoneSizeRef: React.MutableRefObject<number>,
   minSize: number,
-  defaultSize: number,
   maxSize: number
-) {
-  const iPhoneSizeRef = useRef<number>(defaultSize);
-  const iPhoneLayoutRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      "--iphone-size",
-      `${defaultSize}%`
-    );
-  }, [defaultSize]);
-
+) => {
   const changeStyle = () => {
     if (iPhoneLayoutRef.current) {
       iPhoneLayoutRef.current.style.height = `${iPhoneSizeRef.current}%`;
@@ -39,5 +28,5 @@ export function useUtilityIPhone(
     changeStyle();
   };
 
-  return { iPhoneLayoutRef, handleSizeUp, handleSizeDown };
-}
+  return { handleSizeUp, handleSizeDown };
+};
diff --git a/src/lib/ui/control-box/index.ts b/src/lib/ui/control-box/index.ts
@@ -0,0 +1 @@
+export { ControlBox } from "./ControlBox";
diff --git a/src/lib/ui/IPhoneLayout.css → src/lib/ui/iPhone-layout/IPhoneLayout.css b/src/lib/ui/IPhoneLayout.css → src/lib/ui/iPhone-layout/IPhoneLayout.css
@@ -14,7 +14,7 @@
 .ril-iphone {
   position: relative;
 
-  background-image: url("../assets/iPhone.png");
+  background-image: url("./assets/iPhone.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;