From 832f077012b0438454bf6e2d7672795588c85b74 Mon Sep 17 00:00:00 2001
From: miyasan_0301 <miyasan.19990301@gmail.com>
Date: Mon, 19 Sep 2022 21:07:23 +0900
Subject: [PATCH] :recycle: directory

---
 .eslintrc.js                                  |  2 +-
 .../ErrorBoundary/LayoutErrorBoundary.tsx     | 15 +++----
 .../functional/WithTheme/ColorChanger.tsx     | 44 +++++++++----------
 .../functional/WithTheme/ThemeChanger.tsx     | 10 +++--
 .../functional/WithTheme/WithTheme.tsx        | 13 +++---
 src/components/model/user/index.ts            |  1 -
 src/components/page/Root/Root.tsx             | 36 +++++++--------
 src/components/ui/Button.tsx                  |  7 +--
 src/components/ui/CircleImg.tsx               |  2 +-
 src/components/ui/Dialog.tsx                  |  6 +--
 src/components/ui/Fieldset.tsx                |  2 +-
 src/components/ui/Flex.tsx                    |  7 +--
 src/components/ui/Header.tsx                  | 18 --------
 src/components/ui/HoverUserCard.tsx           | 10 ++---
 src/components/ui/Icon.tsx                    | 18 ++++----
 src/components/ui/IconButton.tsx              |  6 +--
 src/components/ui/Input.tsx                   |  2 +-
 src/components/ui/Label.tsx                   |  2 +-
 src/components/ui/Layout.tsx                  |  2 +-
 src/components/ui/NextJest.tsx                |  7 ---
 src/components/ui/NextLink.tsx                |  7 +--
 src/components/ui/RadioGroup.tsx              |  6 +--
 src/components/ui/Switch.tsx                  |  6 +--
 src/components/ui/Text.tsx                    |  7 +--
 src/{utils => libs/stiches}/index.ts          |  0
 .../stiches}/stitches.config.ts               |  2 -
 src/{utils => libs/stiches}/theme/dark.ts     |  1 -
 .../stiches}/theme/dark_amber.ts              |  2 +-
 .../stiches}/theme/dark_blue.ts               |  2 +-
 .../stiches}/theme/dark_crimson.ts            |  2 +-
 .../stiches}/theme/dark_green.ts              |  2 +-
 .../stiches}/theme/dark_orange.ts             |  2 +-
 .../stiches}/theme/dark_violet.ts             |  2 +-
 src/{utils => libs/stiches}/theme/index.ts    |  0
 src/{utils => libs/stiches}/theme/light.ts    |  0
 .../stiches}/theme/light_amber.ts             |  2 +-
 .../stiches}/theme/light_blue.ts              |  2 +-
 .../stiches}/theme/light_crimson.ts           |  2 +-
 .../stiches}/theme/light_green.ts             |  2 +-
 .../stiches}/theme/light_orange.ts            |  2 +-
 .../stiches}/theme/light_violet.ts            |  2 +-
 src/{utils => libs/stiches}/utils.ts          |  0
 src/pages/_document.page.tsx                  |  3 +-
 43 files changed, 122 insertions(+), 144 deletions(-)
 delete mode 100644 src/components/model/user/index.ts
 delete mode 100644 src/components/ui/Header.tsx
 delete mode 100644 src/components/ui/NextJest.tsx
 rename src/{utils => libs/stiches}/index.ts (100%)
 rename src/{utils => libs/stiches}/stitches.config.ts (97%)
 rename src/{utils => libs/stiches}/theme/dark.ts (99%)
 rename src/{utils => libs/stiches}/theme/dark_amber.ts (90%)
 rename src/{utils => libs/stiches}/theme/dark_blue.ts (90%)
 rename src/{utils => libs/stiches}/theme/dark_crimson.ts (91%)
 rename src/{utils => libs/stiches}/theme/dark_green.ts (90%)
 rename src/{utils => libs/stiches}/theme/dark_orange.ts (90%)
 rename src/{utils => libs/stiches}/theme/dark_violet.ts (90%)
 rename src/{utils => libs/stiches}/theme/index.ts (100%)
 rename src/{utils => libs/stiches}/theme/light.ts (100%)
 rename src/{utils => libs/stiches}/theme/light_amber.ts (90%)
 rename src/{utils => libs/stiches}/theme/light_blue.ts (90%)
 rename src/{utils => libs/stiches}/theme/light_crimson.ts (91%)
 rename src/{utils => libs/stiches}/theme/light_green.ts (90%)
 rename src/{utils => libs/stiches}/theme/light_orange.ts (90%)
 rename src/{utils => libs/stiches}/theme/light_violet.ts (90%)
 rename src/{utils => libs/stiches}/utils.ts (100%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 26dc328..a48b90d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,7 +28,7 @@ module.exports = {
     "react/jsx-handler-names": [
       "error",
       {
-        eventHandlerPrefix: "handle",
+        eventHandlerPrefix: "on",
         eventHandlerPropPrefix: "on",
         checkLocalVariables: true,
         checkInlineFunction: true,
diff --git a/src/components/functional/ErrorBoundary/LayoutErrorBoundary.tsx b/src/components/functional/ErrorBoundary/LayoutErrorBoundary.tsx
index 81abbb6..779146d 100644
--- a/src/components/functional/ErrorBoundary/LayoutErrorBoundary.tsx
+++ b/src/components/functional/ErrorBoundary/LayoutErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 type ErrorFallbackProps = {
@@ -6,13 +6,12 @@ type ErrorFallbackProps = {
   resetErrorBoundary: () => void;
 };
 
-const ErrorFallback: VFC<ErrorFallbackProps> = (props) => {
+const ErrorFallback: FC<ErrorFallbackProps> = ({ error, resetErrorBoundary: onReset }) => {
   return (
     <div role="alert">
       <p>エラーが発生しました。</p>
-      <pre>{props.error.message}</pre>
-      {/* eslint-disable-next-line react/jsx-handler-names */}
-      <button onClick={props.resetErrorBoundary}>Try again</button>
+      <pre>{error.message}</pre>
+      <button onClick={onReset}>Try again</button>
     </div>
   );
 };
@@ -22,10 +21,10 @@ type LayoutErrorBoundaryProps = {
   onReset?: () => void;
 };
 
-export const LayoutErrorBoundary: VFC<LayoutErrorBoundaryProps> = (props) => {
+export const LayoutErrorBoundary: FC<LayoutErrorBoundaryProps> = ({ children, onReset }) => {
   return (
-    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={props.onReset}>
-      {props.children}
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={onReset}>
+      {children}
     </ErrorBoundary>
   );
 };
diff --git a/src/components/functional/WithTheme/ColorChanger.tsx b/src/components/functional/WithTheme/ColorChanger.tsx
index 8071d99..f63ea0c 100644
--- a/src/components/functional/WithTheme/ColorChanger.tsx
+++ b/src/components/functional/WithTheme/ColorChanger.tsx
@@ -1,15 +1,33 @@
 import { useTheme } from "next-themes";
-import type { VFC } from "react";
 import { useEffect, useState } from "react";
 
 import { RadioGroup } from "~/components/ui/RadioGroup";
 
-export const ColorChanger: VFC = () => {
+type OptionsProps = {
+  id: string;
+  label: string;
+  value: string;
+  color: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
+};
+
+const RADIO_OPTIONS: OptionsProps[] = [
+  { id: "1", label: "blue", value: "blue", color: "blue" },
+  { id: "2", label: "amber", value: "amber", color: "amber" },
+  { id: "3", label: "crimson", value: "crimson", color: "crimson" },
+  { id: "4", label: "violet", value: "violet", color: "violet" },
+  { id: "5", label: "orange", value: "orange", color: "orange" },
+  { id: "6", label: "green", value: "green", color: "green" },
+];
+
+/**
+ * @package
+ */
+export const ColorChanger = () => {
   const { setTheme, resolvedTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
   const [currentColor, setCurrentColor] = useState("");
 
-  const handleClick = (e: any) => {
+  const onClick = (e: any) => {
     if (e.target.value === undefined) return;
     if (resolvedTheme?.indexOf("light") === 0) {
       const customColor = "light_" + e.target.value;
@@ -27,23 +45,5 @@ export const ColorChanger: VFC = () => {
 
   if (!isMounted) return null;
 
-  return (
-    <RadioGroup options={RADIO_OPTIONOS} defaultValue={currentColor} ariaLabel="colorChanger" onClick={handleClick} />
-  );
+  return <RadioGroup options={RADIO_OPTIONS} defaultValue={currentColor} ariaLabel="colorChanger" onClick={onClick} />;
 };
-
-type OptionsProps = {
-  id: string;
-  label: string;
-  value: string;
-  color: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
-};
-
-const RADIO_OPTIONOS: OptionsProps[] = [
-  { id: "1", label: "blue", value: "blue", color: "blue" },
-  { id: "2", label: "amber", value: "amber", color: "amber" },
-  { id: "3", label: "crimson", value: "crimson", color: "crimson" },
-  { id: "4", label: "violet", value: "violet", color: "violet" },
-  { id: "5", label: "orange", value: "orange", color: "orange" },
-  { id: "6", label: "green", value: "green", color: "green" },
-];
diff --git a/src/components/functional/WithTheme/ThemeChanger.tsx b/src/components/functional/WithTheme/ThemeChanger.tsx
index 3cf435f..b1a1d22 100644
--- a/src/components/functional/WithTheme/ThemeChanger.tsx
+++ b/src/components/functional/WithTheme/ThemeChanger.tsx
@@ -1,15 +1,17 @@
 import { useTheme } from "next-themes";
-import type { VFC } from "react";
 import { useEffect, useState } from "react";
 
 import { Switch } from "~/components/ui/Switch";
 
-export const ThemeChanger: VFC = () => {
+/**
+ * @package
+ */
+export const ThemeChanger = () => {
   const { resolvedTheme, setTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
   const [currentTheme, setCurrentTheme] = useState("");
 
-  const handleClick = () => {
+  const onClick = () => {
     if (resolvedTheme) {
       const oppositeColor =
         resolvedTheme.indexOf("light") === 0
@@ -32,7 +34,7 @@ export const ThemeChanger: VFC = () => {
       labalRight="is dark"
       defaultChecked={currentTheme !== "light"}
       isDark
-      onClick={handleClick}
+      onClick={onClick}
     />
   );
 };
diff --git a/src/components/functional/WithTheme/WithTheme.tsx b/src/components/functional/WithTheme/WithTheme.tsx
index 4129479..c2c2032 100644
--- a/src/components/functional/WithTheme/WithTheme.tsx
+++ b/src/components/functional/WithTheme/WithTheme.tsx
@@ -1,6 +1,6 @@
 import type { AppProps } from "next/app";
 import { ThemeProvider, useTheme } from "next-themes";
-import type { VFC } from "react";
+import type { FC } from "react";
 import { useEffect } from "react";
 
 import {
@@ -16,12 +16,15 @@ import {
   lightGreen,
   lightOrange,
   lightViolet,
-} from "~/utils/theme";
+} from "~/libs/stiches/theme";
 
 type AppPage = (props: AppProps) => JSX.Element;
 
+/**
+ * @package
+ */
 export const WithTheme = (Component: AppPage) => {
-  const withTheme = (props: AppProps) => {
+  return (props: AppProps) => {
     return (
       <ThemeProvider
         attribute="class"
@@ -46,11 +49,9 @@ export const WithTheme = (Component: AppPage) => {
       </ThemeProvider>
     );
   };
-
-  return withTheme;
 };
 
-const InitTheme: VFC<{ children: JSX.Element }> = (props) => {
+const InitTheme: FC<{ children: JSX.Element }> = (props) => {
   const { resolvedTheme, setTheme } = useTheme();
 
   useEffect(() => {
diff --git a/src/components/model/user/index.ts b/src/components/model/user/index.ts
deleted file mode 100644
index 15b984e..0000000
--- a/src/components/model/user/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const user = "user";
diff --git a/src/components/page/Root/Root.tsx b/src/components/page/Root/Root.tsx
index cf8b091..753b980 100644
--- a/src/components/page/Root/Root.tsx
+++ b/src/components/page/Root/Root.tsx
@@ -23,7 +23,7 @@ import { Switch } from "~/components/ui/Switch";
 import { Text } from "~/components/ui/Text";
 
 export const Root: FC = () => {
-  const handleClick = () => {
+  const onClick = () => {
     console.info("click!!");
   };
 
@@ -57,35 +57,35 @@ export const Root: FC = () => {
 
       <Text>ボタン</Text>
       <Flex gap={1}>
-        <Button color="primary" onClick={handleClick}>
+        <Button color="primary" onClick={onClick}>
           Primary
         </Button>
-        <Button color="primary" isOutline onClick={handleClick}>
+        <Button color="primary" isOutline onClick={onClick}>
           PrimaryOutline
         </Button>
-        <Button color="primary" isGhost under onClick={handleClick}>
+        <Button color="primary" isGhost under onClick={onClick}>
           PrimaryGhost
         </Button>
       </Flex>
       <Flex gap={1}>
-        <Button color="red" onClick={handleClick}>
+        <Button color="red" onClick={onClick}>
           Red
         </Button>
-        <Button color="red" isOutline onClick={handleClick}>
+        <Button color="red" isOutline onClick={onClick}>
           RedOutline
         </Button>
-        <Button color="red" isGhost under onClick={handleClick}>
+        <Button color="red" isGhost under onClick={onClick}>
           RedGhost
         </Button>
       </Flex>
       <Flex gap={1}>
-        <Button color="slate" onClick={handleClick}>
+        <Button color="slate" onClick={onClick}>
           Slate
         </Button>
-        <Button color="slate" isOutline onClick={handleClick}>
+        <Button color="slate" isOutline onClick={onClick}>
           SlateOutline
         </Button>
-        <Button color="slate" isGhost under onClick={handleClick}>
+        <Button color="slate" isGhost under onClick={onClick}>
           SlateGhost
         </Button>
         <NextLink href="/" btn>
@@ -95,15 +95,15 @@ export const Root: FC = () => {
 
       <Text>アイコン付き</Text>
       <Flex gap={1}>
-        <Button color="primary" onClick={handleClick}>
+        <Button color="primary" onClick={onClick}>
           <AllowLeftIcon size={15} />
           Back
         </Button>
-        <Button color="primary" isOutline onClick={handleClick}>
+        <Button color="primary" isOutline onClick={onClick}>
           Next
           <AllowRightIcon size={15} />
         </Button>
-        <Button color="primary" isGhost onClick={handleClick}>
+        <Button color="primary" isGhost onClick={onClick}>
           <CloseIcon size={15} />
           Close
         </Button>
@@ -113,16 +113,16 @@ export const Root: FC = () => {
         <Flex gap={1}>
           <Text>ラジオボタン</Text>
           <RadioGroup
-            options={RADIO_OPTIONOS}
-            defaultValue={RADIO_OPTIONOS[0].value}
+            options={RADIO_OPTIONS}
+            defaultValue={RADIO_OPTIONS[0].value}
             ariaLabel="radioGroup"
-            onClick={handleClick}
+            onClick={onClick}
           />
         </Flex>
 
         <Flex gap={1}>
           <Text>スイッチ</Text>
-          <Switch labalLeft="off" labalRight="on" onClick={handleClick} />
+          <Switch labalLeft="off" labalRight="on" onClick={onClick} />
         </Flex>
       </Flex>
 
@@ -173,7 +173,7 @@ type OptionsProps = {
   color?: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
 };
 
-const RADIO_OPTIONOS: OptionsProps[] = [
+const RADIO_OPTIONS: OptionsProps[] = [
   { id: "1", label: "OFF", value: "off" },
   { id: "2", label: "ON", value: "on" },
 ];
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 5b28bff..4a943b4 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,5 +1,6 @@
-import type { MouseEventHandler, ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, MouseEventHandler, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 export const StitchesButton = styled("button", {
   all: "unset",
@@ -102,7 +103,7 @@ type Props = {
   onClick: MouseEventHandler<HTMLButtonElement>;
 };
 
-export const Button: VFC<Props> = (props) => {
+export const Button: FC<Props> = (props) => {
   return (
     <StitchesButton
       color={props.color}
diff --git a/src/components/ui/CircleImg.tsx b/src/components/ui/CircleImg.tsx
index d457c27..190435e 100644
--- a/src/components/ui/CircleImg.tsx
+++ b/src/components/ui/CircleImg.tsx
@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const CircleImg = styled("img", {
   display: "block",
diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx
index 504554b..8f402f3 100644
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -1,12 +1,12 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
 
 import { contentShow, overlayShow } from "~/components/ui/animation";
 import { StitchesButton } from "~/components/ui/Button";
 import { Flex } from "~/components/ui/Flex";
 import { IconButton } from "~/components/ui/IconButton";
 import { Text } from "~/components/ui/Text";
+import { styled } from "~/libs/stiches";
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   backgroundColor: "$slate4",
@@ -44,7 +44,7 @@ type Props = {
   confirmationButtonLabel: string;
 };
 
-export const Dialog: VFC<Props> = (props) => {
+export const Dialog: FC<Props> = (props) => {
   return (
     <AlertDialogPrimitive.Root>
       <StyledOverlay />
diff --git a/src/components/ui/Fieldset.tsx b/src/components/ui/Fieldset.tsx
index 867eee3..a1218d5 100644
--- a/src/components/ui/Fieldset.tsx
+++ b/src/components/ui/Fieldset.tsx
@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const Fieldset = styled("fieldset", {
   all: "unset",
diff --git a/src/components/ui/Flex.tsx b/src/components/ui/Flex.tsx
index 71c1ef7..e296992 100644
--- a/src/components/ui/Flex.tsx
+++ b/src/components/ui/Flex.tsx
@@ -1,5 +1,6 @@
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 const StitchesFlex = styled("div", {
   display: "flex",
@@ -48,7 +49,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const Flex: VFC<Props> = (props) => {
+export const Flex: FC<Props> = (props) => {
   const gap: string = props.gap + "rem";
   return (
     <StitchesFlex direction={props.direction} justify={props.justify} items={props.items} css={{ gap }}>
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
deleted file mode 100644
index d2bc21f..0000000
--- a/src/components/ui/Header.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Link from "next/link";
-import type { FC } from "react";
-
-export const Header: FC = () => {
-  return (
-    <div className="p-5 w-full bg-gray-200">
-      <Link href="/">
-        <a className="py-3 px-4 bg-green-300">/ - CSR</a>
-      </Link>
-      <Link href="/posts">
-        <a className="py-3 px-4 mx-3 bg-green-300">/posts - SSR</a>
-      </Link>
-      <Link href="/posts/1">
-        <a className="py-3 px-4 bg-green-300">/posts/1 - SSG</a>
-      </Link>
-    </div>
-  );
-};
diff --git a/src/components/ui/HoverUserCard.tsx b/src/components/ui/HoverUserCard.tsx
index e51a756..bed700e 100644
--- a/src/components/ui/HoverUserCard.tsx
+++ b/src/components/ui/HoverUserCard.tsx
@@ -1,6 +1,5 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import type { VFC } from "react";
-import { styled } from "src/utils";
+import type { FC } from "react";
 
 import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade } from "~/components/ui/animation";
 import { Button } from "~/components/ui/Button";
@@ -8,6 +7,7 @@ import { CircleImg } from "~/components/ui/CircleImg";
 import { Flex } from "~/components/ui/Flex";
 import { NextLink } from "~/components/ui/NextLink";
 import { Text } from "~/components/ui/Text";
+import { styled } from "~/libs/stiches";
 
 export const HoverCardContent = styled(HoverCardPrimitive.Content, {
   width: 300,
@@ -51,8 +51,8 @@ type Props = {
   iconPath: string;
 };
 
-export const HoverUserCard: VFC<Props> = (props) => {
-  const handleClick = () => {
+export const HoverUserCard: FC<Props> = (props) => {
+  const onClick = () => {
     console.info("click!!");
   };
 
@@ -70,7 +70,7 @@ export const HoverUserCard: VFC<Props> = (props) => {
         <Flex direction="col">
           <Flex justify="between">
             <CircleImg size="lg" src={props.iconPath} />
-            <Button color="primary" onClick={handleClick}>
+            <Button color="primary" onClick={onClick}>
               Following
             </Button>
           </Flex>
diff --git a/src/components/ui/Icon.tsx b/src/components/ui/Icon.tsx
index 8a31c51..2a5555e 100644
--- a/src/components/ui/Icon.tsx
+++ b/src/components/ui/Icon.tsx
@@ -1,10 +1,10 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 
 type Props = {
   size: 15 | 30 | 45;
 };
 
-export const AllowLeftIcon: VFC<Props> = (props) => {
+export const AllowLeftIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -17,7 +17,7 @@ export const AllowLeftIcon: VFC<Props> = (props) => {
   );
 };
 
-export const AllowRightIcon: VFC<Props> = (props) => {
+export const AllowRightIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -30,7 +30,7 @@ export const AllowRightIcon: VFC<Props> = (props) => {
   );
 };
 
-export const CloseIcon: VFC<Props> = (props) => {
+export const CloseIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -43,7 +43,7 @@ export const CloseIcon: VFC<Props> = (props) => {
   );
 };
 
-export const DotsIcon: VFC<Props> = (props) => {
+export const DotsIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -56,7 +56,7 @@ export const DotsIcon: VFC<Props> = (props) => {
   );
 };
 
-export const ReplyIcon: VFC<Props> = (props) => {
+export const ReplyIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -69,7 +69,7 @@ export const ReplyIcon: VFC<Props> = (props) => {
   );
 };
 
-export const RetweetIcon: VFC<Props> = (props) => {
+export const RetweetIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -82,7 +82,7 @@ export const RetweetIcon: VFC<Props> = (props) => {
   );
 };
 
-export const FavoriteIcon: VFC<Props> = (props) => {
+export const FavoriteIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -95,7 +95,7 @@ export const FavoriteIcon: VFC<Props> = (props) => {
   );
 };
 
-export const ShareIcon: VFC<Props> = (props) => {
+export const ShareIcon: FC<Props> = (props) => {
   return (
     <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
index 702849c..ac1d5f9 100644
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -1,8 +1,8 @@
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
 
 import { Flex } from "~/components/ui/Flex";
 import { Text } from "~/components/ui/Text";
+import { styled } from "~/libs/stiches";
 
 export const IconButton = styled("button", {
   all: "unset",
@@ -48,7 +48,7 @@ type Props = {
   count?: number;
 };
 
-export const CountLabelIconButton: VFC<Props> = (props) => {
+export const CountLabelIconButton: FC<Props> = (props) => {
   return (
     <Flex items="center" gap={0.25}>
       <IconButton color={props.color} size={props.size}>
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index f9b8ced..4e123f0 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const Input = styled("input", {
   all: "unset",
diff --git a/src/components/ui/Label.tsx b/src/components/ui/Label.tsx
index ded4190..e135b70 100644
--- a/src/components/ui/Label.tsx
+++ b/src/components/ui/Label.tsx
@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const Label = styled("label", {
   fontSize: "$base",
diff --git a/src/components/ui/Layout.tsx b/src/components/ui/Layout.tsx
index 1d36a73..3cf9583 100644
--- a/src/components/ui/Layout.tsx
+++ b/src/components/ui/Layout.tsx
@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const Layout = styled("main", {
   display: "flex",
diff --git a/src/components/ui/NextJest.tsx b/src/components/ui/NextJest.tsx
deleted file mode 100644
index f95984c..0000000
--- a/src/components/ui/NextJest.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const NextJestText = () => {
-  return (
-    <div>
-      <h1>Next.js Jest Init</h1>
-    </div>
-  );
-};
diff --git a/src/components/ui/NextLink.tsx b/src/components/ui/NextLink.tsx
index cced620..21a7eb4 100644
--- a/src/components/ui/NextLink.tsx
+++ b/src/components/ui/NextLink.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 export const Anker = styled("a", {
   "&:hover": { textDecoration: "underline" },
@@ -27,7 +28,7 @@ type Props = {
   btn?: true;
 };
 
-export const NextLink: VFC<Props> = (props) => {
+export const NextLink: FC<Props> = (props) => {
   return (
     <Link href={props.href} passHref>
       <Anker btn={props.btn}>{props.children}</Anker>
diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
index 996afff..9bdb5c8 100644
--- a/src/components/ui/RadioGroup.tsx
+++ b/src/components/ui/RadioGroup.tsx
@@ -1,9 +1,9 @@
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import type { MouseEvent, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, MouseEvent } from "react";
 
 import { Flex } from "~/components/ui/Flex";
 import { Label } from "~/components/ui/Label";
+import { styled } from "~/libs/stiches";
 
 const RadioGroupRadio = styled(RadioGroupPrimitive.Item, {
   all: "unset",
@@ -78,7 +78,7 @@ type Props = {
   onClick: (e: MouseEvent<HTMLElement>) => void;
 };
 
-export const RadioGroup: VFC<Props> = (props) => {
+export const RadioGroup: FC<Props> = (props) => {
   return (
     <RadioGroupPrimitive.Root defaultValue={props.defaultValue} aria-label={props.ariaLabel}>
       <Flex items="center">
diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx
index cdd855e..f716e44 100644
--- a/src/components/ui/Switch.tsx
+++ b/src/components/ui/Switch.tsx
@@ -1,9 +1,9 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import type { VFC } from "react";
-import { styled } from "src/utils";
+import type { FC } from "react";
 
 import { Flex } from "~/components/ui/Flex";
 import { Label } from "~/components/ui/Label";
+import { styled } from "~/libs/stiches";
 
 const SwitchRoot = styled(SwitchPrimitive.Root, {
   all: "unset",
@@ -44,7 +44,7 @@ type Props = {
   onClick?: () => void;
 };
 
-export const Switch: VFC<Props> = (props) => {
+export const Switch: FC<Props> = (props) => {
   return (
     <Flex items="center" gap={0.25}>
       <Label id="s1">{props.labalLeft}</Label>
diff --git a/src/components/ui/Text.tsx b/src/components/ui/Text.tsx
index 338adf4..424f087 100644
--- a/src/components/ui/Text.tsx
+++ b/src/components/ui/Text.tsx
@@ -1,5 +1,6 @@
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 export const StitchesText = styled("div", {
   margin: 0,
@@ -57,7 +58,7 @@ type Props = {
   pb?: number;
 };
 
-export const Text: VFC<Props> = (props) => {
+export const Text: FC<Props> = (props) => {
   const pt: string = props.pt + "rem";
   const py: string = props.py + "rem";
   const pb: string = props.pb + "rem";
diff --git a/src/utils/index.ts b/src/libs/stiches/index.ts
similarity index 100%
rename from src/utils/index.ts
rename to src/libs/stiches/index.ts
diff --git a/src/utils/stitches.config.ts b/src/libs/stiches/stitches.config.ts
similarity index 97%
rename from src/utils/stitches.config.ts
rename to src/libs/stiches/stitches.config.ts
index d44a3d6..5d572f7 100644
--- a/src/utils/stitches.config.ts
+++ b/src/libs/stiches/stitches.config.ts
@@ -5,7 +5,6 @@ import { utils } from "./utils";
 /**
  * @package
  */
-
 export const { styled, css, globalCss, keyframes, getCssText, createTheme, theme } = createStitches({
   utils: utils,
   media: {
@@ -84,6 +83,5 @@ export const { styled, css, globalCss, keyframes, getCssText, createTheme, theme
 
 globalCss({
   html: { fontSize: "16px" },
-  // "@md": { html: { fontSize: "16px" } },
   body: { lineHeight: 1.6, color: "$slate12", backgroundColor: "$slate2" },
 })();
diff --git a/src/utils/theme/dark.ts b/src/libs/stiches/theme/dark.ts
similarity index 99%
rename from src/utils/theme/dark.ts
rename to src/libs/stiches/theme/dark.ts
index 78169ff..1816408 100644
--- a/src/utils/theme/dark.ts
+++ b/src/libs/stiches/theme/dark.ts
@@ -32,7 +32,6 @@ import {
 /**
  * @package
  */
-
 export const dark = {
   ...amberDark,
   ...blueDark,
diff --git a/src/utils/theme/dark_amber.ts b/src/libs/stiches/theme/dark_amber.ts
similarity index 90%
rename from src/utils/theme/dark_amber.ts
rename to src/libs/stiches/theme/dark_amber.ts
index a77f96c..e3d7cd4 100644
--- a/src/utils/theme/dark_amber.ts
+++ b/src/libs/stiches/theme/dark_amber.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/dark_blue.ts b/src/libs/stiches/theme/dark_blue.ts
similarity index 90%
rename from src/utils/theme/dark_blue.ts
rename to src/libs/stiches/theme/dark_blue.ts
index 09a38a8..b1cfc7f 100644
--- a/src/utils/theme/dark_blue.ts
+++ b/src/libs/stiches/theme/dark_blue.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/dark_crimson.ts b/src/libs/stiches/theme/dark_crimson.ts
similarity index 91%
rename from src/utils/theme/dark_crimson.ts
rename to src/libs/stiches/theme/dark_crimson.ts
index 24380f4..3dd6ae3 100644
--- a/src/utils/theme/dark_crimson.ts
+++ b/src/libs/stiches/theme/dark_crimson.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/dark_green.ts b/src/libs/stiches/theme/dark_green.ts
similarity index 90%
rename from src/utils/theme/dark_green.ts
rename to src/libs/stiches/theme/dark_green.ts
index a383084..ea37319 100644
--- a/src/utils/theme/dark_green.ts
+++ b/src/libs/stiches/theme/dark_green.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/dark_orange.ts b/src/libs/stiches/theme/dark_orange.ts
similarity index 90%
rename from src/utils/theme/dark_orange.ts
rename to src/libs/stiches/theme/dark_orange.ts
index 009b036..7b372b4 100644
--- a/src/utils/theme/dark_orange.ts
+++ b/src/libs/stiches/theme/dark_orange.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/dark_violet.ts b/src/libs/stiches/theme/dark_violet.ts
similarity index 90%
rename from src/utils/theme/dark_violet.ts
rename to src/libs/stiches/theme/dark_violet.ts
index 7cbd9a9..df0badb 100644
--- a/src/utils/theme/dark_violet.ts
+++ b/src/libs/stiches/theme/dark_violet.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { dark } from "./dark";
 
diff --git a/src/utils/theme/index.ts b/src/libs/stiches/theme/index.ts
similarity index 100%
rename from src/utils/theme/index.ts
rename to src/libs/stiches/theme/index.ts
diff --git a/src/utils/theme/light.ts b/src/libs/stiches/theme/light.ts
similarity index 100%
rename from src/utils/theme/light.ts
rename to src/libs/stiches/theme/light.ts
diff --git a/src/utils/theme/light_amber.ts b/src/libs/stiches/theme/light_amber.ts
similarity index 90%
rename from src/utils/theme/light_amber.ts
rename to src/libs/stiches/theme/light_amber.ts
index f0c58f5..5680842 100644
--- a/src/utils/theme/light_amber.ts
+++ b/src/libs/stiches/theme/light_amber.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/theme/light_blue.ts b/src/libs/stiches/theme/light_blue.ts
similarity index 90%
rename from src/utils/theme/light_blue.ts
rename to src/libs/stiches/theme/light_blue.ts
index 0b4d466..e7bf314 100644
--- a/src/utils/theme/light_blue.ts
+++ b/src/libs/stiches/theme/light_blue.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/theme/light_crimson.ts b/src/libs/stiches/theme/light_crimson.ts
similarity index 91%
rename from src/utils/theme/light_crimson.ts
rename to src/libs/stiches/theme/light_crimson.ts
index 7db46d1..5996c6f 100644
--- a/src/utils/theme/light_crimson.ts
+++ b/src/libs/stiches/theme/light_crimson.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/theme/light_green.ts b/src/libs/stiches/theme/light_green.ts
similarity index 90%
rename from src/utils/theme/light_green.ts
rename to src/libs/stiches/theme/light_green.ts
index 042de6e..36d36c5 100644
--- a/src/utils/theme/light_green.ts
+++ b/src/libs/stiches/theme/light_green.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/theme/light_orange.ts b/src/libs/stiches/theme/light_orange.ts
similarity index 90%
rename from src/utils/theme/light_orange.ts
rename to src/libs/stiches/theme/light_orange.ts
index 4ca3a90..400d0fb 100644
--- a/src/utils/theme/light_orange.ts
+++ b/src/libs/stiches/theme/light_orange.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/theme/light_violet.ts b/src/libs/stiches/theme/light_violet.ts
similarity index 90%
rename from src/utils/theme/light_violet.ts
rename to src/libs/stiches/theme/light_violet.ts
index f59d3e2..53e0008 100644
--- a/src/utils/theme/light_violet.ts
+++ b/src/libs/stiches/theme/light_violet.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "src/utils";
+import { createTheme } from "~/libs/stiches";
 
 import { light } from "./light";
 
diff --git a/src/utils/utils.ts b/src/libs/stiches/utils.ts
similarity index 100%
rename from src/utils/utils.ts
rename to src/libs/stiches/utils.ts
diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx
index 63c7b82..9eca9e5 100644
--- a/src/pages/_document.page.tsx
+++ b/src/pages/_document.page.tsx
@@ -1,5 +1,6 @@
 import NextDocument, { Head, Html, Main, NextScript } from "next/document";
-import { getCssText } from "src/utils";
+
+import { getCssText } from "~/libs/stiches";
 
 export default class Document extends NextDocument {
   render() {