diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index d44573b..cdfe541 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -33,7 +33,7 @@ export default function Card({
draggable="true"
onDragStart={() => setDraggingCard({ cardData: card })}
onContextMenu={(e: React.MouseEvent) => e.preventDefault()}
- className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
+ className="BG-white Border-section relative rounded-6 border-solid px-20 py-16 transition-transform duration-300 ease-in-out hover:scale-95"
onClick={() => setOpenCard(true)}
>
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
index c813b1b..d5e4518 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
@@ -16,7 +16,6 @@ import { Assignee } from '../../type/Card.type'
import type { CardFormData } from '../../type/CardFormData.type'
import MyAssignee from '../MyAssignee'
import TagsCanDelete from '../TagsCanDelete'
-// import AssigneeList, { Assignee } from './AssigneeList'
import AssigneeList from './AssigneeList'
import DateInput from './input/DateInput'
import Input from './input/Input'
@@ -170,6 +169,7 @@ export default function CreateCardForm({
className="Input h-126 resize-none"
id="description"
placeholder="설명을 입력해 주세요"
+ maxLength={250}
/>
@@ -209,6 +209,7 @@ export default function CreateCardForm({
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault()
+ if (e.nativeEvent.isComposing) return //현재 단어가 composition 중인지 체크하여, 이벤트 중복 발생을 방지.(한글 입력 시 마지막 글자 남는 문제 해결)
if (tagInput.trim() === '') return
if (!tags.includes(tagInput.trimEnd())) {
setTags((prev) => [...prev, tagInput.trim()]) // 중복 태그가 아니면 ok, 태그배열에 추가 및 입력창 초기화
@@ -217,7 +218,13 @@ export default function CreateCardForm({
}
}}
value={tagInput}
- onChange={(e) => setTagInput(e.target.value)}
+ onChange={(e) => {
+ const value = e.target.value
+ const allowed = /^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z\s]*$/
+ if (allowed.test(value)) {
+ setTagInput(value)
+ }
+ }}
/>
{/* 추가한 태그 */}
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index ffe4dac..86d8597 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -237,6 +237,7 @@ export default function ModifyCardForm({
{...register('description', {
required: '설명을 입력해 주세요',
})}
+ maxLength={250}
className="Input h-126 resize-none"
id="description"
placeholder="설명을 입력해 주세요"
@@ -279,6 +280,7 @@ export default function ModifyCardForm({
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault()
+ if (e.nativeEvent.isComposing) return
if (tagInput.trim() === '') return
if (!tags.includes(tagInput.trimEnd())) {
setTags((prev) => [...prev, tagInput.trim()]) // 중복 태그가 아니면 ok, 태그배열에 추가 및 입력창 초기화
@@ -287,7 +289,13 @@ export default function ModifyCardForm({
}
}}
value={tagInput}
- onChange={(e) => setTagInput(e.target.value)}
+ onChange={(e) => {
+ const value = e.target.value
+ const allowed = /^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z\s]*$/
+ if (allowed.test(value)) {
+ setTagInput(value)
+ }
+ }}
/>
{/* 추가한 태그 */}
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index f6f1e87..8caa7d1 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -1,6 +1,6 @@
import Image from 'next/image'
import { useTheme } from 'next-themes'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
import { Avatar } from '@/app/shared/components/common/Avatar'
import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
@@ -128,7 +128,7 @@ export default function CardContent({
{card.description && (
{card.description}
diff --git a/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts b/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
index e86b9b2..f1b2b65 100644
--- a/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
+++ b/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
@@ -1,5 +1,7 @@
import { useCallback, useEffect } from 'react'
+import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
+
/**
* 범용 무한스크롤 훅
*
@@ -22,7 +24,8 @@ export const useInfiniteScroll = (
const clientHeight = targetRef?.current?.clientHeight ?? window.innerHeight
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight
- const isNearBottom = scrollPercentage >= 0.8
+
+ const isNearBottom = scrollPercentage >= 0.7
if (isNearBottom && hasNextPage && !isFetchingNextPage) {
fetchNextPage()