- 0 ? reviewImages[0].imgUrl : keydeukImg)}
+ 0 ? reviewImages[0].imgUrl : keydeukImg)}
alt='키보드 이미지'
- fill
- onError={() => setClickedImage('')}
- className={cn('selected-image-wrapper')}
- sizes='(max-width: 1200px) 100%'
- priority
- placeholder={IMAGE_BLUR.placeholder}
- blurDataURL={IMAGE_BLUR.blurDataURL}
+ width={493}
+ height={reviewImages.length > 1 ? 536 : 604}
/>
{reviewImages.length > 1 && (
@@ -281,12 +296,17 @@ export default function PostCardDetailModal({ cardId, onClose, isMine, commentCo
{title}
{content}
@@ -299,7 +319,11 @@ export default function PostCardDetailModal({ cardId, onClose, isMine, commentCo
key={comment.id}
cardId={cardId}
commentData={comment}
- ref={lastCommentId === comment.id ? lastCommentRef : null}
+ ref={setCommentRefType(comment.id)}
+ onOpenPopOver={handleOpenCommentPopOver}
+ onClosePopOver={handleCloseCommentPopOver}
+ isOpenedPopOver={clickedPopOverCommentId === comment.id}
+ onOpenProfileCard={handleOpenCommentProfileCard}
/>
))}
{isCommentLoading && }
diff --git a/src/app/community/_components/SortDropdown.module.scss b/src/app/community/_components/SortDropdown.module.scss
new file mode 100644
index 00000000..60d77ccb
--- /dev/null
+++ b/src/app/community/_components/SortDropdown.module.scss
@@ -0,0 +1,4 @@
+.container {
+ width: min-content;
+ margin-left: auto;
+}
diff --git a/src/app/community/_components/SortDropdown.tsx b/src/app/community/_components/SortDropdown.tsx
index 0b0766f0..7d400b57 100644
--- a/src/app/community/_components/SortDropdown.tsx
+++ b/src/app/community/_components/SortDropdown.tsx
@@ -1,14 +1,21 @@
'use client';
+import classNames from 'classnames/bind';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
import { Dropdown } from '@/components';
import { COMMUNITY_REVIEW_SORT_OPTIONS } from '@/constants/dropdownOptions';
+import styles from './SortDropdown.module.scss';
+
+const cn = classNames.bind(styles);
+
export default function SortDropdown() {
const [selectedOption, setSelectedOption] = useState(COMMUNITY_REVIEW_SORT_OPTIONS[0].label);
const router = useRouter();
+ const queryClient = useQueryClient();
const updateQuery = (queryValue: string) => {
const query = new URLSearchParams(window.location.search);
@@ -23,14 +30,19 @@ export default function SortDropdown() {
return;
}
updateQuery(queryValue);
+ queryClient.invalidateQueries({
+ queryKey: ['postCardsList'],
+ });
};
return (
-
option.label)}
- sizeVariant='xs'
- onChange={handleDropdownChange}
- value={selectedOption}
- />
+
+ option.label)}
+ sizeVariant='xs'
+ onChange={handleDropdownChange}
+ value={selectedOption}
+ />
+
);
}
diff --git a/src/app/community/_components/UserProfileCard.module.scss b/src/app/community/_components/UserProfileCard.module.scss
new file mode 100644
index 00000000..7fe918be
--- /dev/null
+++ b/src/app/community/_components/UserProfileCard.module.scss
@@ -0,0 +1,82 @@
+.user-detail-profile-card {
+ display: flex;
+ position: absolute;
+ z-index: $zindex-popover;
+ top: 6rem;
+ left: 0;
+ width: 45rem;
+ height: 15rem;
+ padding: 1rem;
+ animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+ border: 0.2rem solid $gray-20;
+ border-radius: 1rem;
+ background-color: white;
+ box-shadow: 0 0 1.5rem 0 rgb(0 0 0 / 35%);
+ gap: 1rem;
+}
+
+.loading-div {
+ @include flex-center;
+}
+
+.above-profile {
+ top: -16rem;
+}
+
+.display-none {
+ display: none;
+}
+
+.profile-image {
+ position: relative;
+ width: 12rem;
+ height: 100%;
+ overflow: hidden;
+ border-radius: 0.8rem;
+ background-color: $gray-10;
+ object-fit: cover;
+}
+
+.info-wrapper {
+ @include flex-column(0.2rem);
+
+ height: 100%;
+ padding-left: 1rem;
+ border-left: 0.2rem solid $gray-20;
+}
+
+.info-wrapper p {
+ @include pretendard-14-400;
+
+ & > strong {
+ @include pretendard-14-600;
+ }
+}
+
+.info-wrapper .nickname {
+ @include pretendard-20-700;
+}
+
+.not-found-text {
+ @include pretendard-20-700;
+}
+
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fade-out {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/src/app/community/_components/UserProfileCard.tsx b/src/app/community/_components/UserProfileCard.tsx
new file mode 100644
index 00000000..b88a7c43
--- /dev/null
+++ b/src/app/community/_components/UserProfileCard.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import classNames from 'classnames/bind';
+import { forwardRef, useEffect, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import Image from 'next/image';
+
+import { getOthersInfo } from '@/api/usersAPI';
+import { SpinLoading, keydeukProfileImg } from '@/public/index';
+
+import styles from './UserProfileCard.module.scss';
+
+const cn = classNames.bind(styles);
+
+interface UserProfileCardProps {
+ isOpenProfileCard: boolean;
+ userId: number;
+ positionTop?: number;
+}
+export default forwardRef(function UserProfileCard(
+ { isOpenProfileCard, userId, positionTop },
+ ref,
+) {
+ const {
+ data: userInfo,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ['clickedUserInfo'],
+ queryFn: () => getOthersInfo(userId),
+ enabled: false,
+ });
+ const queryClient = useQueryClient();
+
+ const [isAboveProfile, setIsAboveProfile] = useState(false);
+
+ useEffect(() => {
+ const VIEWPORT_HEIGHT = window.innerHeight;
+
+ if (isOpenProfileCard && positionTop && positionTop > VIEWPORT_HEIGHT / 2) {
+ setIsAboveProfile(true);
+ }
+ }, [isOpenProfileCard, positionTop, isAboveProfile]);
+
+ useEffect(() => {
+ queryClient.removeQueries({ queryKey: ['clickedUserInfo'] });
+ refetch();
+ }, [userId, refetch, isOpenProfileCard, queryClient]);
+
+ return positionTop && positionTop === 0 ? null : (
+ e.stopPropagation()}
+ >
+ {isFetching ? (
+
+ ) : (
+ <>
+
+
+
+
+
{userInfo?.nickname || '사용자를 찾을 수 없습니다.'}
+
+ email: {userInfo?.email}
+
+
+ birthday: {userInfo?.birth}
+
+
+ phone: {userInfo?.phone}
+
+
+ gender: {userInfo?.gender}
+
+
+
+ )}
+
-
+ 내 게시글이 없어요!
+
+
+ );
+}
diff --git a/src/app/my-info/(account)/my-posts/page.tsx b/src/app/my-info/(account)/my-posts/page.tsx
index 56affb4e..22c17995 100644
--- a/src/app/my-info/(account)/my-posts/page.tsx
+++ b/src/app/my-info/(account)/my-posts/page.tsx
@@ -6,6 +6,7 @@ import { MyInfoEmptyCase } from '../../_components';
import MyPostCardList from './_components/MyPostCardList';
import styles from './page.module.scss';
+import MyPostsEmptyCase from './_components/MyPostsEmptyCase';
const cn = classNames.bind(styles);
@@ -28,6 +29,10 @@ export default async function MyPostsPage({ searchParams }: MyPostsPageProps) {
const data = await getMyPosts(initialParams);
+ if (!data) {
+ return ;
+ }
+
const { content, ...rest } = data;
return (
diff --git a/src/components/Buttons/HeartButton/HeartButton.tsx b/src/components/Buttons/HeartButton/HeartButton.tsx
index 0650ad89..76e15e3e 100644
--- a/src/components/Buttons/HeartButton/HeartButton.tsx
+++ b/src/components/Buttons/HeartButton/HeartButton.tsx
@@ -181,7 +181,6 @@ export default function HeartButton({ id, usage, isLiked, likeCount }: HeartButt
)}