diff --git a/src/APP/user-pages/DailyChallenge/DailyChallenge.dailychallenge.main.jsx b/src/APP/user-pages/DailyChallenge/DailyChallenge.dailychallenge.main.jsx index 518e67b..9da195a 100644 --- a/src/APP/user-pages/DailyChallenge/DailyChallenge.dailychallenge.main.jsx +++ b/src/APP/user-pages/DailyChallenge/DailyChallenge.dailychallenge.main.jsx @@ -225,12 +225,20 @@ export default function DailyChallenge() { 태그 보기 + + {/* 티어 아이콘 + 레벨 태그 */} + + + + 레벨 보기 + - {/* 티어 아이콘 */} - - - 레벨 보기 - + {showLevel && challengeData && challengeData.level && ( + + {formatLevel(challengeData.level)} + + )} + @@ -241,12 +249,6 @@ export default function DailyChallenge() { )) ) : null} - - {showLevel && challengeData && challengeData.level && ( - - {formatLevel(challengeData.level)} - - )} diff --git a/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.background.styles.js b/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.background.styles.js index 5de8086..2781cd9 100644 --- a/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.background.styles.js +++ b/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.background.styles.js @@ -4,6 +4,7 @@ import styled, { css } from "styled-components"; /* 한 캔버스 전체 래퍼 */ export const Wrap = styled.div` position: absolute; + height: 120vw; inset: 0; overflow: hidden; pointer-events: none; /* 배경은 기본 비활성, 코알라만 이벤트 */ diff --git a/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.main.styles.js b/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.main.styles.js index e1d17c4..1de3454 100644 --- a/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.main.styles.js +++ b/src/APP/user-pages/DailyChallenge/Styled/DailyChallenge.dailychallenge.main.styles.js @@ -97,14 +97,13 @@ export const ProblemInfoContainer = styled.div` display: flex; flex-direction: column; justify-content: center; - align-items: center; ` export const IconContainer = styled.div` width: 100%; display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; justify-content: center; gap: 1.542rem; margin-bottom: 0.583rem; @@ -185,6 +184,7 @@ export const Tooltip = styled.div` `; export const IconWithTooltip = styled.div` + width: 3.8rem; position: relative; display: inline-flex; align-items: center; @@ -307,4 +307,12 @@ export const LevelTagText = styled.div` font-size: 0.667rem; font-weight: 500; color: ${tokens.colors.White}; +`; + +export const TierWithLevel = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; `; \ No newline at end of file