diff --git a/src/components/Container/BevelScrollContainer.tsx b/src/components/Container/BevelScrollContainer.tsx new file mode 100644 index 0000000..0ac0dd0 --- /dev/null +++ b/src/components/Container/BevelScrollContainer.tsx @@ -0,0 +1,17 @@ +import type { PropsWithChildren } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function BevelScrollContainer({ + children, + className, +}: PropsWithChildren<{ className?: string }>) { + return ( +
+
+ {children} +
+
+ ); +} diff --git a/src/features/friends/list/List.tsx b/src/features/friends/list/List.tsx index 3a0cbd9..69aba57 100644 --- a/src/features/friends/list/List.tsx +++ b/src/features/friends/list/List.tsx @@ -2,6 +2,7 @@ import { Home, UserMinus2 } from "lucide-react"; import { useEffect, useState } from "react"; import Button from "@/components/Button/Button"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import { useAuthStore } from "@/stores/useAuthStore"; import { useWindowStore } from "@/stores/useWindowStore"; @@ -49,8 +50,8 @@ export default function List() { return (
친구 목록 {friends.length} -
-
+
+
    {friends.map((friend) => { const profile = @@ -95,7 +96,7 @@ export default function List() { ); })}
-
+
); diff --git a/src/features/friends/request/Request.tsx b/src/features/friends/request/Request.tsx index aa00154..5e98126 100644 --- a/src/features/friends/request/Request.tsx +++ b/src/features/friends/request/Request.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import Button from "@/components/Button/Button"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import { useAuthStore } from "@/stores/useAuthStore"; import { acceptFriendRequest, getFriendRequests, rejectFriendRequest } from "../api/friends"; @@ -52,8 +53,8 @@ export default function Request() { return (
친구 신청 {requests.length} -
-
+
+
    {requests.map((request) => (
  • @@ -86,7 +87,7 @@ export default function Request() {
  • ))}
-
+
); diff --git a/src/features/friends/search/Search.tsx b/src/features/friends/search/Search.tsx index b153425..4cb131d 100644 --- a/src/features/friends/search/Search.tsx +++ b/src/features/friends/search/Search.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import Button from "@/components/Button/Button"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import Input from "@/components/Input/Input"; import { useAuthStore } from "@/stores/useAuthStore"; import { useWindowStore } from "@/stores/useWindowStore"; @@ -68,9 +69,9 @@ export default function Search() { {hasSearched && (
검색 결과 {results.length} -
-
-
    +
    + +
      {results.map((Profile) => (
    • @@ -100,7 +101,7 @@ export default function Search() {
    • ))}
    -
    +
)} diff --git a/src/features/minihome/gallery/GalleryList.tsx b/src/features/minihome/gallery/GalleryList.tsx index 031256d..b6ea67e 100644 --- a/src/features/minihome/gallery/GalleryList.tsx +++ b/src/features/minihome/gallery/GalleryList.tsx @@ -1,4 +1,5 @@ import Button from "@/components/Button/Button"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import type { GalleryImage } from "./types/gallery.types"; @@ -43,53 +44,49 @@ export default function GalleryList({ const statusContent = renderStatus(); return ( - // 베벨 테두리 래퍼 -
- {/* 내부 컨텐츠 */} -
- {/* 헤더 */} -
-

사진첩

-
- {isMine && ( - - )} - {statusContent && ( -
{statusContent}
- )} -
+ + {/* 헤더 */} +
+

사진첩

+
+ {isMine && ( + + )} + {statusContent && ( +
{statusContent}
+ )}
- - {hasImages ? ( - /* 이미지 그리드 영역 */ -
- {images.map((image) => ( - - ))} -
- ) : null}
-
+ + {hasImages ? ( + /* 이미지 그리드 영역 */ +
+ {images.map((image) => ( + + ))} +
+ ) : null} + ); } diff --git a/src/features/minihome/guestbook/GuestBook.tsx b/src/features/minihome/guestbook/GuestBook.tsx index a49cf2a..2c1fb64 100644 --- a/src/features/minihome/guestbook/GuestBook.tsx +++ b/src/features/minihome/guestbook/GuestBook.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import { useAuthStore } from "@/stores/useAuthStore"; import { @@ -126,34 +127,36 @@ export default function GuestBook({ ownerId }: { ownerId: string | undefined }) {!isMine && }
전체 방명록 {data.length} -
-
    - {data.map((entry) => ( -
  • - handleEntryDelete(entry.id)} - > - {entry.comments.length > 0 ? ( - handleReplyDelete(entry.id, entry.comments[0].id)} - /> - ) : ( - isMine && - )} - -
  • - ))} -
+
+ +
    + {data.map((entry) => ( +
  • + handleEntryDelete(entry.id)} + > + {entry.comments.length > 0 ? ( + handleReplyDelete(entry.id, entry.comments[0].id)} + /> + ) : ( + isMine && + )} + +
  • + ))} +
+
diff --git a/src/features/minihome/post/list/PostList.tsx b/src/features/minihome/post/list/PostList.tsx index 6c2959c..dba8418 100644 --- a/src/features/minihome/post/list/PostList.tsx +++ b/src/features/minihome/post/list/PostList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; +import BevelScrollContainer from "@/components/Container/BevelScrollContainer"; import { useAuthUser } from "@/hooks/useAuthUser"; import type { PostWithCounts } from "@/types/post.types"; import supabase from "@/utils/supabase"; @@ -69,8 +70,8 @@ export default function PostList({ onPostClick, ownerId }: PostListProps) { } return ( -
-
+ +
{posts.length > 0 ? ( posts.map((post) => ( 작성된 게시글이 없습니다.
)}
-
+ ); }