Merge branch 'develop'

src/apis/bookmarks/type.ts

@@ -3,7 +3,8 @@ export interface BookmarkResponseType {
 }
 
 export interface BookmarkItemsType {
-  company_name: string;
-  recruitment_id: number;
-  created_at: string;
-}
+  "company_logo_url": string;
+  "company_name": string;
+  "recruitment_id": number;
+  "created_at": string;
+}

src/apis/companies/index.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useToastStore } from "@team-return/design-system";
 import { instance } from "../axios";
 import { GetNumberOfPagesType } from "../recruitments/type";
-import { CompaniesDetailsType, CompaniesListResponseType } from "./type";
+import { CompaniesDetailsType, CompaniesListResponseType, GetCompaniesForReviewingResponse } from "./type";
 
 const router = "/companies";
 
@@ -56,3 +56,13 @@ export const useGetNumberOfCompaniesListPages = (queryString: string) => {
   );
   return data;
 };
+
+export const useGetCompaniesForReviewing = () => {
+  return useQuery(
+    ["getCompaniesForReviewing"],
+    async () => {
+      const {data} = await instance.get<GetCompaniesForReviewingResponse>(`${router}/review`);
+      return data;
+    }
+  )
+}

src/apis/companies/type.ts

@@ -39,4 +39,13 @@ export interface CompaniesDetailsTable {
   attachments: any[];
   service_name: string;
   business_area: string;
-}
+}
+
+export interface CompaniesForReviewType {
+  id: number,
+  name: string,
+}
+
+export interface GetCompaniesForReviewingResponse {
+  companies : CompaniesForReviewType[]
+}

src/apis/recruitments/type.ts

@@ -18,6 +18,8 @@ export interface RecruitmentsDetailType extends RecruitmentsDetailTable {
   company_id: number;
   company_profile_url: string;
   company_name: string;
+  bookmarked: boolean;
+  recruitment_id: number;
 }
 
 export interface RecruitmentsDetailTable {

src/apis/reviews/index.ts

@@ -1,8 +1,11 @@
-import { useQuery } from "@tanstack/react-query";
+import { MutationOptions, useMutation, UseMutationOptions, useQuery } from "@tanstack/react-query";
+import { useToastStore } from "@team-return/design-system";
+import { AxiosError, AxiosResponse } from "axios";
 import { instance } from "../axios";
 import {
   getReviewDetailResponseProps,
-  getReviewListResponseProps
+  getReviewListResponseProps,
+  createReviewRequestType,
 } from "./type";
 
 const router = "/reviews";
@@ -24,3 +27,47 @@ export const useGetReviewDetails = (reviewId: string) => {
     return data;
   });
 };
+
+export const useCreateReviews = (options: Omit<UseMutationOptions<AxiosResponse<any, any>, unknown, createReviewRequestType, unknown>, "mutationFn">) => {
+  const { append } = useToastStore();
+  return useMutation(
+    async (body: createReviewRequestType) =>
+      await instance.post(`${router}`, body),
+    {
+      ...options,
+      onError: (err: AxiosError) => {
+        const { response } = err;
+        switch (response?.status) {
+          case 400: {
+            append({
+              title: "",
+              message: "입력값은 비어있으면 안됩니다.",
+              type: "RED",
+            });
+            break;
+          }
+          case 404: {
+            switch ((response as AxiosResponse<{ message: string }>).data.message) {
+              case "Code Not Found": {
+                append({
+                  title: "",
+                  message: "질문 분야가 누락되었습니다.",
+                  type: "RED",
+                });
+                break;
+              }
+              case 'ApplicationEntity Not Found': {
+                append({
+                  title: '',
+                  message: '해당 기업에는 후기를 작성할 수 없습니다.',
+                  type: 'RED',
+                })
+              }
+            }
+
+          }
+        }
+      },
+    }
+  );
+};

src/apis/reviews/type.ts

@@ -18,3 +18,14 @@ export interface getReviewDetailProps {
   answer: string;
   area: string;
 }
+
+export interface qnaElementsType {
+  question: string;
+  answer: string;
+  code_id: number;
+}
+
+export interface createReviewRequestType {
+  company_id: number;
+  qna_elements: qnaElementsType[]
+}

