Merge pull request #106 from Chaellimi/feat/#94

[Feat/#94] 홈화면 디자인 개선 및 프로필 수정 완성

Author: Jamkris

public/icons/Profile/Pen.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const PenIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+    >
+      <path
+        d="M15.6337 3.36608C14.766 2.49842 13.3593 2.49842 12.4916 3.36608L3.0229 12.8348C2.89631 12.9614 2.8252 13.1331 2.8252 13.3121V15.4996C2.8252 15.8724 3.1274 16.1746 3.50019 16.1746H5.68769C5.86671 16.1746 6.03839 16.1035 6.16498 15.9769L15.6337 6.50817C16.5014 5.64051 16.5014 4.23375 15.6337 3.36608Z"
+        fill="#848484"
+      />
+    </svg>
+  );
+};
+
+export default PenIcon;

public/icons/Profile/index.ts

@@ -6,3 +6,4 @@ export { default as BookmarkIcon } from './Bookmark';
 export { default as NotificationIcon } from './Notification';
 export { default as MailIcon } from './Mail';
 export { default as PaperIcon } from './Paper';
+export { default as PenIcon } from './Pen';

public/icons/shared/Fire.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 
-const FireIcon = () => {
+interface FireIconProps {
+  width?: string;
+  height?: string;
+}
+
+const FireIcon = ({ width, height }: FireIconProps) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="17"
-      height="17"
+      width={width || '17'}
+      height={height || '17'}
       viewBox="0 0 16 17"
       fill="none"
     >

public/images/HomeBanner.png

@@ -7,7 +7,7 @@ import Banner from '@public/images/HomeBanner.png';
 import ActiveChallenge from '@/components/Home/ActiveChallenge';
 import HotChallenge from '@/components/Home/HotChallenge';
 import Header from '@/components/shared/Header';
-import { ArrowIcon } from '@public/icons/shared';
+import { ArrowIcon, FireIcon } from '@public/icons/shared';
 import {
   useGetParticipatingChallenge,
   useGetPopularChallenge,
@@ -70,12 +70,6 @@ const Home = () => {
     return `${certifiedCount}/${total}`;
   }
 
-  function getCompletedChallengeCount() {
-    return ParticipatingChallengeData?.data.filter(
-      (item: ParticipatingChallenge) => item.achievementRate >= 100
-    ).length;
-  }
-
   useStatusBarBridge({
     backgroundColor: '#FFF',
     translucent: true,
@@ -151,44 +145,22 @@ const Home = () => {
           </div>
         ) : null}
 
-        {/* Complete Challenge */}
-        {ParticipatingChallengeData?.data.length != 0 &&
-        ParticipatingChallengeData?.data.some(
-          (item: ParticipatingChallenge) => item.achievementRate === 100
-        ) ? (
-          <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 className="flex justify-between w-full px-5 py-4 mt-5 border border-gray-100 rounded-xl">
+          <div className="flex items-center gap-[0.62rem]">
+            <FireIcon width="28" height="28" />
+            <div className="">
+              <div className="text-gray-600 text-c1">
+                오늘 추천 챌린지 도착!
+              </div>
+              <div className="text-primary-hover text-h3">
+                AI가 고른 맞춤 챌린지
               </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>
           </div>
-        ) : null}
+          <div className="flex items-center">
+            <ArrowIcon width="18" height="18" location="right" fill="#C9C9C9" />
+          </div>
+        </div>
 
         {/* Hot Challenge */}
         <div className="flex flex-col gap-2 mt-5">
@@ -198,7 +170,7 @@ const Home = () => {
               router.push('/challenge');
             }}
           >
-            <div className="text-he">요즘 뜨는 챌린지</div>
+            <div className="text-he">이런 챌린지는 어때요?</div>
             <ArrowIcon width="24" height="24" location="right" />
           </div>
           <div className="flex overflow-scroll gap-[0.62rem] scrollbar-hide">

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

@@ -138,7 +138,7 @@ const Progress = () => {
                 <div className="grid grid-cols-3 gap-y-4 gap-x-2 justify-items-center">
                   {progressDates.map((dateStr, index) => {
                     const today = dayjs().format('YYYY-MM-DD');
-                    const isFeature = new Date(dateStr) < new Date(today);
+                    const isFeature = new Date(dateStr) <= new Date(today);
                     const isCertified = certifiedSet.has(dateStr);
 
                     return (

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

@@ -53,7 +53,7 @@ const ShopDetail = () => {
         backClick="/point/shop"
       />
 
-      <div className="relative flex flex-col justify-between pb-[1.38rem] overflow-y-scroll scrollbar-hide w-full">
+      <div className="relative flex flex-col justify-between w-full pb-20 overflow-y-scroll scrollbar-hide">
         <div className="flex flex-col w-full gap-4 px-6">
           <div className="relative rounded-full min-h-[20.5rem] max-h-[20.5rem] min-w[20.5rem] max-w-[20.5rem]">
             <div className="relative w-[328px] h-[328px] mx-auto">
@@ -68,7 +68,9 @@ const ShopDetail = () => {
 
           <div>
             <div className="text-c1">{productData?.brand}</div>
-            <div className="text-h3">{productData?.price}P</div>
+            <div className="text-h3">
+              {Number(productData?.price).toLocaleString()}P
+            </div>
             <div className="text-b3">{productData?.title}</div>
           </div>
 

src/app/(private)/point/shop/[id]/page.tsx

@@ -52,7 +52,10 @@ const Profile = () => {
 
       <div className="flex flex-col flex-1 gap-4 px-6 mt-4 mb-16 overflow-y-auto scrollbar-hide">
         {/* 프로필 */}
-        <div className="flex items-center justify-between w-full p-4 bg-white rounded-2xl min-h-fit">
+        <div
+          className="flex items-center justify-between w-full p-4 bg-white rounded-2xl min-h-fit"
+          onClick={() => router.push('/profile/user')}
+        >
           <div className="flex items-center gap-4">
             <div className="relative w-[72px] h-[72px] rounded-full flex-shrink-0">
               <Image