From 25eba07aafe44d58773b94f6d833b1f9c29e6c5a Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sun, 13 Dec 2020 17:48:03 +0900
Subject: [PATCH] [Improve] study list content-loader

---
 src/components/main/GroupsContentLoader.jsx | 106 ++++++++++++++++++--
 1 file changed, 100 insertions(+), 6 deletions(-)

diff --git a/src/components/main/GroupsContentLoader.jsx b/src/components/main/GroupsContentLoader.jsx
index cd1c023..5ddfb5f 100644
--- a/src/components/main/GroupsContentLoader.jsx
+++ b/src/components/main/GroupsContentLoader.jsx
@@ -16,13 +16,107 @@ const GroupsContentLoader = (props) => (
     <rect x="5" y="20" rx="8" ry="8" width="220" height="40" />
     <rect x="850" y="20" rx="8" ry="8" width="150" height="40" />
 
-    <rect x="18" y="130" rx="8" ry="8" width="304" height="310" />
-    <rect x="350" y="130" rx="8" ry="8" width="304" height="310" />
-    <rect x="680" y="130" rx="8" ry="8" width="304" height="310" />
+    {/* 테두리 */}
+    <rect x="18" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="18" y="475" rx="8" ry="8" width="304" height="7" />
+    <rect x="314" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="18" y="130" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="100" y="160" rx="16" ry="16" width="150" height="30" />
+    <rect x="50" y="240" rx="8" ry="8" width="200" height="10" />
+    <rect x="50" y="270" rx="8" ry="8" width="230" height="10" />
+    <rect x="50" y="300" rx="8" ry="8" width="150" height="10" />
+    <rect x="50" y="330" rx="8" ry="8" width="230" height="10" />
+    <rect x="50" y="360" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="35" y="405" rx="8" ry="8" width="270" height="5" />
+    <rect x="40" y="425" rx="8" ry="8" width="60" height="35" />
+    <rect x="110" y="425" rx="8" ry="8" width="60" height="35" />
 
-    <rect x="18" y="470" rx="8" ry="8" width="304" height="310" />
-    <rect x="350" y="470" rx="8" ry="8" width="304" height="310" />
-    <rect x="680" y="470" rx="8" ry="8" width="304" height="310" />
+    {/* 테두리 */}
+    <rect x="350" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="350" y="475" rx="8" ry="8" width="304" height="7" />
+    <rect x="647" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="350" y="130" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="430" y="160" rx="16" ry="16" width="150" height="30" />
+    <rect x="380" y="240" rx="8" ry="8" width="200" height="10" />
+    <rect x="380" y="270" rx="8" ry="8" width="230" height="10" />
+    <rect x="380" y="300" rx="8" ry="8" width="150" height="10" />
+    <rect x="380" y="330" rx="8" ry="8" width="230" height="10" />
+    <rect x="380" y="360" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="365" y="405" rx="8" ry="8" width="270" height="5" />
+    <rect x="370" y="425" rx="8" ry="8" width="60" height="35" />
+    <rect x="440" y="425" rx="8" ry="8" width="60" height="35" />
+
+    {/* 테두리 */}
+    <rect x="680" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="680" y="475" rx="8" ry="8" width="304" height="7" />
+    <rect x="977" y="130" rx="8" ry="8" width="8" height="350" />
+    <rect x="680" y="130" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="755" y="160" rx="16" ry="16" width="150" height="30" />
+    <rect x="705" y="240" rx="8" ry="8" width="200" height="10" />
+    <rect x="705" y="270" rx="8" ry="8" width="230" height="10" />
+    <rect x="705" y="300" rx="8" ry="8" width="150" height="10" />
+    <rect x="705" y="330" rx="8" ry="8" width="230" height="10" />
+    <rect x="705" y="360" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="695" y="405" rx="8" ry="8" width="270" height="5" />
+    <rect x="700" y="425" rx="8" ry="8" width="60" height="35" />
+    <rect x="770" y="425" rx="8" ry="8" width="60" height="35" />
+
+    {/* 테두리 */}
+    <rect x="18" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="18" y="855" rx="8" ry="8" width="304" height="7" />
+    <rect x="314" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="18" y="510" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="100" y="540" rx="16" ry="16" width="150" height="30" />
+    <rect x="50" y="620" rx="8" ry="8" width="200" height="10" />
+    <rect x="50" y="650" rx="8" ry="8" width="230" height="10" />
+    <rect x="50" y="680" rx="8" ry="8" width="150" height="10" />
+    <rect x="50" y="710" rx="8" ry="8" width="230" height="10" />
+    <rect x="50" y="740" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="35" y="785" rx="8" ry="8" width="270" height="5" />
+    <rect x="40" y="805" rx="8" ry="8" width="60" height="35" />
+    <rect x="110" y="805" rx="8" ry="8" width="60" height="35" />
+
+    {/* 테두리 */}
+    <rect x="350" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="350" y="855" rx="8" ry="8" width="304" height="7" />
+    <rect x="647" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="350" y="510" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="430" y="540" rx="16" ry="16" width="150" height="30" />
+    <rect x="380" y="620" rx="8" ry="8" width="200" height="10" />
+    <rect x="380" y="650" rx="8" ry="8" width="230" height="10" />
+    <rect x="380" y="680" rx="8" ry="8" width="150" height="10" />
+    <rect x="380" y="710" rx="8" ry="8" width="230" height="10" />
+    <rect x="380" y="740" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="365" y="785" rx="8" ry="8" width="270" height="5" />
+    <rect x="370" y="805" rx="8" ry="8" width="60" height="35" />
+    <rect x="440" y="805" rx="8" ry="8" width="60" height="35" />
+
+    {/* 테두리 */}
+    <rect x="680" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="680" y="855" rx="8" ry="8" width="304" height="7" />
+    <rect x="977" y="510" rx="8" ry="8" width="8" height="350" />
+    <rect x="680" y="510" rx="8" ry="8" width="304" height="7" />
+    {/* 내용 */}
+    <rect x="755" y="540" rx="16" ry="16" width="150" height="30" />
+    <rect x="705" y="620" rx="8" ry="8" width="200" height="10" />
+    <rect x="705" y="650" rx="8" ry="8" width="230" height="10" />
+    <rect x="705" y="680" rx="8" ry="8" width="150" height="10" />
+    <rect x="705" y="710" rx="8" ry="8" width="230" height="10" />
+    <rect x="705" y="740" rx="8" ry="8" width="180" height="10" />
+    {/* 태그 */}
+    <rect x="695" y="785" rx="8" ry="8" width="270" height="5" />
+    <rect x="700" y="805" rx="8" ry="8" width="60" height="35" />
+    <rect x="770" y="805" rx="8" ry="8" width="60" height="35" />
 
   </ContentLoader>
 );