feat: 메인 폰트 변경

datastreams-knu · Dec 5, 2024 · 4839cd7 · 4839cd7
1 parent e3eaecf
commit 4839cd7
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -27,9 +27,9 @@
       @import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap");
 
       @font-face {
-        font-family: "GangwonEduSaeeum_OTFMediumA";
-        src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff")
-          format("woff");
+        font-family: "omyu_pretty";
+        src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2")
+          format("woff2");
         font-weight: normal;
         font-style: normal;
       }

diff --git a/src/pages/MainPage/GuestPage.tsx b/src/pages/MainPage/GuestPage.tsx
@@ -238,7 +238,7 @@ const GuestPage = () => {
                 maxW="800px"
               >
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -247,7 +247,7 @@ const GuestPage = () => {
                   해외 인턴십 정보 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -256,7 +256,7 @@ const GuestPage = () => {
                   지도교수 상담 일정 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -267,7 +267,7 @@ const GuestPage = () => {
                   정설영 교수님 이메일 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -276,7 +276,7 @@ const GuestPage = () => {
                   심컴 졸업요건 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}

diff --git a/src/pages/MainPage/Sidebar/Sidebar.tsx b/src/pages/MainPage/Sidebar/Sidebar.tsx
@@ -338,7 +338,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
             <Box
               textAlign="center"
               mb={4}
-              fontSize={{ base: "36px", md: "50px" }}
+              fontSize={{ base: "36px", md: "46px" }}
+              mt={-3}
               fontWeight={"bold"}
               color="#C73732"
               onClick={() => navigate("/")} // 메인 페이지로 이동
@@ -489,7 +490,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
                         textAlign="left"
                         color="#333"
                         pl={2}
-                        fontSize={{ base: "lg", md: "xl" }}
+                        fontSize={{ base: "lg", md: "lg" }}
                         _hover={{ textDecoration: "underline" }}
                         flex="1"
                         overflow="hidden" // 텍스트가 버튼의 크기를 넘지 않도록 설정
@@ -557,30 +558,34 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
                 mt={5}
                 ml={"auto"}
                 mr={"auto"}
+                mb={3}
                 p={5}
                 borderRadius={"md"}
                 textAlign={"left"}
                 color={"black"}
-                fontSize={{ base: "20px", md: "26px" }}
                 background={"#FFCDC2"}
                 boxShadow={
                   "0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)"
                 } // 사용자 정의 그림자
               >
                 {userInfo ? (
-                  <Box>
+                  <Box fontSize={{ base: "lg", md: "xl" }}>
                     <Text>닉네임 : {userInfo.nickname}</Text>
                     <Text>가입일 : {userInfo.joinedAt.split("T")[0]}</Text>
                     <Text>지금까지 한 질문: {userInfo.num_of_question}개</Text>
                   </Box>
                 ) : error ? (
-                  <Text color="red.500">{error}</Text>
+                  <Text color="red.500" fontSize={"md"}>
+                    잠시 오류가 있어요😭
+                    <br />
+                    페이지를 새로고침 해주세요!
+                  </Text>
                 ) : (
                   <Text>정보를 불러오는 중...</Text>
                 )}
                 <Button
                   mt={4}
-                  fontSize={{ base: "20px", md: "22px" }}
+                  fontSize={{ base: "lg", md: "lg" }}
                   fontWeight="medium"
                   bg="#EFA9A4"
                   color="black"
@@ -594,7 +599,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
                 </Button>
                 <Button
                   mt={4}
-                  fontSize={{ base: "20px", md: "22px" }}
+                  fontSize={{ base: "lg", md: "lg" }}
                   fontWeight="medium"
                   bg="#EFA9A4"
                   color="black"

diff --git a/src/pages/MainPage/UserChat.tsx b/src/pages/MainPage/UserChat.tsx
@@ -392,7 +392,7 @@ const UserChat = () => {
                 maxW="800px"
               >
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -401,7 +401,7 @@ const UserChat = () => {
                   해외 인턴십 정보 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -410,7 +410,7 @@ const UserChat = () => {
                   지도교수 상담 일정 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -421,7 +421,7 @@ const UserChat = () => {
                   정설영 교수님 이메일 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}
@@ -430,7 +430,7 @@ const UserChat = () => {
                   심컴 졸업요건 알려줘
                 </Button>
                 <Button
-                  fontSize="2xl"
+                  fontSize={{ base: "xl", md: "2xl" }}
                   fontWeight="medium"
                   bg="#EAE6DA"
                   _hover={{ bg: "#DDD8C6", transform: "scale(1.05)" }}

diff --git a/src/pages/MainPage/messageList/MessageList.tsx b/src/pages/MainPage/messageList/MessageList.tsx
@@ -56,7 +56,7 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
             maxW="80%"
             alignSelf={isEven ? "flex-start" : "flex-end"}
             wordBreak="break-word"
-            fontSize={{ base: "xl", md: "2xl" }}
+            fontSize={{ base: "xl", md: "xl" }}
             animation="fadeIn 0.5s ease" // CSS 애니메이션
             style={{
               opacity: 0,

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -2,7 +2,7 @@ import { extendTheme } from "@chakra-ui/react";
 
 const theme = extendTheme({
   fonts: {
-    body: "'GangwonEduSaeeum_OTFMediumA', cursive", // 본문에 사용할 폰트 설정
+    body: "'omyu_pretty', cursive", // 본문에 사용할 폰트 설정
   },
 });