Develop

.eslintrc.json

@@ -9,28 +9,34 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "next/core-web-vitals",
-    "airbnb",
-    "airbnb/hooks",
-    "airbnb-typescript",
-    "prettier",
-    "plugin:storybook/recommended"
+    "prettier"
   ],
-  "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
-    "project": ["tsconfig.json"]
+    "project": "tsconfig.json"
   },
   "plugins": ["react", "@typescript-eslint"],
+  "globals": { "NodeJS": "readonly" },
   "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-props-no-spreading": "off",
-    "jsx-a11y/label-has-associated-control": [
-      2,
+    "import/order": [
+      "error",
       {
-        "labelAttributes": ["htmlFor"]
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "always"
       }
-    ]
+    ],
+    "react/display-name": "off",
+    "jsx-a11y/alt-text": "off",
+    "@next/next/no-img-element": "off",
+    "no-console": ["error", { "allow": ["warn", "error"] }]
   }
 }

.github/workflows/main.yml

@@ -0,0 +1,48 @@
+name: Continuous Integration and Synchronization
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - develop
+
+jobs:
+  quality:
+    name: Check quality
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Checking
+        run: npm run lint && npm run lint:type && npm run lint:eslint && npm run lint:prettier
+
+  sync:
+    name: Sync forked repo
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
+
+    steps:
+      - name: Checkout develop
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.AUTO_ACTIONS }}
+          fetch-depth: 0
+          ref: develop
+
+      - name: Add remote-url
+        run: |
+          git remote add forked-repo https://lgrin-byte:${{ secrets.AUTO_ACTIONS }}@github.com/lgrin-byte/nextRoomFE
+          git config user.name lgrin-byte
+          git config user.email ${{ secrets.EMAIL }}
+
+      - name: Push changes to forked-repo
+        run: |
+          git push -f forked-repo develop
+
+      - name: Clean up
+        run: |
+          git remote remove forked-repo

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint 
+npm run lint && npm run lint:prettier && npm run lint:eslint && npm run lint:type

.prettierignore

@@ -0,0 +1,10 @@
+**/*.css
+**/*.scss
+**/*.sass
+**/*.html
+**/*.yml
+.github
+.husky
+.next
+.swc
+.vscode

.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "singleQuote": false,
-    "semi": true,
-    "useTabs": false,
-    "printWidth": 80
-  }
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "printWidth": 80
+}

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

@@ -0,0 +1,53 @@
+import React from "react";
+import "./textArea.modules.sass";
+import classNames from "classnames";
+
+import useTextArea from "./useTextArea";
+import { ThemeInfoTextAreaType } from "./TextAreaType";
+
+export default function ThemeTextArea({
+  id,
+  tabIndex,
+  content,
+  infoText,
+  textAreaPlaceholder,
+  checkErrorText,
+}: ThemeInfoTextAreaType) {
+  const {
+    textAreaValue,
+    isFocus,
+    setIsFocus,
+    errorText,
+    textAreaRef,
+    handleTextAreaChange,
+    handleTextAreaBlur,
+  } = useTextArea({ id, content, checkErrorText });
+
+  return (
+    <div tabIndex={isFocus ? -1 : tabIndex} onFocus={() => setIsFocus(true)}>
+      <textarea
+        ref={textAreaRef}
+        className={classNames("theme-textarea", {
+          error: errorText,
+          filled: textAreaValue && !(errorText || isFocus),
+        })}
+        value={textAreaValue}
+        placeholder={textAreaPlaceholder}
+        onChange={handleTextAreaChange}
+        onBlur={handleTextAreaBlur}
+        tabIndex={tabIndex}
+      />
+
+      {errorText && (
+        <div className="theme-textfield-info error" tabIndex={-1}>
+          {errorText}
+        </div>
+      )}
+      {infoText && (
+        <div className="theme-textfield-info" tabIndex={-1}>
+          {infoText}
+        </div>
+      )}
+    </div>
+  );
+}

app/(shared)/(ThemeTextArea)/TextAreaType.ts

@@ -0,0 +1,11 @@
+type ValidationFunction<T> = (value: T) => string;
+
+export type ThemeInfoTextAreaType = {
+  id: "contents" | "answer";
+  tabIndex?: number;
+  title?: string;
+  content: string;
+  infoText?: string;
+  textAreaPlaceholder?: string;
+  checkErrorText?: ValidationFunction<unknown>;
+};

app/(shared)/(ThemeTextArea)/textArea.modules.sass

@@ -0,0 +1,38 @@
+@import '../../style/variables'
+@import '../../style/mixins'
+@import '../../style/button'
+
+.theme-textarea
+  width: 100%
+  min-height: 120px
+  padding: 8px 12px
+  display: flex
+  border: 1px solid $color-white20
+  border-radius: 8px
+  background-color: $color-white5
+  color: $color-white
+  resize: none
+  cursor: pointer
+
+  &.filled
+    background-color: $color-main
+  &:focus
+    outline: none
+    border: 1px solid $color-white
+    background-color: $color-black
+    cursor: text
+  &:hover
+    background-color: $color-black
+  &.error
+    border: 1px solid $color-semantic100
+    cursor: text
+
+.theme-textfield-info
+  margin: 4px 0 0 16px
+  cursor: default
+
+  @include body12R
+  color: $color-white70
+  &.error
+    color: $color-semantic100
+