[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/common_components/checkbox/Checkbox.jsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import styles from "./Checkbox.module.scss";
+export const Checkbox = ({
+    checkboxId,
+    variable,
+    is_available = true,
+    toggleFunction,
+    size = "2.8rem",
+    borderWidth = "0.2rem",
+    padding = "2rem",
+}) => {
+
+    const wrapper_class_names = clsx(styles.checkbox_wrapper, {
+        [styles.is_disabled]: !is_available,
+        [styles.is_pending]: variable.state === "pending",
+    });
+
+    return (
+        <div className={styles.checkbox_container}>
+            <label
+                className={wrapper_class_names}
+                htmlFor={checkboxId}
+                style={{
+                    "--checkbox-size": size,
+                    "--checkbox-border-width": borderWidth,
+                    "--checkbox-padding": padding,
+                }}
+            >
+                {variable.state === "pending" ? (
+                    <span className={styles.loader}></span>
+                ) : (
+                    <input
+                        type="checkbox"
+                        id={checkboxId}
+                        checked={variable.data}
+                        onClick={(e) => e.stopPropagation()}
+                        onChange={() => {
+                            if (toggleFunction) {
+                                toggleFunction();
+                            }
+                        }}
+                    />
+                )}
+                <span className={styles.cbx}>
+                    <svg viewBox="0 0 12 12">
+                        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
+                    </svg>
+                </span>
+            </label>
+        </div>
+    );
+};

src-ui/views/common_components/checkbox/Checkbox.module.scss

@@ -0,0 +1,73 @@
+@import "@scss_mixins";
+
+.checkbox_container {
+    height: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.checkbox_wrapper {
+    display: inline-block;
+    cursor: pointer;
+    padding: var(--checkbox-padding, 2rem);
+    position: relative;
+
+    &:hover {
+        & .cbx {
+            border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
+        }
+    }
+    &.is_pending {
+        pointer-events: none;
+        & .cbx {
+            border-color: var(--primary_800_color);
+        }
+    }
+    &.is_disabled {
+        pointer-events: none;
+        & .cbx {
+            filter: grayscale(100%);
+            border-color: var(--dark_800_color);
+        }
+    }
+}
+
+.checkbox_wrapper .cbx {
+    display: block;
+    width: var(--checkbox-size, 2.8rem);
+    height: var(--checkbox-size, 2.8rem);
+    border-radius: 0.4rem;
+    border: var(--dark_700_color) solid var(--checkbox-border-width, 0.2rem);
+    transition: all 0.15s ease;
+    padding: calc(var(--checkbox-size, 2.8rem) / 7);
+}
+
+.checkbox_wrapper .cbx svg {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: var(--dark_basic_text_color);
+    stroke-width: calc(var(--checkbox-border-width, 0.2rem) / 2);
+    stroke-dasharray: 1.7rem;
+    stroke-dashoffset: 1.7rem;
+}
+
+.checkbox_wrapper input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
+    background-color: var(--checkbox-color, var(--primary_600_color));
+    border: none;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
+    stroke-dashoffset: 0;
+    transition: all 0.15s ease;
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, right, -2rem);
+}

src-ui/views/common_components/homepage_link_button/HomepageLinkButton.jsx

@@ -0,0 +1,54 @@
+import ExternalLink from "@images/external_link.svg?react";
+import styles from "./HomepageLinkButton.module.scss";
+import { useRef, useState, useCallback } from "react";
+
+export const HomepageLinkButton = ({ homepage_link, speed = 40 /* px/s */ }) => {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+    const [inlineStyle, setInlineStyle] = useState({});
+
+    const handleMouseEnter = useCallback(() => {
+        const container = containerRef.current;
+        const text = textRef.current;
+        if (!container || !text) return;
+        const overflow = text.scrollWidth - container.clientWidth;
+        if (overflow > 0) {
+            const duration = overflow / speed;
+            setInlineStyle({
+                transform: `translateX(-${overflow}px)`,
+                transition: `transform ${duration}s linear`,
+            });
+        }
+    }, [speed]);
+
+    const handleMouseLeave = useCallback(() => {
+        setInlineStyle({
+            transform: 'translateX(0)',
+            transition: 'transform 0.3s ease-out',
+        });
+    }, []);
+
+    return (
+        <div className={styles.open_homepage_button_wrapper}>
+            <a
+                className={styles.open_homepage_button}
+                href={homepage_link}
+                target="_blank"
+                rel="noreferrer"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div className={styles.text_container} ref={containerRef}>
+                    <p
+                    className={styles.open_homepage_text}
+                    ref={textRef}
+                    style={inlineStyle}
+                    >
+                    {homepage_link}
+                    </p>
+                </div>
+                <ExternalLink className={styles.external_link_svg} />
+            </a>
+        </div>
+    );
+};

src-ui/views/common_components/homepage_link_button/HomepageLinkButton.module.scss

@@ -0,0 +1,39 @@
+.open_homepage_button_wrapper {
+    width: 100%;
+}
+
+.open_homepage_button {
+    padding: 0.6rem 0;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    &:hover .external_link_svg {
+        color: var(--dark_200_color);
+    }
+    &:hover .open_homepage_text {
+        border-bottom: 0.1rem solid var(--dark_500_color);
+    }
+}
+
+.text_container {
+    position: relative;
+    overflow: hidden;
+}
+
+.open_homepage_text {
+    margin: 0; /* pタグのデフォルトマージン除去 */
+    font-size: 1.4rem;
+    color: var(--sent_400_color);
+    white-space: nowrap;
+    display: inline-block;
+    transform: translateX(0);
+    border-bottom: 0.1rem solid var(--sent_400_color);
+}
+
+.external_link_svg {
+    flex-shrink: 0;
+    width: 1.6rem;
+    color: var(--dark_500_color);
+}

src-ui/views/common_components/index.js

@@ -0,0 +1,3 @@
+export { Checkbox } from "./checkbox/Checkbox";
+export { HomepageLinkButton } from "./homepage_link_button/HomepageLinkButton";
+export { ResetButton } from "./reset_button/ResetButton";

src-ui/views/common_components/reset_button/ResetButton.jsx

@@ -0,0 +1,10 @@
+import styles from "./ResetButton.module.scss";
+import RedoSvg from "@images/redo.svg?react";
+
+export const ResetButton = ({ onClickFunction }) => {
+    return (
+        <button className={styles.reset_button} onClick={onClickFunction}>
+            <RedoSvg className={styles.reset_svg}/>
+        </button>
+    );
+};

src-ui/views/common_components/reset_button/ResetButton.module.scss

@@ -0,0 +1,24 @@
+.reset_button {
+    width: fit-content;
+    background-color: var(--dark_875_color);
+    padding: 0.6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    flex-shrink: 0;
+    &:hover {
+        background-color: var(--dark_825_color);
+        & .reset_svg {
+            color: var(--dark_200_color);
+        }
+    }
+    &:active {
+        background-color: var(--dark_925_color);
+    }
+}
+
+.reset_svg {
+    width: 1.4rem;
+    color: var(--dark_550_color);
+}