#115 style: 챌린지 블록과 일반 블록 UI 구분

AJD-Archive · Nov 25, 2024 · 5e7c48d · 5e7c48d
1 parent 024bc3d
commit 5e7c48d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
@@ -25,6 +25,7 @@ type Props = {
   picture?: string;
   progress?: string;
   highlightColor?: string;
+  type?: string;
 };
 
 const Block = ({
@@ -41,6 +42,7 @@ const Block = ({
   picture,
   progress,
   highlightColor,
+  type,
 }: Props) => {
   const [isRemove, setIsRemove] = useState(true);
   const { isModalOpen, openModal, handleYesClick, handleNoClick } = useModal();
@@ -104,6 +106,12 @@ const Block = ({
                 }
               }}
             >
+              {type === 'CHALLENGE' && (
+                <S.ChallengeTypeWrapper>
+                  <p>도전! 챌린지</p>
+                </S.ChallengeTypeWrapper>
+              )}
+
               <Flex justifyContent="space-between">
                 <h3>{title}</h3>
                 <span>{dDay}</span>

diff --git a/src/components/NotStartedDashboard.tsx b/src/components/NotStartedDashboard.tsx
@@ -95,6 +95,7 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     picture={block.picture ?? ''}
                     progress={settings.progress ?? ''}
                     highlightColor={settings.highlightColor ?? ''}
+                    type={block.type ?? ''}
                   />
                 </div>
               );

diff --git a/src/styles/DashboardStyled.tsx b/src/styles/DashboardStyled.tsx
@@ -253,6 +253,24 @@ export const BlockContainer = styled.div<{
   }
 `;
 
+export const ChallengeTypeWrapper = styled.p`
+  p {
+    background: linear-gradient(
+      90deg,
+      ${theme.color.main},
+      ${theme.color.main2},
+      ${theme.color.main3}
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  /* p {
+    color: ${theme.color.gray};
+  } */
+`;
+
 export const UserName = styled.p`
   font-size: ${theme.font.size.caption};
   color: ${theme.color.gray};