refactor: 밸런스 게임 서브 태그 모달 ui 및 로직 수정 (#310)

* refactor: 밸런스 게임 서브태그 모달 ui 수정

* feat: 스페이스 바로 서브 태그 블록이 생성되도록 로직 구현

* feat: 서브 태그를 10글자 이상 입력 시 에러 메세지가 제시되도록 구현

* refactor: 서브 태그가 바로 업데이트되도록 수정 및 서브 태그가 여러 개로 제시되도록 수정

* feat: 인풋 바깥 영역 클릭 시 인풋 내의 텍스트가 태그 블록으로 처리되도록 구현

* refactor: handleKeyUp 함수 간결화

* refactor: 서브 태그 블록에 key 값 추가

* refactor: MAIN_2 색상 이름을 SECONDARY로 수정

* refactor: 서브 태그 값 업데이트 useEffect 문의 의존성 배열 수정

Author: areumH

src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts

@@ -6,7 +6,7 @@ export const contentWrapper = css({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: '20px',
+  gap: '16px',
 });
 
 export const textBox = css({
@@ -24,15 +24,29 @@ export const tagTextStyling = css(typo.Mobile.Text.SemiBold_14, {
   color: color.GY[1],
 });
 
+export const subTagTextStyling = css(typo.Mobile.Main.Regular_12, {
+  color: color.GY[2],
+});
+
 export const markStyling = css(typo.Mobile.Text.SemiBold_14, {
   color: color.MAIN,
 });
 
+export const errorMessageStyling = css(typo.Mobile.Main.Regular_12, {
+  color: color.RED,
+});
+
 export const tagWrapper = css({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
-  gap: '6px',
+  gap: '8px',
+});
+
+export const tagBottomWrapper = css({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 export const buttonWrapper = css({
@@ -46,6 +60,42 @@ export const buttonStyling = css(typo.Mobile.Text.SemiBold_14, {
   borderRadius: '6px',
 });
 
+export const inputWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '67px',
+  gap: '4px',
+});
+
+export const subTagChipStyling = css(typo.Mobile.Text.SemiBold_12, {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '5px 9px 5px 12px',
+  gap: '5px',
+  borderRadius: '6px',
+  outline: `1px solid ${color.SECONDARY}`,
+  backgroundColor: color.WT_VIOLET,
+  color: color.MAIN,
+});
+
+export const subTagButtonStyling = css({
+  all: 'unset',
+  display: 'flex',
+  color: color.MAIN,
+  fontSize: '12px',
+  cursor: 'pointer',
+});
+
+export const subTagWrapper = (isTagMax: boolean) =>
+  css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    gap: '5px',
+    paddingTop: '3px',
+    paddingBottom: isTagMax ? '17px' : '5px',
+  });
+
 export const inputStyling = css(typo.Mobile.Text.Medium_12, {
   fontSize: '14px',
   width: '295px',

src/components/mobile/molecules/GameTagModal/GameTagModal.tsx

@@ -1,19 +1,21 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { BalanceGame } from '@/types/game';
 import { MobileCheckIcon } from '@/assets';
 import { TAG_OPTIONS } from '@/constants/game';
 import Modal from '@/components/mobile/atoms/Modal/Modal';
 import Button from '@/components/mobile/atoms/Button/Button';
 import Divider from '@/components/atoms/Divider/Divider';
 import { validateGameTag } from '@/hooks/game/validateBalanceGameForm';
+import { createArrayFromCommaString } from '@/utils/array';
+import useOutsideClick from '@/hooks/common/useOutsideClick';
 import * as S from './GameTagModal.style';
 
 interface GameTagModalProps {
   form: BalanceGame;
   isOpen?: boolean;
   onClose?: () => void;
   setMainTagValue: (name: string, tag: string) => void;
-  setSubTagValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  setSubTagValue: (name: string, tag: string) => void;
   submitGame: () => void;
 }
 
@@ -25,12 +27,62 @@ const GameTagModal = ({
   setSubTagValue,
   submitGame,
 }: GameTagModalProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const currentMainTag: string = form.mainTag;
+  const [subTagArray] = useState(() => createArrayFromCommaString(form.subTag));
+  const [currentSubTag, setCurrentSubTag] = useState<string[]>(subTagArray);
+
+  const [inputValue, setInputValue] = useState<string>('');
+  const [inputError, setInputError] = useState<boolean>(false);
+
+  useEffect(() => {
+    const subTagList = inputValue
+      ? [...currentSubTag, inputValue]
+      : currentSubTag;
+    setSubTagValue('subTag', subTagList.join(','));
+  }, [currentSubTag, inputValue, setSubTagValue]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+
+    if (value.length > 10) return;
+
+    setInputValue(value);
+    setInputError(false);
+  };
+
+  const handleSpaceAction = () => {
+    if (!inputValue.trim()) return;
+
+    setCurrentSubTag((prev) => [...prev, inputValue.trim()]);
+    setInputValue('');
+    setInputError(false);
+  };
+  useOutsideClick(inputRef, handleSpaceAction);
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!inputValue) {
+      setInputError(false);
+      return;
+    }
+
+    if (e.code === 'Space') {
+      e.preventDefault();
+      handleSpaceAction();
+    }
+
+    setInputError(inputValue.length >= 10);
+  };
 
   const handleMainTag = (tag: string) => {
     setMainTagValue('mainTag', tag);
   };
 
+  const handleDeleteSubTag = (idx: number) => {
+    setCurrentSubTag((prev) => prev.filter((_, i) => i !== idx));
+  };
+
   const handleTagSubmit = () => {
     if (!currentMainTag) return;
 
@@ -66,28 +118,54 @@ const GameTagModal = ({
             ))}
           </div>
         </div>
-        <div css={S.tagWrapper}>
+        <div css={S.tagBottomWrapper}>
           <div css={S.textBox}>
             <span css={S.tagTextStyling}>서브태그</span>
+            <span css={S.subTagTextStyling}>(최대 3개)</span>
+          </div>
+          <div css={S.subTagWrapper(currentSubTag.length === 3)}>
+            {currentSubTag.map((tag, idx) => (
+              <div css={S.subTagChipStyling} key={tag}>
+                <span>#{tag}</span>
+                <button
+                  type="button"
+                  css={S.subTagButtonStyling}
+                  onClick={() => handleDeleteSubTag(idx)}
+                >
+                  ⨉
+                </button>
+              </div>
+            ))}
           </div>
-          <input
-            name="subTag"
-            css={S.inputStyling}
-            placeholder="ex. 너무어려운밸런스게임, 선택장애, 이상형"
-            value={form.subTag}
-            onChange={setSubTagValue}
-          />
+          {currentSubTag.length !== 3 && (
+            <div css={S.inputWrapper}>
+              <input
+                type="text"
+                ref={inputRef}
+                css={S.inputStyling}
+                value={inputValue}
+                placeholder="ex. 연애, 데이트, 데이트취향"
+                onChange={handleInputChange}
+                onKeyUp={handleKeyUp}
+              />
+              {inputError && (
+                <span css={S.errorMessageStyling}>
+                  서브태그 1개 당 최대 10자까지 입력 가능
+                </span>
+              )}
+            </div>
+          )}
+          <Button
+            size="large"
+            variant="roundPrimary"
+            onClick={handleTagSubmit}
+            disabled={!currentMainTag}
+            active={!!currentMainTag}
+            css={S.customButtonStyle(!currentMainTag)}
+          >
+            등록하기
+          </Button>
         </div>
-        <Button
-          size="large"
-          variant="roundPrimary"
-          onClick={handleTagSubmit}
-          disabled={!currentMainTag}
-          active={!!currentMainTag}
-          css={S.customButtonStyle(!currentMainTag)}
-        >
-          등록하기
-        </Button>
       </div>
     </Modal>
   );

src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx

@@ -65,7 +65,7 @@ const BalanceGameCreateSection = ({
             isOpen={tagModalOpen}
             onClose={() => setTagModalOpen(false)}
             setMainTagValue={setEach}
-            setSubTagValue={onChange}
+            setSubTagValue={setEach}
             submitGame={handleBalanceGame}
           />
         )}

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts

@@ -78,6 +78,7 @@ export const descriptionStyling = css(typo.Mobile.Main.Regular_12, {
 
 export const subTagWrapper = css({
   display: 'flex',
+  flexWrap: 'wrap',
   width: '100%',
   marginBottom: '50px',
   gap: '8px',

src/stories/mobile/molecules/GameTagModal.stories.tsx

@@ -7,8 +7,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 const defaultGameOptions = createInitialGameStages(10);
 const exampleGame: BalanceGame = {
   title: 'title',
-  mainTag: 'mainTag',
-  subTag: 'subTag',
+  mainTag: '커플',
+  subTag: '커플커플커플커플커플',
   games: defaultGameOptions,
 };
 

src/styles/color.ts

@@ -1,5 +1,6 @@
 const color = {
   MAIN: '#7782FF',
+  SECONDARY: '#9DB7FF',
   BK: '#181818',
   GY: {
     1: '#8C8C8C',

src/utils/array.ts

@@ -11,5 +11,5 @@ export const createRangeArray = (currentPage: number, maxPage: number) => {
 };
 
 export const createArrayFromCommaString = (str: string): string[] => {
-  return str.split(',');
+  return str ? str.split(',') : [];
 };