diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index b1c4d90d..c159138b 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -1,5 +1,5 @@ "use client"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; import { useLogin } from "@/hooks/queries/auth/useLogin"; import { type LoginSchema, loginSchema } from "@/schemas/authSchema"; import { zodResolver } from "@hookform/resolvers/zod"; diff --git a/src/app/(auth)/signup/applicant/page.tsx b/src/app/(auth)/signup/applicant/page.tsx index 24882820..6b6b606a 100644 --- a/src/app/(auth)/signup/applicant/page.tsx +++ b/src/app/(auth)/signup/applicant/page.tsx @@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import Link from "next/link"; import { useForm } from "react-hook-form"; import Image from "next/image"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; export default function ApplicantSignupPage() { const { signup, isPending } = useSignup(); diff --git a/src/app/(auth)/signup/owner/page.tsx b/src/app/(auth)/signup/owner/page.tsx index b4582ac1..1eb89131 100644 --- a/src/app/(auth)/signup/owner/page.tsx +++ b/src/app/(auth)/signup/owner/page.tsx @@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import Link from "next/link"; import { useForm } from "react-hook-form"; import Image from "next/image"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; export default function OwnerSignupPage() { const { signup, isPending } = useSignup(); diff --git a/src/app/(pages)/(albaform)/addform/page.tsx b/src/app/(pages)/(albaform)/addform/page.tsx index 66f9728e..d367bfeb 100644 --- a/src/app/(pages)/(albaform)/addform/page.tsx +++ b/src/app/(pages)/(albaform)/addform/page.tsx @@ -14,7 +14,7 @@ import WorkConditionSection from "./section/WorkConditionSection"; import useEditing from "@/hooks/useEditing"; import { SubmitFormDataType } from "@/types/addform"; import CustomFormModal from "@/app/components/modal/modals/confirm/CustomFormModal"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; export default function AddFormPage() { const router = useRouter(); diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx index 6e7cd314..2d00f288 100644 --- a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx +++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx @@ -11,7 +11,7 @@ import { CiMemoPad } from "react-icons/ci"; import axios from "axios"; import toast from "react-hot-toast"; import { useRouter } from "next/navigation"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; interface FormActionsProps { formId: string | number; @@ -36,6 +36,7 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP toast.success("성공적으로 삭제되었습니다."); router.push(`/albalist`); } catch (error) { + console.error(error); toast.error("삭제 중 오류가 발생했습니다."); } finally { setLoading(false); diff --git a/src/app/(pages)/albaList/page.tsx b/src/app/(pages)/albaList/page.tsx index 8f719dfb..bb6d5f08 100644 --- a/src/app/(pages)/albaList/page.tsx +++ b/src/app/(pages)/albaList/page.tsx @@ -131,7 +131,7 @@ export default function AlbaList() {
{/* 폼 만들기 버튼 - 고정 위치 */} {isOwner && ( - + } variant="orange"> 폼 만들기 diff --git a/src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx b/src/app/(pages)/albaTalk/[albatalkId]/page.tsx similarity index 85% rename from src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx rename to src/app/(pages)/albaTalk/[albatalkId]/page.tsx index d414ec57..e46b3b08 100644 --- a/src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx +++ b/src/app/(pages)/albaTalk/[albatalkId]/page.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react"; import { useParams } from "next/navigation"; -import Comment from "@/app/components/card/board/detailComment"; +import CommentDetail from "@/app/components/card/board/CommentDetail"; import BaseTextArea from "@/app/components/input/textarea/BaseTextArea"; import Button from "@/app/components/button/default/Button"; import { usePostActions } from "@/hooks/usePostActions"; @@ -111,14 +111,14 @@ export default function PostDetailPage() { return (
-
+
{/* Post Content Box */} -
+
{/* Title and Profile Section */} -
+
-

{post.title}

+

{post.title}

{post.writer.id === user?.id && (
{showOptions && ( -
-
+
+
@@ -165,7 +165,7 @@ export default function PostDetailPage() { } setShowOptions(false); }} - className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm" + className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 lg:text-sm" > 삭제하기 @@ -178,7 +178,7 @@ export default function PostDetailPage() {
- {authorImageError ? ( // Updated author image rendering + {authorImageError ? (
{post.writer.nickname.charAt(0).toUpperCase()} @@ -194,11 +194,9 @@ export default function PostDetailPage() { onError={() => setAuthorImageError(true)} /> )} - {post.writer.nickname} - | - - {formatDate(post.createdAt)} - + {post.writer.nickname} + | + {formatDate(post.createdAt)}
@@ -207,37 +205,37 @@ export default function PostDetailPage() { alt="Comments" width={24} height={24} - className="h-[22px] w-[22px] sm:h-6 sm:w-6" + className="h-[22px] w-[22px] lg:h-6 lg:w-6" /> - {post.commentCount} + {post.commentCount}
-
+
- {post.likeCount} + {post.likeCount}
{/* Content Section */} -
+
{post.content}
{/* Comment Section */} -
+

댓글({post.commentCount})

-
+
{/* Comment Input Box */}
@@ -247,7 +245,7 @@ export default function PostDetailPage() { placeholder="댓글을 입력해주세요." value={newComment} onChange={(e) => setNewComment(e.target.value)} - size="w-full h-[132px] sm:h-[132px] lg:h-[160px]" + size="w-full h-[132px] lg:h-[160px]" />
@@ -258,7 +256,7 @@ export default function PostDetailPage() { setNewComment(""); } }} - className="h-[52px] w-[108px] text-base sm:h-[50px] sm:text-base lg:h-[64px] lg:w-[214px] lg:text-xl" + className="h-[52px] w-[108px] text-base lg:h-[64px] lg:w-[214px] lg:text-xl" > 등록하기 @@ -267,7 +265,7 @@ export default function PostDetailPage() {
{/* Comments List or Empty State */} -
+
{comments.length > 0 ? (
{comments.map((comment, index) => ( @@ -276,7 +274,7 @@ export default function PostDetailPage() { ref={index === comments.length - 1 ? lastCommentElementRef : undefined} className="w-full" > - ) : (
- = 1024 ? "md" : "sm"}.svg`} - alt="No comments" - width={window.innerWidth >= 1024 ? 206 : 206} - height={window.innerWidth >= 1024 ? 204 : 152} - /> + No comments
)}
diff --git a/src/app/(pages)/albaTalk/addTalk/page.tsx b/src/app/(pages)/albaTalk/addTalk/page.tsx index d2b92892..37997adf 100644 --- a/src/app/(pages)/albaTalk/addTalk/page.tsx +++ b/src/app/(pages)/albaTalk/addTalk/page.tsx @@ -3,12 +3,12 @@ import React, { useState, useCallback } from "react"; import { useForm, SubmitHandler, Controller } from "react-hook-form"; import { useRouter } from "next/navigation"; -import Button from "../../../components/button/default/Button"; +import Button from "@/app/components/button/default/Button"; import BaseInput from "@/app/components/input/text/BaseInput"; -import ImageInputwithPlaceHolder from "../../../components/input/file/ImageInput/ImageInputwithPlaceHolder"; -import { usePost } from "../../../../hooks/usePost"; +import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder"; +import { usePost } from "@/hooks/usePost"; import axios from "axios"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; interface FormInputs { title: string; @@ -91,7 +91,7 @@ export default function AddTalk() { return ( <>
-
+

글쓰기

@@ -112,10 +112,7 @@ export default function AddTalk() {
-
+
- +
diff --git a/src/app/(pages)/albaTalk/page.tsx b/src/app/(pages)/albaTalk/page.tsx index 3be2c6a5..2649dfb2 100644 --- a/src/app/(pages)/albaTalk/page.tsx +++ b/src/app/(pages)/albaTalk/page.tsx @@ -11,6 +11,7 @@ import Link from "next/link"; import { RiEdit2Fill } from "react-icons/ri"; import FloatingBtn from "@/app/components/button/default/FloatingBtn"; import CardBoard from "@/app/components/card/board/CardBoard"; +import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner"; const POSTS_PER_PAGE = 10; @@ -57,7 +58,7 @@ export default function AlbaTalk() { if (isLoading) { return (
-
로딩 중...
+
); } @@ -87,9 +88,9 @@ export default function AlbaTalk() { {/* 메인 콘텐츠 영역 */}
- {/* 글쓰기 버튼 - 고정 위치 */} + {/* 글쓰기 버튼 - 고정 위치 수정 */} {user && ( - + } variant="orange" /> )} @@ -100,11 +101,11 @@ export default function AlbaTalk() {
) : (
-
+
{data?.pages.map((page) => ( {page.data.map((post) => ( -
+
console.log("케밥 메뉴 클릭", post.id)} />
@@ -125,7 +127,7 @@ export default function AlbaTalk() {
{isFetchingNextPage && (
-
+
)}
diff --git a/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx index aee7ccbe..c3a70baa 100644 --- a/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx +++ b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx @@ -27,14 +27,12 @@ export default function SortSection() { }; return ( -
- option.label)} - className="!w-28 md:!w-40" - initialValue={currentLabel} - onChange={handleSortChange} - readOnly={isReadOnly} - /> -
+ option.label)} + className="!w-28 md:!w-40" + initialValue={currentLabel} + onChange={handleSortChange} + readOnly={isReadOnly} + /> ); } diff --git a/src/app/(pages)/mypage/components/FilterBar/index.tsx b/src/app/(pages)/mypage/components/FilterBar/index.tsx index c45c8dc0..f8721764 100644 --- a/src/app/(pages)/mypage/components/FilterBar/index.tsx +++ b/src/app/(pages)/mypage/components/FilterBar/index.tsx @@ -71,9 +71,11 @@ export default function FilterBar() { {/* 탭 메뉴 섹션 */}
diff --git a/src/app/(pages)/mypage/components/MyPageContent.tsx b/src/app/(pages)/mypage/components/MyPageContent.tsx deleted file mode 100644 index 9a1e7c19..00000000 --- a/src/app/(pages)/mypage/components/MyPageContent.tsx +++ /dev/null @@ -1,19 +0,0 @@ -"use client"; - -import { useSearchParams } from "next/navigation"; -import PostsSection from "./sections/PostsSection"; -import CommentsSection from "./sections/CommentsSection"; -import ScrapsSection from "./sections/ScrapsSection"; - -export default function MyPageContent() { - const searchParams = useSearchParams(); - const currentTab = searchParams.get("tab") || "posts"; - - const TabContent = { - posts: , - comments: , - scrap: , - }[currentTab]; - - return TabContent; -} diff --git a/src/app/(pages)/mypage/page.tsx b/src/app/(pages)/mypage/page.tsx index eb700fc6..6e625d72 100644 --- a/src/app/(pages)/mypage/page.tsx +++ b/src/app/(pages)/mypage/page.tsx @@ -1,7 +1,19 @@ "use client"; -import MyPageContent from "./components/MyPageContent"; +import { useSearchParams } from "next/navigation"; +import PostsSection from "./components/sections/PostsSection"; +import CommentsSection from "./components/sections/CommentsSection"; +import ScrapsSection from "./components/sections/ScrapsSection"; export default function MyPage() { - return ; + const searchParams = useSearchParams(); + const currentTab = searchParams.get("tab") || "posts"; + + const TabContent = { + posts: , + comments: , + scrap: , + }[currentTab]; + + return TabContent; } diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx index dec8789b..51200ada 100644 --- a/src/app/components/card/board/CardBoard.tsx +++ b/src/app/components/card/board/CardBoard.tsx @@ -13,7 +13,7 @@ export interface CardBoardProps { commentCount: number; likeCount: number; variant?: "default" | "primary"; - onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러 + onKebabClick?: () => void; } const CardBoard = ({ @@ -30,102 +30,114 @@ const CardBoard = ({ const [isLiked, setIsLiked] = useState(false); const [likeDisplayCount, setLikeDisplayCount] = useState(likeCount); + const formatContent = (text: string) => { + if (text.length > 30) { + return text.slice(0, 30) + "..."; + } + return text; + }; + const handleLikeClick = () => { if (isLiked) { - setLikeDisplayCount((prev) => prev - 1); // 좋아요 취소 시 감소 + setLikeDisplayCount((prev) => prev - 1); } else { - setLikeDisplayCount((prev) => prev + 1); // 좋아요 클릭 시 증가 + setLikeDisplayCount((prev) => prev + 1); } - setIsLiked((prev) => !prev); // 좋아요 상태 토글 + setIsLiked((prev) => !prev); }; - // 케밥 아이콘 경로 설정 const kebabSrc = `/icons/menu/${isDesktop ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; return (
- {/* Content Section */} -
- {/* Header */} -
-

{title}

- {/* Kebab Icon */} - -
- {/* Content */} -

- {content} -

-
- - {/* Footer Section */} -
- {/* Left Info */} -
- {/* 유저 아이콘 */} - User Icon - {/* 닉네임 + 수정일 */} -
- - {nickname} - - | - - {formatLocalDate(updatedAt)} - +
+ {/* Content Section */} +
+ {/* Header */} +
+

+ {title} +

+ {/* Kebab Icon */} + +
+ {/* Content */} +
+ {formatContent(content)}
- {/* Right Info */} -
- {/* 댓글 아이콘 */} -
+ {/* Footer Section */} +
+ {/* Left Info */} +
+ {/* 유저 아이콘 */} Comment Icon - {commentCount} + {/* 닉네임 + 수정일 */} +
+ + {nickname} + + | + + {formatLocalDate(updatedAt)} + +
- {/* 좋아요 */} -
- Like Icon - - {likeDisplayCount} - + + {/* Right Info */} +
+ {/* 댓글 아이콘 */} +
+ Comment Icon + + {commentCount} + +
+ {/* 좋아요 */} +
+ Like Icon + + {likeDisplayCount} + +
diff --git a/src/app/components/card/board/detailComment.tsx b/src/app/components/card/board/CommentDetail.tsx similarity index 95% rename from src/app/components/card/board/detailComment.tsx rename to src/app/components/card/board/CommentDetail.tsx index 3204fa98..3fcdb05b 100644 --- a/src/app/components/card/board/detailComment.tsx +++ b/src/app/components/card/board/CommentDetail.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; import BaseTextArea from "@/app/components/input/textarea/BaseTextArea"; import Button from "@/app/components/button/default/Button"; -export interface CommentProps { +export interface CommentDetailProps { id: number; userName: string; userImageUrl?: string; @@ -16,7 +16,16 @@ export interface CommentProps { onDelete: (id: number) => void; } -const Comment: React.FC = ({ id, userName, userImageUrl, date, comment, isAuthor, onEdit, onDelete }) => { +const CommentDetail: React.FC = ({ + id, + userName, + userImageUrl, + date, + comment, + isAuthor, + onEdit, + onDelete, +}) => { const [showOptions, setShowOptions] = useState(false); const [isEditing, setIsEditing] = useState(false); const [editedComment, setEditedComment] = useState(comment); @@ -129,4 +138,4 @@ const Comment: React.FC = ({ id, userName, userImageUrl, date, com ); }; -export default Comment; +export default CommentDetail; diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx index b1b324cc..7a90c78e 100644 --- a/src/app/components/card/cardList/AlbaListItem.tsx +++ b/src/app/components/card/cardList/AlbaListItem.tsx @@ -6,11 +6,11 @@ import Chip from "@/app/components/chip/Chip"; import { useState, useEffect, useRef } from "react"; import { useRouter } from "next/navigation"; import useModalStore from "@/store/modalStore"; -import Indicator from "../../pagination/Indicator"; +import Indicator from "@/app/components/pagination/Indicator"; import { FormListType } from "@/types/response/form"; import { useFormScrap } from "@/hooks/queries/form/useFormScap"; import { MdOutlineImage } from "react-icons/md"; -import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; import { isValidS3Url } from "@/utils/checkS3Url"; /** diff --git a/src/app/components/card/cardList/ScrapListItem.tsx b/src/app/components/card/cardList/ScrapListItem.tsx index bf7b7f51..f118b81d 100644 --- a/src/app/components/card/cardList/ScrapListItem.tsx +++ b/src/app/components/card/cardList/ScrapListItem.tsx @@ -11,7 +11,7 @@ import { useFormScrap } from "@/hooks/queries/form/useFormScap"; import { useRouter } from "next/navigation"; import { MdOutlineImage } from "react-icons/md"; import { S3_URL } from "@/constants/config"; -import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "../../loading-spinner/DotLoadingSpinner"; /** * 알바폼 스크랩 리스트 아이템 컴포넌트 diff --git a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx similarity index 94% rename from src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx rename to src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx index 393788b6..b88c3856 100644 --- a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx +++ b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx @@ -1,4 +1,5 @@ "use client"; + import { HiUpload } from "react-icons/hi"; import { useState, useRef } from "react"; import { toast } from "react-hot-toast"; @@ -10,13 +11,13 @@ interface ImageInputType { id: string; } -interface ImageInputwithPlaceHolderProps { +interface ImageInputPlaceHolderProps { onImageUpload: (file: File) => Promise; onImagesChange: (images: ImageInputType[]) => void; size?: "small" | "large"; } -const ImageInputwithPlaceHolder: React.FC = ({ +const ImageInputPlaceHolder: React.FC = ({ onImageUpload, onImagesChange, size = "large", @@ -79,4 +80,4 @@ const ImageInputwithPlaceHolder: React.FC = ({ ); }; -export default ImageInputwithPlaceHolder; +export default ImageInputPlaceHolder; diff --git a/src/app/components/loading-spinner/DotLodingSpinner.tsx b/src/app/components/loading-spinner/DotLoadingSpinner.tsx similarity index 100% rename from src/app/components/loading-spinner/DotLodingSpinner.tsx rename to src/app/components/loading-spinner/DotLoadingSpinner.tsx diff --git a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx index b5e3a280..0106e159 100644 --- a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx +++ b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx @@ -7,7 +7,7 @@ import axios from "axios"; import { useState } from "react"; import toast from "react-hot-toast"; import type { ConfirmFormModalProps } from "@/types/modal"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmFormModalProps) => { const [isDeleting, setIsDeleting] = useState(false); diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx index 263d248a..1c61b04f 100644 --- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx +++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx @@ -8,7 +8,7 @@ import { positionOptions } from "@/constants/positionOptions"; import axios from "axios"; import toast from "react-hot-toast"; import type { ConfirmFormModalProps } from "@/types/modal"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModalProps) => { const [isSubmitting, setIsSubmitting] = useState(false); diff --git a/src/app/components/modal/modals/edit/EditPost.tsx b/src/app/components/modal/modals/edit/EditPost.tsx index 3f1167d2..a1cfb65b 100644 --- a/src/app/components/modal/modals/edit/EditPost.tsx +++ b/src/app/components/modal/modals/edit/EditPost.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useEffect } from "react"; import { useForm, Controller } from "react-hook-form"; import Button from "@/app/components/button/default/Button"; import BaseInput from "@/app/components/input/text/BaseInput"; -import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputwithPlaceHolder"; +import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder"; import axios from "axios"; import { Post } from "@/types/post"; import { useMutation } from "@tanstack/react-query"; @@ -117,7 +117,7 @@ export default function EditPostModal({ post, onClose, onUpdate }: EditPostModal - { const imageUrls = newImages.map((img) => img.url).join(","); diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx index 2f1a72e5..9635a1a5 100644 --- a/src/app/components/modal/modals/form/ChangePasswordModal.tsx +++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx @@ -6,7 +6,7 @@ import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useLogout } from "@/hooks/queries/auth/useLogout"; import { usePassword } from "@/hooks/queries/user/me/useChangePassword"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; interface ChangePasswordModalProps { isOpen: boolean; diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx index 77cda528..ec8bd89b 100644 --- a/src/app/components/modal/modals/form/EditMyProfileModal.tsx +++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx @@ -11,7 +11,7 @@ import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { nicknameSchema, mobilePhoneSchema } from "@/schemas/commonSchema"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; interface EditMyProfileModalProps { isOpen: boolean; diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx index 76434228..3a9a40a5 100644 --- a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx +++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx @@ -11,7 +11,7 @@ import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { nicknameSchema, storePhoneSchema, mobilePhoneSchema } from "@/schemas/commonSchema"; -import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner"; +import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; interface EditOwnerProfileModalProps { isOpen: boolean; diff --git a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx similarity index 70% rename from src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx rename to src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx index 7e7424ca..aa254d6f 100644 --- a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx +++ b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx @@ -1,17 +1,17 @@ -import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputwithPlaceHolder"; +import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder"; import { Meta, StoryObj } from "@storybook/react"; const meta = { title: "Design System/Components/FileInput", - component: ImageInputwithPlaceHolder, + component: ImageInputPlaceHolder, parameters: { layout: "centered", }, -} satisfies Meta; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const UploadImagePlaceHolder: Story = { args: { diff --git a/src/hooks/queries/form/useForms.ts b/src/hooks/queries/form/useForms.ts index 34ee15e4..6e75405e 100644 --- a/src/hooks/queries/form/useForms.ts +++ b/src/hooks/queries/form/useForms.ts @@ -4,21 +4,20 @@ import type { FormListResponse } from "@/types/response/form"; import toast from "react-hot-toast"; interface UseFormsParams { - cursor?: string; limit?: number; orderBy?: string; keyword?: string; isRecruiting?: boolean; } -export const useForms = ({ cursor, limit = 10, orderBy, keyword, isRecruiting }: UseFormsParams = {}) => { +export const useForms = ({ limit = 10, orderBy, keyword, isRecruiting }: UseFormsParams = {}) => { const query = useInfiniteQuery({ queryKey: ["forms", { limit, orderBy, keyword, isRecruiting }], - queryFn: async () => { + queryFn: async ({ pageParam }) => { try { const response = await axios.get("/api/forms", { params: { - cursor, + cursor: pageParam, limit, orderBy, keyword, @@ -35,7 +34,12 @@ export const useForms = ({ cursor, limit = 10, orderBy, keyword, isRecruiting }: throw error; } }, - getNextPageParam: (lastPage) => lastPage.nextCursor, + getNextPageParam: (lastPage) => { + if (!lastPage.nextCursor || lastPage.data.length === 0) { + return undefined; + } + return lastPage.nextCursor; + }, initialPageParam: undefined, staleTime: 1000 * 60 * 5, gcTime: 1000 * 60 * 30, diff --git a/src/hooks/queries/post/usePosts.ts b/src/hooks/queries/post/usePosts.ts index e3309b2c..679e196b 100644 --- a/src/hooks/queries/post/usePosts.ts +++ b/src/hooks/queries/post/usePosts.ts @@ -4,20 +4,19 @@ import axios from "axios"; import toast from "react-hot-toast"; interface UsePostsParams { - cursor?: string; limit?: number; orderBy?: string; keyword?: string; } -export const usePosts = ({ cursor, limit = 10, orderBy, keyword }: UsePostsParams = {}) => { +export const usePosts = ({ limit = 10, orderBy, keyword }: UsePostsParams = {}) => { const query = useInfiniteQuery({ queryKey: ["posts", { limit, orderBy, keyword }], - queryFn: async () => { + queryFn: async ({ pageParam }) => { try { const response = await axios.get("/api/posts", { params: { - cursor, + cursor: pageParam, limit, orderBy, keyword, @@ -27,13 +26,18 @@ export const usePosts = ({ cursor, limit = 10, orderBy, keyword }: UsePostsParam return response.data; } catch (error) { if (axios.isAxiosError(error)) { - const errorMessage = error.response?.data?.message || "게시글 목록을 불러오는데 실패했습니다."; + const errorMessage = error.response?.data?.message || "알바 토크를 불러오는데 실패했습니다."; toast.error(errorMessage); } throw error; } }, - getNextPageParam: (lastPage) => lastPage.nextCursor, + getNextPageParam: (lastPage) => { + if (!lastPage.nextCursor || lastPage.data.length === 0) { + return undefined; + } + return lastPage.nextCursor; + }, initialPageParam: undefined, staleTime: 1000 * 60 * 5, // 5분 gcTime: 1000 * 60 * 30, // 30분