Merge pull request #89 from jisung-in/88-pivoting

메인 페이지 배너 컴포넌트 제작 및 토크룸 생성 전페이지 제작

src/app/components/Button/Button.tsx

@@ -7,7 +7,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         main: "bg-brown-50 text-white hover:bg-brown-60",
-        empty: "bg-white text-gray-50 border-2 border-gray-40",
+        empty: "bg-white text-brown-40 border-2 border-brown-40",
         none: "text-white",
         gray: "text-gray-80 font-[500] border-2",
         ivory: "bg-ivory-40 text-brown-50",

src/app/components/MainSelectionCard/MainSelectionCard.tsx

@@ -0,0 +1,86 @@
+import RecordComponent from "@/assets/img/record.svg";
+import QuestionComponent from "@/assets/img/question.svg";
+import EvaluationComponent from "@/assets/img/evalutaion.svg";
+import clsx from "clsx";
+
+type MainSelectionCardType = {
+  isMain: boolean;
+  type:
+    | "record"
+    | "question"
+    | "evaluation"
+    | "smallerRecord"
+    | "smallerQuestion"
+    | "smallerEvaluation";
+  rounded: boolean;
+};
+
+const obj = {
+  record: {
+    color: "#C08CF8",
+    file: <RecordComponent className="w-40 h-40" />,
+    text: "기록",
+  },
+  question: {
+    color: "#FFCE55",
+    file: <QuestionComponent className="w-40 h-40" />,
+    text: "질문",
+  },
+  evaluation: {
+    color: "#FF9597",
+    file: <EvaluationComponent className="w-40 h-40" />,
+    text: "평가",
+  },
+  smallerRecord: {
+    color: "#C08CF8",
+    file: <RecordComponent className="w-8 h-8" />,
+    text: "기록",
+  },
+  smallerQuestion: {
+    color: "#FFCE55",
+    file: <QuestionComponent className="w-8 h-8" />,
+    text: "질문",
+  },
+  smallerEvaluation: {
+    color: "#FF9597",
+    file: <EvaluationComponent className="w-6 h-6" />,
+    text: "평가",
+  },
+};
+
+const MainSelectionCard = ({
+  isMain,
+  type,
+  rounded,
+}: MainSelectionCardType) => {
+  const { color, file, text } = obj[type];
+
+  if (isMain) {
+    return (
+      <div
+        className="flex flex-col rounded-lg flex-1 text-brown-60 hover:text-white duration-200 cursor-pointer"
+        style={{ backgroundColor: color }}
+      >
+        <span className="flex w-full text-[40px] pl-4 pt-4 font-bold">
+          {text}
+        </span>
+        <div className="flex w-full justify-end pr-4">{file}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center rounded-lg p-2 px-4 gap-2",
+        rounded && "rounded-[40px]",
+      )}
+      style={{ backgroundColor: color }}
+    >
+      <span className="flex text-[25px] font-bold text-brown-60">{text}</span>
+      {file}
+    </div>
+  );
+};
+
+export default MainSelectionCard;

