refactor: 내 프로필 아이디어 탭 및 북마크 섹션 스켈레톤 적용, 상대 프로필 아이디어 탭 스켈레톤 적용 (#151)

src/pages/Profile/components/MyProfile/MyProfile.page.tsx

@@ -8,6 +8,7 @@ import IdeaSection from './IdeaSection';
 import Logo from '../../../../layouts/Logo';
 import { Member } from '../../types';
 import ProfileInfoSection from '../ProfileInfoSection';
+import SectionSkeleton from '../SectionSkeleton';
 
 type Props = {
   userId: number;
@@ -34,15 +35,15 @@ const MyProfile = ({ userId, memberInfo }: Props) => {
           <TabLayout maxWidth={420} height="100%">
             <TabLayout.Tab label="아이디어">
               <TabPanelBox>
-                <Suspense fallback={<></>}>
+                <Suspense fallback={<SectionSkeleton />}>
                   <IdeaSection userId={userId} />
                 </Suspense>
               </TabPanelBox>
             </TabLayout.Tab>
 
             <TabLayout.Tab label="북마크">
               <TabPanelBox>
-                <Suspense fallback={<></>}>
+                <Suspense fallback={<SectionSkeleton />}>
                   <BookmarkSection />
                 </Suspense>
               </TabPanelBox>

src/pages/Profile/components/OtherProfile/OtherProfile.page.tsx

@@ -6,6 +6,7 @@ import IdeaSection from './IdeaSection';
 import Back from '../../../../layouts/Back';
 import { Member } from '../../types';
 import ProfileInfoSection from '../ProfileInfoSection';
+import SectionSkeleton from '../SectionSkeleton';
 
 type Props = {
   userId: number;
@@ -25,7 +26,7 @@ const OtherProfile = ({ userId, memberInfo }: Props) => {
         <ProfileWrapper>
           <ProfileInfoSection memberInfo={memberInfo} />
           <TabPanelBox>
-            <Suspense fallback={<></>}>
+            <Suspense fallback={<SectionSkeleton />}>
               <IdeaSection userId={userId} />
             </Suspense>
           </TabPanelBox>

src/pages/Profile/components/SectionSkeleton.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import { Box, Skeleton, Spacer } from 'concept-be-design-system';
+
+const SectionSkeleton = () => {
+  return (
+    <Wrapper>
+      <CardSkeleton width="331px" height="220px" />
+      <Spacer size={20} />
+      <CardSkeleton width="331px" height="220px" />
+      <Spacer size={20} />
+      <CardSkeleton width="331px" height="220px" />
+    </Wrapper>
+  );
+};
+
+export default SectionSkeleton;
+
+const Wrapper = styled(Box)`
+  max-width: 335px;
+  margin: 0 auto;
+
+  @media (max-width: 375px) {
+    margin: 0;
+  }
+`;
+
+const CardSkeleton = styled(Skeleton)`
+  @media (max-width: 375px) {
+    width: 100%;
+  }
+`;