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()