[WIP] v1 UI for custom copyright (#418)

Added custom copyright

src/atoms/input/Checkbox.jsx

@@ -38,12 +38,13 @@ const Checkbox = forwardRef(
 
     const handleCheck = useCallback(
       (e) => {
+        if (disabled) return
         const c = e.target.checked
         setChecked(c)
         onCheck?.(c)
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [checked]
+      [checked, disabled]
     )
 
     const classes = classNames({
@@ -68,6 +69,7 @@ const Checkbox = forwardRef(
           onWheel={onWheel}
           checked={checkedProp}
           aria-checked={checked}
+          disabled={disabled}
         />
         <span className={styles.checkmark} />
       </label>

src/atoms/input/Input.tsx

@@ -37,7 +37,7 @@ type InputType =
 interface InputProps {
   type: InputType
   placeholder: string
-  name?: string
+  name?: string | ''
   min?: number
   max?: number
   maxlength?: number
@@ -82,10 +82,7 @@ function Input(
 
   const handleInput = useCallback(
     (e: React.FormEvent<HTMLInputElement>) => {
-      if (ref) {
-        onChange(e)
-        return
-      }
+      onChange(e)
       const target = e.target as HTMLInputElement
       if (target) {
         const v =

src/atoms/input/TextArea.jsx

@@ -10,7 +10,7 @@ const Textarea = forwardRef(
       min,
       max,
       children,
-      maxlength = 5000,
+      maxlength = 50000,
       label,
       onChange = () => null,
       onBlur = () => null,

src/atoms/input/index.module.scss

@@ -83,6 +83,7 @@
 
       &:focus {
         outline: none;
+        border: 1px solid var(--gray-40);
       }
 
       &:focus::placeholder {
@@ -91,7 +92,9 @@
     }
 
     textarea {
-      min-height: 75px;
+      min-height: 100px; // Increased minimum height
+      height: auto; // Allow the height to be determined by content
+      resize: vertical; // Allow vertical resizing
     }
   }
 }

src/atoms/layout/page/index.module.scss

@@ -8,6 +8,7 @@
   min-height: 100vh;
   // min-width: 320px;
   width: 100%;
+  padding: 1em 0;
 
   display: flex;
   flex-direction: column;

src/atoms/modal/InfoModal.tsx

@@ -0,0 +1,36 @@
+// InfoModal.tsx
+import React, { useEffect } from 'react';
+import styles from '@style'
+
+interface InfoModalProps {
+  isOpen: boolean;
+  title: string;
+  content: string;
+  onClose: () => void;  // Function to toggle visibility
+}
+
+export const InfoModal: React.FC<InfoModalProps> = ({ isOpen, title, content, onClose }) => {
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (event.target === document.getElementById('modal-overlay')) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => document.removeEventListener('mousedown', handleOutsideClick);
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div id="modal-overlay" className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        <h2>{title}</h2>
+        <div>{content}</div>
+      </div>
+    </div>
+  );
+};
+
+export default InfoModal;

src/atoms/modal/index.module.scss

@@ -0,0 +1,39 @@
+@import '@styles/variables.scss';
+@import '@styles/layout.scss';
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.382);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+  overflow-y: auto;
+}
+
+.modalContent {
+  background-color: var(--background-color);
+  padding: 20px;
+  box-shadow: 1px 1px var(--text-color);
+  width: 80%;
+  max-width: 61.8%;
+  height: auto;
+  max-height: 61.8vh;
+  overflow: auto;
+  margin-top: 0 auto;
+}
+
+.modalContent div {
+  margin: 1em 0;
+}
+
+.modalContent p {
+  margin-top: 1em;
+}
+.modalContent li {
+  margin-top: 1em;
+}

src/atoms/modal/index.ts

@@ -0,0 +1 @@
+export { InfoModal } from './InfoModal'