Merge pull request #82 from Chaellimi/feat/#80

[Feat/#80] 챌린지 현황페이지 퍼블리싱 및 API 제작

Author: Jamkris

public/icons/Challenge/progress/Coin.tsx

@@ -35,136 +35,27 @@ const CoinIcon = ({ disabled, width = 60, height = 60 }: OwnProps) => {
         </svg>
       ) : (
         <svg
-          width="72"
-          height="72"
-          viewBox="0 0 72 72"
-          fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          width="61"
+          height="60"
+          viewBox="0 0 61 60"
+          fill="none"
         >
-          <g clipPath="url(#clip0_1116_6888)">
-            <g filter="url(#filter0_dii_1116_6888)">
-              <rect width="72" height="72" rx="36" fill="#EFEFEF" />
-              <rect
-                x="7.20007"
-                y="7.2002"
-                width="57.6"
-                height="57.6"
-                rx="28.8"
-                stroke="white"
-                strokeWidth="1.8"
-                strokeMiterlimit="16"
-                strokeDasharray="5.14 5.14"
-              />
-              <path
-                d="M33.943 25.8137C33.4982 20.274 40.1068 18.8514 42.358 23.4514C42.4668 23.6735 43.1332 24.9093 43.526 25.7228C43.7424 26.1712 43.573 26.5778 43.1422 26.8273L38.5201 29.5051C34.8319 32.4518 37.1925 37.786 41.57 37.2531C41.6369 37.245 41.6314 37.1653 41.5641 37.1652L41.4645 37.1682C40.8074 37.1901 40.1343 37.1322 39.5592 36.8137C36.8962 35.3382 36.5938 31.6983 39.3151 29.7121C40.5639 28.8008 42.9756 27.4995 44.3541 26.76C49.1764 25.2846 51.2392 27.1736 52.4635 31.4426C56.6902 46.2088 38.9167 57.2464 26.7379 47.8918C23.4935 45.3999 22.014 42.3554 20.111 39.0549C19.5638 37.8456 19.1264 36.4828 18.9616 35.1965C18.3835 30.7028 21.9646 28.5069 25.7418 30.3654C25.7687 30.3786 25.7992 30.3504 25.7887 30.3225C23.6325 24.662 29.9879 21.2539 33.2594 25.2141L33.8873 25.842C33.9089 25.8636 33.9454 25.8441 33.943 25.8137ZM32.4264 40.5451C31.2185 40.3695 30.0785 40.3695 29.2418 40.4133C28.8232 40.4352 28.4787 40.4678 28.2389 40.4953C28.1192 40.509 28.0249 40.5214 27.9606 40.5305C27.9285 40.535 27.9032 40.5386 27.8864 40.5412C27.8781 40.5425 27.8712 40.5444 27.8668 40.5451C27.8649 40.5453 27.863 40.5449 27.8619 40.5451L27.861 40.5461H27.86C27.7373 40.5663 27.6535 40.6822 27.6735 40.8049C27.6911 40.9123 27.7826 40.9892 27.8873 40.9934L27.9323 40.9904H27.9332C27.934 40.9903 27.9355 40.9897 27.9371 40.9894C27.9408 40.9889 27.9472 40.9886 27.9547 40.9875C27.9699 40.9852 27.993 40.981 28.0231 40.9768C28.0838 40.9682 28.1741 40.9568 28.2897 40.9435C28.5215 40.917 28.857 40.8848 29.2653 40.8635C30.0827 40.8207 31.1917 40.8212 32.3619 40.9914C34.64 41.3227 37.0868 42.2859 38.1412 44.756L38.2389 44.9992L38.2594 45.0402C38.3151 45.1289 38.4271 45.1691 38.5289 45.131C38.631 45.0927 38.6891 44.9886 38.6725 44.885L38.6608 44.841L38.5543 44.5764C37.4073 41.8907 34.7575 40.8842 32.4264 40.5451Z"
-                fill="#C9C9C9"
-              />
-            </g>
-          </g>
-          <defs>
-            <filter
-              id="filter0_dii_1116_6888"
-              x="0"
-              y="0"
-              width="78"
-              height="77.1429"
-              filterUnits="userSpaceOnUse"
-              colorInterpolationFilters="sRGB"
-            >
-              <feFlood floodOpacity="0" result="BackgroundImageFix" />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha"
-              />
-              <feMorphology
-                radius="1.71429"
-                operator="erode"
-                in="SourceAlpha"
-                result="effect1_dropShadow_1116_6888"
-              />
-              <feOffset dx="4.28571" dy="3.42857" />
-              <feGaussianBlur stdDeviation="1.71429" />
-              <feComposite in2="hardAlpha" operator="out" />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="BackgroundImageFix"
-                result="effect1_dropShadow_1116_6888"
-              />
-              <feBlend
-                mode="normal"
-                in="SourceGraphic"
-                in2="effect1_dropShadow_1116_6888"
-                result="shape"
-              />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha"
-              />
-              <feMorphology
-                radius="0.857143"
-                operator="dilate"
-                in="SourceAlpha"
-                result="effect2_innerShadow_1116_6888"
-              />
-              <feOffset dx="3.42857" dy="3.42857" />
-              <feGaussianBlur stdDeviation="0.9" />
-              <feComposite
-                in2="hardAlpha"
-                operator="arithmetic"
-                k2="-1"
-                k3="1"
-              />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0.804669 0 0 0 0 0.804669 0 0 0 0 0.804669 0 0 0 0.25 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="shape"
-                result="effect2_innerShadow_1116_6888"
-              />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha"
-              />
-              <feMorphology
-                radius="6"
-                operator="dilate"
-                in="SourceAlpha"
-                result="effect3_innerShadow_1116_6888"
-              />
-              <feOffset dx="-6" dy="-3.42857" />
-              <feGaussianBlur stdDeviation="1.71429" />
-              <feComposite
-                in2="hardAlpha"
-                operator="arithmetic"
-                k2="-1"
-                k3="1"
-              />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="effect2_innerShadow_1116_6888"
-                result="effect3_innerShadow_1116_6888"
-              />
-            </filter>
-            <clipPath id="clip0_1116_6888">
-              <rect width="72" height="72" fill="white" />
-            </clipPath>
-          </defs>
+          <rect
+            x="1.70007"
+            y="1.2002"
+            width="57.6"
+            height="57.6"
+            rx="28.8"
+            stroke="white"
+            strokeWidth="1.8"
+            strokeMiterlimit="16"
+            strokeDasharray="5.14 5.14"
+          />
+          <path
+            d="M28.443 19.8137C27.9982 14.274 34.6068 12.8514 36.858 17.4514C36.9668 17.6735 37.6332 18.9093 38.026 19.7228C38.2424 20.1712 38.073 20.5778 37.6422 20.8273L33.0201 23.5051C29.3319 26.4518 31.6925 31.786 36.07 31.2531C36.1369 31.245 36.1314 31.1653 36.0641 31.1652L35.9645 31.1682C35.3074 31.1901 34.6343 31.1322 34.0592 30.8137C31.3962 29.3382 31.0938 25.6983 33.8151 23.7121C35.0639 22.8008 37.4756 21.4995 38.8541 20.76C43.6764 19.2846 45.7392 21.1736 46.9635 25.4426C51.1902 40.2088 33.4167 51.2464 21.2379 41.8918C17.9935 39.3999 16.514 36.3554 14.611 33.0549C14.0638 31.8456 13.6264 30.4828 13.4616 29.1965C12.8835 24.7028 16.4646 22.5069 20.2418 24.3654C20.2687 24.3786 20.2992 24.3504 20.2887 24.3225C18.1325 18.662 24.4879 15.2539 27.7594 19.2141L28.3873 19.842C28.4089 19.8636 28.4454 19.8441 28.443 19.8137ZM26.9264 34.5451C25.7185 34.3695 24.5785 34.3695 23.7418 34.4133C23.3232 34.4352 22.9787 34.4678 22.7389 34.4953C22.6192 34.509 22.5249 34.5214 22.4606 34.5305C22.4285 34.535 22.4032 34.5386 22.3864 34.5412C22.3781 34.5425 22.3712 34.5444 22.3668 34.5451C22.3649 34.5453 22.363 34.5449 22.3619 34.5451L22.361 34.5461H22.36C22.2373 34.5663 22.1535 34.6822 22.1735 34.8049C22.1911 34.9123 22.2826 34.9892 22.3873 34.9934L22.4323 34.9904H22.4332C22.434 34.9903 22.4355 34.9897 22.4371 34.9894C22.4408 34.9889 22.4472 34.9886 22.4547 34.9875C22.4699 34.9852 22.493 34.981 22.5231 34.9768C22.5838 34.9682 22.6741 34.9568 22.7897 34.9435C23.0215 34.917 23.357 34.8848 23.7653 34.8635C24.5827 34.8207 25.6917 34.8212 26.8619 34.9914C29.14 35.3227 31.5868 36.2859 32.6412 38.756L32.7389 38.9992L32.7594 39.0402C32.8151 39.1289 32.9271 39.1691 33.0289 39.131C33.131 39.0927 33.1891 38.9886 33.1725 38.885L33.1608 38.841L33.0543 38.5764C31.9073 35.8907 29.2575 34.8842 26.9264 34.5451Z"
+            fill="#C9C9C9"
+          />
         </svg>
       )}
     </>

