Refactor: Refactoring Record page and it's components

Author: fecapark

components/Layouts/Header/RemixableHeader.style.ts

@@ -70,7 +70,7 @@ export default function MobileMenu() {
         {menuContent === "main" ? (
           <div className="footer">
             <span>
-              Copyright &copy; 2022 Sanghyeok Park.
+              Copyright &copy; {new Date().getFullYear()} Sanghyeok Park.
               <br />
               All rights reserved.
             </span>

components/Layouts/Header/RemixableHeader.tsx

@@ -45,7 +45,7 @@ export default function AlarmSwitch() {
         language === "kor" ? "종료시 알람 소리 켜기" : "Activate alarm sound"
       }
       isActive={isAlarmSoundOn}
-      isLoading={soundEffectAudio !== null}
+      isLoading={soundEffectAudio === null}
       onSwitchOn={onSoundAlarmOn}
       onSwitchOff={onSoundAlarmOff}
     />

components/Menu/MobileMenu/MobileMenu.tsx

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Theme } from "../../../../styles/theme";
 
 export const PauseButton = styled.button<{ triggerHide: boolean }>`
   all: unset;
@@ -101,8 +102,7 @@ export const Container = styled.footer<{
   justify-content: center;
   align-items: flex-end;
 
-  @media screen and (max-width: ${({ theme }) =>
-      theme.responsiveSizes.hideTimer}px) {
+  @media screen and (max-width: ${Theme.responsiveSizes.hideTimer}px) {
     font-size: 15px;
     transition: transform
       ${(props) =>

components/TimerOption/AlarmSwitch/AlarmSwitch.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
-import useBottomSheet from "../../../hooks/useBottomSheet";
-import useMediaMatch from "../../../hooks/useMediaMatch";
+import useBottomSheet from "../../../../hooks/useBottomSheet";
+import useMediaMatch from "../../../../hooks/useMediaMatch";
 import {
   clockDegreeAtom as CD,
   clockSizeAtom as CS,
@@ -10,14 +10,14 @@ import {
   languageOptionValueAtom as LOV,
   progressUnitValueAtom as PUV,
   maxClockTimeAtom as MCT,
-} from "../../../shared/atom";
-import { Theme } from "../../../styles/theme";
-import BottomSheetTimer from "../../BottomSheet/contents/BottomSheetTimer/BottomSheetTimer";
-import RoundButton from "../../Button/RoundButton/RoundButton";
+} from "../../../../shared/atom";
+import { Theme } from "../../../../styles/theme";
+import BottomSheetTimer from "../../../BottomSheet/contents/BottomSheetTimer/BottomSheetTimer";
+import RoundButton from "../../../Button/RoundButton/RoundButton";
 import {
   getPercentageFromDegree,
   getTimeFromDegree,
-} from "../../Timer/Timer.util";
+} from "../../../Timer/Timer.util";
 import { Container, PauseButton, TimeText } from "./Footer.style";
 import { IoMdPause } from "react-icons/io";
 
@@ -66,7 +66,8 @@ export default function Footer() {
             />
           ) : (
             <span>
-              Copyright &copy; 2022 Sanghyeok Park. All rights reserved.
+              Copyright &copy; {new Date().getFullYear()} Sanghyeok Park. All
+              rights reserved.
             </span>
           )
         ) : null}

components/Layouts/Footer/Footer.style.ts renamed to components/pages/index/Footer/Footer.style.ts

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Theme } from "../../../styles/theme";
+import { Theme } from "../../../../styles/theme";
 
 export const IconContainer = styled.div`
   display: inline-flex;
@@ -123,12 +123,10 @@ export const Container = styled.header<{
         ? "0.5s cubic-bezier(0.2, 0, 0, 1) 0.4s"
         : "0.3s cubic-bezier(0, 0, 0, 1) 0.4s"};
 
-  @media screen and (max-width: ${({ theme }) =>
-      theme.responsiveSizes.hideTimer}px) {
-    transition: transform
-      ${(props) =>
-        props.triggerHide
-          ? "0.5s cubic-bezier(0.2, 0, 0, 1) 0.1s"
-          : "0.3s cubic-bezier(0, 0, 0, 1) 0.5s"};
+  @media screen and (max-width: ${Theme.responsiveSizes.hideTimer}px) {
+    transition: ${(props) =>
+      props.triggerHide
+        ? "0.5s cubic-bezier(0.2, 0, 0, 1) 0.1s"
+        : "0.3s cubic-bezier(0, 0, 0, 1) 0.5s"};
   }
 `;

components/Layouts/Footer/Footer.tsx renamed to components/pages/index/Footer/Footer.tsx

@@ -7,15 +7,15 @@ import {
   isActiveMenuAtom as IAM,
   progressUnitValueAtom as PUV,
   maxClockTimeAtom as MCT,
-} from "../../../shared/atom";
+} from "../../../../shared/atom";
 import { Container, IconContainer, TimeText } from "./Header.style";
-import useMediaMatch from "../../../hooks/useMediaMatch";
-import { Theme } from "../../../styles/theme";
+import useMediaMatch from "../../../../hooks/useMediaMatch";
+import { Theme } from "../../../../styles/theme";
 import { useEffect, useState } from "react";
 import {
   getPercentageFromDegree,
   getTimeFromDegree,
-} from "../../Timer/Timer.util";
+} from "../../../Timer/Timer.util";
 import { IoMdMenu } from "react-icons/io";
 
 export default function Header() {

components/Layouts/Header/Header.style.ts renamed to components/pages/index/Header/Header.style.ts

@@ -0,0 +1,42 @@
+import styled from "@emotion/styled";
+
+export const Container = styled.footer`
+  width: 99%;
+  height: 240px;
+
+  border-top: 2px solid ${({ theme }) => theme.background.secondary};
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+
+  .copyright {
+    font-size: 12px;
+    color: #a0a0a0;
+  }
+
+  .links {
+    margin-top: 12px;
+    display: flex;
+    gap: 16px;
+
+    a {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+
+      color: #a0a0a0;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    height: 360px;
+  }
+`;

components/Layouts/Header/Header.tsx renamed to components/pages/index/Header/Header.tsx

@@ -0,0 +1,40 @@
+import { MdOpenInNew } from "react-icons/md";
+import { Logo } from "../../../Intro/Intro.styled";
+import { Container } from "./Footer.styled";
+
+export default function Footer() {
+  return (
+    <Container>
+      <Logo
+        size={14}
+        hide={false}
+        style={{ filter: "brightness(0.94)", flexDirection: "row" }}
+      >
+        <div className="word">Time</div>
+        <div className="word bottom">Timer</div>
+      </Logo>
+      <span className="copyright">
+        Copyright &copy; {new Date().getFullYear()} Sanghyeok Park. All rights
+        reserved.
+      </span>
+      <div className="links">
+        <a
+          href="https://github.com/fecapark/time-timer"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span>Github</span>
+          <MdOpenInNew />
+        </a>
+        <a
+          href="https://www.timetimer.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span>About Time Timer</span>
+          <MdOpenInNew />
+        </a>
+      </div>
+    </Container>
+  );
+}