전공 사진 추가

+배너 코드 fix

src/apis/admin.ts

@@ -19,9 +19,8 @@ type EditClubType = {
 
 export const postPage = async () => {
   const token = localStorage.getItem("access_token");
-  return await axios.post(
+  return await axios.get(
     "https://prod-server.xquare.app/jung-ho/admin-club/page",
-    null,
     {
       headers: {
         Authorization: `Bearer ${token}`,

src/components/Banner.tsx

@@ -68,9 +68,9 @@ const AdBanner: React.FC = () => {
           />
         </MoveBanner>
         <ExplainWrapper>
-          {currentImage.map((_, index) => (
+          {currentImage.map((item, index) => (
             <BannerExplain key={index} $isActive={index === img}>
-              {currentImage?.[img]?.bannerTitle}
+              {item.bannerTitle}
             </BannerExplain>
           ))}
         </ExplainWrapper>

src/components/Q_A.tsx

@@ -1,22 +1,73 @@
 import styled from "styled-components";
+import { instance } from "../apis/axios";
+import { applyType } from "../page/Applicationpage";
 
-interface Props {
-  ask: string;
-  placeholder: string;
+interface IQNAProps {
+  question: applyType;
+  setQuestion: React.Dispatch<React.SetStateAction<applyType>>;
 }
 
-const Q_A: React.FC<Props> = (props) => {
+const Q_A: React.FC<IQNAProps> = ({ question, setQuestion }: IQNAProps) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuestion((prevQuestion) => ({
+      ...prevQuestion,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const fetchData = async () => {
+    await instance
+      .post("/report/apply")
+      .then((res) => {
+        setQuestion(res.data);
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <Container>
       <QuestionWrapper>
-        <Question>{props.ask}</Question>
-        <Input placeholder={props.placeholder}></Input>
+        <Question>자신을 한 줄로 설명한다면?</Question>
+        <Input
+          name="oneLiner"
+          placeholder="Ex. 감자같이 담백한 개발자 김정호, 항상 모두의 중심인 홍길동, INTP 이현 등"
+          value={question.oneLiner}
+          onChange={handleInputChange}
+        />
+        <Question>사용하는 툴을 알려주세요!</Question>
+        <Input
+          name="introduction"
+          placeholder="자유롭게 작성해주세요!"
+          value={question.introduction}
+          onChange={handleInputChange}
+        />
+        <Question>관심 있는 전공이 있으신가요?</Question>
+        <Input
+          name="hopeMajor"
+          placeholder="자유롭게 작성해주세요!"
+          value={question.hopeMajor}
+          onChange={handleInputChange}
+        />
+        <Question>동아리에 들어와서 배우고 싶은 것이 있으신가요?</Question>
+        <Input
+          name="learn"
+          placeholder="자유롭게 작성해주세요!"
+          value={question.learn}
+          onChange={handleInputChange}
+        />
       </QuestionWrapper>
     </Container>
   );
 };
 
-const Container = styled.div``;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
 
 const QuestionWrapper = styled.div`
   display: flex;
@@ -26,25 +77,24 @@ const QuestionWrapper = styled.div`
 
 const Question = styled.p`
   font-size: 24px;
-  font-weight: 600;
 `;
 
 const Input = styled.input`
-  width: 1200px;
+  width: 1150px;
   height: 70px;
   padding: 20px 24px;
   color: black;
   font-size: 20px;
   font-weight: 400;
   border-radius: 5px;
-  border: 1px solid rgba(110, 110, 135, 0.5);
+  border: 2px solid #b0b0b0;
   &::placeholder {
     color: #6e6e87;
     font-size: 20px;
     font-weight: 400;
   }
   &:focus {
-    box-shadow: 0px 0px 10px 0px #5148bf;
+    border: 2px solid #000000;
   }
 `;
 

src/page/Applicationpage.tsx

@@ -1,76 +1,137 @@
 import styled from "styled-components";
 import Header from "../components/Header";
 import Q_A from "../components/Q_A";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import Footer from "../components/Footer";
+import { instance } from "../apis/axios";
+
+export type applyType = {
+  oneLiner: string;
+  introduction: string;
+  hopeMajor: string;
+  learn: string;
+  noticeId: number;
+};
 
 const Applicationpage = () => {
+  const [buttonColor, setButtonColor] = useState("#E1E1E1");
   const [isLoginVisible, setIsLoginVisible] = useState(false);
 
   const handleLoginToggle = () => {
     setIsLoginVisible(!isLoginVisible);
   };
-  const questions = [
-    {
-      ask: "자신을 한 줄로 설명한다면?",
-      placeholder:
-        "Ex. 감자같이 담백한 개발자 김정호, 항상 모두의 중심인 홍길동, INTP 이현 등",
-    },
-    {
-      ask: "사용하는 툴을 알려주세요!",
-      placeholder: "자유롭게 작성해주세요!",
-    },
-    {
-      ask: "관심 있는 전공이 있으신가요?",
-      placeholder: "자유롭게 작성해주세요!",
-    },
-    {
-      ask: "동아리에 들어와서 배우고 싶은 것이 있으신가요?",
-      placeholder: "자유롭게 작성해주세요!",
-    },
-  ];
+
+  const [question, setQuestion] = useState<applyType>({
+    oneLiner: "",
+    introduction: "",
+    hopeMajor: "",
+    learn: "",
+    noticeId: 0,
+  });
+
+  const fetchData = async () => {
+    await instance
+      .post("/report/apply")
+      .then((res) => {
+        setQuestion(res.data);
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    const newButtonColor =
+      question.oneLiner.length > 5 &&
+      question.introduction.length > 5 &&
+      question.hopeMajor.length > 5 &&
+      question.learn.length > 5
+        ? "#333B3D"
+        : "#E1E1E1";
+    setButtonColor(newButtonColor);
+  }, [
+    question.oneLiner,
+    question.introduction,
+    question.hopeMajor,
+    question.learn,
+  ]);
+
   return (
     <Container>
       <Header onLoginToggle={handleLoginToggle} />
+      <SmallBanner>
+        <BannerTitle>동아리 지원</BannerTitle>
+        <BnanerContent>
+          동아리에 지원해 전공 실력을 더욱 키워보세요.
+        </BnanerContent>
+      </SmallBanner>
       <Wrapper>
-        <Title>&#123;동아리이름&#125; 지원서</Title>
-        {questions.map((element) => (
-          <Q_A
-            key={element.ask}
-            ask={element.ask}
-            placeholder={element.placeholder}
-          />
-        ))}
-        <ApplyButton>지원하기</ApplyButton>
+        <Title>동아리이름 지원서</Title>
+        <Q_A question={question} setQuestion={setQuestion} />
+        <ApplyButton
+          bgColor={buttonColor}
+          textColor={buttonColor === "#333B3D" ? "#FFFFFF" : "#000000"}
+          onClick={() => {
+            fetchData();
+          }}
+        >
+          지원하기
+        </ApplyButton>
+        <Footer />
       </Wrapper>
     </Container>
   );
 };
 const Container = styled.div``;
 
+const SmallBanner = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 15px;
+  width: 100%;
+  height: 200px;
+  background-color: #333b3d;
+  padding-left: 370px;
+`;
+
+const BannerTitle = styled.p`
+  font-size: 36px;
+  font-family: "DXhimchanBold";
+  color: white;
+`;
+
+const BnanerContent = styled.p`
+  font-size: 28px;
+  color: white;
+`;
+
 const Title = styled.p`
   font-size: 44px;
   font-weight: 900;
-  margin-right: 800px;
+  margin-right: 47%;
 `;
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 36px;
+  gap: 45px;
   margin-top: 60px;
 `;
 
-const ApplyButton = styled.div`
-  width: 185px;
+const ApplyButton = styled.div<{ bgColor?: string; textColor?: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
   height: 50px;
-  background-color: #ffb800;
-  padding: 12px 44px;
-  color: #ffffff;
+  background-color: ${(props) => props.bgColor || "#333b3d"};
+  color: ${(props) => props.textColor || "#ffffff"};
   font-size: 24px;
-  font-weight: 500;
-  border-radius: 8px;
-  margin-left: 1000px;
+  border-radius: 10px;
+  margin-left: 50%;
   cursor: pointer;
 `;