develop to main

.eslintrc.json

@@ -24,6 +24,8 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-props-no-spreading": "off",
     "jsx-a11y/label-has-associated-control": [

.storybook/preview.tsx

@@ -30,7 +30,7 @@ const preview = {
       values: [
         {
           name: "main",
-          value: "#000000",
+          value: "#1A1B1B",
         },
         {
           name: "gray",

app/(shared)/(ThemeTextField)/Container.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import "./textField.modules.sass";
+import classNames from "classnames";
+
+import { useTextField } from "./useTextField";
+import { ThemeInfoTextFieldType } from "./TextFieldType";
+
+export default function ThemeTextField({
+  id,
+  tabIndex,
+  title,
+  content,
+  infoText,
+  inputType,
+  inputPlaceholder,
+  checkErrorText,
+}: ThemeInfoTextFieldType) {
+  const {
+    inputValue,
+    isFocus,
+    setIsFocus,
+    errorText,
+    inputRef,
+    handleInputChange,
+    handleInputBlur,
+  } = useTextField({ id, content, checkErrorText });
+
+  return (
+    <div tabIndex={isFocus ? -1 : tabIndex} onFocus={() => setIsFocus(true)}>
+      <button
+        className={classNames("theme-textfield", {
+          focus: isFocus,
+          filled: inputValue && !isFocus,
+          error: errorText,
+        })}
+        type="button"
+        tabIndex={-1}
+      >
+        <div
+          className={classNames("theme-textfield-title", {
+            focus: isFocus,
+            filled: inputValue,
+            error: errorText,
+            focus__ani: isFocus && !inputValue,
+            focus__removeani: inputRef.current,
+          })}
+          tabIndex={-1}
+        >
+          {title}
+        </div>
+        {(errorText || isFocus) && (
+          <input
+            ref={inputRef}
+            className={classNames("theme-textfield-input", {
+              error: errorText,
+            })}
+            type={inputType}
+            value={inputValue}
+            placeholder={inputPlaceholder}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            tabIndex={tabIndex}
+          />
+        )}
+        {inputValue && !(errorText || isFocus) && (
+          <div className="theme-textfield-input filled" tabIndex={-1}>
+            {inputValue}
+          </div>
+        )}
+      </button>
+      {errorText && (
+        <div className="theme-textfield-text error" tabIndex={-1}>
+          {errorText}
+        </div>
+      )}
+      {infoText && (
+        <div
+          className={classNames("theme-textfield-text", {
+            filled: inputValue,
+          })}
+          tabIndex={-1}
+        >
+          {infoText}
+        </div>
+      )}
+    </div>
+  );
+}

app/(shared)/(ThemeTextField)/TextFieldType.ts

@@ -0,0 +1,12 @@
+type ValidationFunction<T> = (value: T) => string;
+
+export type ThemeInfoTextFieldType = {
+  id: "title" | "timeLimit" | "hintLimit";
+  tabIndex?: number;
+  title?: string;
+  content: string;
+  infoText?: string;
+  inputType?: string;
+  inputPlaceholder?: string;
+  checkErrorText?: ValidationFunction<unknown>;
+};

app/(shared)/(ThemeTextField)/textField.modules.sass

@@ -0,0 +1,92 @@
+@import '../../style/variables'
+@import '../../style/mixins'
+@import '../../style/button'
+
+.theme-textfield
+  width: 100%
+  height: fit-content
+  box-sizing: border-box
+  border-radius: 8px
+  display: flex
+
+  background-color: $color-sub1
+  border: 1px solid $color-white20
+  padding: 30px 22px
+  cursor: pointer
+  &.focus
+    background-color: $color-black
+    border: 1px solid $color-white
+    padding: 19.5px 20px
+    flex-direction: column
+    gap: 4px
+    cursor: text
+  &.filled
+    background-color: $color-main
+    border: 1px solid $color-white20
+    padding: 19.5px 20px
+    flex-direction: column
+    gap: 4px
+    cursor: pointer
+  &.error
+    border: 1px solid $color-semantic100
+    padding: 19.5px 20px
+    flex-direction: column
+    gap: 4px
+    cursor: text
+  &:hover
+    background-color: $color-black
+
+.theme-textfield-title
+  @include body16R
+  color: $color-white70
+  &.focus
+    @include body12R
+    color: $color-white70
+    &__ani
+      animation: fadeIn 0.1s ease-in
+    &__removeani
+      animation: none
+  &.filled
+    @include body12R
+    color: $color-white70
+  &.error
+    @include body12R
+    color: $color-semantic100
+
+@keyframes fadeIn
+  from 
+    transform: translateY(10px)
+  to
+    transform: translateY(0)
+// @keyframes fadeOut
+//   from 
+//     transform: translateY(10px)
+//   to
+//     transform: translateY(0)
+
+.theme-textfield-text
+  margin: 4px 0 0 16px
+  cursor: default
+
+  @include body12R
+  color: $color-white70
+  &.filled
+    color: $color-white70
+  &.error
+    color: $color-semantic100
+
+.theme-textfield-input
+  text-align: left
+  width: 100%
+  border: none
+  padding: 0
+  background-color: inherit
+  @include body16R
+  color: $color-white50
+  &:focus
+    outline: none
+    color: $color-white
+  &.filled
+    color: $color-white
+  &.error
+    color: $color-white

app/(shared)/(ThemeTextField)/useTextField.tsx

@@ -0,0 +1,72 @@
+import { ChangeEvent, FocusEvent, useEffect, useRef, useState } from "react";
+import { useCreateTheme } from "@/components/atoms/createTheme.atom";
+import { ThemeInfoTextFieldType } from "./TextFieldType";
+
+export const useTextField = ({
+  id,
+  content,
+  checkErrorText,
+}: ThemeInfoTextFieldType) => {
+  const [inputValue, setInputValue] = useState<string>(content || "");
+  const [isFocus, setIsFocus] = useState<boolean>(false);
+  const [errorText, setErrorText] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [, setCreateTheme] = useCreateTheme();
+
+  useEffect(() => {
+    if (errorText) return;
+    setCreateTheme((prev) => ({
+      ...prev,
+      [id]: inputValue,
+    }));
+  }, [inputValue, id, setCreateTheme, errorText]);
+
+  useEffect(() => {
+    if (!isFocus || !inputRef.current) {
+      setErrorText("");
+      return;
+    }
+    inputRef.current.focus();
+  }, [isFocus]);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const cur = e.target.value;
+    if (cur.length > 1 && cur.length === cur.split("0").length - 1) {
+      setInputValue("0");
+      return;
+    }
+    const error = checkErrorText ? checkErrorText(cur) : "";
+    if (error) {
+      setErrorText(error);
+      setInputValue(inputValue);
+      return;
+    }
+    setErrorText("");
+    setInputValue(cur);
+  };
+
+  const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
+    if (
+      !e.relatedTarget ||
+      (e.relatedTarget.className !== "theme-info focus" &&
+        e.relatedTarget.className !== "theme-info error")
+    ) {
+      setIsFocus(false);
+      return;
+    }
+    inputRef.current?.focus();
+    setIsFocus(true);
+  };
+
+  return {
+    inputValue,
+    isFocus,
+    setIsFocus,
+    errorText,
+    inputRef,
+    handleInputChange,
+    handleInputBlur,
+  };
+};
+
+export default useTextField;

app/admin-new/(components)/ContentArea.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useModalStateValue } from "@/components/atoms/modals.atom";
+import { useSearchParams } from "next/navigation";
+import CreateTheme from "./CreateTheme/Container";
+import ThemeInfo from "./ThemeInfo/Container";
+
+export default function ContentArea() {
+  const modals = useModalStateValue();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString()).toString();
+
+  return (
+    <div className="content-area" key={params}>
+      {params ? (
+        <>
+          <ThemeInfo />
+          {modals.map((modal, index) => {
+            const { Component, props } = modal;
+            return (
+              <div className={`modal-${index}`} key={`${params}`}>
+                <Component {...props} />
+              </div>
+            );
+          })}
+        </>
+      ) : (
+        <CreateTheme />
+      )}
+    </div>
+  );
+}
+
+ContentArea.defaultProps = {
+  type: "", // 기본값 설정
+};