src/app/(private)/()/page.tsx

@@ -13,6 +13,7 @@ import {
   useGetPopularChallenge,
 } from '@/service/Challenge/challenge.query';
 import Loading from '@/components/shared/Loading';
+import { useRouter } from 'next/navigation';
 
 interface ParticipatingChallenge {
   challengeId: number;
@@ -47,6 +48,8 @@ export interface ChallengeWithParticipantCount {
 }
 
 const Home = () => {
+  const router = useRouter();
+
   const [isSearchbarVisible, setIsSearchbarVisible] = useState(false);
   const [searchText, setSearchText] = useState('');
 
@@ -66,15 +69,24 @@ const Home = () => {
     return `${certifiedCount}/${total}`;
   }
 
+  function getCompletedChallengeCount() {
+    return ParticipatingChallengeData?.data.filter(
+      (item: ParticipatingChallenge) => item.achievementRate >= 100
+    ).length;
+  }
+
   if (getParticipatingChallengePending || getPopularChallengePending) {
     return <Loading />;
   }
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full cursor-pointer">
       <Header type="logo" icon={<PointIcon />} iconClick="/point" />
 
-      <div className="px-6">
+      <div
+        className="flex-1 flex flex-col gap-2 px-6 mt-2 pb-[5rem] overflow-y-scroll scrollbar-hide overscroll-contain"
+        style={{ height: 'calc(100% - 3rem)' }}
+      >
         {/* Search Bar */}
         <Header
           type="searchNoBack"
@@ -102,17 +114,60 @@ const Home = () => {
             <div className="flex w-full overflow-scroll gap-[0.62rem] scrollbar-hide">
               {ParticipatingChallengeData?.data.map(
                 (item: ParticipatingChallenge) => {
-                  return (
-                    <ActiveChallenge
-                      key={item.challengeId}
-                      isActive={item.isCertifiedToday}
-                      progress={item.achievementRate}
-                      title={item.challenge.title}
-                      time={'고정값'}
-                      imgURL={item.challenge.imgURL}
-                      link={`/challenge/${item.challengeId}/certification`}
-                    />
-                  );
+                  if (item.achievementRate >= 100) {
+                    return '';
+                  } else {
+                    return (
+                      <ActiveChallenge
+                        key={item.challengeId}
+                        isActive={
+                          item.isCertifiedToday || item.achievementRate >= 100
+                        }
+                        progress={item.achievementRate}
+                        title={item.challenge.title}
+                        time={'고정값'}
+                        imgURL={item.challenge.imgURL}
+                        certificationLink={`/challenge/${item.challengeId}/certification`}
+                        progressLink={`/challenge/${item.challengeId}/progress`}
+                      />
+                    );
+                  }
+                }
+              )}
+            </div>
+          </div>
+        ) : null}
+
+        {/* Complete Challenge */}
+        {ParticipatingChallengeData?.data.length != 0 ? (
+          <div className="flex flex-col gap-2 mt-5">
+            <div className="flex items-center justify-between">
+              <div className="text-he">완료한 챌린지</div>
+              <div className="text-gray-300 text-fn">
+                총 {getCompletedChallengeCount()}개 완료
+              </div>
+            </div>
+
+            <div className="flex w-full overflow-scroll gap-[0.62rem] scrollbar-hide">
+              {ParticipatingChallengeData?.data.map(
+                (item: ParticipatingChallenge) => {
+                  if (item.achievementRate >= 100) {
+                    return (
+                      <ActiveChallenge
+                        key={item.challengeId}
+                        isActive={
+                          item.isCertifiedToday || item.achievementRate >= 100
+                        }
+                        title={item.challenge.title}
+                        time={'고정값'}
+                        imgURL={item.challenge.imgURL}
+                        certificationLink={`/challenge/${item.challengeId}/certification`}
+                        progressLink={`/challenge/${item.challengeId}/progress`}
+                      />
+                    );
+                  } else {
+                    return '';
+                  }
                 }
               )}
             </div>
@@ -121,7 +176,12 @@ const Home = () => {
 
         {/* Hot Challenge */}
         <div className="flex flex-col gap-2 mt-5">
-          <div className="flex items-center justify-between">
+          <div
+            className="flex items-center justify-between"
+            onClick={() => {
+              router.push('/challenge');
+            }}
+          >
             <div className="text-he">요즘 뜨는 챌린지</div>
             <ArrowIcon width="24" height="24" location="right" />
           </div>
@@ -133,7 +193,7 @@ const Home = () => {
                   count={item.participantCount}
                   title={item.title}
                   imgUrl={item.imgURL}
-                  link={`/challenge/${item.id}`}
+                  link={`/challenge/${item.id}?back=/`}
                 />
               )
             )}

src/app/(private)/challenge/[id]/all/page.tsx

@@ -5,8 +5,10 @@ import Header from '@/components/shared/Header';
 import { CoinIcon, InfoIcon } from '@public/icons/Challenge/progress';
 import { useParams } from 'next/navigation';
 import useStatusBarBridge from '@/lib/hooks/useStatusBarBridge';
+import { useGetChallengeProgressLog } from '@/service/Challenge/challenge.query';
+import Loading from '@/components/shared/Loading';
 
-const ALl = () => {
+const ALL = () => {
   const { id } = useParams();
 
   useStatusBarBridge({
@@ -15,34 +17,71 @@ const ALl = () => {
     bottomBackgroundColor: '#FFF0E5',
   });
 
+  const { data: data, isLoading } = useGetChallengeProgressLog(id as string);
+  const progressLog = data?.data;
+
+  const getChallengeDates = (joinedAt: string, totalDay: number): string[] => {
+    const start = new Date(joinedAt);
+    return Array.from({ length: totalDay }).map((_, i) => {
+      const d = new Date(start);
+      d.setDate(start.getDate() + i);
+      return d.toISOString().split('T')[0];
+    });
+  };
+
+  const challengeDates = getChallengeDates(
+    progressLog.joinedAt,
+    progressLog.totalDay
+  );
+  const certifiedSet = new Set(progressLog.certifiedDays || []);
+
+  const today = new Date();
+  today.setHours(23, 59, 59, 59);
+
+  if (isLoading || !progressLog) {
+    return <Loading />;
+  }
+
   return (
-    <div className="flex flex-col w-full h-full pb-4 overflow-y-auto bg-primary-light gap-[0.62rem]">
-      <Header
-        type="default"
-        title="진행사항"
-        icon={<InfoIcon />}
-        backClick={`/challenge/${id}/progress`}
-      />
+    <div className="flex flex-col w-full h-full pb-4 overflow-y-auto bg-primary-light gap-[0.62rem] custom601:mt-[-40px]">
+      <div className="bg-primary-light custom601:pt-[40px] min-h-fit">
+        <Header
+          type="default"
+          title="진행사항"
+          icon={<InfoIcon />}
+          backClick={`/challenge/${id}/progress`}
+        />
+      </div>
 
       <div className="flex flex-col gap-[0.62rem] w-full items-center px-6">
         <div className="w-full px-[0.62rem] py-5 bg-gray-white rounded-[1.25rem]">
           <div className="grid grid-cols-3 gap-y-4 gap-x-2 justify-items-center">
-            {Array.from({ length: 30 }).map((_, index) => (
-              <div
-                key={index}
-                className="flex flex-col items-center justify-between gap-2"
-              >
-                <div className="bg-primary-light w-fit h-fit p-[0.45rem] rounded-full">
-                  <CoinIcon disabled={false} />
+            {challengeDates.map((dateStr, index) => {
+              const thisDate = new Date(dateStr);
+              const isPassed = thisDate <= today;
+              const isCertified = certifiedSet.has(dateStr);
+
+              return isPassed ? (
+                <div
+                  key={index}
+                  className="flex flex-col items-center justify-between gap-2"
+                >
+                  <div
+                    className={`w-fit h-fit p-[0.45rem] rounded-full ${
+                      isCertified ? 'bg-primary-light' : 'bg-gray-100'
+                    }`}
+                  >
+                    <CoinIcon disabled={!isCertified} />
+                  </div>
+                  <div className="text-gray-500 text-c1">{index + 1}일차</div>
                 </div>
-                <div className="text-gray-500 text-c1">{index + 1}일차</div>
-              </div>
-            ))}
+              ) : null;
+            })}
           </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default ALl;
+export default ALL;