diff --git a/src/app/[groupId]/tasklist/_components/task-list-date-picker.tsx b/src/app/[groupId]/tasklist/_components/task-list-date-picker.tsx index e1899eb6..be903c1e 100644 --- a/src/app/[groupId]/tasklist/_components/task-list-date-picker.tsx +++ b/src/app/[groupId]/tasklist/_components/task-list-date-picker.tsx @@ -48,13 +48,21 @@ const TaskListDatePicker = ({ setCurrentSunday(sunday); setWeek(getWeek(sunday)); setSelectedDate(date); + setShowCalendar(false); }; const handleChangeDay = (e: ChangeEvent) => { if (!currentSunday) return; + const selectedDay = Number(e.target.value); setDay(e.target.value); + + const weekDays = week || []; + const dayIndex = weekDays.indexOf(selectedDay); + + if (dayIndex === -1) return; + const newDate = new Date(currentSunday); - newDate.setDate(Number(e.target.value)); + newDate.setDate(currentSunday.getDate() + dayIndex); setSelectedDate(newDate); }; @@ -114,7 +122,11 @@ const TaskListDatePicker = ({ diff --git a/src/app/addteam/_components/add-team-contents.tsx b/src/app/addteam/_components/add-team-contents.tsx index 0879cf43..7f7d4a26 100644 --- a/src/app/addteam/_components/add-team-contents.tsx +++ b/src/app/addteam/_components/add-team-contents.tsx @@ -1,5 +1,6 @@ "use client"; +import { useCallback } from "react"; import { useForm } from "react-hook-form"; import { ProfileEdit, @@ -35,12 +36,15 @@ const AddTeamContents = () => { isUploading: isImageUploading, } = useProfileImageManager(); - const onSubmit = (data: { name: string; image?: string }) => { - createGroup({ - name: data.name, - ...(profileImage && { image: profileImage }), - }); - }; + const onSubmit = useCallback( + (data: { name: string; image?: string }) => { + createGroup({ + name: data.name, + ...(profileImage && { image: profileImage }), + }); + }, + [createGroup, profileImage] + ); return (
diff --git a/src/app/boards/[articleId]/_components/article-header/article-header.tsx b/src/app/boards/[articleId]/_components/article-header/article-header.tsx index e46485cf..0e2095c7 100644 --- a/src/app/boards/[articleId]/_components/article-header/article-header.tsx +++ b/src/app/boards/[articleId]/_components/article-header/article-header.tsx @@ -46,7 +46,9 @@ const ArticleHeader = ({ article }: ArticleHeaderProps) => { <>
-

{article.title}

+

+ {article.title} +

{isWriter && ( { register, handleSubmit, formState: { errors }, + watch, } = useForm({ defaultValues: { title: article.title, @@ -39,6 +41,7 @@ const ArticleEditContents = ({ article }: ArticleEditContentsProps) => { const [images, setImages] = useState( article.image ? [article.image] : [] ); + const titleValue = watch("title") || ""; const handleImagesChange = useCallback((imgs: string[]) => { setImages(imgs); @@ -76,15 +79,32 @@ const ArticleEditContents = ({ article }: ArticleEditContentsProps) => { >

게시글 수정

-
+
제목 *
- +
+ +
+ {titleValue.length > 0 && ( +
+ + {titleValue.length}/{MAX_ARTICLE_TITLE_LENGTH} + +
+ )} {errors.title && ( {errors.title.message} )} diff --git a/src/app/boards/_components/boards-header/boards-header.tsx b/src/app/boards/_components/boards-header/boards-header.tsx index 768d11e7..2c5f1fb1 100644 --- a/src/app/boards/_components/boards-header/boards-header.tsx +++ b/src/app/boards/_components/boards-header/boards-header.tsx @@ -2,16 +2,19 @@ import cn from "@/utils/clsx"; import { TextInput, Button, Icon } from "@/components/index"; -import { ChangeEvent } from "react"; +import { useCallback, ChangeEvent } from "react"; const BoardsHeader = ({ onSearch, }: { onSearch: (keyword: string) => void; }) => { - const handleSearch = (e: ChangeEvent) => { - onSearch(e.target.value); - }; + const handleSearch = useCallback( + (e: ChangeEvent) => { + onSearch(e.target.value); + }, + [onSearch] + ); return (
{ register, handleSubmit, formState: { errors }, + watch, } = useForm(); const { mutate, isPending } = usePostArticle(); const [images, setImages] = useState([]); + const titleValue = watch("title") || ""; const handleImagesChange = useCallback((images: string[]) => { setImages(images); @@ -61,15 +64,32 @@ const ArticleWriteContents = () => { >

게시글 쓰기

-
+
제목 *
- +
+ +
+ {titleValue.length > 0 && ( +
+ + {titleValue.length}/{MAX_ARTICLE_TITLE_LENGTH} + +
+ )} {errors.title && ( {errors.title.message} )} diff --git a/src/components/input-box/input-box.tsx b/src/components/input-box/input-box.tsx index fec6d35a..76aec96c 100644 --- a/src/components/input-box/input-box.tsx +++ b/src/components/input-box/input-box.tsx @@ -37,22 +37,27 @@ const InputBox = ({ ...rest }: InputBoxProps) => { return ( -