fix : gitpage 테스트3

changchangwoo · Jan 16, 2024 · ece6d82 · ece6d82
1 parent 28a70f3
commit ece6d82
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 103 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import { init } from "./Utils/router.js";
+import { init } from "./utils/router.js";
 import MainPage from "./MainPage/MainPage.js";
 import DetailPage from "./DetailPage/DetailPage.js";
 

diff --git a/src/DetailPage/DescriptionOnOff.js b/src/DetailPage/DescriptionOnOff.js
@@ -1,38 +1,38 @@
-import { delay } from "../Utils/delay.js"
+import { delay } from "../utils/delay.js";
 
 export default function DescriptionOnOff({ $parent }) {
-    const $descriptionOnOff = document.createElement('div')
-    $descriptionOnOff.id = "descriptionOnOff"
-    $descriptionOnOff.innerHTML = `visible check`
+  const $descriptionOnOff = document.createElement("div");
+  $descriptionOnOff.id = "descriptionOnOff";
+  $descriptionOnOff.innerHTML = `visible check`;
 
-    var visible = true
+  var visible = true;
 
-    $descriptionOnOff.addEventListener('click', () => {
-        const $mainLogo = document.querySelector('#mainLogo')
-        const $detailDescriptionContainer = document.querySelector('#detailDescriptionContainer')
-        const $sublogo = document.querySelector('#subLogo')
-
-
-        if (visible) {
-            $mainLogo.classList.remove('show')
-            $detailDescriptionContainer.classList.remove('show')
-            $sublogo.classList.remove('show')
-            $descriptionOnOff.classList.remove('show')
-            visible = false
-        } else if (!visible) {
-            $mainLogo.classList.add('show')
-            $detailDescriptionContainer.classList.add('show')
-            $sublogo.classList.add('show')
-            $descriptionOnOff.classList.add('show')
-            visible = true
-        }
-    })
-
-    this.render = async () => {
-        $parent.appendChild($descriptionOnOff)
-        $descriptionOnOff.classList.remove("show")
-        await delay(500);
-        $descriptionOnOff.classList.add("show")
+  $descriptionOnOff.addEventListener("click", () => {
+    const $mainLogo = document.querySelector("#mainLogo");
+    const $detailDescriptionContainer = document.querySelector(
+      "#detailDescriptionContainer"
+    );
+    const $sublogo = document.querySelector("#subLogo");
 
+    if (visible) {
+      $mainLogo.classList.remove("show");
+      $detailDescriptionContainer.classList.remove("show");
+      $sublogo.classList.remove("show");
+      $descriptionOnOff.classList.remove("show");
+      visible = false;
+    } else if (!visible) {
+      $mainLogo.classList.add("show");
+      $detailDescriptionContainer.classList.add("show");
+      $sublogo.classList.add("show");
+      $descriptionOnOff.classList.add("show");
+      visible = true;
     }
-}
+  });
+
+  this.render = async () => {
+    $parent.appendChild($descriptionOnOff);
+    $descriptionOnOff.classList.remove("show");
+    await delay(500);
+    $descriptionOnOff.classList.add("show");
+  };
+}
diff --git a/src/DetailPage/DetailDescription.js b/src/DetailPage/DetailDescription.js
@@ -1,4 +1,4 @@
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 import ImageController from "./ImageController.js";
 
 export default function DetailDescription({ $parent }) {

diff --git a/src/DetailPage/DetailPage.js b/src/DetailPage/DetailPage.js
@@ -1,5 +1,5 @@
-import CreateLogo from "../Components/CreateLogo.js";
-import { delay } from "../Utils/delay.js";
+import CreateLogo from "../components/CreateLogo.js";
+import { delay } from "../utils/delay.js";
 import DescriptionOnOff from "./DescriptionOnOff.js";
 import DetailDescription from "./DetailDescription.js";
 import setDetailPage from "./SetDetailPage.js";

diff --git a/src/DetailPage/ImageController.js b/src/DetailPage/ImageController.js
@@ -1,32 +1,35 @@
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 
 export default async function ImageController(element, imgs, page) {
-    var current_src = page.style.backgroundImage;
-    console.log(current_src);
+  var current_src = page.style.backgroundImage;
+  console.log(current_src);
 
-    const regex = /url\(".*\/([^\/]+)(\d+)\.jpg"\)/; 
-    var imageName = "";
-    var numberBeforeJpg = 0;
-    var newNumber = 0;
+  const regex = /url\(".*\/([^\/]+)(\d+)\.jpg"\)/;
+  var imageName = "";
+  var numberBeforeJpg = 0;
+  var newNumber = 0;
 
-    const match = current_src.match(regex);
+  const match = current_src.match(regex);
 
-    if (match) {
-        imageName = match[1];
-        numberBeforeJpg = match[2];
-        console.log(imageName, numberBeforeJpg);
-    } else {
-        console.log("매칭되는 문자열이 없습니다.");
-    }
+  if (match) {
+    imageName = match[1];
+    numberBeforeJpg = match[2];
+    console.log(imageName, numberBeforeJpg);
+  } else {
+    console.log("매칭되는 문자열이 없습니다.");
+  }
 
-    if (element === "next") {
-        newNumber = Number(numberBeforeJpg) + 1;
-        if (newNumber > (imgs.length - 1)) newNumber = 0;
-    } else if (element === "prev") {
-        newNumber = Number(numberBeforeJpg) - 1;
-        if (newNumber < 0) newNumber = imgs.length - 1;
-    }
-    current_src = current_src.replace(new RegExp(`${imageName}\\d+\\.jpg`), `${imageName}${newNumber}.jpg`);
-    await delay(500)
-    page.style.backgroundImage = current_src
+  if (element === "next") {
+    newNumber = Number(numberBeforeJpg) + 1;
+    if (newNumber > imgs.length - 1) newNumber = 0;
+  } else if (element === "prev") {
+    newNumber = Number(numberBeforeJpg) - 1;
+    if (newNumber < 0) newNumber = imgs.length - 1;
+  }
+  current_src = current_src.replace(
+    new RegExp(`${imageName}\\d+\\.jpg`),
+    `${imageName}${newNumber}.jpg`
+  );
+  await delay(500);
+  page.style.backgroundImage = current_src;
 }
diff --git a/src/DetailPage/SetDetailPage.js b/src/DetailPage/SetDetailPage.js
@@ -1,6 +1,6 @@
-import { delay } from "../Utils/delay.js"
+import { delay } from "../utils/delay.js";
 
-export default async function setDetailPage  ({imgs, $parent})  {
-    $parent.style.backgroundImage = `url(${imgs[0]})`
-    await delay(300)
-}
+export default async function setDetailPage({ imgs, $parent }) {
+  $parent.style.backgroundImage = `url(${imgs[0]})`;
+  await delay(300);
+}
diff --git a/src/MainPage/GaugeController.js b/src/MainPage/GaugeController.js
@@ -1,5 +1,5 @@
-import { routeChange } from "../Utils/router.js";
-import { setMainAnimation } from "../Utils/setAnimation.js";
+import { routeChange } from "../utils/router.js";
+import { setMainAnimation } from "../utils/setAnimation.js";
 
 export default function GaugeController({ $parent }) {
   const $selectedGauge = document.createElement("div");

diff --git a/src/MainPage/MainPage.js b/src/MainPage/MainPage.js
@@ -1,24 +1,27 @@
-import CreateLogo from "../Components/CreateLogo.js";
+import CreateLogo from "../components/CreateLogo.js";
 import Slider from "./Slider.js";
 import SliderController from "./SliderController.js";
 import GaugeController from "./GaugeController.js";
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 
 export default function MainPage({ $target }) {
   const $page = document.createElement("div");
   $page.className = "mainPage";
 
-  let LogoText = 'STUDIO GHIBLI'
-  let subLogoText = "Quiet beauty that evokes memories"; 
-  
-  const createLogo = new CreateLogo({ $parent: $page});
+  let LogoText = "STUDIO GHIBLI";
+  let subLogoText = "Quiet beauty that evokes memories";
+
+  const createLogo = new CreateLogo({ $parent: $page });
   const sliderController = new SliderController({ $parent: $page });
   const gaugeController = new GaugeController({ $parent: $page });
   const slider = new Slider({ $parent: $page });
 
   this.render = async () => {
     $target.appendChild($page);
-    await createLogo.startAnimation({ mainText : LogoText, subText : subLogoText});
+    await createLogo.startAnimation({
+      mainText: LogoText,
+      subText: subLogoText,
+    });
     await delay(300);
     await sliderController.render();
     gaugeController.render();

diff --git a/src/MainPage/Slider.js b/src/MainPage/Slider.js
@@ -1,9 +1,9 @@
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 
 export default function Slider({ $parent }) {
-    const $sliderContainer = document.createElement("div");
-    $sliderContainer.id = "sliderContainer";
-    $sliderContainer.innerHTML = `
+  const $sliderContainer = document.createElement("div");
+  $sliderContainer.id = "sliderContainer";
+  $sliderContainer.innerHTML = `
   <div class="hideLeft">
 바람이 분다
       <img src="./img/carousel/kazetachinu.jpg">
@@ -46,10 +46,10 @@ export default function Slider({ $parent }) {
 </div>
     `;
 
-    this.render = async () => {
-        $parent.appendChild($sliderContainer);
-        $sliderContainer.classList.remove("show");
-        await delay(500);
-        $sliderContainer.classList.add("show");
-    };
+  this.render = async () => {
+    $parent.appendChild($sliderContainer);
+    $sliderContainer.classList.remove("show");
+    await delay(500);
+    $sliderContainer.classList.add("show");
+  };
 }
diff --git a/src/MainPage/SliderController.js b/src/MainPage/SliderController.js
@@ -1,4 +1,4 @@
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 import SliderEvent from "./SliderEvent.js";
 
 export default function SliderController({ $parent }) {

diff --git a/src/components/CreateLogo.js b/src/components/CreateLogo.js
@@ -1,6 +1,6 @@
-import { delay } from "../Utils/delay.js";
+import { delay } from "../utils/delay.js";
 
-export default function CreateLogo({ $parent}) {
+export default function CreateLogo({ $parent }) {
   const $mainLogo = document.createElement("div");
   const $subLogo = document.createElement("div");
 
@@ -10,9 +10,9 @@ export default function CreateLogo({ $parent}) {
   $parent.appendChild($mainLogo);
   $parent.appendChild($subLogo);
 
-  this.startAnimation = async ({mainText, subText}) => {
-    $mainLogo.innerHTML = mainText
-    $subLogo.innerHTML = subText
+  this.startAnimation = async ({ mainText, subText }) => {
+    $mainLogo.innerHTML = mainText;
+    $subLogo.innerHTML = subText;
 
     const addAndRemoveClass = async (element, className) => {
       element.classList.remove(className);
@@ -22,6 +22,4 @@ export default function CreateLogo({ $parent}) {
     await addAndRemoveClass($mainLogo, "show");
     await addAndRemoveClass($subLogo, "show");
   };
-
-
 }
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -1,6 +1,5 @@
-import { routeChange } from "../Utils/router.js";
-import { setMainAnimation, setDetailAnimation } from "../Utils/setAnimation.js";
-
+import { routeChange } from "../utils/router.js";
+import { setMainAnimation, setDetailAnimation } from "../utils/setAnimation.js";
 
 export default function Nav({ $target }) {
   const $navContainer = document.createElement("div");
@@ -15,11 +14,11 @@ export default function Nav({ $target }) {
 
   const $navHome = document.querySelector("ul li");
   $navHome.addEventListener("click", () => {
-    const { pathname } = location
-    if(pathname === '/index.html') {
-      setMainAnimation()
-    } else if (pathname.indexOf('/detail') === 0) {
-      setDetailAnimation()
+    const { pathname } = location;
+    if (pathname === "/index.html") {
+      setMainAnimation();
+    } else if (pathname.indexOf("/detail") === 0) {
+      setDetailAnimation();
     }
     routeChange("/index.html");
   });

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import App from "./App.js";
-import Footer from "./Components/Footer.js";
-import Nav from "./Components/Nav.js";
+import Footer from "./components/Footer.js";
+import Nav from "./components/Nav.js";
 
 new App({ $target: document.getElementById("App") });
 new Nav({ $target: document.getElementById("Nav") });