⚡:: (#147) plus Btn 추가

src/components/challengeList/index.tsx

@@ -3,10 +3,10 @@ import fetcher from "@src/utils/function/fetcher";
 import { ChallengeType } from "@src/utils/interfaces/challenge";
 import React, { useState } from "react";
 import useSWR from "swr";
-import DefaultBox from "../common/defaultBox";
 import Dropdown from "../common/dropdown";
 import ChallengeCard from "./ChallengeCard";
 import Link from "next/link";
+import CreateBox from "../common/createBox";
 
 const optionList = [
   {
@@ -21,6 +21,8 @@ const optionList = [
 
 const ChallengeList = () => {
   const [option, setOption] = useState("true");
+  const [isHover, setIsHover] = useState<boolean>(false);
+
   const { data, mutate } = useSWR(
     "/challenges/web/lists?isProgress=true",
     fetcher
@@ -57,9 +59,7 @@ const ChallengeList = () => {
         </Title>
         <ListBox>
           <Link href='/challenge/create'>
-            <DefaultBox width={288} height={288}>
-              <PlusBtn>+</PlusBtn>
-            </DefaultBox>
+            <CreateBox width={288} height={288} />
           </Link>
           {data.challenge_list?.map((i: ChallengeType) => (
             <ChallengeCard type={""} key={i.id} {...i} />

src/components/common/createBox/index.tsx

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import React, { FC, useState } from "react";
+import Image from "next/image";
+import Plus from "../../../assets/plus.svg";
+import Plus_White from "../../../assets/plus_white.svg";
+
+interface Props {
+  width: number;
+  height: number;
+}
+
+const CreateBox: FC<Props> = props => {
+  const [isHover, setIsHover] = useState<boolean>(false);
+
+  return (
+    <>
+      <DefaultBoxStyle {...props}>
+        <PlusBtn
+          onMouseOver={() => setIsHover(true)}
+          onMouseOut={() => setIsHover(false)}
+        >
+          {props.children}
+          <Image
+            src={isHover ? Plus_White : Plus}
+            alt='plus'
+            width={50}
+            height={50}
+          />
+        </PlusBtn>
+      </DefaultBoxStyle>
+    </>
+  );
+};
+
+export default CreateBox;
+
+const DefaultBoxStyle = styled.div<{
+  width: number;
+  height: number;
+}>`
+  width: ${({ width }) => `${width}px`};
+  height: ${({ height }) => `${height}px`};
+  border-radius: 12px;
+  border: 1px solid ${({ theme }) => theme.color.normal_gray};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+const PlusBtn = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;