diff --git a/src/components/blog/BlogSideBar.tsx b/src/components/blog/BlogSideBar.tsx index 4aebc2a..be55dd6 100644 --- a/src/components/blog/BlogSideBar.tsx +++ b/src/components/blog/BlogSideBar.tsx @@ -44,13 +44,17 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
태그
-
+
{tags.map((tag) => ( ))} + {tags.length === 0 && +
+ 생성된 태그가 없습니다. +
}
@@ -78,7 +82,7 @@ function BlogFolderList({depth = 0, folders, selectedFolder, setSelectedFolder}: return (
- {folders.map(folder => + {folders.length > 1 && folders.map(folder =>
{depth === 0 &&
} - {depth === 0 &&
} + {folder.subFolders.length > 0 && depth === 0 &&
}
)} + {depth === 0 && folders.length <= 1 && +
+ 생성된 폴더가 없습니다. +
}
); } diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index c34bd76..7ddfcd2 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -123,7 +123,7 @@ function Header() {
:
- +
} diff --git a/src/components/folder/FolderCardList.tsx b/src/components/folder/FolderCardList.tsx index a801cf3..7f74d79 100644 --- a/src/components/folder/FolderCardList.tsx +++ b/src/components/folder/FolderCardList.tsx @@ -6,6 +6,8 @@ import {FillButton} from "../common/FillButton.tsx"; import {MdOutlineMenu} from "react-icons/md"; import {TextButton} from "../common/TextButton.tsx"; import {restrictToVerticalAxis} from "@dnd-kit/modifiers"; +import {useEffect, useRef} from "react"; +import * as React from "react"; function FolderCardList({ folders, @@ -87,6 +89,8 @@ function FolderCard({ setSelectedFolder: (selectedFolder: FolderType) => void, }) { + const folderTitleRef = useRef(null); + const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id: folder.id}); const style = { @@ -94,6 +98,24 @@ function FolderCard({ transition, }; + useEffect(() => { + if (folder.id === editFolderId) { + folderTitleRef.current?.focus(); + } + }, [editFolderId]); + + const handleEditTitleEnter = (event: React.KeyboardEvent) => { + if (event.key !== "Enter") { + return; + } + + handleEditTitle(); + } + + const handleEditTitle = () => { + handleEdit({...folder, title: editFolderTitle}); + } + return (
@@ -105,13 +127,15 @@ function FolderCard({ className={"flex-1 font-bold border p-2"} value={editFolderTitle} onChange={(e) => setEditFolderTitle(e.target.value)} + onKeyDown={handleEditTitleEnter} + ref={folderTitleRef} placeholder="폴더 이름"/>
setEditFolderId("")} addStyle={"!bg-gray-400 hover:brightness-110"}/> handleEdit({...folder, title: editFolderTitle})} + onClick={handleEditTitle} addStyle={`${folder.title === editFolderTitle && "opacity-50 hover:!cursor-auto"}`} disabled={folder.title === editFolderTitle}/>
diff --git a/src/components/folder/FolderSelectBox.tsx b/src/components/folder/FolderSelectBox.tsx index 451dc1f..cdad268 100644 --- a/src/components/folder/FolderSelectBox.tsx +++ b/src/components/folder/FolderSelectBox.tsx @@ -74,7 +74,7 @@ function FolderSelectCard({folder, depth, selectedFolder, setTargetFolder, setFo
{getFolderTitle(folder.title, depth)} -

({folder.postCount})

+ {folder.id !== "empty" &&

({folder.postCount})

}
{folder.subFolders && diff --git a/src/components/member/LoginTextField.tsx b/src/components/member/LoginTextField.tsx index 7ac5131..f3dc216 100644 --- a/src/components/member/LoginTextField.tsx +++ b/src/components/member/LoginTextField.tsx @@ -1,11 +1,13 @@ import * as React from "react"; +import {Ref} from "react"; -function LoginTextField({label, type, placeholder, value, setValue, error, isError, onKeyDown}: { +function LoginTextField({label, type, placeholder, value, setValue, customRef, error, isError, onKeyDown}: { label?: string, type: string, placeholder: string, value: string, setValue: (value: string) => void, + customRef?: Ref, error?: string, isError?: boolean, onKeyDown?: (event: React.KeyboardEvent) => void, @@ -20,7 +22,9 @@ function LoginTextField({label, type, placeholder, value, setValue, error, isErr className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" value={value} onChange={(event => setValue(event.target.value))} - onKeyDown={onKeyDown}/> + onKeyDown={onKeyDown} + ref={customRef} + autoComplete={"on"}/> {(error) && ( isError ?

{error}

diff --git a/src/components/post/PostCard.tsx b/src/components/post/PostCard.tsx index b2ddedd..e256304 100644 --- a/src/components/post/PostCard.tsx +++ b/src/components/post/PostCard.tsx @@ -4,7 +4,6 @@ import DOMPurify from "dompurify"; import {MdImage} from "react-icons/md"; import {dateToKorean} from "../../common/util/date.tsx"; import {Link} from "react-router-dom"; -import {FaRegHeart} from "react-icons/fa6"; function PostCard({post}: { post: PostResponse }) { @@ -33,12 +32,12 @@ function PostCard({post}: { post: PostResponse }) { {dateToKorean(post.createdAt)}
-
-
- -

20

-
-
+ {/*
*/} + {/*
*/} + {/* */} + {/*

20

*/} + {/*
*/} + {/*
*/}
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 48774ec..1285c54 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -34,7 +34,7 @@ function MainPage() {
- 인기 있는 게시글 + 최근 게시글
diff --git a/src/pages/member/EmailPage.tsx b/src/pages/member/EmailPage.tsx index 3eea84b..1398c4d 100644 --- a/src/pages/member/EmailPage.tsx +++ b/src/pages/member/EmailPage.tsx @@ -1,6 +1,6 @@ import BasicLayout from "../../layout/BasicLayout.tsx"; import LoginTextField from "../../components/member/LoginTextField.tsx"; -import {useState} from "react"; +import {useEffect, useRef, useState} from "react"; import LoginButton from "../../components/member/LoginButton.tsx"; import {useNavigate} from "react-router-dom"; import * as React from "react"; @@ -15,6 +15,8 @@ function EmailPage() { const navigate = useNavigate(); + const emailRef = useRef(null); + const handleEmailEnter = (event: React.KeyboardEvent) => { if (event.key !== "Enter") { return; @@ -38,6 +40,10 @@ function EmailPage() { .finally(() => setLoading(false)); } + useEffect(() => { + emailRef.current?.focus(); + }, []); + return (
setEmail(value)} + customRef={emailRef} onKeyDown={handleEmailEnter}/>
diff --git a/src/pages/member/LoginPage.tsx b/src/pages/member/LoginPage.tsx index 4e4c488..af093d8 100644 --- a/src/pages/member/LoginPage.tsx +++ b/src/pages/member/LoginPage.tsx @@ -1,6 +1,6 @@ import BasicLayout from "../../layout/BasicLayout.tsx"; import {useNavigate} from "react-router-dom"; -import {useState} from "react"; +import {useEffect, useRef, useState} from "react"; import {useDispatch, useSelector} from "react-redux"; import {getProfile, handleKakaoLogin, loginApi} from "../../common/apis/member.tsx"; import {login, setProfile} from "../../common/slices/loginSlice.tsx"; @@ -18,6 +18,9 @@ function LoginPage() { const navigate = useNavigate(); const dispatch = useDispatch(); + const emailRef = useRef(null); + const passwordRef = useRef(null); + const [loginInfo, setLoginInfo] = useState({email: "", password: ""}); const handleLogin = () => { @@ -45,6 +48,14 @@ function LoginPage() { .catch(error => alert(error.response.data.message)); } + const handleEmailEnter = (event: React.KeyboardEvent) => { + if (event.key !== "Enter") { + return; + } + + passwordRef.current?.focus(); + } + const handlePasswordEnter = (event: React.KeyboardEvent) => { if (event.key !== "Enter") { return; @@ -57,6 +68,10 @@ function LoginPage() { handleLogin(); } + useEffect(() => { + emailRef.current?.focus(); + }, []); + return (
-
+
e.preventDefault()} className="flex flex-col justify-center items-center w-full"> setLoginInfo({...loginInfo, email: value})}/> + setValue={(value) => setLoginInfo({...loginInfo, email: value})} + customRef={emailRef} + onKeyDown={handleEmailEnter}/> setLoginInfo({...loginInfo, password: value})} + customRef={passwordRef} onKeyDown={handlePasswordEnter}/> -
+
(null); + const confirmPasswordRef = useRef(null); + const handlePasswordEnter = (event: React.KeyboardEvent) => { if (event.key !== "Enter") { return; } + confirmPasswordRef.current?.focus(); + } + + const handleConfirmPasswordEnter = (event: React.KeyboardEvent) => { + if (event.key !== "Enter") { + return; + } + handleSignup(); } @@ -51,26 +62,33 @@ function SignupPage() { return !checkPassword(passwordInfo.password) || (passwordInfo.password !== passwordInfo.confirmPassword); } + useEffect(() => { + passwordRef.current?.focus(); + }, []); + return (

비밀번호 설정을 마치면 회원가입이 완료됩니다.

-
+
e.preventDefault()} className="w-full"> setPasswordInfo({...passwordInfo, password: value})}/> + setValue={(value) => setPasswordInfo({...passwordInfo, password: value})} + customRef={passwordRef} + onKeyDown={handlePasswordEnter}/> setPasswordInfo({...passwordInfo, confirmPassword: value})} - onKeyDown={handlePasswordEnter}/> -
+ customRef={confirmPasswordRef} + onKeyDown={handleConfirmPasswordEnter}/> +
diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx index db145ce..0153037 100644 --- a/src/pages/post/PostPage.tsx +++ b/src/pages/post/PostPage.tsx @@ -180,7 +180,7 @@ function PostPage() {
-
+
Home @@ -192,7 +192,7 @@ function PostPage() {
}
-
+
{post.username} @@ -211,9 +211,9 @@ function PostPage() { }}/>)}
-
-
+
{loginState.isLogin ? (null); const orderRef = useRef(null); + const searchRef = useRef(null); const [openOption, setOpenOption] = useState(false); const [openOrder, setOpenOrder] = useState(false); @@ -167,6 +168,10 @@ function SearchPage() { .catch(error => alert(error.response.data.message)); } + useEffect(() => { + searchRef.current?.focus(); + }, []); + useEffect(() => { if (refresh) { setRefresh(false); @@ -201,6 +206,7 @@ function SearchPage() { onChange={(e) => setSearchRequest({...searchRequest, keyword: e.target.value})} placeholder={"검색어를 입력해주세요."} className="w-full block mt-0.5 p-3 mr-4 font-jalnan text-xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black" + ref={searchRef} onKeyDown={handleSearchEnter}/>
-
-
+
+
+ {selectedTab === "post" ? postPageInfo.totalElements : blogPageInfo.totalElements} - 개의 검색결과 + + 개의 검색결과
{selectedTab === "post" && -
+
void, value: string, @@ -354,11 +359,10 @@ function SearchMenu({title, menus, setMenu, value, open, handleOpen, customRef}: return (
-
-

{title}

+
)} handleTag(event.target.value)} + onChange={(event) => handleInputTag(event.target.value)} onFocus={() => setShowTag(true)} - onBlur={() => setShowTag(false)}/> + onBlur={() => { + setShowTag(false); + handleTag(post.inputTag); + }} + onKeyDown={handleTagEnter}/>
{showTag &&
- 쉼표를 입력하여 태그를 등록할 수 있습니다. + className="absolute -bottom-6 left-0 flex flex-col rounded-md bg-gray-700 text-white w-[calc(346px)] px-4 py-2 text-sm"> + 쉼표나 엔터를 입력하여 태그를 등록할 수 있습니다.
}
{ + if (editFolderId !== "") { + alert("변경중인 폴더가 있습니다."); + return; + } + if (!confirm("변경사항을 저장하시겠습니까?")) { return; } diff --git a/src/pages/setting/PostSettingPage.tsx b/src/pages/setting/PostSettingPage.tsx index 600672c..0b2dedf 100644 --- a/src/pages/setting/PostSettingPage.tsx +++ b/src/pages/setting/PostSettingPage.tsx @@ -140,11 +140,11 @@ function PostSettingPage() { setTargetFolder={setTargetFolder} center={false}/> - +
} {!isFolderEdit &&
- +
}