Merge pull request #69 from seokkkkkk/develop

Develop
K-Hackathon-Fledge · Aug 10, 2024 · 319c071 · 319c071
2 parents 3ce26bf + 6de8502
commit 319c071
Show file tree

Hide file tree

Showing 12 changed files with 319 additions and 206 deletions.
diff --git a/src/apis/canary.ts b/src/apis/canary.ts
@@ -10,7 +10,7 @@ export type CanaryApplyForm = {
     gender: boolean;
     address: string;
     detailAddress: string;
-    zip: string;
+    zip: string | number;
     certificateFilePath: string;
     latitude: number;
     longitude: number;

diff --git a/src/assets/images/no-challenger-medal.png b/src/assets/images/no-challenger-medal.png
diff --git a/src/components/Challenge/BestChallenger.tsx b/src/components/Challenge/BestChallenger.tsx
@@ -5,6 +5,7 @@ import Challenger from "./Challenger";
 import { getTopParticipants } from "../../apis/challenge";
 import { useQuery } from "@tanstack/react-query";
 import { BestChallengerProps } from "../../@types/challenge";
+import NoChallenger from "../Common/NoChallenger";
 
 export const scroll = keyframes`
     from {
@@ -29,25 +30,31 @@ const BestChallenger = () => {
                 title="베스트 챌린저"
                 desc="금주의 베스트 챌린저! 베스트 챌린저는 어떤 챌린지에 참여했을까요?"
             />
-            <div className="challenger-list">
-                {topChallengersData.data.map(
-                    (challenger: BestChallengerProps, index: number) => (
-                        <Challenger
-                            key={index}
-                            imgSrc={challenger.profileImageUrl}
-                            name={challenger.nickname}
-                            desc={
-                                challenger.successCount +
-                                "/" +
-                                challenger.totalCount +
-                                "개 챌린지 성공!"
-                            }
-                            categoryList={challenger.topCategories}
-                            rank={4 - Math.floor(challenger.successRate / 30)}
-                        />
-                    )
-                )}
-            </div>
+            {topChallengersData.length > 0 ? (
+                <div className="challenger-list">
+                    {topChallengersData.data.map(
+                        (challenger: BestChallengerProps, index: number) => (
+                            <Challenger
+                                key={index}
+                                imgSrc={challenger.profileImageUrl}
+                                name={challenger.nickname}
+                                desc={
+                                    challenger.successCount +
+                                    "/" +
+                                    challenger.totalCount +
+                                    "개 챌린지 성공!"
+                                }
+                                categoryList={challenger.topCategories}
+                                rank={
+                                    4 - Math.floor(challenger.successRate / 30)
+                                }
+                            />
+                        )
+                    )}
+                </div>
+            ) : (
+                <NoChallenger text="베스트" />
+            )}
         </Container>
     );
 };

diff --git a/src/components/ChallengeDetail/Challengers.tsx b/src/components/ChallengeDetail/Challengers.tsx
@@ -7,6 +7,7 @@ import { scroll } from "../Challenge/BestChallenger";
 import { useQuery } from "@tanstack/react-query";
 import { getChallengeParticipants } from "../../apis/challenge";
 import { BestChallengerProps } from "../../@types/challenge";
+import NoChallenger from "../Common/NoChallenger";
 
 type ChallengerProps = {
     challengeId?: string;
@@ -60,28 +61,34 @@ const Challengers = ({
                     />
                 )}
             </div>
-            <div className="challenger-list">
-                {challengerData.data.map(
-                    (challenger: BestChallengerProps, index: number) => (
-                        <Challenger
-                            key={index}
-                            imgSrc={challenger.profileImageUrl}
-                            name={challenger.nickname}
-                            desc={
-                                challenger.successCount +
-                                "/" +
-                                challenger.totalCount +
-                                "개 챌린지 성공!"
-                            }
-                            categoryList={challenger.topCategories}
-                            rank={
-                                4 -
-                                Math.floor((challenger.successRate * 100) / 30)
-                            }
-                        />
-                    )
-                )}
-            </div>
+            {challengerData.length > 0 ? (
+                <div className="challenger-list">
+                    {challengerData.data.map(
+                        (challenger: BestChallengerProps, index: number) => (
+                            <Challenger
+                                key={index}
+                                imgSrc={challenger.profileImageUrl}
+                                name={challenger.nickname}
+                                desc={
+                                    challenger.successCount +
+                                    "/" +
+                                    challenger.totalCount +
+                                    "개 챌린지 성공!"
+                                }
+                                categoryList={challenger.topCategories}
+                                rank={
+                                    4 -
+                                    Math.floor(
+                                        (challenger.successRate * 100) / 30
+                                    )
+                                }
+                            />
+                        )
+                    )}
+                </div>
+            ) : (
+                <NoChallenger text="참여한" />
+            )}
         </Container>
     );
 };

diff --git a/src/components/ChallengeDetail/Header.tsx b/src/components/ChallengeDetail/Header.tsx
@@ -25,12 +25,14 @@ const Header = ({
     return (
         <Container>
             <ChallengeInfo>
-                {categories?.map((category) => (
-                    <div className="category">
-                        {challengeType.find((type) => type.id === category)
-                            ?.label || category}
-                    </div>
-                ))}
+                <div className="categories">
+                    {categories?.map((category) => (
+                        <div className="category">
+                            {challengeType.find((type) => type.id === category)
+                                ?.label || category}
+                        </div>
+                    ))}
+                </div>
                 <p className="title">{title}</p>
                 <p className="desc">{desc}</p>
             </ChallengeInfo>
@@ -80,15 +82,20 @@ const ChallengeInfo = styled.div`
     ${tw`
         w-[1280px] flex flex-col items-start
     `}
+    .categories {
+        ${tw`
+            flex gap-[8px] mb-[20px]
+        `}
+    }
     .category {
         ${tw`
             text-medium-20 font-medium text-white
-            bg-mainColor rounded-[37px] p-[1px 13px]
+            bg-mainColor rounded-[37px] p-[3px 13px] pb-[6px]
         `}
     }
     .title {
         ${tw`
-           text-bold-64 font-bold mt-[6.5px] text-fontColor1
+           text-bold-64 font-bold mt-[-20px] text-fontColor1
         `}
     }
     .desc {

diff --git a/src/components/Common/NoChallenger.tsx b/src/components/Common/NoChallenger.tsx
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import tw from "twin.macro";
+import medal from "../../assets/images/no-challenger-medal.png";
+
+type NoChallengerProps = {
+    text: string;
+};
+
+const NoChallenger = ({ text }: NoChallengerProps) => {
+    return (
+        <Container>
+            <div>아직 {text} 챌린저가 없어요!</div>
+            <img src={medal} alt="no-challenger-medal" />
+        </Container>
+    );
+};
+
+export default NoChallenger;
+
+const Container = styled.div`
+    ${tw`
+        w-full h-[415px] flex flex-col gap-[4px] items-center justify-center
+    `}
+    div {
+        ${tw`
+            text-medium-20 font-medium text-fontColor2
+        `}
+    }
+    img {
+        ${tw`
+            opacity-[63%]
+        `}
+    }
+`;
diff --git a/src/components/Common/PageHeader.tsx b/src/components/Common/PageHeader.tsx
@@ -2,44 +2,50 @@ import React from "react";
 import styled from "styled-components";
 import tw from "twin.macro";
 interface PageHeaderProps {
-  title: string;
-  desc: string;
-  imgSrc: string;
+    title: string;
+    desc: string;
+    desc2?: string;
+    imgSrc: string;
 }
-function PageHeader({ title, desc, imgSrc }: PageHeaderProps) {
-  return (
-    <>
-      {/* 헤더 */}
-      <Header>
-        <div className="text-wrapper">
-          <span className="title-text">{title}</span>
-          <span className="description-text">{desc}</span>
-        </div>
-        <div className="image-background">
-          <img src={imgSrc} alt="헤더이미지" />
-        </div>
-      </Header>
-    </>
-  );
+function PageHeader({ title, desc, desc2, imgSrc }: PageHeaderProps) {
+    return (
+        <>
+            {/* 헤더 */}
+            <Header>
+                <div className="text-wrapper">
+                    <span className="title-text">{title}</span>
+                    <span className="description-text">{desc}</span>
+                    {desc2 && <span className="description-text">{desc2}</span>}
+                </div>
+                <div className="image-background">
+                    <img src={imgSrc} alt="헤더이미지" />
+                </div>
+            </Header>
+        </>
+    );
 }
 
 export default PageHeader;
 
 const Header = styled.div`
-  ${tw`flex flex-row mt-20 h-[528px] w-[1280px] m-auto justify-between`}
+    ${tw`flex flex-row mt-20 h-[528px] w-[1280px] m-auto justify-between`}
 
-  .text-wrapper {
-    ${tw`flex flex-col w-1/2 mt-36`}
-    .title-text {
-      ${tw`text-bold-48 font-sans text-fontColor1 font-bold mb-5`}
+    .text-wrapper {
+        ${tw`flex flex-col w-1/2 mt-36`}
+        .title-text {
+            ${tw`text-bold-48 font-sans text-fontColor1 font-bold mb-5`}
+        }
+        .description-text {
+            ${tw`text-medium-20 text-fontColor3 font-sans w-[498px] font-medium `}
+        }
     }
-    .description-text {
-      ${tw`text-medium-20 text-fontColor3 font-sans w-[498px] font-medium `}
+    .image-background {
+        width: 50%;
+        height: 528px;
+        background: radial-gradient(
+            50% 50% at 50% 50%,
+            #ffd7c0 0%,
+            #faf8f5 100%
+        );
     }
-  }
-  .image-background {
-    width: 50%;
-    height: 528px;
-    background: radial-gradient(50% 50% at 50% 50%, #ffd7c0 0%, #faf8f5 100%);
-  }
 `;