diff --git a/src/components/molecules/commentList/CommentList.tsx b/src/components/molecules/commentList/CommentList.tsx
new file mode 100644
index 0000000..9667793
--- /dev/null
+++ b/src/components/molecules/commentList/CommentList.tsx
@@ -0,0 +1,17 @@
+import { Comment } from "@/components/atoms/comment";
+import { CommentsListProps } from "@/types/comment";
+
+export const CommentList = ({ item, replies, onClick }: CommentsListProps) => {
+ return (
+ <>
+
+ {replies &&
+ replies
+ .slice()
+ .reverse()
+ .map((comment, index: number) => (
+
+ ))}
+
+ );
+};
diff --git a/src/components/molecules/floatingBox/FloatingBox.tsx b/src/components/molecules/floatingBox/FloatingBox.tsx
index e166506..33b9d18 100644
--- a/src/components/molecules/floatingBox/FloatingBox.tsx
+++ b/src/components/molecules/floatingBox/FloatingBox.tsx
@@ -12,10 +12,10 @@ export function FloatingBox() {
setOn((prev) => !prev);
};
const handleRouteOnboarding = () => {
- router.push("/user/club");
+ router.push("/user/club/create");
};
const handleRouteJoin = () => {
- router.push("/user/join");
+ router.push("/user/club/join");
};
const inPlusStyle: React.CSSProperties = {
diff --git a/src/components/molecules/scheduleBox/ScheduleBox.css b/src/components/molecules/scheduleBox/ScheduleBox.css
index 3e3570f..a86edeb 100644
--- a/src/components/molecules/scheduleBox/ScheduleBox.css
+++ b/src/components/molecules/scheduleBox/ScheduleBox.css
@@ -17,7 +17,7 @@
.scheduleBox__content {
display: flex;
- width: 100%;
+ width: 60%;
gap: 1rem;
}
diff --git a/src/components/organisms/Header/BoardHeader.tsx b/src/components/organisms/Header/BoardHeader.tsx
new file mode 100644
index 0000000..dd03829
--- /dev/null
+++ b/src/components/organisms/Header/BoardHeader.tsx
@@ -0,0 +1,68 @@
+"use client";
+import { Text } from "@/components/atoms/text";
+import { ICONS, IMAGES } from "@/constants/images";
+import { usePostDeleteMutation } from "@/hook/post/usePostDeleteMutation";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import "./Header.css";
+
+interface ClubHeaderProps {
+ color?: boolean;
+}
+export function BoardHeader({ color }: ClubHeaderProps) {
+ const pathname = usePathname();
+ const pathProps = pathname.split("/").slice(1);
+ const postItem = {
+ clubId: parseInt(pathProps[0], 10),
+ postId: parseInt(pathProps[3], 10),
+ };
+ const router = useRouter();
+ const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+ const handleIsOpenDropdown = () => {
+ setIsOpenDropdown((prep) => !prep);
+ console.log(isOpenDropdown);
+ };
+ const { mutate: postDeleteMutate } = usePostDeleteMutation(postItem);
+ const menuItems = [
+ { text: "수정" },
+ { text: "삭제"},
+ { text: "URL 공유"},
+ ];
+ return (
+
+ );
+}
diff --git a/src/components/organisms/Header/Header.css b/src/components/organisms/Header/Header.css
index 9019f7d..87b5c48 100644
--- a/src/components/organisms/Header/Header.css
+++ b/src/components/organisms/Header/Header.css
@@ -7,7 +7,7 @@
justify-content: space-between;
height: 5.5rem;
padding: 0 5vw;
- background-color: #2B2B2B;
+ background-color: #2b2b2b;
position: fixed;
top: 0;
@@ -47,56 +47,95 @@
.logoHeader__img__right img {
margin-left: 0.69rem;
}
-.logoHeader__img__right img{
- margin-left: 0.69rem;
+.logoHeader__img__right img {
+ margin-left: 0.69rem;
+}
+
+/* boardHeader */
+.boardHeader {
+ background-color: #2b2b2b;
+ display: flex;
+ width: 100vw;
+ align-items: center;
+ justify-content: space-between;
+ height: 4.19rem;
+ padding-left: 5vw;
+ padding-right: 5vw;
+}
+
+.boardHeader.black {
+ background-color: #1b1b1b;
}
+.boardHeader img {
+ object-fit: contain;
+ width: 0.75rem;
+ height: 1.375rem;
+}
+
+.dropdown {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ width: 7rem;
+ border-radius: 0.625rem;
+ background: #404040;
+ z-index: 10;
+ height: auto;
+}
+.underline {
+ border-bottom: 1px solid #fff;
+ padding: 0.7rem 0.5rem;
+}
+.underline:last-child {
+ border-bottom: none;
+}
/* clubHeader */
.clubHeader {
- background-color: #2B2B2B;
- display: flex;
- width: 100vw;
- align-items: center;
- justify-content: space-between;
- height: 5.5rem;
- padding-left: 5vw;
- padding-right: 5vw;
+ background-color: #2b2b2b;
+ display: flex;
+ width: 100vw;
+ align-items: center;
+ justify-content: space-between;
+ height: 5.5rem;
+ padding-left: 5vw;
+ padding-right: 5vw;
}
.clubHeader.black {
- background-color: #1B1B1B;
+ background-color: #1b1b1b;
}
.clubHeader img {
- object-fit: contain;
- height: 100%;
- width: 0.75rem;
- height: 1.375rem;
+ object-fit: contain;
+ height: 100%;
+ width: 0.75rem;
+ height: 1.375rem;
}
.clubHeader p {
width: 0.75rem;
- height: 1.375rem;
+ height: 1.375rem;
}
.clubHeader__title {
- display: flex;
- align-items: center;
- gap: 0.3rem;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ cursor: pointer;
}
.clubHeader__title img {
- height: 0.375rem;
- width: 0.6875rem;
+ height: 0.375rem;
+ width: 0.6875rem;
}
.clubHeader__title__img.active {
- animation: rotate_img 0.3s linear forwards;
+ animation: rotate_img 0.3s linear forwards;
}
@keyframes rotate_img {
- 100% {
- transform: rotate(180deg);
- }
+ 100% {
+ transform: rotate(180deg);
+ }
}
diff --git a/src/components/organisms/Header/index.ts b/src/components/organisms/Header/index.ts
index 886f51f..2df1b49 100644
--- a/src/components/organisms/Header/index.ts
+++ b/src/components/organisms/Header/index.ts
@@ -1,3 +1,4 @@
+export { BoardHeader } from "./BoardHeader";
export { HistoryHeader } from "./HistoryHeader";
export { LogoHeader } from "./LogoHeader";
diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx
index 7c52e16..34116b6 100644
--- a/src/components/organisms/Modal/Modal.tsx
+++ b/src/components/organisms/Modal/Modal.tsx
@@ -12,43 +12,48 @@ import { ModalTitle } from "./ModalTitle";
import styles from "./Modal.module.css";
// children 요소 중 Header filtering
-const ModalHeaderType= (
).type;
+const ModalDimmedType = (
).type;
+function getModalDimmed(children: ReactNode) {
+ const childrenArray = Children.toArray(children);
+ return childrenArray.filter(
+ (child) => isValidElement(child) && child.type === ModalDimmedType
+ );
+}
+
+// children 요소 중 Header filtering
+const ModalHeaderType = (
).type;
function getModalHeader(children: ReactNode) {
const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalHeaderType,
- );
+ return childrenArray.filter(
+ (child) => isValidElement(child) && child.type === ModalHeaderType
+ );
}
// children 요소 중 Content filtering
-const ModalContentType= (
).type;
+const ModalContentType = (
).type;
function getModalContents(children: ReactNode) {
const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalContentType,
- );
+ return childrenArray.filter(
+ (child) => isValidElement(child) && child.type === ModalContentType
+ );
}
// children 요소 중 Footer filtering
-const ModalFooterType= (
).type;
+const ModalFooterType = (
).type;
function getModalFooter(children: ReactNode) {
const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalFooterType,
- )
+ return childrenArray.filter(
+ (child) => isValidElement(child) && child.type === ModalFooterType
+ );
}
-
interface ModalProps {
children?: ReactNode;
isOpen: boolean;
-};
+}
export const Modal = ({ children, isOpen }: ModalProps) => {
- if(!isOpen){
+ if (!isOpen) {
return null;
}
@@ -56,25 +61,19 @@ export const Modal = ({ children, isOpen }: ModalProps) => {
const modalContents = getModalContents(children);
const modalFooter = getModalFooter(children);
return createPortal(
-
- {
- modalHeader && (
-
{modalHeader}
- )
- }
- {
- modalContents && (
+ <>
+ {getModalDimmed(children)}
+
+ {modalHeader &&
{modalHeader}
}
+ {modalContents && (
{modalContents}
- )
- }
- {
- modalFooter && (
-
{modalFooter}
- )
- }
-
- , document.body);
-}
+ )}
+ {modalFooter &&
{modalFooter}
}
+
+ ,
+ document.body
+ );
+};
Modal.Dimmed = ModalDimmed;
Modal.Header = ModalHeader;
@@ -83,4 +82,4 @@ Modal.Footer = ModalFooter;
Modal.Title = ModalTitle;
Modal.Subtitle = ModalSubtitle;
-Modal.Button = ModalButtons;
\ No newline at end of file
+Modal.Button = ModalButtons;
diff --git a/src/components/organisms/Modal/ModalHeader.tsx b/src/components/organisms/Modal/ModalHeader.tsx
index a2ece2e..640b54f 100644
--- a/src/components/organisms/Modal/ModalHeader.tsx
+++ b/src/components/organisms/Modal/ModalHeader.tsx
@@ -2,16 +2,16 @@ import { IMAGES } from "@/constants/images";
import Image from "next/image";
import { ReactNode } from "react";
import styles from "./Modal.module.css";
-import { useModalContext } from "./ModalProvider";
interface ModalHeaderProps {
children?: ReactNode;
+ closeModal?: () => void;
}
export const ModalHeader = ({
- children
+ children,
+ closeModal
}: ModalHeaderProps) => {
- const { closeModal } = useModalContext();
return (
).type;
-function getModalDimmed(children: ReactNode) {
- const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalDimmedType,
- )
- .slice(0, 1)[0] || null;
-}
-
-// children 요소 중 Header filtering
-const ModalHeaderType= (
).type;
-function getModalHeader(children: ReactNode) {
- const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalHeaderType,
- );
-}
-
-// children 요소 중 Content filtering
-const ModalContentType= (
).type;
-function getModalContents(children: ReactNode) {
- const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalContentType,
- );
-}
-
-// children 요소 중 Footer filtering
-const ModalFooterType= (
).type;
-function getModalFooter(children: ReactNode) {
- const childrenArray = Children.toArray(children);
- return childrenArray
- .filter(
- child => isValidElement(child) && child.type === ModalFooterType,
- )
-}
-
-interface ModalMainProps {
- children?: ReactNode;
- isOpen: boolean;
-};
-
-export const ModalMain = ({ children, isOpen }: ModalMainProps) => {
- if(!isOpen){
- return null;
- }
-
- const modalHeader = getModalHeader(children);
- const modalContents = getModalContents(children);
- const modalFooter = getModalFooter(children);
- return createPortal(
-
-
{getModalDimmed(children)}
- {
- modalHeader && (
-
{modalHeader}
- )
- }
- {
- modalContents && (
-
{modalContents}
- )
- }
- {
- modalFooter && (
-
{modalFooter}
- )
- }
-
- , document.body);
-}
diff --git a/src/constants/images.ts b/src/constants/images.ts
index 64c452b..354544e 100644
--- a/src/constants/images.ts
+++ b/src/constants/images.ts
@@ -12,6 +12,7 @@ export const IMAGES = {
};
export const ICONS = {
+ headerToggle: require("@/assets/images/ic_header_menuToggle.png"),
down: require("@/assets/images/ic_down.png"),
search: require("@/assets/images/ic_search.png"),
calendar: require("@/assets/images/ic_calendar.png"),
@@ -26,17 +27,17 @@ export const ICONS = {
back: require("@/assets/images/ic_back.png"),
filter: require("@/assets/images/ic_filter.png"),
nodata: require("@/assets/images/ic_nodata.png"),
-
+
floatingPlus: require("@/assets/images/Plus.png"),
floatingLock: require("@/assets/images/ic_lock.png"),
floatingMeeting: require("@/assets/images/ic_people.png"),
-
+
newBoard: require("@/assets/images/ic_new_board.png"),
comment: require("@/assets/images/ic_comment.png"),
-
+
heartColor: require("@/assets/images/ic_heartColor.png"),
heartNone: require("@/assets/images/ic_heartWhite.png"),
-
+
edit: require("@/assets/images/ic_edit.png"),
member: require("@/assets/images/ic_member.png"),
copy: require("@/assets/images/ic_copy.png"),
diff --git a/src/constants/keys/postKey.ts b/src/constants/keys/postKey.ts
new file mode 100644
index 0000000..895a2b6
--- /dev/null
+++ b/src/constants/keys/postKey.ts
@@ -0,0 +1,13 @@
+import { PostDetailProps } from "@/types/post";
+
+export const postKeys = {
+ all: ["post"] as const,
+ detail: ({ clubId, postId }: PostDetailProps) =>
+ [...postKeys.all, { clubId, postId }] as const,
+ comment: ({ clubId, postId }: PostDetailProps) =>
+ [...postKeys.detail({ clubId, postId }), "comment"] as const,
+};
+
+export const categoryKeys = {
+ all: ["categoty"] as const,
+};
diff --git a/src/features/board/components/Board.tsx b/src/features/board/components/Board.tsx
index f29e55f..c14dab7 100644
--- a/src/features/board/components/Board.tsx
+++ b/src/features/board/components/Board.tsx
@@ -2,16 +2,25 @@
import { Floating } from "@/components/atoms/floating";
import { Text } from "@/components/atoms/text";
import { ICONS } from "@/constants/images";
+import usePostListQuery from "@/hook/post/usePostListQuery";
import { usePathname, useRouter } from "next/navigation";
import React from "react";
-import { testArr } from "../constants/testArr/TestArr";
import "./Board.css";
import BoardItem from "./BoardItem";
const Board = () => {
const router = useRouter();
const pathname = usePathname();
+ const startedPath = pathname.split("/").slice(1)[0];
+ const clubId = parseInt(startedPath, 10);
const boardTypeAddress = pathname.split("/board/")[1];
+ const boardCategory = boardTypeAddress === "notice" ? "NOTICE" : "FREE";
+ const { data } = usePostListQuery({
+ clubId: clubId,
+ category: boardCategory,
+ page: 0,
+ size: 10,
+ });
const boardType = boardTypeAddress === "notice" ? "공지" : "자유";
const inPlusStyle: React.CSSProperties = {
width: "1.625rem",
@@ -30,19 +39,19 @@ const Board = () => {
- {testArr.map((item, index) => (
+ {data?.data.content.map((item, index) => (
))}
diff --git a/src/features/board/components/BoardDetail.css b/src/features/board/components/BoardDetail.css
index 952930c..fb4ec9e 100644
--- a/src/features/board/components/BoardDetail.css
+++ b/src/features/board/components/BoardDetail.css
@@ -49,3 +49,8 @@
display: fixed;
bottom: 0;
}
+
+.board__detail__comment {
+ padding-bottom: 5rem;
+ height: 100%;
+}
diff --git a/src/features/board/components/BoardDetail.tsx b/src/features/board/components/BoardDetail.tsx
index ed8afb0..4530484 100644
--- a/src/features/board/components/BoardDetail.tsx
+++ b/src/features/board/components/BoardDetail.tsx
@@ -1,20 +1,40 @@
-import { Comment, CommentInput } from "@/components/atoms/comment/index";
+import { CommentInput } from "@/components/atoms/comment/index";
import { Heart } from "@/components/atoms/heart/Heart";
import { Text } from "@/components/atoms/text";
import { ImageModal } from "@/components/molecules/ImageModal";
-// import useGetBoard from "@/hook/board/useGetBoardDetail";
+import { CommentList } from "@/components/molecules/commentList/CommentList";
+import { BoardHeader } from "@/components/organisms/Header";
+import { useCommentSort } from "@/hook/comment/useCommentSort";
+import useCommentsQuery from "@/hook/comment/useCommentsQuery";
import usePostDetailQuery from "@/hook/post/usePostDetailQuery";
+import {
+ useHeartCancleMutation,
+ useHeartMutation,
+} from "@/hook/post/useheartMutation";
import Image from "next/image";
+import { usePathname } from "next/navigation";
import { useState } from "react";
-import { BoardDetailArr, commentsArr } from "../constants/testArr/TestArr";
import "./BoardDetail.css";
export const BoardDetail = () => {
- const { data, isLoading } = usePostDetailQuery({ clubId: 4, postId: 9 });
- console.log(data);
+ const pathname = usePathname();
+ const pathProps = pathname.split("/").slice(1);
+ const postItem = {
+ clubId: parseInt(pathProps[0], 10),
+ postId: parseInt(pathProps[3], 10),
+ };
+ const { data, isLoading } = usePostDetailQuery(postItem);
+ const { mutate: isHaertMutate } = useHeartMutation(postItem);
+ const { mutate: isCancelHaertMutate } = useHeartCancleMutation(postItem);
const [isOpenModal, setIsOpenModal] = useState(false);
+ const [targetComment, setTargetComment] = useState