From 746277bff858f230a91eb57e0dcd21e824a08474 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 2 Mar 2025 01:47:09 +0900 Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=EB=B0=B8=EB=9F=B0=EC=8A=A4=20?= =?UTF-8?q?=EA=B2=8C=EC=9E=84=20=EC=84=9C=EB=B8=8C=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20ui=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GameTagModal/GameTagModal.style.ts | 45 +++++++++++- .../molecules/GameTagModal/GameTagModal.tsx | 71 ++++++++++++------- .../BalanceGameCreateSection.tsx | 5 +- .../mobile/molecules/GameTagModal.stories.tsx | 2 +- src/styles/color.ts | 1 + src/utils/array.ts | 4 ++ 6 files changed, 99 insertions(+), 29 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts b/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts index 7741aae8..61ab716d 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts +++ b/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,23 @@ 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 buttonWrapper = css({ @@ -46,6 +54,39 @@ export const buttonStyling = css(typo.Mobile.Text.SemiBold_14, { borderRadius: '6px', }); +export const inputWrapper = css({ + display: 'flex', + flexDirection: 'column', + height: '65px', + 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.MAIN_2}`, + 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 = css({ + display: 'flex', + flexWrap: 'wrap', + width: '100%', + gap: '5px', +}); + export const inputStyling = css(typo.Mobile.Text.Medium_12, { fontSize: '14px', width: '295px', diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index c68f8dc5..5cbc8887 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -1,10 +1,13 @@ -import React from 'react'; +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { 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 * as S from './GameTagModal.style'; interface GameTagModalProps { @@ -12,7 +15,7 @@ interface GameTagModalProps { isOpen?: boolean; onClose?: () => void; setMainTagValue: (name: string, tag: string) => void; - setSubTagValue: (e: React.ChangeEvent) => void; + setSubTagValue: (name: string, tag: string) => void; submitGame: () => void; } @@ -25,16 +28,24 @@ const GameTagModal = ({ submitGame, }: GameTagModalProps) => { const currentMainTag: string = form.mainTag; + const subTagArray: string[] = createArrayFromCommaString(form.subTag); + + const [errorMessage, setErrorMessage] = useState( + '서브태그 1개 당 최대 10자까지 입력 가능', + ); const handleMainTag = (tag: string) => { setMainTagValue('mainTag', tag); }; const handleTagSubmit = () => { - if (currentMainTag) { - submitGame(); - onClose?.(); - } + if (!currentMainTag) return; + + const { isValid } = validateGameTag(form); + if (!isValid) return; + + submitGame(); + onClose?.(); }; return ( @@ -65,26 +76,38 @@ const GameTagModal = ({
서브태그 + (최대 3개) +
+
+ {subTagArray.map((tag, idx) => ( +
+ #{tag} + +
+ ))} +
+
+ + {errorMessage && ( + {errorMessage} + )}
- +
- ); diff --git a/src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx b/src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx index 0edca8eb..4ffdec14 100644 --- a/src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx +++ b/src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx @@ -50,7 +50,7 @@ const BalanceGameCreateSection = () => { isOpen={tagModalOpen} onClose={() => setTagModalOpen(false)} setMainTagValue={setEach} - setSubTagValue={onChange} + setSubTagValue={setEach} submitGame={handleBalanceGame} /> )} @@ -79,7 +79,8 @@ const BalanceGameCreateSection = () => { }} onConfirm={() => { handleDeleteImg( - form.games[gameStage].gameOptions[selectedOptionId].fileId, + form.games[gameStage].gameOptions[selectedOptionId].fileId ?? + null, selectedOptionId, ); setImgDeleteModalOpen(false); diff --git a/src/stories/mobile/molecules/GameTagModal.stories.tsx b/src/stories/mobile/molecules/GameTagModal.stories.tsx index 3f167186..81f2e3f4 100644 --- a/src/stories/mobile/molecules/GameTagModal.stories.tsx +++ b/src/stories/mobile/molecules/GameTagModal.stories.tsx @@ -8,7 +8,7 @@ const defaultGameOptions = createInitialGameStages(10); const exampleGame: BalanceGame = { title: 'title', mainTag: 'mainTag', - subTag: 'subTag', + subTag: '커플커플커플커플커플,커플커플커플커플커플,커플커플커플커플커플', games: defaultGameOptions, }; diff --git a/src/styles/color.ts b/src/styles/color.ts index 13800520..92cabc3e 100644 --- a/src/styles/color.ts +++ b/src/styles/color.ts @@ -1,5 +1,6 @@ const color = { MAIN: '#7782FF', + MAIN_2: '#9DB7FF', BK: '#181818', GY: { 1: '#8C8C8C', diff --git a/src/utils/array.ts b/src/utils/array.ts index 96fbf7a1..cec126f5 100644 --- a/src/utils/array.ts +++ b/src/utils/array.ts @@ -9,3 +9,7 @@ export const createRangeArray = (currentPage: number, maxPage: number) => { (_, i) => startPage + i, ); }; + +export const createArrayFromCommaString = (str: string): string[] => { + return str.split(','); +}; From 931a61182fd960148b605b76b2d08c4408b065b4 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 2 Mar 2025 19:52:51 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EC=8A=A4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=EB=B0=94=EB=A1=9C=20=EC=84=9C=EB=B8=8C=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=B8=94=EB=A1=9D=EC=9D=B4=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GameTagModal/GameTagModal.style.ts | 9 +- .../molecules/GameTagModal/GameTagModal.tsx | 83 +++++++++++++++---- .../mobile/molecules/GameTagModal.stories.tsx | 2 +- 3 files changed, 75 insertions(+), 19 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts b/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts index 61ab716d..b018c628 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts @@ -43,6 +43,13 @@ export const tagWrapper = css({ gap: '8px', }); +export const tagBottomWrapper = css({ + width: '100%', + display: 'flex', + flexDirection: 'column', + gap: '4px', +}); + export const buttonWrapper = css({ display: 'flex', gap: '8px', @@ -57,7 +64,7 @@ export const buttonStyling = css(typo.Mobile.Text.SemiBold_14, { export const inputWrapper = css({ display: 'flex', flexDirection: 'column', - height: '65px', + height: '64px', gap: '4px', }); diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index 5cbc8887..a6ba584f 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -1,5 +1,6 @@ +/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { BalanceGame } from '@/types/game'; import { MobileCheckIcon } from '@/assets'; import { TAG_OPTIONS } from '@/constants/game'; @@ -28,16 +29,52 @@ const GameTagModal = ({ submitGame, }: GameTagModalProps) => { const currentMainTag: string = form.mainTag; - const subTagArray: string[] = createArrayFromCommaString(form.subTag); + const [subTagArray] = useState(() => createArrayFromCommaString(form.subTag)); // 초기 값 서브태그 배열 (빈 배열 가능, 값 안변함) + const [currentSubTag, setCurrentSubTag] = useState(subTagArray); + // 서브 태그 블록이 보여지는 배열은 currentSubTag + // subTagArray는 첫 form의 초기값에 대한 서브 태그만 저장 + // 인풋에 값 입력 후 스페이스를 누르면 setCurrentSubTag로 currentSubTag에 서브태그 값 추가 + // 만약 인풋에 값 입력된 상태에서 스페이스를 누르지 않았어도 서브태그에는 포함되어야하지만 currentSubTag에는 추가되면 안됨 + // 인풋이 존재 -> currentSubTag + inputValue (배열로 들어가야함) + // 인풋이 존재x (이미 스페이스를 눌렀음) -> currentSubTag 만으로 처리 가능 + // 인풋 컴포넌트는 currentSubTag.length로 제시 처리 가능 - const [errorMessage, setErrorMessage] = useState( - '서브태그 1개 당 최대 10자까지 입력 가능', - ); + const [inputValue, setInputValue] = useState(''); + const [inputError, setInputError] = useState(false); + + useEffect(() => { + const subTagList = inputValue + ? [...currentSubTag, inputValue] + : currentSubTag; + setSubTagValue('subTag', subTagList.join(',')); + }, [currentSubTag, setSubTagValue]); + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + const handleSpaceAction = () => { + if (!inputValue.trim()) return; + + setCurrentSubTag((prev) => [...prev, inputValue]); + setInputValue(''); + }; + + const handleKeyUp = (e: React.KeyboardEvent) => { + if (e.code === 'Space') { + e.preventDefault(); + handleSpaceAction(); + } + }; const handleMainTag = (tag: string) => { setMainTagValue('mainTag', tag); }; + const handleDeleteSubTag = (idx: number) => { + setCurrentSubTag((prev) => prev.filter((_, i) => i !== idx)); + }; + const handleTagSubmit = () => { if (!currentMainTag) return; @@ -73,30 +110,42 @@ const GameTagModal = ({ ))} -
+
서브태그 (최대 3개)
- {subTagArray.map((tag, idx) => ( + {currentSubTag.map((tag, idx) => (
#{tag} -
))}
-
- - {errorMessage && ( - {errorMessage} - )} -
+ {currentSubTag.length !== 3 && ( +
+ + {inputError && ( + + 서브태그 1개 당 최대 10자까지 입력 가능 + + )} +
+ )}
-
+
{currentSubTag.map((tag, idx) => (
#{tag} From e56d7c6ed6e468a6985189237f11b9ab29866b14 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 2 Mar 2025 21:29:01 +0900 Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20=EC=84=9C=EB=B8=8C=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=EA=B0=80=20=EB=B0=94=EB=A1=9C=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=84=9C=EB=B8=8C=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EA=B0=80=20=EC=97=AC=EB=9F=AC=20=EA=B0=9C=EB=A1=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=8B=9C=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/molecules/GameTagModal/GameTagModal.tsx | 4 ++-- .../BalanceGameSection/BalanceGameSection.style.ts | 1 + .../organisms/BalanceGameSection/BalanceGameSection.tsx | 6 +++++- src/hooks/api/game/useCreateGameMutation.ts | 2 +- src/stories/mobile/molecules/GameTagModal.stories.tsx | 2 +- src/utils/array.ts | 2 +- 6 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index 2cf3700b..7996f9ba 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -40,7 +40,7 @@ const GameTagModal = ({ ? [...currentSubTag, inputValue] : currentSubTag; setSubTagValue('subTag', subTagList.join(',')); - }, [currentSubTag, setSubTagValue]); + }, [currentSubTag, setCurrentSubTag, inputValue, setSubTagValue]); const handleInputChange = (e: React.ChangeEvent) => { const { value } = e.target; @@ -54,7 +54,7 @@ const GameTagModal = ({ const handleSpaceAction = () => { if (!inputValue.trim()) return; - setCurrentSubTag((prev) => [...prev, inputValue]); + setCurrentSubTag((prev) => [...prev, inputValue.trim()]); setInputValue(''); setInputError(false); }; diff --git a/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts b/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts index 1f80c2bb..fc6825cb 100644 --- a/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts +++ b/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', }); diff --git a/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx b/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx index 9db5c040..6c026c96 100644 --- a/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx +++ b/src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { MobileBookmarkDF, MobileBookmarkPR, MobileShare } from '@/assets'; import { useNavigate } from 'react-router-dom'; import { GameDetail, GameSet } from '@/types/game'; +import { createArrayFromCommaString } from '@/utils/array'; import { PATH } from '@/constants/path'; import MenuTap, { MenuItem } from '@/components/atoms/MenuTap/MenuTap'; import useToastModal from '@/hooks/modal/useToastModal'; @@ -56,6 +57,8 @@ const BalanceGameSection = ({ const [guestVotedList, setGuestVotedList] = useState([]); const currentGame: GameDetail = gameStages[currentStage]; + const subTagList = createArrayFromCommaString(game?.subTag ?? ''); + const { handleGuestGameVote } = useGuestGameVote( guestVotedList, setGuestVotedList, @@ -164,7 +167,8 @@ const BalanceGameSection = ({ />
- {game.subTag && } + {game.subTag && + subTagList.map((tag) => )}
)} diff --git a/src/hooks/api/game/useCreateGameMutation.ts b/src/hooks/api/game/useCreateGameMutation.ts index fc5e92f6..e9ca164b 100644 --- a/src/hooks/api/game/useCreateGameMutation.ts +++ b/src/hooks/api/game/useCreateGameMutation.ts @@ -21,7 +21,7 @@ export const useCreateGameMutation = ( queryClient.invalidateQueries({ queryKey: ['games'], }); - showToastModal(SUCCESS.CREATEGAME.CREATE, () => { + showToastModal(SUCCESS.GAME.CREATE, () => { navigate(`/${PATH.BALANCEGAME.VIEW(gameId)}`); }); }, diff --git a/src/stories/mobile/molecules/GameTagModal.stories.tsx b/src/stories/mobile/molecules/GameTagModal.stories.tsx index 172e6008..0c9ce13e 100644 --- a/src/stories/mobile/molecules/GameTagModal.stories.tsx +++ b/src/stories/mobile/molecules/GameTagModal.stories.tsx @@ -7,7 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react'; const defaultGameOptions = createInitialGameStages(10); const exampleGame: BalanceGame = { title: 'title', - mainTag: 'mainTag', + mainTag: '커플', subTag: '커플커플커플커플커플', games: defaultGameOptions, }; diff --git a/src/utils/array.ts b/src/utils/array.ts index cec126f5..bfd22762 100644 --- a/src/utils/array.ts +++ b/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(',') : []; }; From 74d441a898c384e9948d6f3b2e2205c26ed37364 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 2 Mar 2025 22:22:17 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EC=9D=B8=ED=92=8B=20=EB=B0=94?= =?UTF-8?q?=EA=B9=A5=20=EC=98=81=EC=97=AD=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EC=9D=B8=ED=92=8B=20=EB=82=B4=EC=9D=98=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EA=B0=80=20=ED=83=9C=EA=B7=B8=20=EB=B8=94=EB=A1=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=B2=98=EB=A6=AC=EB=90=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/molecules/GameTagModal/GameTagModal.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index 7996f9ba..8971bea9 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -1,6 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { BalanceGame } from '@/types/game'; import { MobileCheckIcon } from '@/assets'; import { TAG_OPTIONS } from '@/constants/game'; @@ -9,6 +8,7 @@ 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 { @@ -28,6 +28,8 @@ const GameTagModal = ({ setSubTagValue, submitGame, }: GameTagModalProps) => { + const inputRef = useRef(null); + const currentMainTag: string = form.mainTag; const [subTagArray] = useState(() => createArrayFromCommaString(form.subTag)); const [currentSubTag, setCurrentSubTag] = useState(subTagArray); @@ -58,6 +60,7 @@ const GameTagModal = ({ setInputValue(''); setInputError(false); }; + useOutsideClick(inputRef, handleSpaceAction); const handleKeyUp = (e: React.KeyboardEvent) => { if (!inputValue) { @@ -141,6 +144,7 @@ const GameTagModal = ({
Date: Mon, 3 Mar 2025 17:14:53 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20handleKeyUp=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EA=B0=84=EA=B2=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/molecules/GameTagModal/GameTagModal.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index 8971bea9..8447d951 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -67,15 +67,13 @@ const GameTagModal = ({ setInputError(false); return; } + if (e.code === 'Space') { e.preventDefault(); handleSpaceAction(); } - if (inputValue.length >= 10 && !inputError) { - setInputError(true); - } else if (inputValue.length < 10) { - setInputError(false); - } + + setInputError(inputValue.length >= 10); }; const handleMainTag = (tag: string) => { From ed6c8d88eb3fa46799fd8c27bf2b5986207abd89 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Mon, 3 Mar 2025 17:39:19 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refactor:=20=EC=84=9C=EB=B8=8C=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=B8=94=EB=A1=9D=EC=97=90=20key=20=EA=B0=92=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mobile/molecules/GameTagModal/GameTagModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx index 8447d951..282a4ba5 100644 --- a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx +++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useRef, useState } from 'react'; import { BalanceGame } from '@/types/game'; import { MobileCheckIcon } from '@/assets'; @@ -126,7 +125,7 @@ const GameTagModal = ({
{currentSubTag.map((tag, idx) => ( -
+
#{tag}