refactor: 폰트 크키 및 ui 변경

Invincible-Backend-Study · Jul 4, 2024 · b51a803 · b51a803
1 parent 77c6756
commit b51a803
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 10 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class='dark'>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>무적 백엔드 스터디</title>
     <link href="./src/output.css" rel="stylesheet">
   </head>
-  <body class="dark text-foreground bg-background">
+  <body class="text-foreground bg-background">
     <div id="root" class="dark text-foreground bg-background h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/src/components/InterviewController/InterviewController.tsx b/frontend/src/components/InterviewController/InterviewController.tsx
@@ -15,10 +15,12 @@ const InterviewController = ({onSubmit, onQuit, onPass, disabled, info}: Intervi
     <Button onClick={onSubmit} isLoading={disabled}>
       제출 <Kbd keys={["command"]}>s</Kbd>
     </Button>
+
+    <Button isDisabled>일시정지</Button>
+
     <Button onClick={onPass} isLoading={disabled}>
       패스 <Kbd keys={["command"]}>p</Kbd>
     </Button>
-    <Button isDisabled>일시정지</Button>
     <Button onClick={onQuit}>
       그만두기
       <Kbd keys={["command"]}>q</Kbd>

diff --git a/frontend/src/components/InterviewForm/InterviewForm.tsx b/frontend/src/components/InterviewForm/InterviewForm.tsx
@@ -6,7 +6,7 @@ import {useInterviewForm} from "@/components/InterviewForm/useInterviewForm";
 import {useShortCut} from "@/hooks/useShortCut";
 import InterviewNotification from "@/components/InterviewNotification/InterviewNotification";
 import {useNavigate} from "react-router-dom";
-import {useCallback} from "react";
+import {useCallback, useEffect} from "react";
 import {PATH} from "@/constants/path";
 import {toast} from "sonner";
 
@@ -42,6 +42,10 @@ const InterviewForm = ({interviewId}: InterviewFormProps) => {
 
   const disclosure = useDisclosure();
 
+  useEffect(() => {
+    disclosure.onOpen();
+  }, []);
+
   return <>
     <div className="min-h-screen max-h-screen w-full flex ">
       <div className="w-[20%] p-3" style={{borderRight: border}}>

diff --git a/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx b/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx
@@ -37,7 +37,7 @@ const InterviewQuestionBoard = ({question, remainTailQuestionCount, chatList, is
   return (
     <div className="max-w-full min-w-full ">
       <div className='row-span-4 col-auto'>
-        <p className='text-3xl'>{isLoading ? "질문을 가져옵니다....": question}</p>
+        <p className='text-1xl font-thin'>{isLoading ? "질문을 가져옵니다....": question}</p>
         <TailQuestionMessage/>
 
 

diff --git a/frontend/src/components/QuestionSetItem/QuestionSetItem.tsx b/frontend/src/components/QuestionSetItem/QuestionSetItem.tsx
@@ -9,7 +9,7 @@ interface QuestionSetItemProps {
   openInterviewSetting: (command: InterviewCreateFormCommand) => void;
 }
 
-const QuestionSetItem = ({questionSet:{questionSetId, title, description, tailQuestionDepth, count}, openInterviewSetting}: QuestionSetItemProps) => {
+const QuestionSetItem = ({questionSet:{questionSetId, title, description, tailQuestionDepth, count, thumbnailUrl}, openInterviewSetting}: QuestionSetItemProps) => {
 
   const handleOpenSettings = useCallback(() => {
     openInterviewSetting({
@@ -23,14 +23,13 @@ const QuestionSetItem = ({questionSet:{questionSetId, title, description, tailQu
       <CardHeader className="flex flex-col items-start ">
         <span className="text-blue-500">NEW</span>
         <span>{title}</span>
-        <span>{description}</span>
+        <span className="text-xs">{description}</span>
       </CardHeader>
       <CardBody>
         <Image
-          isBlurred
           width={270}
           height={200}
-          src="https://velog.velcdn.com/images/pak4184/post/98ba8b4f-7b89-4d28-8376-0dc8d1be805a/image.png"
+          src={ thumbnailUrl === null ? "https://velog.velcdn.com/images/pak4184/post/98ba8b4f-7b89-4d28-8376-0dc8d1be805a/image.png" : thumbnailUrl}
         />
       </CardBody>
       <Divider/>

diff --git a/frontend/src/router/InterviewLayout.tsx b/frontend/src/router/InterviewLayout.tsx
@@ -5,6 +5,7 @@ import {useEffect} from "react";
 import {PATH} from "@/constants/path";
 import {ErrorBoundary} from "react-error-boundary";
 import ErrorFallback from "@/components/ErrorFallback/ErrorFallback";
+import {ScrollShadow} from "@nextui-org/react";
 
 
 const InterviewLayout = () => {
@@ -19,7 +20,9 @@ const InterviewLayout = () => {
 
   return (
     <ErrorBoundary fallbackRender={ErrorFallback}>
-      <Outlet/>
+      <ScrollShadow className="h-full">
+        <Outlet/>
+      </ScrollShadow>
     </ErrorBoundary>
   )
 }

diff --git a/frontend/src/types/questionSet.ts b/frontend/src/types/questionSet.ts
@@ -19,6 +19,8 @@ export interface QuestionSetSearchResponse {
    */
   count: number;
 
+  thumbnailUrl: string | null;
+
   tailQuestionDepth: number;
 }
 
@@ -29,4 +31,6 @@ export interface QuestionSet {
   description: string;
   count: number;
   tailQuestionDepth: number;
+
+  thumbnailUrl: string | null;
 }