src/app/companies/reviews/create/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import ReviewForm from "@/components/company/ReviewForm";
+import FillBtn from "@/components/common/Button/FillBtn";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCreateReviews } from "@/apis/reviews";
+import { qnaElementsType } from "@/apis/reviews/type";
+
+export default function CreateReviews() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const companyId = Number(params.get('id'))  
+  const [qnaElements, setQnaElements] = useState<qnaElementsType[]>([
+    { question: "", answer: "", code_id: 0 },
+  ]);
+  const mutateOption = {
+    onSuccess: () => {
+      router.push(`/companies/reviews/?id=${companyId}`)
+    }
+  }
+  const { mutate: createReviews } = useCreateReviews(mutateOption);
+
+  const handleClickCreateRevies = () => {
+    createReviews({
+      company_id:companyId,
+      qna_elements: qnaElements
+    })
+  }
+
+  const handleChange = (
+    index: number,
+    name: keyof qnaElementsType,
+    value: string | number
+  ) => {
+    setQnaElements(prev => {
+      const newReviews = [...prev];
+      if (typeof value === "number") {
+        newReviews[index].code_id = value;
+      } else if (name !== "code_id") {
+        newReviews[index][name] = value;
+      }
+      return newReviews;
+    });
+  };
+
+  const removeReviewList = (index: number) => {
+    setQnaElements(prev=>{
+      let newReviews = [...prev];
+      newReviews = newReviews.filter((_,idx)=>idx !== index);
+      return newReviews;
+    })
+  }
+
+  return (
+    <div className="w-2/3 mx-auto my-5">
+      <p className="py-12 leading-10 text-center text-h4 font-b text-primaryBlue03">
+        후기작성
+      </p>
+      {qnaElements
+        .map((qnaElement, idx) => (
+          <ReviewForm key={idx} onChange={handleChange} removeReviews={removeReviewList} setState={setQnaElements} index={idx} {...qnaElement} />
+        ))}
+      <div className="flex justify-between">
+        <FillBtn
+          backgroundColor="#ccc"
+          onClick={() => {
+            setQnaElements(prev => ([
+              ...prev,
+              { question: "", answer: "", code_id: 0 }
+            ]));
+          }}
+        >
+          면접질문 추가
+        </FillBtn>
+        <div className="flex gap-3">
+          <FillBtn
+            backgroundColor="#ccc"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            이전으로
+          </FillBtn>
+          <FillBtn onClick={handleClickCreateRevies}>완료</FillBtn>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/companies/reviews/page.tsx

@@ -4,7 +4,7 @@ export default function Reviews() {
   return (
     <div className="w-2/3 mx-auto my-5">
       <p className="py-12 leading-10 text-center text-h4 font-b text-primaryBlue03">
-        면접 후기
+        면접후기
       </p>
       <hr className="border-[#135C9D]" />
       <ReviewList />

src/app/globals.css

@@ -53,6 +53,10 @@ input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
+textarea {
+  resize: none;
+}
+
 table {
   width: 100%;
   border: none;

src/app/mypage/page.tsx

@@ -1,10 +1,12 @@
 import AppliedCompaniesList from "@/components/mypage/AppliedCompaniesList";
 import DetailProfile from "@/components/mypage/DetailProfile";
+import CompaniesForReviewing from "@/components/mypage/CompaniesForReviewing";
 
 export default function MyPage() {
   return (
     <div className="py-[56px] mx-[9vw]">
       <DetailProfile />
+      <CompaniesForReviewing />
       <AppliedCompaniesList />
     </div>
   );

src/app/recruitments/detail/page.tsx

@@ -11,7 +11,7 @@ export default function RecruitmentsDetailPage() {
   const navigator = useRouter();
   const { data: RecruitmentsDetial } = useGetRecruitmentsDetail(param.get("id")!);
   if (RecruitmentsDetial) {
-    const { company_id, company_name, company_profile_url, ...rest } =
+    const { company_id, company_name, company_profile_url, bookmarked, recruitment_id, ...rest } =
       RecruitmentsDetial;
 
     return (
@@ -20,6 +20,8 @@ export default function RecruitmentsDetailPage() {
           company_name={company_name}
           company_profile_url={company_profile_url}
           company_id={company_id}
+          bookmarked={bookmarked}
+          recruitmentId={recruitment_id}
         >
           <GhostBtn
             onClick={() => {

src/components/BookmarkCard.tsx

@@ -1,10 +1,20 @@
-import { useGetBookmarks } from "@/apis/bookmarks";
+import { useGetBookmarks, useSetBookmarks } from "@/apis/bookmarks";
 import { Icon } from "@team-return/design-system";
 import Link from "next/link";
 import HoverPrefetchLink from "./common/HoverPrefetchLink";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { BookmarkItemsType } from "@/apis/bookmarks/type";
 
 export default function BookmarkCard() {
   const { data: bookmarks } = useGetBookmarks();
+  const { mutate: SetBookmarksMutate } = useSetBookmarks();
+
+  const [localBookmarks, setLocalBookmarks] = useState<BookmarkItemsType[]>(bookmarks?.bookmarks || [])
+
+  useEffect(()=>{
+    if(bookmarks) setLocalBookmarks(bookmarks.bookmarks);
+  },[bookmarks?.bookmarks])
 
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
@@ -17,17 +27,26 @@ export default function BookmarkCard() {
           </Link>
         </div>
       )}
-      {bookmarks?.bookmarks.map(({ company_name, recruitment_id }) => (
+      {localBookmarks.map(({ company_name, recruitment_id, company_logo_url }) => (
         <HoverPrefetchLink
           href={`/recruitments/detail?id=${recruitment_id}`}
           key={recruitment_id}
         >
           <div className="flex flex-col w-full overflow-hidden transition duration-200 cursor-pointer shadow-elevaiton rounded-xl hover:transition hover:scale-105">
+            <div className="w-[100px] h-[100px] overflow-hidden flex justify-center items-center mx-4">
+              <Image src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${company_logo_url}`} width={100} height={100} alt="기업로고" />
+            </div>
             <div className="relative bg-[#ffffff] p-[14px] flex-1 flex flex-col">
               <p className="mr-8 overflow-hidden text-black text-b2 leading-b2 font-b whitespace-nowrap text-ellipsis">
                 {company_name}
               </p>
-              <button className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer">
+              <button className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer" 
+                onClick={(event: React.MouseEvent<HTMLElement>) => {
+                  event.preventDefault();
+                  setLocalBookmarks(prev=>prev.filter(({recruitment_id: id}) => id !== recruitment_id))
+                  SetBookmarksMutate(recruitment_id);
+                }}
+              >
                 <Icon icon="BookmarkOn" color="skyblue" />
               </button>
             </div>

src/components/common/Button/FillBtn.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Propstype extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  backgroundColor?: string
+}
+
+export default function FillBtn({ children, backgroundColor, style, ...rest }: Propstype) {
+  return (
+    <button
+      className='min-w-[122px] h-[48px] py-3 px-4 text-b2 leading-b2 font-b rounded-[8px] text-white'
+      {...rest}
+      style={{
+        backgroundColor: backgroundColor || '#135c9d',
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

src/components/common/DropDown.tsx

@@ -19,7 +19,7 @@ interface PropsType {
 function DropDown({ title, items, onClickItem, selected }: PropsType) {
   const { toggleDropdown, DropDownComponent, closeDropDown } = useDropDown();
 
-  const selectedItemLabel = items.find((item) => item.code === selected);
+  const selectedItemLabel = items.find((item) => item.code === selected.toString());
 
   return (
     <div

src/components/common/TextFiled.tsx

@@ -43,7 +43,7 @@ function TextFiled({
         <p className="text-caption text-[#333333] font-m mb-[4px]">{label}</p>
       )}
       <div
-        className={`w-full  border border-solid rounded-[8px] flex align-center overflow-hidden`}
+        className={`w-full border border-solid rounded-[8px] flex align-center overflow-hidden`}
         style={{
           borderColor: focus ? theme.color.liteBlue : "#cccccc",
           height: height