diff --git a/src/components/ui/NoDataUI.tsx b/src/components/ui/NoDataUI.tsx index 39e5659f..23457a0f 100644 --- a/src/components/ui/NoDataUI.tsx +++ b/src/components/ui/NoDataUI.tsx @@ -1,28 +1,39 @@ import Image from "next/image"; import styled from "styled-components"; -export default function NoData({ - type -} : { - type: string -}){ - // type: 게시물은 article, 댓글은 comment 넘겨주기 +export default function NoData({ type }: { type: noDataType }) { + const data = { + article: { + type: "article", + src: "/noData/article.svg", + width: 83, + height: 85, + text: "작성한 게시글이 없어요.", + }, + comment: { + src: "/noData/comment.svg", + width: 76, + height: 85, + text: "첫 댓글을 작성해 보세요!", + }, + message: { + src: "/noData/message.svg", + width: 83, + height: 85, + text: "받은 쪽지가 없어요.", + }, + }; return ( - - { - type === 'article' ? - <> - - 작성한 게시글이 없어요. - - : - <> - - 첫 댓글을 작성해 보세요! - - } + + + {data[type].text} - ) + ); } const S = { @@ -33,18 +44,16 @@ const S = { flex-direction: column; gap: 6px; z-index: 0; - padding: ${({ type }) => (type === 'article' ? '0' : '40px 0')}; - ${({ type }) => - type === 'article' && ` + padding: ${({ type }) => (type === "comment" ? "40px 0" : "0")}; + ${({ type }) => + (type === "article" || type === "message") && + ` position: absolute; width: 500px; max-width: 500px; height: 100vh; `} `, - Image: styled.img<{ type: string}>` - src: ${({ type }) => type === 'list' ? "/community/list/comu-noData.svg" : "/community/list/comu-noComment.svg"}; - `, Text: styled.div` font-size: 16px; font-weight: 500; @@ -54,4 +63,4 @@ const S = { Comment: styled.div` padding: 50px 0; `, -} \ No newline at end of file +}; diff --git a/src/types/noData.d.ts b/src/types/noData.d.ts new file mode 100644 index 00000000..334d8bf2 --- /dev/null +++ b/src/types/noData.d.ts @@ -0,0 +1 @@ +type noDataType = "article" | "comment" | "message";