[Fix/#305] 디자인 QA (#308)

* feat: HostMyPage 엠티 뷰 그래픽 이미지 3배수로 추출 및 너비 조절 * feat: 공지사항 우상단 isPrivate에 따라 칩 추가 * feat: 필요없는 코드 제거 * feat: 참가자 마이 클래스에서 엠티 뷰일 때에는 FilterSelect 안보이게
PICK-PLE · Sep 19, 2024 · a4a4d35 · a4a4d35
1 parent e431eee
commit a4a4d35
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/public/image/graphics/image_spicker_apply.png b/public/image/graphics/image_spicker_apply.png
diff --git a/src/pages/class/components/NoticeCard/NoticeCard.style.ts b/src/pages/class/components/NoticeCard/NoticeCard.style.ts
@@ -15,7 +15,8 @@ export const noticeCardContainer = (theme: Theme) => css`
 `;
 
 export const profileWrapper = css`
-  ${flexGenerator('row', 'flex-start')};
+  ${flexGenerator('row', 'space-between', 'flex-start')};
+  width: 100%;
   gap: 1.2rem;
 `;
 
@@ -27,6 +28,7 @@ export const profileImage = css`
 
 export const profileTextBox = css`
   ${flexGenerator('column', 'center', 'flex-start')};
+  margin-top: 0.4rem;
 `;
 
 export const profilePosition = (theme: Theme) => css`
@@ -97,3 +99,8 @@ export const noticeCommentNumber = (theme: Theme) => css`
   color: ${theme.color.midgray2};
   ${theme.font['body04-m-12']};
 `;
+
+export const profileCardWrapper = css`
+  ${flexGenerator('row', 'flex-start', 'center')}
+  gap:1.2rem
+`;
diff --git a/src/pages/class/components/NoticeCard/NoticeCard.tsx b/src/pages/class/components/NoticeCard/NoticeCard.tsx
@@ -1,4 +1,5 @@
-import { IcSpickerMark, IcComment } from '@svg';
+import { Label } from '@components';
+import { IcSpickerMark, IcComment, IcLock, IcUnlock } from '@svg';
 import { formatCreatedDate } from '@utils';
 
 import {
@@ -19,6 +20,7 @@ import {
   noticeComment,
   noticeCommentNumber,
   noticeWrapper,
+  profileCardWrapper,
 } from './NoticeCard.style';
 
 import { components } from '@schema';
@@ -31,20 +33,41 @@ interface NoticeCardProps {
 }
 
 const NoticeCard = ({ noticeData, onClick }: NoticeCardProps) => {
-  const { hostNickName, hostImageUrl, title, content, date, noticeImageUrl, commentNumber } =
-    noticeData;
+  const {
+    hostNickName,
+    hostImageUrl,
+    title,
+    content,
+    date,
+    noticeImageUrl,
+    commentNumber,
+    isPrivate,
+  } = noticeData;
 
   return (
     <article css={noticeCardContainer} onClick={onClick}>
       <section css={profileWrapper}>
-        <img css={profileImage} src={hostImageUrl} alt={`${hostNickName}의 프로필`} />
-        <div css={profileTextBox}>
-          <span css={profilePosition}>스픽커</span>
-          <div css={profileHostInfo}>
-            <span css={profileName}>{hostNickName}</span>
-            <IcSpickerMark css={porfileHostMark} />
+        <div css={profileCardWrapper}>
+          <img css={profileImage} src={hostImageUrl} alt={`${hostNickName}의 프로필`} />
+          <div css={profileTextBox}>
+            <span css={profilePosition}>스픽커</span>
+            <div css={profileHostInfo}>
+              <span css={profileName}>{hostNickName}</span>
+              <IcSpickerMark css={porfileHostMark} />
+            </div>
           </div>
         </div>
+        <div>
+          {isPrivate ? (
+            <Label variant="category" icon={<IcLock />}>
+              참가자
+            </Label>
+          ) : (
+            <Label variant="category" icon={<IcUnlock />}>
+              전체
+            </Label>
+          )}
+        </div>
       </section>
       <section css={noticeWrapper}>
         <h3 css={noticeTitle}>{title}</h3>

diff --git a/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx b/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx
@@ -77,7 +77,7 @@ const GuestMyClass = () => {
         </article>
 
         <main css={mainWrapper}>
-          {activeTab === '신청한' && (
+          {activeTab === '신청한' && (currentData?.length ?? 0) > 0 && (
             <article css={filterSelectWrapper}>
               <div css={filterSelectStyle}>
                 <FilterSelect

diff --git a/src/pages/myPage/components/HostMyPageEmptyView/HostMyPageEmptyView.style.ts b/src/pages/myPage/components/HostMyPageEmptyView/HostMyPageEmptyView.style.ts
@@ -3,8 +3,8 @@ import { Theme, css } from '@emotion/react';
 import { flexGenerator } from '@styles/generator';
 
 export const hostMyPageEmptyViewContainer = css`
-  height: calc(100dvh - 12.55rem);
   ${flexGenerator('column')};
+  margin-top: 10.1rem;
   width: 100%;
   gap: 2rem;
 `;
@@ -28,6 +28,7 @@ export const textWrapper = css`
 `;
 
 export const buttonWrapper = css`
-  width: 100%;
-  padding: 0 9.3rem;
+  ${flexGenerator('row', 'center', ' center')};
+  width: 17.7rem;
+  gap: 1rem;
 `;