+
-
+
);
}
diff --git a/src/layout/ModalLayout.tsx b/src/layout/ModalLayout.tsx
new file mode 100644
index 0000000..131b304
--- /dev/null
+++ b/src/layout/ModalLayout.tsx
@@ -0,0 +1,14 @@
+import {ReactNode} from "react";
+
+function ModalLayout({children}: { children: ReactNode }) {
+ return (
+
-
{children}
+
+
+
+ );
+}
+
+export default ModalLayout;
\ No newline at end of file
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 7fb8a3e..25406f4 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,9 +1,11 @@
import BasicLayout from "../layout/BasicLayout.tsx";
import {useEffect} from "react";
-import {getProfile} from "../apis/member.tsx";
-import {login} from "../slices/loginSlice.tsx";
+import {getProfile} from "../common/apis/member.tsx";
+import {login} from "../common/slices/loginSlice.tsx";
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "../store.tsx";
+import PostCard from "../components/post/PostCard.tsx";
+import {faker} from "@faker-js/faker/locale/ko";
function MainPage() {
@@ -25,10 +27,39 @@ function MainPage() {
});
}, []);
+
return (
+ {children}
+
+
- MainPage
+ ([]);
+
+ const mainRef = useRef(null);
+ const sideBarRef = useRef(null);
+
+ const handleMenuOpen = () => {
+ setIsOpen(cur => !cur);
+ }
+ const handleClickOutside = (event: MouseEvent) => {
+ if (sideBarRef.current && !sideBarRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+
+ const addTag = (selectTag: string) => {
+ setSelectedTagList([...selectedTagList, selectTag]);
+ }
+
+ const removeTag = (selectTag: string) => {
+ setSelectedTagList(prevState => prevState.filter(tag => tag !== selectTag));
+ }
+
+ const removeCategory = (selectCategory: string) => {
+ console.log(selectCategory);
+ setSelectedCategory("");
+ }
+
+ useEffect(() => {
+ if (sideBarRef.current && mainRef.current) {
+ sideBarRef.current.style.height = `${mainRef.current.offsetHeight + 220}px`;
+ }
+ }, []);
+
+
+ useEffect(() => {
+ document.addEventListener('mousedown', handleClickOutside);
+ document.title = username || "DIGLOG";
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ document.title = "DIGLOG";
+ };
+ }, []);
+
+ useEffect(() => {
+ setSearchParams({
+ "category": selectedCategory
+ })
+ }, [selectedCategory]);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.classList.remove('overflow-x-hidden');
+ } else {
+ document.body.classList.add('overflow-x-hidden');
+ }
+
+ return () => {
+ document.body.classList.remove('overflow-x-hidden');
+ };
+ }, [isOpen]);
+
+ return (
+
+
+ );
+}
+
+function SideBar({username, addTag, setSelectedCategory, bgColor}: {
+ username: string | undefined,
+ addTag: (tagName: string) => void,
+ setSelectedCategory: (category: string) => void,
+ bgColor?: string
+}) {
+
+ return (
+ ([]);
+ const [code, setCode] = useState(Array(6).fill(""));
+
+ const [timer, setTimer] = useState(600);
+
+ const handleChange = (index: number, value: string) => {
+ if (/[^0-9]/g.test(value)) {
+ return;
+ }
+
+ const newCode = [...code];
+
+ newCode[index] = value.replace(/[^0-9]/g, "");
+ setCode(newCode);
+
+ if (value && index < inputRefs.current.length - 1) {
+ inputRefs.current[index + 1].focus();
+ }
+ };
+
+ const handleBackspace = (event: React.KeyboardEvent, index: number) => {
+ if (event.key === "Backspace" && !event.currentTarget.value && index > 0) {
+ inputRefs.current[index - 1].focus();
+ }
+ };
+
+ useEffect(() => {
+ if (inputRefs.current) {
+ inputRefs.current[0].focus();
+ }
+ }, []);
+
+ useEffect(() => {
+ let interval = null;
+
+ if (timer > 0) {
+ interval = setInterval(() => {
+ setTimer((prev) => prev - 1);
+ }, 1000);
+ } else if (timer === 0) {
+ clearInterval(interval!);
+ alert("유효 시간이 만료되었습니다. 회원가입을 다시 시도해주세요.");
+ }
+
+ return () => clearInterval(interval!);
+ }, [timer]);
+
+ useEffect(() => {
+ if (code[5] !== "") {
+ setLoading(true);
+
+ navigate("/signup", {state: {email: email, code: code.join("")}});
+ }
+ }, [code]);
+
+ return (
+
+
+
+ )
+ ;
+}
+
+export default CodePage;
\ No newline at end of file
diff --git a/src/pages/member/EmailPage.tsx b/src/pages/member/EmailPage.tsx
new file mode 100644
index 0000000..e834a00
--- /dev/null
+++ b/src/pages/member/EmailPage.tsx
@@ -0,0 +1,49 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import LoginTextField from "../../components/member/LoginTextField.tsx";
+import {useState} from "react";
+import LoginButton from "../../components/member/LoginButton.tsx";
+import {useNavigate} from "react-router-dom";
+import * as React from "react";
+import {checkEmail} from "../../common/util/regex.tsx";
+
+function EmailPage() {
+
+ const [signupInfo, setSignupInfo] = useState({email: "", code: "", password: ""});
+
+ const navigate = useNavigate();
+
+ const handleEmailEnter = (event: React.KeyboardEvent) => {
+ if (event.key !== "Enter") {
+ return;
+ }
+
+ handleVerifyEmail();
+ }
+
+ const handleVerifyEmail = () => {
+ if (!checkEmail(signupInfo.email)) {
+ alert("이메일 형식을 확인해주세요.");
+ return;
+ }
+
+ navigate("/signup/code", {state: {email: signupInfo.email}});
+ }
+
+ return (
+
+
+ );
+}
+
+export default EmailPage;
\ No newline at end of file
diff --git a/src/pages/member/LoginPage.tsx b/src/pages/member/LoginPage.tsx
index abd1aa0..0d00df2 100644
--- a/src/pages/member/LoginPage.tsx
+++ b/src/pages/member/LoginPage.tsx
@@ -2,8 +2,13 @@ import BasicLayout from "../../layout/BasicLayout.tsx";
import {useNavigate} from "react-router-dom";
import {useState} from "react";
import {useDispatch} from "react-redux";
-import {handleKakaoLogin, loginApi} from "../../apis/member.tsx";
-import {login} from "../../slices/loginSlice.tsx";
+import {handleKakaoLogin, loginApi} from "../../common/apis/member.tsx";
+import {login} from "../../common/slices/loginSlice.tsx";
+import LoginButton from "../../components/member/LoginButton.tsx";
+import LoginTextField from "../../components/member/LoginTextField.tsx";
+import {checkEmail} from "../../common/util/regex.tsx";
+import * as React from "react";
+import {TextLink} from "../../components/common/TextButton.tsx";
function LoginPage() {
@@ -28,26 +33,50 @@ function LoginPage() {
})
}
+ const handlePasswordEnter = (event: React.KeyboardEvent) => {
+ if (event.key !== "Enter") {
+ return;
+ }
+ if (!checkEmail(loginInfo.email)) {
+ alert("이메일 형식을 확인해주세요.");
+ return;
+ }
+
+ handleLogin();
+ }
+
return (
-
-
+
);
diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
new file mode 100644
index 0000000..8e33a3a
--- /dev/null
+++ b/src/pages/blog/BlogPage.tsx
@@ -0,0 +1,201 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {useParams, useSearchParams} from "react-router-dom";
+import {faker} from "@faker-js/faker/locale/ko";
+import PostCard from "../../components/post/PostCard.tsx";
+import TagCard from "../../components/post/TagCard.tsx";
+import {useEffect, useRef, useState} from "react";
+import {MdMenu, MdOutlineExitToApp} from "react-icons/md";
+import PaginationButton from "../../components/common/PaginationButton.tsx";
+import TagChip from "../../components/post/TagChip.tsx";
+
+function BlogPage() {
+
+ const {username} = useParams();
+
+ const [searchParams, setSearchParams] = useSearchParams({"category": ""});
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [selectedCategory, setSelectedCategory] = useState(searchParams.get("category") || "");
+ const [selectedTagList, setSelectedTagList] = useState
+ 인기 있는 게시글
+
+
+ {[Array.from({length: 6}).map(() => (
+
+
+
+
+ {username}의 블로그
+
+
+
+
+ 카테고리 {selectedCategory !== "" && }
+
+
+ 태그 {selectedTagList.map((tag) => )}
+
+
+
+
+ {[Array.from({length: 3}).map(() => (
+ {
+ }}/>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default BlogPage;
\ No newline at end of file
diff --git a/src/pages/member/CodePage.tsx b/src/pages/member/CodePage.tsx
new file mode 100644
index 0000000..5eaed50
--- /dev/null
+++ b/src/pages/member/CodePage.tsx
@@ -0,0 +1,109 @@
+import React, {useEffect, useRef, useState} from "react";
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {useLocation, useNavigate} from "react-router-dom";
+import {formatTimer} from "../../common/util/date.tsx";
+import LoadingLayout from "../../layout/LoadingLayout.tsx";
+
+function CodePage() {
+
+ const {state} = useLocation();
+ const {email} = state;
+ const navigate = useNavigate();
+
+ const [loading, setLoading] = useState(false);
+
+ const inputRefs = useRef
+ })
+
+
+
+ {username}
+
+
+
+ 카테고리
+
+ {[Array.from({length: 10}).map((_, i) => (
+
+
+
+
+ ))]}
+
+ {Array.from({length: 3}).map((_, i) => (
+
+ ))}
+
+
+
+ 태그
+
+ {[Array.from({length: 24}).map(() => (
+
+ ))]}
+
+
+
+
+
+ {email} 로 보내진
+인증코드 6자리를 입력해주세요.
+
+ {code.map((digit, index) => (
+
+ {
+ if (el) {
+ inputRefs.current[index] = el;
+ }
+ }}
+ type=" text"
+ maxLength={1}
+ className="w-12 h-16 rounded-lg font-bold text-lg appearance-none border border-gray-200 text-center focus:outline-1"
+ value={digit}
+ onChange={(e) => handleChange(index, e.target.value)}
+ onKeyDown={(e) => {
+ handleBackspace(e, index)
+ }}
+ />
+
+ ))}
+
+
+ 유효시간 : {formatTimer(timer)}
+
+
+ setSignupInfo({...signupInfo, email: value})}
+ onKeyDown={handleEmailEnter}/>
+
+
+
- setLoginInfo({...loginInfo, email: e.target.value})}/>
- setLoginInfo({...loginInfo, password: e.target.value})}/>
-
-
+
+
);
diff --git a/src/pages/member/PlatformPage.tsx b/src/pages/member/PlatformPage.tsx
new file mode 100644
index 0000000..77a588b
--- /dev/null
+++ b/src/pages/member/PlatformPage.tsx
@@ -0,0 +1,19 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import LoginButton from "../../components/member/LoginButton.tsx";
+import {handleKakaoLogin} from "../../common/apis/member.tsx";
+import {TextLink} from "../../components/common/TextButton.tsx";
+
+function PlatformPage() {
+
+ return (
+
+
+ );
+}
+
+export default PlatformPage;
\ No newline at end of file
diff --git a/src/pages/member/SignupPage.tsx b/src/pages/member/SignupPage.tsx
new file mode 100644
index 0000000..b5aa726
--- /dev/null
+++ b/src/pages/member/SignupPage.tsx
@@ -0,0 +1,69 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {useLocation, useNavigate} from "react-router-dom";
+import {useState} from "react";
+import LoginTextField from "../../components/member/LoginTextField.tsx";
+import {checkPassword} from "../../common/util/regex.tsx";
+import LoadingLayout from "../../layout/LoadingLayout.tsx";
+import * as React from "react";
+import LoginButton from "../../components/member/LoginButton.tsx";
+
+function SignupPage() {
+
+ const navigate = useNavigate();
+ const {state} = useLocation();
+ const {email, code} = state;
+
+ const [loading, setLoading] = useState(false);
+ const [passwordInfo, setPasswordInfo] = useState({password: "", confirmPassword: ""});
+
+ const handlePasswordEnter = (event: React.KeyboardEvent) => {
+ if (event.key !== "Enter") {
+ return;
+ }
+
+ handleSignup();
+ }
+
+ const handleSignup = () => {
+ setLoading(true);
+ console.log(email, code);
+
+ if (!checkPassword(passwordInfo.password) || passwordInfo.password !== passwordInfo.confirmPassword) {
+ setLoading(false);
+ return;
+ }
+
+ alert("회원가입 되었습니다.");
+
+ navigate("/login");
+ }
+
+ return (
+
+
+
+ )
+ ;
+}
+
+export default SignupPage;
\ No newline at end of file
diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx
new file mode 100644
index 0000000..4dfcc50
--- /dev/null
+++ b/src/pages/post/PostPage.tsx
@@ -0,0 +1,67 @@
+import {Link, useNavigate, useParams} from "react-router-dom";
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {PostResponse} from "../../common/types/post.tsx";
+import {faker} from "@faker-js/faker/locale/ko";
+import DOMPurify from "dompurify";
+import {fullDateToKorean} from "../../common/util/date.tsx";
+import TagCard from "../../components/post/TagCard.tsx";
+
+function PostPage() {
+
+ const {id} = useParams();
+ console.log(id);
+ const navigate = useNavigate();
+
+ const post: PostResponse = {
+ id: faker.number.int().toString(),
+ title: faker.lorem.sentence(),
+ content: `
+
+ );
+}
+
+export default PostPage;
\ No newline at end of file
diff --git a/src/pages/post/SearchPage.tsx b/src/pages/post/SearchPage.tsx
new file mode 100644
index 0000000..129bab1
--- /dev/null
+++ b/src/pages/post/SearchPage.tsx
@@ -0,0 +1,266 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {MdArrowDropDown, MdOutlineClear, MdOutlineSearch} from "react-icons/md";
+import {Ref, useEffect, useRef, useState} from "react";
+import * as React from "react";
+import PostCard from "../../components/post/PostCard.tsx";
+import {faker} from "@faker-js/faker/locale/ko";
+import {Link, useSearchParams} from "react-router-dom";
+import {LoadMoreButton} from "../../components/common/FillButton.tsx";
+
+function SearchPage() {
+
+ const optionRef = useRef(null);
+ const sortRef = useRef(null);
+
+ const [openOption, setOpenOption] = useState(false);
+ const [openSort, setOpenSort] = useState(false);
+
+ const [searchParams, setSearchParams] = useSearchParams({"word": "", "option": "전체", "sort": "최신순", "tab": "게시글"});
+ const [searchWord, setSearchWord] = useState(searchParams.get("word") || "");
+ const [option, setOption] = useState(searchParams.get("option") || "전체");
+ const [sort, setSort] = useState(searchParams.get("sort") || "최신순");
+ const [selectedTab, setSelectedTab] = useState(searchParams.get("tab") || "게시글");
+
+ const handleOpenOption = () => {
+ setOpenOption(cur => !cur);
+ }
+ const handleOpenSort = () => {
+ setOpenSort(cur => !cur);
+ }
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (optionRef.current && !optionRef.current.contains(event.target as Node)) {
+ setOpenOption(false);
+ }
+ if (sortRef.current && !sortRef.current.contains(event.target as Node)) {
+ setOpenSort(false);
+ }
+ };
+
+ const handleSearchEnter = (event: React.KeyboardEvent) => {
+ if (event.key !== "Enter") {
+ return;
+ }
+ handleSearchWord();
+ }
+
+ const handleSearchWord = () => {
+ if (searchWord === "") {
+ return;
+ }
+
+ setSearchParams({
+ "word": searchWord,
+ "option": option,
+ "sort": sort,
+ "tab": selectedTab,
+ });
+ }
+
+ useEffect(() => {
+ setSearchParams({
+ "word": searchWord,
+ "option": option,
+ "sort": sort,
+ "tab": selectedTab,
+ });
+ }, [option, sort, selectedTab]);
+
+ useEffect(() => {
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
+
+function SearchTab({selectedTab, setSelectedTab}: {
+ selectedTab: string,
+ setSelectedTab: (tab: string) => void,
+}) {
+
+ const tabs = ["게시글", "블로그"];
+
+ return (
+ ,
+}) {
+
+ let title = "";
+ let searchMenuList: string[] = [];
+ if (type === "option") {
+ title = "검색 조건";
+ searchMenuList = ["전체", "제목", "내용", "태그", "작성자"];
+ } else if (type === "sort") {
+ title = "정렬 조건";
+ searchMenuList = ["최신순", "오래된순", "조회순"];
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default SearchPage;
\ No newline at end of file
diff --git a/src/pages/post/WritePage.tsx b/src/pages/post/WritePage.tsx
new file mode 100644
index 0000000..919a164
--- /dev/null
+++ b/src/pages/post/WritePage.tsx
@@ -0,0 +1,234 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {useEffect, useRef, useState} from "react";
+import {useBlocker, useNavigate} from "react-router-dom";
+import {Editor} from "@tinymce/tinymce-react";
+import {FillButton} from "../../components/common/FillButton.tsx";
+import {useSelector} from "react-redux";
+import {RootState} from "../../store.tsx";
+import {faker} from "@faker-js/faker/locale/ko";
+import {MdOutlineArrowDropDown, MdOutlineClear} from "react-icons/md";
+
+interface WritePostType {
+ inputTag: string;
+ tags: string[];
+ title: string;
+ content: string;
+}
+
+interface CategoryType {
+ name: string;
+ subCategories?: CategoryType[];
+}
+
+function WritePage() {
+
+ const loginState = useSelector((state: RootState) => state.loginSlice);
+ const navigate = useNavigate();
+ const categoryRef = useRef(null);
+
+ const [post, setPost] = useState({
+ inputTag: "",
+ tags: [],
+ title: "",
+ content: "",
+ });
+ const [showTag, setShowTag] = useState(false);
+
+ const [categoryOpen, setCategoryOpen] = useState(false);
+ const [selectedCategory, setSelectedCategory] = useState("카테고리 선택");
+ const [uploadCount, setUploadCount] = useState(0);
+ const [exitPage, setExitPage] = useState(false);
+ const handleCategoryOpen = () => {
+ setCategoryOpen(prev => !prev);
+ }
+
+ const removeTag = (tag: string | null) => {
+ setPost({...post, tags: post.tags.filter(prevTag => prevTag !== tag)});
+ }
+ const handleTag = (tag: string) => {
+ if (!tag.endsWith(",")) {
+ setPost({...post, inputTag: tag});
+ return;
+ }
+ if (post.tags.includes(tag.substring(0, tag.length - 1))) {
+ setPost({...post, inputTag: ""});
+ return;
+ }
+ setPost({...post, tags: [...post.tags, post.inputTag], inputTag: ""});
+ }
+
+ const handleSubmit = () => {
+ if (uploadCount > 0) {
+ alert("업로드 중인 이미지가 있습니다. 잠시만 기다려주세요.");
+ return;
+ }
+
+ alert("작성되었습니다.");
+ setExitPage(true);
+ navigate(`/blog/${loginState.username}username`);
+ }
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (categoryRef.current && !categoryRef.current.contains(event.target as Node)) {
+ setCategoryOpen(false);
+ }
+ };
+
+ // 뒤로가기 방지
+ useBlocker(() => {
+ return (!!post.title || !!post.content) &&
+ exitPage &&
+ !confirm("페이지를 이동하시겠습니까?\n\n작성중인 내용이 저장되지 않습니다.");
+ }
+ );
+
+ // 새로고침 방지
+ useEffect(() => {
+ const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+ event.preventDefault();
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ window.addEventListener('beforeunload', handleBeforeUnload);
+
+ return () => {
+ window.removeEventListener('beforeunload', handleBeforeUnload);
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ const categoryData: CategoryType[] = [
+ {
+ name: faker.lorem.words(),
+ subCategories: [
+ {name: faker.lorem.words()},
+ {name: faker.lorem.words()}
+ ]
+ },
+ {
+ name: faker.lorem.words(),
+ },
+ {
+ name: faker.lorem.words(),
+ subCategories: [
+ {name: faker.lorem.words()},
+ {name: faker.lorem.words()},
+ {name: faker.lorem.words()}
+ ]
+ },
+ ];
+
+ return (
+
+
+ );
+}
+
+export default WritePage;
\ No newline at end of file
diff --git a/src/pages/setting/CategorySettingPage.tsx b/src/pages/setting/CategorySettingPage.tsx
new file mode 100644
index 0000000..53bd333
--- /dev/null
+++ b/src/pages/setting/CategorySettingPage.tsx
@@ -0,0 +1,58 @@
+import {DndContext, DragEndEvent} from "@dnd-kit/core";
+import {restrictToVerticalAxis} from "@dnd-kit/modifiers";
+import {SortableContext} from "@dnd-kit/sortable";
+import {FillButton} from "../../components/common/FillButton.tsx";
+import {CategoryType} from "./SettingPage.tsx";
+import CategoryCard from "../../components/setting/CategoryCard.tsx";
+import {OutlineButton} from "../../components/common/OutlineButton.tsx";
+
+function CategorySettingPage({
+ setSelectedCategory,
+ categories,
+ setShowModal,
+ setShowCategoryAddModal,
+ handleDragEnd,
+ isHover,
+ handleHover,
+ submitCategoryChange
+ }: {
+ setSelectedCategory: (category: CategoryType) => void,
+ categories: CategoryType[],
+ setShowModal: (modal: boolean) => void,
+ setShowCategoryAddModal: (modal: boolean) => void,
+ handleDragEnd: (event: DragEndEvent) => void,
+ isHover: boolean,
+ handleHover: (hover: boolean) => void,
+ submitCategoryChange: () => void,
+}) {
+
+ return (
+ (null);
+
+ const [input, setInput] = useState("");
+ const [image, setImage] = useState(null);
+ const [isUsernameEdit, setIsUsernameEdit] = useState(false);
+ const [isImageEdit, setIsImageEdit] = useState(false);
+
+ const handleUsernameEdit = () => {
+ setIsUsernameEdit(true);
+ }
+
+ const handleUsernameEditCancel = () => {
+ setIsUsernameEdit(false);
+ }
+
+ const handleUsernameSubmit = () => {
+ alert("변경되었습니다.");
+ dispatch(setUsername({
+ username: input,
+ }));
+ setIsUsernameEdit(false);
+ }
+
+ const handleImageEdit = () => {
+ setIsImageEdit(true);
+ fileInputRef.current!.click();
+ }
+
+ const handleImageChange = (event: ChangeEvent) => {
+ if (event.target.files && event.target.files[0]) {
+ setImage(URL.createObjectURL(event.target.files[0]));
+ }
+ }
+
+ const handleImageEditCancel = () => {
+ setIsImageEdit(false);
+ }
+
+ const handleImageSubmit = () => {
+ alert("변경되었습니다.");
+ setIsImageEdit(false);
+ }
+
+ return (
+ (categoryData);
+ const [selectedCategory, setSelectedCategory] = useState(null);
+ const [isHover, setIsHover] = useState(false);
+
+ const handleHover = (hover: boolean) => {
+ setIsHover(hover);
+ }
+
+ const handleDragEnd = (event: DragEndEvent) => {
+ const {active, over} = event;
+
+ if (!over || active.id === over.id) {
+ return;
+ }
+
+ let categoryIndex = -1;
+ let oldIndex = -1;
+ let newIndex = -1;
+
+ oldIndex = categories.findIndex(category => category.id === active.id);
+ newIndex = categories.findIndex(category => category.id === over.id);
+
+ if (oldIndex !== -1 && newIndex !== -1) {
+ setCategories(category => {
+ return arrayMove(category, oldIndex, newIndex);
+ });
+ return;
+ }
+
+ for (const category of categories) {
+ if (category.subCategories) {
+ oldIndex = category.subCategories.findIndex(category => category.id === active.id);
+ newIndex = category.subCategories.findIndex(category => category.id === over.id);
+
+ if (oldIndex !== -1 && newIndex !== -1) {
+ categoryIndex = categories.indexOf(category);
+ break;
+ }
+ }
+ }
+
+ if (categoryIndex !== -1 && oldIndex !== -1 && newIndex !== -1) {
+ setCategories(currentCategories => {
+ const updatedSubCategories = [...currentCategories[categoryIndex].subCategories!];
+ const [movedCategory] = updatedSubCategories.splice(oldIndex, 1);
+ updatedSubCategories.splice(newIndex, 0, movedCategory);
+
+ const updatedCategories = [...currentCategories];
+ updatedCategories[categoryIndex] = {
+ ...updatedCategories[categoryIndex],
+ subCategories: updatedSubCategories
+ };
+
+ return updatedCategories;
+ });
+ }
+ }
+
+ const handleCategoryMove = (categoryId: string) => {
+ setCategories(prevCategories => {
+ const newCategories = [...prevCategories];
+ let categoryToMove;
+ let targetCategory: CategoryType | undefined;
+
+ newCategories.forEach(category => {
+ if (category.subCategories) {
+ const subCategoryIndex = category.subCategories.findIndex(sub => sub.id === selectedCategory?.id);
+ if (subCategoryIndex !== -1) {
+ categoryToMove = category.subCategories[subCategoryIndex];
+ category.subCategories.splice(subCategoryIndex, 1);
+ }
+ }
+
+ if (category.id === categoryId) {
+ targetCategory = category;
+ }
+ });
+
+ if (!categoryToMove) {
+ return prevCategories;
+ }
+
+ if (categoryId === "top") {
+ newCategories.push(categoryToMove);
+ return newCategories;
+ }
+
+ if (!targetCategory) {
+ return prevCategories;
+ }
+
+ if (!targetCategory.subCategories) {
+ targetCategory.subCategories = [];
+ }
+
+ targetCategory.subCategories.push(categoryToMove);
+
+ return newCategories;
+ });
+ }
+
+ const submitCategoryChange = () => {
+ if (confirm("변경사항을 저장하시겠습니까?")) {
+ alert("저장되었습니다.");
+ navigate(0);
+ }
+ }
+
+ return (
+
+ }
+ {showCategoryAddModal && }
+
+ );
+}
+
+export default SettingPage;
\ No newline at end of file
diff --git a/src/router/root.tsx b/src/router/root.tsx
deleted file mode 100644
index b371c63..0000000
--- a/src/router/root.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {createBrowserRouter} from "react-router-dom";
-import {Suspense} from "react";
-import {Loading, Login, Main} from "./page.tsx";
-
-const root = createBrowserRouter([
- {
- path: '',
- element:
+
+ 
+
+
+
+ DIGLOG
+
+
+ setLoginInfo({...loginInfo, email: value})}/>
+ setLoginInfo({...loginInfo, password: value})}
+ onKeyDown={handlePasswordEnter}/>
+
+
+
+
+
+
+
+
+
+ 비밀번호 설정을 마치면 회원가입이 완료됩니다.
+
+ setPasswordInfo({...passwordInfo, password: value})}/>
+ setPasswordInfo({...passwordInfo, confirmPassword: value})}
+ onKeyDown={handlePasswordEnter}/>
+
+ ${faker.lorem.paragraphs()}
`,
+ username: faker.animal.cat(),
+ tags: [{id: "1", name: faker.lorem.word()}, {id: "2", name: faker.lorem.word()}],
+ createdAt: new Date(),
+ };
+
+ const safeContent = DOMPurify.sanitize(post.content);
+
+ return (
+
+
+
+
+
+
+ Home
+
+ {` > `}
+ 카테고리
+ {` > `}
+ {post.title}
+
+
+ {post.username}
+
+
+
+ {fullDateToKorean(post.createdAt)}
+
+
+ {post.title}
+
+
+ {post.tags.map(tag =>
+ {
+ navigate(`/search?word=${tag.name}&option=태그`)
+ }}/>)}
+
+
+
+
+
+
+
+
+
+
+
+
+ setSearchWord(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"
+ onKeyDown={handleSearchEnter}/>
+
+
+
+
+
+
+
+
+
+ 99개의 검색결과
+
+
+
+
+
+
+ );
+}
+
+function SearchResults({selectedTab}: { selectedTab: string }) {
+
+ if (selectedTab === "게시글") {
+ return (
+ -
+ {tabs.map((tab) => (
+
- + + + ))} +
+ {(Array.from({length: 5}).map(() => (
+ {
+ }} addStyle={"w-full"}/>
+
+ );
+ } else if (selectedTab === "블로그") {
+ return (
+
+ {(Array.from({length: 5}).map(() => (
+
+
+ {
+ }}/>
+
+ );
+ }
+
+ return <>;
+}
+
+function SearchMenu({type, open, handleOpen, value, setValue, customRef}: {
+ type: string,
+ open: boolean,
+ handleOpen: () => void,
+ value: string,
+ setValue: (newOption: string) => void,
+ customRef: Ref
+
+
+
+ )))}
+ {faker.animal.dog()}
+ {faker.animal.dog()}
+ {faker.animal.dog()}
+
+
+ );
+}
+
+function SortMenu({value, current, setValue, handleOpen}: {
+ value: string,
+ current: string,
+ setValue: (newSort: string) => void,
+ handleOpen: () => void
+}) {
+ return (
+
+
+ {title}
+
+
+
+
+
+ -
+ {searchMenuList.map((menu) => (
+
+ {
+ setUploadCount((prev) => prev + 1);
+ // const res = await uploadImage(blobInfo);
+ // return res.data.url;
+ console.log("Image Upload...... ", blobInfo);
+ setUploadCount((prev) => prev - 1);
+ return faker.image.url();
+ }
+ }}
+ value={post.content}
+ onEditorChange={(content) => setPost({...post, content: content})}
+ />
+
+
+
+
+
+
+
+ {categoryData.map((category) => {
+ if (!category.subCategories) {
+ return
+
+
+
+ } else {
+ return
+
+ {category.subCategories.map((subCategory: CategoryType) =>
+
+ )}
+
;
+ }
+ })}
+
+ setPost({...post, title: e.target.value})}
+ placeholder={"제목을 입력해주세요."}
+ className="w-full py-2 font-jalnan text-2xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black"/>
+
+
+
+
+ {post.tags.map((tag, i) =>
+ )}
+ handleTag(event.target.value)}
+ onFocus={() => setShowTag(true)}
+ onBlur={() => setShowTag(false)}/>
+
+ {showTag &&
+ 쉼표를 입력하여 태그를 등록할 수 있습니다.
+
}
+
+
+
+
+
+ );
+}
+
+export default CategorySettingPage;
\ No newline at end of file
diff --git a/src/pages/setting/PostSettingPage.tsx b/src/pages/setting/PostSettingPage.tsx
new file mode 100644
index 0000000..f035013
--- /dev/null
+++ b/src/pages/setting/PostSettingPage.tsx
@@ -0,0 +1,9 @@
+function PostSettingPage() {
+ return (
+ 카테고리 관리
+
+
+
+ {categories.map((category) => (
+
+
+
+
+
+
+ ))}
+
+ setShowCategoryAddModal(true)} addStyle={"font-normal"}/>
+
+
+
+
+ );
+}
+
+export default PostSettingPage;
\ No newline at end of file
diff --git a/src/pages/setting/ProfileSettingPage.tsx b/src/pages/setting/ProfileSettingPage.tsx
new file mode 100644
index 0000000..3c382d8
--- /dev/null
+++ b/src/pages/setting/ProfileSettingPage.tsx
@@ -0,0 +1,122 @@
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../store.tsx";
+import {faker} from "@faker-js/faker/locale/ko";
+import {MdOutlineEdit} from "react-icons/md";
+import {ChangeEvent, useRef, useState} from "react";
+import {FillButton} from "../../components/common/FillButton.tsx";
+import {setUsername} from "../../common/slices/loginSlice.tsx";
+import {TextButton} from "../../components/common/TextButton.tsx";
+
+function ProfileSettingPage() {
+
+ const loginState = useSelector((state: RootState) => state.loginSlice);
+ const dispatch = useDispatch();
+ const fileInputRef = useRef게시글 관리
+
+
+ );
+}
+
+export default ProfileSettingPage;
\ No newline at end of file
diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx
new file mode 100644
index 0000000..87f39e9
--- /dev/null
+++ b/src/pages/setting/SettingPage.tsx
@@ -0,0 +1,209 @@
+import BasicLayout from "../../layout/BasicLayout.tsx";
+import {useState} from "react";
+import {faker} from "@faker-js/faker/locale/ko";
+import {DragEndEvent} from "@dnd-kit/core";
+import {arrayMove} from "@dnd-kit/sortable";
+import {useNavigate} from "react-router-dom";
+import CategorySettingPage from "./CategorySettingPage.tsx";
+import PostSettingPage from "./PostSettingPage.tsx";
+import ProfileSettingPage from "./ProfileSettingPage.tsx";
+import CategoryMoveModal from "../../components/setting/CategoryMoveModal.tsx";
+import CategoryAddModal from "../../components/setting/CategoryAddModal.tsx";
+
+export interface CategoryType {
+ id: string;
+ name: string;
+ subCategories?: CategoryType[];
+}
+
+function SettingPage() {
+
+ const navigate = useNavigate();
+
+ const [showCategoryModal, setShowCategoryModal] = useState(false);
+ const [showCategoryAddModal, setShowCategoryAddModal] = useState(false);
+
+ const tabList = ["프로필", "카테고리", "게시글"];
+ const categoryData: CategoryType[] = [
+ {
+ id: "1",
+ name: faker.lorem.words(),
+ subCategories: [
+ {id: "4", name: faker.lorem.words()},
+ {id: "5", name: faker.lorem.words()}
+ ]
+ },
+ {
+ id: "2",
+ name: faker.lorem.words(),
+ },
+ {
+ id: "3",
+ name: faker.lorem.words(),
+ subCategories: [
+ {id: "6", name: faker.lorem.words()},
+ {id: "7", name: faker.lorem.words()},
+ {id: "8", name: faker.lorem.words()}
+ ]
+ },
+ ];
+
+ const [selectedTab, setSelectedTab] = useState("프로필");
+ const [categories, setCategories] = useState프로필 관리
+
+
+
+
+
+
+ {isImageEdit && image
+ ? 
+ : }
+
+ {isImageEdit && }
+
+
+
+
+
+
+
+
+
}
+
+ {isUsernameEdit
+ ?
+
+ setInput(e.target.value)}
+ placeholder="Username"/>
+
+ :
+
+
}
+ + {loginState.username} +
+ +
+
+ {showCategoryModal &&
+
+ {(selectedTab === "카테고리") &&
+ -
+ {tabList.map((tab) =>
+
- + + )} +
+
+
}
+ {(selectedTab === "게시글") &&
+
+
}
+ {(selectedTab === "프로필") &&
+
+
}
+