🔀 후기조회

src/apis/reviews/index.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { instance } from "../axios";
+import {
+  getReviewDetailResponseProps,
+  getReviewListResponseProps,
+} from "./type";
+
+const router = "/reviews";
+
+export const GetReviewList = (companiesId: string) => {
+  return useQuery(["getReviewList", companiesId], async () => {
+    const { data } = await instance.get<getReviewListResponseProps>(
+      `${router}/${companiesId}`
+    );
+    return data;
+  });
+};
+
+export const getReviewDetails = (reviewId: string) => {
+  return useQuery(["getReviewDetails", reviewId], async () => {
+    const { data } = await instance.get<getReviewDetailResponseProps>(
+      `${router}/details/${reviewId}`
+    );
+    return data;
+  });
+};

src/apis/reviews/type.ts

@@ -0,0 +1,20 @@
+export interface getReviewListResponseProps {
+  reviews: getReviewListProps[];
+}
+
+export interface getReviewListProps {
+  review_id: string;
+  year: number;
+  writer: string;
+  date: string;
+}
+
+export interface getReviewDetailResponseProps {
+  qna_responses: getReviewDetailProps[];
+}
+
+export interface getReviewDetailProps {
+  question: string;
+  answer: string;
+  area: string;
+}

src/app/companies/detail/page.tsx

@@ -35,16 +35,18 @@ export default function CompanyDetailPage() {
       }
     };
 
+    const onClickReviews = () => {
+      navigator.push(`/companies/reviews?id=${params.get("id")!}`);
+    };
+
     return (
       <div className="w-full my-[56px]">
         <CompanyTitle
           business_number={business_number_regex(business_number)}
           company_name={company_name}
           company_profile_url={company_profile_url}
           onClickRecruitments={onClickRecruitments}
-          onClickInterview={() => {
-            // 후기조회 링크이동
-          }}
+          onClickInterview={onClickReviews}
         />
         <CompanyTable {...rest} />
       </div>

src/app/companies/reviews/page.tsx

@@ -0,0 +1,13 @@
+import ReviewList from "@/components/company/ReviewList";
+
+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 />
+    </div>
+  );
+}

src/components/common/TextFiled.tsx

@@ -4,7 +4,7 @@ import { Icon, theme } from "@team-return/design-system";
 import React, { KeyboardEvent, useState } from "react";
 
 interface PropsType extends React.ComponentProps<"input"> {
-  customType?: "Search" | "EyesClose" | "EyesOpen";
+  customType?: "Text" | "Search" | "Password";
   enterEvent?: () => void;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   label?: string;
@@ -62,9 +62,9 @@ function TextFiled({
             setFocuse(false);
           }}
         />
-        {type !== "text" && (
+        {customType === "Password" && (
           <div
-            className="flex justify-center items-center mr-[14px] cursor-pointer  "
+            className="flex justify-center items-center mr-[14px] cursor-pointer"
             onClick={() => setIsHidden((prev) => !prev)}
           >
             <Icon
@@ -74,6 +74,18 @@ function TextFiled({
             />
           </div>
         )}
+        {customType === "Search" && (
+          <div
+            className="flex justify-center items-center mr-[14px] cursor-pointer"
+            onClick={enterEvent}
+          >
+            <Icon
+              icon="Search"
+              size={20}
+              color="gray60"
+            />
+          </div>
+        )}
       </div>
     </div>
   );

src/components/company/ReviewItem.tsx

@@ -0,0 +1,45 @@
+import { getReviewDetailProps } from "@/apis/reviews/type";
+import { Icon } from "@team-return/design-system";
+import { useState } from "react";
+
+export default function ReviewItem({
+  item,
+  writer,
+  date,
+}: {
+  item: getReviewDetailProps;
+  writer: string;
+  date: string;
+}) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  return (
+    <>
+      <div
+        className="w-full px-3 py-5 border-b border-[#e5e5e5] flex justify-between cursor-pointer hover:bg-[#fcfcfc]"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <p className="leading-6 text-b3 font-r text-primaryBlue03">
+          {item.question}
+        </p>
+        <Icon
+          icon="Chevron"
+          direction={isOpen ? "top" : "bottom"}
+          color="liteBlue"
+        />
+      </div>
+      {isOpen && (
+        <div className="p-4 bg-[#fafafa] w-full flex relative min-h-[100px] pb-10 gap-1">
+          <p className="text-b3 font-r leading-b3 text-[#444444] flex-1 whitespace-pre-line">
+            {item.answer}
+          </p>
+          <div className="text-caption font-r leading-caption text-[#4F95D4] px-2 py-1 bg-white rounded-[8px] h-[26px]">
+            {item.area}
+          </div>
+          <p className="text-caption font-r leading-caption text-[#7f7f7f] absolute bottom-4 right-4">
+            {date} · {writer}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

src/components/company/ReviewList.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { getReviewDetails, GetReviewList } from "@/apis/reviews";
+import { getReviewListProps } from "@/apis/reviews/type";
+import { useSearchParams } from "next/navigation";
+import ReviewItem from "./ReviewItem";
+
+export default function ReviewList() {
+  const params = useSearchParams();
+  const { data: reviewList, isLoading } = GetReviewList(params.get("id")!);
+
+  if (isLoading)
+    return (
+      <div className="w-full text-center text-b2 font-m leading-b2 text-[#7f7f7f] mt-[200px]">
+        Loading...
+      </div>
+    );
+
+  if (reviewList?.reviews.length === 0)
+    return (
+      <div className="w-full text-center text-b2 font-m leading-b2 text-[#7f7f7f] mt-[200px]">
+        아직 후기가 없어요
+      </div>
+    );
+
+  return (
+    <>
+      {reviewList!.reviews.map((item, idx) => (
+        <ReviewContainers key={idx} {...item} />
+      ))}
+    </>
+  );
+}
+
+function ReviewContainers({ review_id, writer, date }: getReviewListProps) {
+  const { data: reviewDetails } = getReviewDetails(review_id);
+  return (
+    <>
+      {reviewDetails?.qna_responses.map((item, idx) => (
+        <ReviewItem key={idx} item={item} writer={writer} date={date} />
+      ))}
+    </>
+  );
+}

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
         skyBlue: "#2492F4",
         subBlue: "#237BC9",
         lightBlue: "#135C9D",
+        primaryBlue03: "#002C53",
       },
       fontSize: {
         h1: "40px",