🔀 :: (#147) class,notice mod UI

🔀 :: (#147) class,notice mod UI

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
@@ -41,7 +43,7 @@ const ChallengeList = () => {
         <Title>
           <div>진행 중인 챌린지</div>
           <Dropdown
-            width={102}
+            width={108}
             height={16}
             selectedValue={option === "true" ? "진행중" : "완료"}
             name='name'
@@ -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/class/seeClass/Class.tsx

@@ -92,7 +92,9 @@ const ClassBanner = () => {
           <BannerDiv2>
             <TeacherDiv>
               <img src={data.teacher.profile_image_url} alt='' />
-              <TeacherName>{data.teacher.name}</TeacherName>
+              <div>
+                <TeacherName>{data.teacher.name}</TeacherName>
+              </div>
               <p>선생님</p>
             </TeacherDiv>
             <ClassCodeDiv>
@@ -168,12 +170,13 @@ const BannerDiv2 = styled.div`
 `;
 
 const TeacherDiv = styled.div`
+  width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
   margin-left: 54px;
   > p {
-    width: 100%;
+    margin-right: 10px;
+    width: 50px;
     color: ${({ theme }) => theme.color.white};
   }
   > img {
@@ -183,11 +186,13 @@ const TeacherDiv = styled.div`
   }
 `;
 
-const TeacherName = styled.p`
-  width: 60px;
-  height: 30px;
+const TeacherName = styled.h6`
+  width: 100%;
   margin-right: 4px;
+  height: 30px;
   font-size: 20px;
+  font-weight: normal;
+  color: ${({ theme }) => theme.color.white};
 `;
 
 const ClassCodeDiv = styled.div`

src/components/class/seeClass/ClassStudentList.tsx

@@ -105,7 +105,7 @@ const ClassStudentList: FC<Props> = ({ setClassInfo }) => {
           padding='10px 16px'
           isBoard={false}
         />
-        <ExcelDonwload onClick={excelDownload}>엑셀로 변환</ExcelDonwload>
+        <ExcelDonwload onClick={excelDownload}>엑셀로 변환하기</ExcelDonwload>
       </Title>
       <TypeMenuDiv>
         <p style={{ gridColumn: "4/5" }}>평균 걸음 수</p>
@@ -158,7 +158,7 @@ const TypeMenuDiv = styled.div`
 `;
 
 const ExcelDonwload = styled.h6`
-  margin-left: 900px;
+  margin-left: 880px;
   text-decoration: underline;
   color: ${({ theme }) => theme.color.main};
   font-size: 14px;

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

src/components/notice/MakeNotice.tsx

@@ -47,7 +47,7 @@ const MakeNotice: FC<Props & { mutate: KeyedMutator<any> }> = ({
     scope: "",
   });
 
-  const noticeSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const noticeSubmit = async (e: React.MouseEvent<HTMLInputElement>) => {
     e.preventDefault();
     try {
       await createNotice(
@@ -73,11 +73,9 @@ const MakeNotice: FC<Props & { mutate: KeyedMutator<any> }> = ({
         case 400:
           return ToastError("모든 빈칸을 채워주세요");
         case 401:
-          return ToastError("인증에 실패하였습니다. ");
+          return ToastError("인증에 실패하였습니다.");
         case 403:
-          return ToastError(
-            "권한이 존재하지 않습니다. 공지사항 작성은 ROOT 권한과 SU권한만 사용 가능합니다."
-          );
+          return ToastError("권한이 존재하지 않습니다.");
         default:
           return ToastError("관리자에게 문의해주세요.");
       }
@@ -113,7 +111,7 @@ const MakeNotice: FC<Props & { mutate: KeyedMutator<any> }> = ({
 
   return (
     <>
-      <Wrapper onSubmit={noticeSubmit}>
+      <Wrapper>
         <HeadDiv>
           {isAuth ? (
             <DropDown
@@ -167,14 +165,19 @@ const MakeNotice: FC<Props & { mutate: KeyedMutator<any> }> = ({
             defaultColor={false}
             value='취소'
           />
-          <DefaultBtn type='submit' width={106} value='작성' />
+          <DefaultBtn
+            type='submit'
+            width={106}
+            value='작성'
+            onClick={noticeSubmit}
+          />
         </PostDiv>
       </Wrapper>
     </>
   );
 };
 
-const Wrapper = styled.form`
+const Wrapper = styled.div`
   width: 100%;
   padding: 40px 27px 40px 27px;
   border-radius: 12px;