app/admin-new/(components)/CreateTheme/Container.tsx

@@ -0,0 +1,42 @@
+import { FormEvent } from "react";
+import "../../(style)/createTheme.modules.sass";
+import { useRouter } from "next/navigation";
+import { usePostTheme } from "@/mutations/postTheme";
+import { useCreateThemeValue } from "@/components/atoms/createTheme.atom";
+import { useSelectedThemeWrite } from "@/components/atoms/selectedTheme.atom";
+import CreateThemeTitle from "./CreateThemeTitle";
+import CreateThemeBody from "./CreateThemeBody";
+import CreateThemeAddButton from "./CreateThemeAddButton";
+
+export default function CreateTheme() {
+  const router = useRouter();
+  const createTheme = useCreateThemeValue();
+  const setSelectedTheme = useSelectedThemeWrite();
+  const { mutateAsync: postTheme } = usePostTheme();
+
+  const handleKeyDownSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const isDisabled =
+      (!(createTheme.title && createTheme.timeLimit && createTheme.hintLimit) &&
+        createTheme.timeLimit < 1) ||
+      createTheme.timeLimit > 10000 ||
+      (createTheme.hintLimit && createTheme.hintLimit > 1000);
+    if (isDisabled) {
+      return;
+    }
+    const response = await postTheme(createTheme);
+    const { id } = response.data.data;
+    if (id) {
+      setSelectedTheme(createTheme);
+      router.push(`/admin-new?themeId=${encodeURIComponent(id)}`);
+    }
+  };
+
+  return (
+    <form className="create-theme" onSubmit={handleKeyDownSubmit}>
+      <CreateThemeTitle />
+      <CreateThemeBody />
+      <CreateThemeAddButton />
+    </form>
+  );
+}

app/admin-new/(components)/CreateTheme/CreateThemeAddButton.tsx

@@ -0,0 +1,23 @@
+import { useCreateThemeValue } from "@/components/atoms/createTheme.atom";
+import classNames from "classnames";
+
+export default function CreateThemeAddButton() {
+  const createTheme = useCreateThemeValue();
+  const isDisabled = !(
+    createTheme.title &&
+    createTheme.timeLimit &&
+    createTheme.hintLimit
+  );
+
+  return (
+    <button
+      type="submit"
+      className={classNames("create-theme__add-button", {
+        disable: isDisabled,
+      })}
+      disabled={isDisabled}
+    >
+      테마 추가
+    </button>
+  );
+}