✨ feat: Skeleton Common

src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss

@@ -1,6 +1,6 @@
 @import '../../../../styles/utilities';
 
-.skeletonImage:empty {
+.skeletonImage {
     @apply relative;
     background: #DDDBDD;
 

src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx

@@ -5,16 +5,14 @@ import s from './SkeletonImage.module.scss'
 interface SkeletonImageProps {
     align?: "left" | "center"
     size?: "small" | "default" | "large"
-    children?: React.ReactNode
 }
 
-const SkeletonImage = ({ align="center", size="default", children }: SkeletonImageProps) => {
+const SkeletonImage = ({ align="center", size="default" }: SkeletonImageProps) => {
     return (
         <div className={classNames(s.skeletonImage, {
             [s[size]] : size,
             [s[align]] : align
         })}>
-            {children}
         </div>
     )
 }

src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss

@@ -1,6 +1,8 @@
 @import '../../../../styles/utilities';
 
-.skeletonParagraph {    
+.skeletonParagraph {
+    margin: 0 1.6rem;
+
     .row {
         display: inline-block;
         height: 2rem;

src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx

@@ -1,23 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import s from './SkeletonParagraph.module.scss'
 
 interface SkeletonParagraphProps {
     rows?: number // number of rows in paragraph
-    children?: React.ReactNode
 }
 
-const SkeletonParagraph = ({ rows=2, children }: SkeletonParagraphProps) => {
+const SkeletonParagraph = ({ rows=2 }: SkeletonParagraphProps) => {
-
-    const [isChildLoaded, setIsChildLoaded] = useState(false)
-
-    useEffect(() => {
-        setIsChildLoaded(true);
-    }, [])
-
     return (
         <div className={s.skeletonParagraph}>
             {
-                isChildLoaded ? children : [...Array(rows)].map((e, i) => {
+                [...Array(rows)].map((e, i) => {
                     if (i === rows-1) {
                         return <div key={i} className={s.lastRow}></div>
                     }