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 diff --git a/src/APP/user-pages/Mypage/Mypage.mypage.challenge.tuple.jsx b/src/APP/user-pages/Mypage/Mypage.mypage.challenge.tuple.jsx index daf1b7b..4bf8809 100644 --- a/src/APP/user-pages/Mypage/Mypage.mypage.challenge.tuple.jsx +++ b/src/APP/user-pages/Mypage/Mypage.mypage.challenge.tuple.jsx @@ -1,10 +1,7 @@ -// import React, { useEffect, useContext } from "react"; -// import { useNavigate } from "react-router-dom"; +import React from "react"; import * as itemS from "./Styled/Mypage.mypage.challenge.tuple.styles"; export default function ChallengeTuple({ item }) { - // const navigate = useNavigate(); - const formatDate = (createdTime) => { const date = new Date(createdTime); const year = date.getFullYear(); @@ -13,8 +10,9 @@ export default function ChallengeTuple({ item }) { return `${year}.${month}.${day}`; }; + // content가 너무 길 경우를 대비한 함수 (선택적으로 사용) const truncateTitle = (name) => { - if (name.length > 30) { + if (name && name.length > 30) { return name.slice(0, 29) + "..."; } return name; @@ -26,24 +24,30 @@ export default function ChallengeTuple({ item }) { return ( - {/* */} {item.logType} - - {item.problemList?.map((num, idx) => ( - - moveToDetail(num)} - > - {num} 번 - - {idx !== item.problemList.length - 1 && ( - | - )} - - ))} - + {/* ✅ 수정된 부분: logType에 따라 조건부 렌더링 */} + {item.logType === "사용" ? ( + // '사용'일 경우 content를 표시 + {truncateTitle(item.content)} + ) : ( + // '획득'일 경우 기존 problemList를 표시 + + {item.problemList?.map((num, idx) => ( + + moveToDetail(num)} + > + {num} 번 + + {idx !== item.problemList.length - 1 && ( + | + )} + + ))} + + )} {formatDate(item.logDate)} {item.rewardCount}회 diff --git a/src/APP/user-pages/Mypage/Styled/Mypage.mypage.myboard.tuple.styles.js b/src/APP/user-pages/Mypage/Styled/Mypage.mypage.myboard.tuple.styles.js index e2adfdf..3429c9d 100644 --- a/src/APP/user-pages/Mypage/Styled/Mypage.mypage.myboard.tuple.styles.js +++ b/src/APP/user-pages/Mypage/Styled/Mypage.mypage.myboard.tuple.styles.js @@ -9,6 +9,7 @@ export const TupleContainer = styled.div` flex-direction: row; justify-content: center; align-items: center; + background-color: ${tokens.colors.White}; width: 50rem; border-bottom: 0.04rem solid ${tokens.colors.B_Grey_3};