feat: 폰트 세부사항 수정

datastreams-knu · Nov 20, 2024 · 121ef8c · 121ef8c
1 parent ffd18dc
commit 121ef8c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 22 deletions.
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -53,29 +53,30 @@ const LoginPage: React.FC = () => {
           <Input
             placeholder="이메일"
             bg="white"
-            variant="filled"
+            fontSize={"xl"}
             focusBorderColor="#DCD8C8"
           />
           {/* 비밀번호 입력 */}
           <Input
             placeholder="비밀번호"
             type="password"
             bg="white"
-            variant="filled"
+            fontSize={"xl"}
             focusBorderColor="#DCD8C8"
           />
           {/* 로그인 버튼 */}
           <Button
             w="full"
             bg="#DCD8C8"
             color="black"
-            fontSize={"lg"}
+            fontSize={"2xl"}
+            fontWeight={"light"}
             _hover={{ bg: "#AAA282" }}
           >
             로그인하기
           </Button>
           {/* 회원가입 링크 */}
-          <Text fontSize="lg" color="gray.600">
+          <Text fontSize="2xl" color="gray.600">
             아직 회원이 아니신가요?{" "}
             <Link color="#8B8469" onClick={handleSignup}>
               회원가입

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -159,7 +159,7 @@ const MainPage = () => {
               <Image
                 src={tutorialImage}
                 alt="Tutorial"
-                maxW="100%"
+                maxW="90%"
                 maxH="400px"
                 objectFit="contain"
               />
@@ -175,7 +175,7 @@ const MainPage = () => {
                   fontSize="2xl"
                   fontWeight="medium"
                   bg="#EAE6DA"
-                  _hover={{ bg: "#DDD8C6" }}
+                  _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
                   onClick={() => handleSendMessage("최근 공지사항 알려줘")}
                 >
                   최근 공지사항 알려줘
@@ -184,7 +184,7 @@ const MainPage = () => {
                   fontSize="2xl"
                   fontWeight="medium"
                   bg="#EAE6DA"
-                  _hover={{ bg: "#DDD8C6" }}
+                  _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
                   onClick={() =>
                     handleSendMessage("점심 제공하는 세미나 알려줘")
                   }
@@ -195,7 +195,7 @@ const MainPage = () => {
                   fontSize="2xl"
                   fontWeight="medium"
                   bg="#EAE6DA"
-                  _hover={{ bg: "#DDD8C6" }}
+                  _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
                   onClick={() =>
                     handleSendMessage("컴퓨터학부 대회 정보 알려줘")
                   }
@@ -206,7 +206,7 @@ const MainPage = () => {
                   fontSize="2xl"
                   fontWeight="medium"
                   bg="#EAE6DA"
-                  _hover={{ bg: "#DDD8C6" }}
+                  _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
                   onClick={() => handleSendMessage("졸업요건에 대해 알려줘")}
                 >
                   졸업요건에 대해 알려줘
@@ -215,7 +215,7 @@ const MainPage = () => {
                   fontSize="2xl"
                   fontWeight="medium"
                   bg="#EAE6DA"
-                  _hover={{ bg: "#DDD8C6" }}
+                  _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
                   onClick={() => handleSendMessage("수강신청 언제야")}
                 >
                   수강신청 언제야

diff --git a/src/pages/MainPage/MessageInput/MessageInput.tsx b/src/pages/MainPage/MessageInput/MessageInput.tsx
@@ -69,7 +69,8 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           border="none"
           outline="none"
           width="100%"
-          fontSize="22px"
+          fontFamily={`'Noto Sans KR', sans-serif`}
+          fontSize={"16px"}
           pr="45px"
           resize="none"
           overflowY="auto"

diff --git a/src/pages/MainPage/Sidebar/Sidebar.tsx b/src/pages/MainPage/Sidebar/Sidebar.tsx
@@ -125,10 +125,10 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
             <Button
               variant="unstyled"
               background={"#B8433A"}
-              width="300px"
+              width="250px"
               height="45px"
               fontSize={30}
-              fontWeight={300}
+              fontWeight={"light"}
               onClick={handleLogin}
               _hover={{ bg: "#7E2B24" }}
             >
@@ -213,10 +213,10 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
           >
             <Flex justifyContent="space-between" alignItems="center">
               <Box>
-                <Box fontSize="22px" fontWeight="300">
+                <Box fontSize="22px" fontWeight="100">
                   사이드바를 열어 로그인하거나
                 </Box>
-                <Box fontSize="22px" fontWeight="300" mt="-4px">
+                <Box fontSize="22px" fontWeight="100" mt="-4px">
                   히스토리를 볼 수 있어요!
                 </Box>
               </Box>

diff --git a/src/pages/MainPage/messageList/MessageList.tsx b/src/pages/MainPage/messageList/MessageList.tsx
@@ -42,7 +42,7 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
             maxW="80%"
             alignSelf={isEven ? "flex-start" : "flex-end"}
             wordBreak="break-word"
-            fontSize="xl"
+            fontSize={{ base: "xl", md: "2xl" }} // 모바일 환경에서는 폰트가 작아지게 설정
           >
             <Text>{message}</Text>
           </Box>

diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx
@@ -49,21 +49,23 @@ const SignupPage: React.FC = () => {
       <Center p={8} pb={120} maxW="500px" mx={"auto"}>
         <Stack spacing={7} align="center" w="full">
           {/* 상단 캐릭터 이미지 */}
-          <Image src={welcomeHobanu} alt="Character" boxSize="180px" mb={3} />
+          <Image src={welcomeHobanu} alt="Character" boxSize="220px" mb={3} />
           {/* 이메일 입력 및 중복 확인 */}
           <Box w="full">
             <Stack direction="row" spacing={2}>
               <Input
                 placeholder="이메일"
                 bg="white"
-                variant="filled"
+                fontSize={"xl"}
                 focusBorderColor="#DCD8C8"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
               <Button
                 bg="#AAA282"
                 color="white"
+                fontSize={"xl"}
+                fontWeight={"light"}
                 _hover={{ bg: "#8B8469" }}
                 onClick={handleEmailCheck}
               >
@@ -72,7 +74,7 @@ const SignupPage: React.FC = () => {
             </Stack>
             {/* 이메일 중복 확인 메시지 */}
             {emailCheckMessage && (
-              <Text fontSize="sm" color="#8B8469" mt={2} textAlign={"center"}>
+              <Text fontSize={"xl"} color="#8B8469" mt={2} textAlign={"center"}>
                 {emailCheckMessage}
               </Text>
             )}
@@ -82,22 +84,23 @@ const SignupPage: React.FC = () => {
             placeholder="비밀번호"
             type="password"
             bg="white"
-            variant="filled"
+            fontSize={"xl"}
             focusBorderColor="#DCD8C8"
           />
           {/* 닉네임 입력 */}
           <Input
             placeholder="닉네임"
             bg="white"
-            variant="filled"
+            fontSize={"xl"}
             focusBorderColor="#DCD8C8"
           />
           {/* 회원가입 버튼 */}
           <Button
             w="full"
             bg="#DCD8C8"
             color="black"
-            fontSize="lg"
+            fontSize="2xl"
+            fontWeight={"light"}
             _hover={{ bg: "#AAA282" }}
           >
             가입하기