diff --git a/src/app/components/Button/Button.tsx b/src/app/components/Button/Button.tsx index 451d484c..3729399c 100644 --- a/src/app/components/Button/Button.tsx +++ b/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", diff --git a/src/app/components/MainSelectionCard/MainSelectionCard.tsx b/src/app/components/MainSelectionCard/MainSelectionCard.tsx new file mode 100644 index 00000000..02fe2c4c --- /dev/null +++ b/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: , + text: "기록", + }, + question: { + color: "#FFCE55", + file: , + text: "질문", + }, + evaluation: { + color: "#FF9597", + file: , + text: "평가", + }, + smallerRecord: { + color: "#C08CF8", + file: , + text: "기록", + }, + smallerQuestion: { + color: "#FFCE55", + file: , + text: "질문", + }, + smallerEvaluation: { + color: "#FF9597", + file: , + text: "평가", + }, +}; + +const MainSelectionCard = ({ + isMain, + type, + rounded, +}: MainSelectionCardType) => { + const { color, file, text } = obj[type]; + + if (isMain) { + return ( +
+ + {text} + +
{file}
+
+ ); + } + + return ( +
+ {text} + {file} +
+ ); +}; + +export default MainSelectionCard; diff --git a/src/app/detail/talkroom/_component/TalkRoomSelection.tsx b/src/app/detail/talkroom/_component/TalkRoomSelection.tsx new file mode 100644 index 00000000..9ee8ffa1 --- /dev/null +++ b/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 ( +
+ + + + 토크방 생성 + + +
+
setSelection("record")} + > + + + 독서 기록을 혼자서 할 수 있는 공간으로, 책을 선택한 후 책에 대한 + 내용을 스크랩 할 수 있습니다. + +
+
setSelection("question")} + > + + + 책에 관련한 질문을 작성할 수 있는 공간으로, 책을 선택 후 책에 대한 + 질문을 작성해보세요. + +
+
+ +
+
+ +
+
+
+ ); +}; + +export default TalkRoomSelection; diff --git a/src/app/detail/talkroom/new/page.tsx b/src/app/detail/talkroom/new/page.tsx index 22594952..968d449b 100644 --- a/src/app/detail/talkroom/new/page.tsx +++ b/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 (
diff --git a/src/app/detail/talkroom/page.tsx b/src/app/detail/talkroom/page.tsx index 5fbaf9c7..578dbd2a 100644 --- a/src/app/detail/talkroom/page.tsx +++ b/src/app/detail/talkroom/page.tsx @@ -1,5 +1,7 @@ +import TalkRoomSelection from "./_component/TalkRoomSelection"; + const TalkRoom = () => { - return
; + return ; }; export default TalkRoom; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 81a16442..09f5407c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,7 +25,9 @@ export default function RootLayout({
-
{children}
+
+ {children} +