Merge pull request #5 from cau-likelion-org/develop

[3차 배포] API 일부 연결 테스트
cau-likelion-org · Jan 4, 2024 · 1c515a8 · 1c515a8
2 parents 9d449a5 + 182d14a
commit 1c515a8
Show file tree

Hide file tree

Showing 27 changed files with 652 additions and 379 deletions.
diff --git a/next.config.js b/next.config.js
@@ -14,7 +14,7 @@ const nextConfig = withTwin({
   },
   reactStrictMode: true,
   images: {
-    domains: ["cms-cdn.placeholder.co"],
+    domains: ["startlion.s3.ap-northeast-2.amazonaws.com"],
     // 이곳에 에러메세지의 hostname 다음 따옴표에 오는 링크를 적으면 된다
     // 나중에 서버에서 주는 해당하는 url 도메인을 가져와야 할 것!
   },

diff --git a/package.json b/package.json
@@ -12,11 +12,13 @@
     "@emotion/react": "^11.11.1",
     "@emotion/serialize": "^1.1.2",
     "@emotion/styled": "^11.11.0",
+    "axios": "^1.6.3",
     "framer-motion": "^10.16.4",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

diff --git a/src/apis/interview/api.ts b/src/apis/interview/api.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export const getInterviewApi = async (name: string) => {
+  return await axios
+    .get(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/interviews?part=${name}`)
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      if (axios.isAxiosError(error)) {
+        const result = error.response?.data?.detail;
+        return result;
+      }
+    });
+};
diff --git a/src/apis/login/api.ts b/src/apis/login/api.ts
@@ -0,0 +1,6 @@
+import axios from "axios";
+
+// export const getUserTokenApi = () => {
+//     return await axios
+//     .get()
+// }
diff --git a/src/apis/mypage/api.ts b/src/apis/mypage/api.ts
@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export const getMypageApi = async (token: string) => {
+  axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  return await axios
+    .get(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/me`)
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      if (axios.isAxiosError(error)) {
+        const result = error.response?.data?.detail;
+        return result;
+      }
+    });
+};
diff --git a/src/components/FAQ/OptionSelect.tsx b/src/components/FAQ/OptionSelect.tsx
@@ -1,4 +1,4 @@
-import { ActivityFAQ, ApplyFAQ, FAQObject, OtherFAQ } from "@/store/qnasheet";
+import { ActivityFAQ, ApplyFAQ, FAQObject } from "@/store/qnasheet";
 import React, { useEffect, useState } from "react";
 import QNAForm from "./QNAForm";
 import tw, { css, styled } from "twin.macro";