src/app/detail/talkroom/_component/TalkRoomSelection.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Button } from "@/app/components/Button/Button";
+import MainSelectionCard from "@/app/components/MainSelectionCard/MainSelectionCard";
+import BackButton from "@/app/summary/_component/BackButton";
+import clsx from "clsx";
+import { useState } from "react";
+import TalkRoomIcon from "@/assets/img/talk-icon.svg";
+
+const TalkRoomSelection = () => {
+  const [selection, setSelection] = useState("record");
+
+  return (
+    <div className="flex flex-col w-full min-h-[800px] bg-white px-[20%] py-10">
+      <BackButton />
+
+      <span className="flex items-center gap-4 text-[30px] font-bold py-4 border-b-[1px]">
+        토크방 생성
+        <TalkRoomIcon />
+      </span>
+      <div className="flex flex-col gap-8">
+        <div
+          className={clsx(
+            "flex items-center hover:bg-purple-40 duration-500 hover:border-purple-50 cursor-pointer border-2 rounded-xl p-2 gap-4 text-lg font-bold text-gray-60",
+            selection === "record" &&
+              "bg-purple-40 border-purple-50 text-[#000000]",
+          )}
+          onClick={() => setSelection("record")}
+        >
+          <MainSelectionCard
+            isMain={false}
+            type="smallerRecord"
+            rounded={true}
+          />
+          <span>
+            독서 기록을 혼자서 할 수 있는 공간으로, 책을 선택한 후 책에 대한
+            내용을 스크랩 할 수 있습니다.
+          </span>
+        </div>
+        <div
+          className={clsx(
+            "flex items-center hover:bg-yellow-40 duration-500 hover:border-yellow-50 cursor-pointer border-2 rounded-xl p-2 gap-4 text-lg font-bold text-gray-60",
+            selection === "question" &&
+              "text-[#000000] bg-yellow-40 border-yellow-50",
+          )}
+          onClick={() => setSelection("question")}
+        >
+          <MainSelectionCard
+            isMain={false}
+            type="smallerQuestion"
+            rounded={true}
+          />
+          <span>
+            책에 관련한 질문을 작성할 수 있는 공간으로, 책을 선택 후 책에 대한
+            질문을 작성해보세요.
+          </span>
+        </div>
+      </div>
+
+      <div className="flex w-full justify-end pt-8">
+        <div className="w-[100px]">
+          <Button variant="empty">다음</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TalkRoomSelection;

src/app/detail/talkroom/new/page.tsx

@@ -5,7 +5,7 @@ import { Input } from "@/app/components/Input/Input";
 import BackButton from "@/app/summary/_component/BackButton";
 import { BUTTON_INDEX } from "@/constants/buttonIndex";
 import { Textarea } from "@/app/components/Textarea/Textarea";
-import { ChangeEvent, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { BookInfo } from "@/hook/reactQuery/search/useGetKakaoResults";
 import ConditionButtons from "@/app/components/molecules/ConditionButtons/ConditionButtons";
 import { useCreateRoom } from "@/hook/reactQuery/talkRoom/useCreateRoom";
@@ -71,6 +71,8 @@ const NewTalkRoom = () => {
     router.back();
   };
 
+  useEffect(() => {}, []);
+
   return (
     <main className="flex flex-col w-full p-8">
       <BackButton />

src/app/detail/talkroom/page.tsx

@@ -1,5 +1,7 @@
+import TalkRoomSelection from "./_component/TalkRoomSelection";
+
 const TalkRoom = () => {
-  return <div></div>;
+  return <TalkRoomSelection />;
 };
 
 export default TalkRoom;

src/app/layout.tsx

@@ -25,7 +25,9 @@ export default function RootLayout({
           <ReactQueryProvider>
             <ReduxProvider>
               <Header />
-              <div className="flex flex-grow flex-col w-[100%]">{children}</div>
+              <div className="flex flex-grow flex-col w-[100%] h-full">
+                {children}
+              </div>
               <Footer />
             </ReduxProvider>
           </ReactQueryProvider>

src/app/page.tsx

@@ -18,6 +18,7 @@ import ResizeImage from "./components/ResizeImage/ResizeImage";
 import RankSwiper from "./components/Swiper/RankSwiper";
 import TalkRoomCardSwiper from "./components/Swiper/TalkRoomCardSwiper";
 import { ThemeMain } from "./components/Theme/Theme";
+import MainSelectionCard from "./components/MainSelectionCard/MainSelectionCard";
 type TalkRoom = {
   id: number;
   profileImage: string;
@@ -112,6 +113,15 @@ const page = () => {
           xl:mb-[24px]
           xl2:mb-[26px]"
         >
+          <div className="flex w-full gap-[2%] pb-4">
+            <MainSelectionCard isMain={true} rounded={false} type="record" />
+            <MainSelectionCard isMain={true} rounded={false} type="question" />
+            <MainSelectionCard
+              isMain={true}
+              rounded={false}
+              type="evaluation"
+            />
+          </div>
           <ThemeMain>
             <ThemeMain.MainTheme>
               <div