fix: empty view 공통 컴포넌트화

SWEET-DEVELOPERS · Mar 15, 2024 · 929c414 · 929c414
1 parent 954c966
commit 929c414
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 45 deletions.
diff --git a/src/components/CardRoom/DoneCardRoom.tsx b/src/components/CardRoom/DoneCardRoom.tsx
@@ -13,7 +13,7 @@ const DoneCardRoom = ({ user, srcImage, userCount, onClick }: DoneCardRoomType)
   const multiline = user.length > 3 || (/[a-zA-Z]/.test(user) && user.length > 5);
   return (
     <S.CardRoomWrapper onClick={onClick}>
-      <div>
+      <>
         <S.RoomImgWrapper src={srcImage} />
         <S.Text>
           {multiline ? (
@@ -28,7 +28,7 @@ const DoneCardRoom = ({ user, srcImage, userCount, onClick }: DoneCardRoomType)
           <IcUser style={{ width: '1.6rem', height: '1.6rem', color: '#ACA7A9' }} />
           {userCount}
         </S.CountUser>
-      </div>
+      </>
       <S.TagWrapper>
         <Type3Tag tag='토너먼트 완료' />
       </S.TagWrapper>

diff --git a/src/components/CardRoom/EditCardRoom.tsx b/src/components/CardRoom/EditCardRoom.tsx
@@ -25,7 +25,7 @@ const EditCardRoom = ({ user, srcImage, userCount, roomId, date, onClick }: Edit
   return (
     <S.WholeWrapper>
       <S.CardRoomWrapper onClick={onClick}>
-        <div>
+        <>
           <S.RoomImgWrapper src={srcImage} />
           <S.Text>
             {multiline ? (
@@ -48,7 +48,7 @@ const EditCardRoom = ({ user, srcImage, userCount, roomId, date, onClick }: Edit
             />
             {userCount}
           </S.CountUser>
-        </div>
+        </>
         <S.TagWrapper>
           <Type1Tag tag='개설자' />
           {!isFuture ? <Type2Tag tag='토너먼트 진행 중' /> : <Type2Tag tag='선물 등록 중' />}

diff --git a/src/components/CardRoom/ProgressCardRoom.tsx b/src/components/CardRoom/ProgressCardRoom.tsx
@@ -18,7 +18,7 @@ const ProgressCardRoom = ({ user, srcImage, userCount, date, onClick }: Progress
 
   return (
     <S.CardRoomWrapper onClick={onClick}>
-      <div>
+      <>
         <S.RoomImgWrapper src={srcImage} />
         <S.Text>
           {multiline ? (
@@ -41,7 +41,7 @@ const ProgressCardRoom = ({ user, srcImage, userCount, date, onClick }: Progress
           />
           {userCount}
         </S.CountUser>
-      </div>
+      </>
       <S.TagWrapper>
         {!isFuture ? <Type2Tag tag='토너먼트 진행 중' /> : <Type2Tag tag='선물 등록 중' />}
       </S.TagWrapper>

diff --git a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts b/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts
@@ -17,15 +17,3 @@ export const RoomWrapper = styled.div`
   gap: 1.5rem;
   padding: 1.6rem 0;
 `;
-
-export const EmptyWrapper = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexCenter({})};
-  height: 100%;
-  gap: 1.2rem;
-  margin: 0 2rem;
-`;
-
-export const EmptyText = styled.div`
-  ${({ theme: { fonts } }) => fonts.body_10};
-  color: ${({ theme: { colors } }) => colors.G_07};
-`;
diff --git a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx b/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx
@@ -6,6 +6,7 @@ import useGetDoneRoom from '../../../../hooks/queries/member/useGetClosedRoom';
 import { ClosedRoomArrayType } from '../../../../types/member';
 import * as S from './DetailDoneRoom.style';
 import LeftIconHeader from '../../../../components/LeftIconHeader/LeftIconHeader';
+import EmptyView from '../EmptyView/EmptyView';
 
 const DetailDoneRoom = () => {
   const navigate = useNavigate();
@@ -30,11 +31,7 @@ const DetailDoneRoom = () => {
             {data.map((item, index) => renderDoneRoomCard(item, index))}
           </S.RoomWrapper>
         ) : (
-          <S.EmptyWrapper title='종료된 선물방'>
-            <IcLogoEmpty style={{ width: '8rem', height: '6.4rem' }} />
-            <S.EmptyText>준비했던 선물이 없어요</S.EmptyText>
-            <BtnSmallStroke customStyle={{ margin: '1.6rem' }}>새로운 선물 준비하기</BtnSmallStroke>
-          </S.EmptyWrapper>
+          <EmptyView title='종료된 선물방' />
         )}
       </>
     </S.DetailDoneRoomWrapper>

diff --git a/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts b/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts
@@ -17,16 +17,3 @@ export const RoomWrapper = styled.div`
   gap: 1.5rem;
   padding: 1.6rem 0;
 `;
-
-export const EmptyWrapper = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexCenter({})};
-  height: 100%;
-  gap: 1.2rem;
-  margin: 0 2rem;
-`;
-
-export const EmptyText = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexCenter({})};
-  ${({ theme: { fonts } }) => fonts.body_10};
-  color: ${({ theme: { colors } }) => colors.G_07};
-`;
diff --git a/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgressRoom.tsx b/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgressRoom.tsx
@@ -8,6 +8,7 @@ import DateCheck from '../../../../components/DateCheck/DateCheck';
 import { ActiveRoomArrayType } from '../../../../types/member';
 import * as S from './DetailProgress.style';
 import LeftIconHeader from '../../../../components/LeftIconHeader/LeftIconHeader';
+import EmptyView from '../EmptyView/EmptyView';
 
 const DetailProgressRoom = () => {
   const navigate = useNavigate();
@@ -40,11 +41,7 @@ const DetailProgressRoom = () => {
         {Array.isArray(data) && data.length > 0 ? (
           <S.RoomWrapper>{data.map((item, index) => renderRoomCard(item, index))}</S.RoomWrapper>
         ) : (
-          <S.EmptyWrapper title='진행중인 선물방'>
-            <IcLogoEmpty style={{ width: '8rem', height: '6.4rem' }} />
-            <S.EmptyText>준비했던 선물이 없어요</S.EmptyText>
-            <BtnSmallStroke customStyle={{ margin: '1.6rem' }}>새로운 선물 준비하기</BtnSmallStroke>
-          </S.EmptyWrapper>
+          <EmptyView title='진행중인 선물방' />
         )}
       </>
     </S.DetailProgressRoomWrapper>

diff --git a/src/pages/MyPage/Detail/EmptyView/EmptyView.style.ts b/src/pages/MyPage/Detail/EmptyView/EmptyView.style.ts
@@ -2,9 +2,13 @@ import styled from 'styled-components';
 
 export const EmptyViewWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
+  height: 100%;
+  gap: 1.2rem;
+  margin: 0 2rem;
 `;
 
-export const Text = styled.div`
+export const EmptyText = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
   ${({ theme: { fonts } }) => fonts.body_10};
   color: ${({ theme: { colors } }) => colors.G_07};
 `;
diff --git a/src/pages/MyPage/Detail/EmptyView/EmptyView.tsx b/src/pages/MyPage/Detail/EmptyView/EmptyView.tsx
@@ -16,9 +16,11 @@ const EmptyView = ({ title }: EmptyViewType) => {
   return (
     <S.EmptyViewWrapper>
       <DetailHeader title={title} />
-      <IcLogoEmpty />
-      <S.Text>준비했던 선물이 없어요</S.Text>
-      <BtnSmallStroke onClick={handleClickButton}>새로운 선물 준바하기</BtnSmallStroke>
+      <IcLogoEmpty style={{ width: '8rem', height: '6.4rem' }} />
+      <S.EmptyText>준비했던 선물이 없어요</S.EmptyText>
+      <BtnSmallStroke onClick={handleClickButton} customStyle={{ margin: '1.6rem' }}>
+        새로운 선물 준바하기
+      </BtnSmallStroke>
     </S.EmptyViewWrapper>
   );
 };