@@ -10,10 +10,8 @@ const OptionSelect = () => {
   useEffect(() => {
     if (show === "apply") {
       setData(ApplyFAQ);
-    } else if (show === "activity") {
-      setData(ActivityFAQ);
     } else {
-      setData(OtherFAQ);
+      setData(ActivityFAQ);
     }
   }, [show]);
   return (
@@ -37,14 +35,6 @@ const OptionSelect = () => {
             >
               활동 관련
             </QuestionText>
-            <QuestionText
-              select={show === "others" ? true : false}
-              onClick={() => {
-                setShow("others");
-              }}
-            >
-              그 외의 질문들
-            </QuestionText>
             <div className="text-[14px] font-normal text-[#484848] mt-14">
               *추가적인 문의 사항이 있다면
               <br />

diff --git a/src/components/FAQ/QNAForm.tsx b/src/components/FAQ/QNAForm.tsx
@@ -12,6 +12,13 @@ const QNAForm = (props: FAQObject) => {
       {open ? (
         <QuestionPart className="withanswer" onClick={() => setOpen(!open)}>
           <p className="mb-1.5">{props.question}</p>
+          <p
+            style={{
+              border: "1px solid black",
+              height: "1px",
+              width: "670px",
+            }}
+          ></p>
           <div>{props.answer}</div>
         </QuestionPart>
       ) : (
@@ -32,19 +39,16 @@ const QuestionPart = styled.div`
   border-radius: 20px;
   background-color: #f8fafc;
   width: 720px;
-  height: 58px;
   display: flex;
   align-items: center;
   &.withanswer {
     padding: 20px 29px;
     flex-direction: column;
-    height: 126px;
     align-items: flex-start;
     > div {
       font-size: 16px;
       font-weight: 400;
       padding-top: 6px;
-      border-top: 1px solid black;
     }
   }
 `;
diff --git a/src/components/apply/SecondPage.tsx b/src/components/apply/SecondPage.tsx
@@ -8,9 +8,12 @@ const SecondPage = () => {
   const applyPart = useRecoilValue(ApplyPartAtom);
   const [question, setQuestion] = useState<string[]>([]);
   useEffect(() => {
-    applyPart === "기획"
-      ? setQuestion(ApplyQuestionPM)
-      : setQuestion(ApplyQuestionDevelop);
+    switch (applyPart) {
+      case "기획":
+        setQuestion(ApplyQuestionPM);
+      default:
+        setQuestion(ApplyQuestionDevelop);
+    }
   }, []);
   return (
     <div className="w-full mb-5 mx-auto">

diff --git a/src/components/interview/CallInterviewCard.tsx b/src/components/interview/CallInterviewCard.tsx
@@ -0,0 +1,27 @@
+import { TotalInterviewInfo } from "@/store/type";
+import Link from "next/link";
+import React from "react";
+import InterviewCard from "./InterviewCard";
+
+const CallInterviewCard = (props: TotalInterviewInfo) => {
+  return (
+    <Link
+      key={props.interviewId}
+      href={{
+        pathname: "/interview/[detail]",
+        query: { detail: props.interviewId },
+      }}
+    >
+      <InterviewCard
+        interviewId={props.interviewId}
+        generation={props.generation}
+        OneLineContent={props.OneLineContent}
+        imageUrl={props.imageUrl}
+        name={props.name}
+        part={props.part}
+      />
+    </Link>
+  );
+};
+
+export default CallInterviewCard;
diff --git a/src/components/interview/InterviewCard.tsx b/src/components/interview/InterviewCard.tsx
@@ -1,23 +1,21 @@
-import { InterviewCardProp } from "@/store/testData";
 import Image from "next/image";
 import React from "react";
 import { styled } from "twin.macro";
+import design from "@/img/part/design.png";
+import { TotalInterviewInfo } from "@/store/type";
 
-const InterviewCard = (props: InterviewCardProp) => {
+const InterviewCard = (props: TotalInterviewInfo) => {
   return (
     <CardWrapper>
       <div>
         <div className="w-[320px] h-[320px] relative mb-[13.5px]">
           <Image
-            src={props.img}
+            src={props.imageUrl === null ? design : props.imageUrl}
             alt="인터뷰 메인 이미지"
             layout="fill"
-            objectFit="cover"
+            objectFit="fill"
           />
-          <ImgTextShow>
-            &quot; 멋사 최고~
-            <br /> 넘 재밌고 유익해용 &quot;
-          </ImgTextShow>
+          <ImgTextShow>&quot; {props.OneLineContent} &quot;</ImgTextShow>
         </div>
         <div className="textline">
           <div>{props.name}</div>

diff --git a/src/components/interview/InterviewCardWrapper.tsx b/src/components/interview/InterviewCardWrapper.tsx
@@ -1,74 +1,83 @@
 import React, { useEffect, useState } from "react";
 import { css, styled } from "twin.macro";
 import Arrowdown from "@/svg/arrowdown.svg";
-import { InterviewCardTest, InterviewRouteProp } from "@/store/testData";
-import InterviewCard from "./InterviewCard";
-import Link from "next/link";
+import { TotalInterviewInfo } from "@/store/type";
+import CallInterviewCard from "./CallInterviewCard";
+import { getInterviewApi } from "@/apis/interview/api";
 
 const InterviewCardWrapper = () => {
-  const options = ["ALL", "PM", "frontend", "backend", "design"];
+  const options = [
+    { param: "ALL", name: "ALL" },
+    { param: "PM", name: "PM" },
+    { param: "FE", name: "FE" },
+    { param: "BE", name: "BE" },
+    { param: "DE", name: "DESIGN" },
+    { param: "DEV", name: "DEV" },
+  ];
   const [option, setOption] = useState<string>("ALL");
+  const [serverParam, setServerParam] = useState<string>("ALL");
   const [viewmore, setViewmore] = useState<boolean>(false);
-  const [getInfo, setGetInfo] = useState<Array<InterviewRouteProp>>([]);
+  const [getInfo, setGetInfo] = useState<Array<TotalInterviewInfo>>([]);
   useEffect(() => {
-    setGetInfo(InterviewCardTest);
-  }, [getInfo]);
+    getInterviewApi(serverParam).then((res) => {
+      setGetInfo(res.data);
+    });
+  }, [serverParam]);
+  useEffect(() => {
+    getInterviewApi(serverParam).then((res) => {
+      setGetInfo(res.data);
+    });
+  }, []);
   return (
     <div className="flex-col-base w-full">
-      <div className="flex-base-between pb-20 gap-8">
+      <div className="flex-base-start pb-20 gap-8">
         {options.map((e) => {
           return (
             <>
               <InterviewButton
-                select={option === e ? true : false}
-                onClick={() => setOption(e)}
+                select={option === e.name ? true : false}
+                onClick={() => {
+                  setOption(e.name);
+                  setServerParam(e.param);
+                }}
               >
-                {e}
+                {e.name}
               </InterviewButton>
             </>
           );
         })}
       </div>
-      <div className="w-full flex-base-between gap-[40px] flex-wrap">
-        {getInfo.map((e, i) => {
-          if (i > 14 && viewmore === false) {
-            return;
-          } else if (i > 14 && viewmore === true) {
-            return (
-              <Link
-                key={i}
-                href={{
-                  pathname: "/interview/[detail]",
-                  query: { detail: e.index },
-                }}
-              >
-                <InterviewCard
+      <div className="w-full flex-base-start gap-[40px] flex-wrap">
+        {Array.isArray(getInfo) &&
+          getInfo.map((e, i) => {
+            if (i > 14 && viewmore === false) {
+              return;
+            } else if (i > 14 && viewmore === true) {
+              return (
+                <CallInterviewCard
                   key={i}
-                  img={e.img}
+                  interviewId={e.interviewId}
+                  generation={e.generation}
+                  OneLineContent={e.OneLineContent}
+                  imageUrl={e.imageUrl}
                   name={e.name}
                   part={e.part}
                 />
-              </Link>
-            );
-          } else {
-            return (
-              <Link
-                key={i}
-                href={{
-                  pathname: "/interview/[detail]",
-                  query: { detail: e.index },
-                }}
-              >
-                <InterviewCard
+              );
+            } else {
+              return (
+                <CallInterviewCard
                   key={i}
-                  img={e.img}
+                  interviewId={e.interviewId}
+                  generation={e.generation}
+                  OneLineContent={e.OneLineContent}
+                  imageUrl={e.imageUrl}
                   name={e.name}
                   part={e.part}
                 />
-              </Link>
-            );
-          }
-        })}
+              );
+            }
+          })}
       </div>
       <div className=" mt-[120px] ">
         <ViewMoreButton onClick={() => setViewmore(!viewmore)}>