Merge pull request #456 from ProjectX-Algoitzy/release/1.6

[FEATURE] 데일리 챌린지

Author: nunomi0

src/APP/user-pages/DailyChallenge/DailyChallenge.dailychallenge.main.jsx

@@ -225,12 +225,20 @@ export default function DailyChallenge() {
               <Styled.AlgorithmTagIcon onClick={handleTagToggle}/>
               <Styled.Tooltip>태그 보기</Styled.Tooltip>
             </Styled.IconWithTooltip>
+            
+            {/* 티어 아이콘 + 레벨 태그 */}
+            <Styled.TierWithLevel>
+              <Styled.IconWithTooltip>
+                <Styled.TierIcon onClick={handleTierToggle} $src={tierSrc}/>
+                <Styled.Tooltip>레벨 보기</Styled.Tooltip>
+              </Styled.IconWithTooltip>
 
-            {/* 티어 아이콘 */}
-            <Styled.IconWithTooltip>
-              <Styled.TierIcon onClick={handleTierToggle} $src={tierSrc}/>
-              <Styled.Tooltip>레벨 보기</Styled.Tooltip>
-            </Styled.IconWithTooltip>
+              {showLevel && challengeData && challengeData.level && (
+                <Styled.LevelTag>
+                  <Styled.LevelTagText>{formatLevel(challengeData.level)}</Styled.LevelTagText>
+                </Styled.LevelTag>
+              )}
+            </Styled.TierWithLevel>
           </Styled.IconContainer>
 
           <Styled.TagContainer $show={showTags || showLevel}>
@@ -241,12 +249,6 @@ export default function DailyChallenge() {
                 </Styled.AlgorithmTag>
               ))
             ) : null}
-            
-            {showLevel && challengeData && challengeData.level && (
-              <Styled.LevelTag>
-                <Styled.LevelTagText>{formatLevel(challengeData.level)}</Styled.LevelTagText>
-              </Styled.LevelTag>
-            )}
           </Styled.TagContainer>
         </Styled.ProblemInfoContainer>
       </Styled.TitleContainer>

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; /* 배경은 기본 비활성, 코알라만 이벤트 */

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;
 `;

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 (
     <itemS.TupleContainer data-delete-yn={undefined}>
-      {/* <itemS.Blank></itemS.Blank> */}
       <itemS.TupleStatus>{item.logType}</itemS.TupleStatus>
       <itemS.TupleTitleBox>
-        <itemS.TupleTitle>
-          {item.problemList?.map((num, idx) => (
-            <itemS.ProblemBlock key={idx}>
-              <itemS.ProblemNumber
-                $index={idx}
-                onClick={() => moveToDetail(num)}
-              >
-                {num} 번
-              </itemS.ProblemNumber>
-              {idx !== item.problemList.length - 1 && (
-                <itemS.Divider>|</itemS.Divider>
-              )}
-            </itemS.ProblemBlock>
-          ))}
-        </itemS.TupleTitle>
+        {/* ✅ 수정된 부분: logType에 따라 조건부 렌더링 */}
+        {item.logType === "사용" ? (
+          // '사용'일 경우 content를 표시
+          <itemS.TupleTitle>{truncateTitle(item.content)}</itemS.TupleTitle>
+        ) : (
+          // '획득'일 경우 기존 problemList를 표시
+          <itemS.TupleTitle>
+            {item.problemList?.map((num, idx) => (
+              <itemS.ProblemBlock key={idx}>
+                <itemS.ProblemNumber
+                  $index={idx}
+                  onClick={() => moveToDetail(num)}
+                >
+                  {num} 번
+                </itemS.ProblemNumber>
+                {idx !== item.problemList.length - 1 && (
+                  <itemS.Divider>|</itemS.Divider>
+                )}
+              </itemS.ProblemBlock>
+            ))}
+          </itemS.TupleTitle>
+        )}
       </itemS.TupleTitleBox>
       <itemS.TupleDate>{formatDate(item.logDate)}</itemS.TupleDate>
       <itemS.TupleView>{item.rewardCount}회</itemS.TupleView>

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};