Feat: change font

src/App.js

@@ -8,8 +8,8 @@ import React from "react";
 const App = () => {
   return (
     <StyledEngineProvider injectFirst>
+      <GlobalStyle />
       <RecoilRoot>
-        <GlobalStyle />
         <Router />
       </RecoilRoot>
     </StyledEngineProvider>

src/assets/fonts/index.js

@@ -0,0 +1,2 @@
+import { createGlobalStyle } from "styled-components";
+import Pretendard-Medium from "./Pretendard-Medium.woff";

src/components/common/AddTripDialog.js

@@ -8,7 +8,7 @@
 import Dialog from "@mui/material/Dialog";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { dialog, dialogState } from "../../recoil/commonState";
 import People from "../../assets/icons/people.svg";
 import Person from "../../assets/icons/person.svg";
 
@@ -34,13 +34,13 @@
         <AddlstItm disableGutters onClick={goToAdd}>
           <AddItemBtn onClick={handleClose}>
             <IconImg src={Person} />
-            <ListItemText>여행 추가하기</ListItemText>
+            <LstItmTxt>여행 추가하기</LstItmTxt>
           </AddItemBtn>
         </AddlstItm>
         <AddlstItm disableGutters onClick={goToParticipate}>
           <AddItemBtn onClick={handleClose}>
             <IconImg src={People} />
-            <ListItemText>친구 여행 참여하기</ListItemText>
+            <LstItmTxt>친구 여행 참여하기</LstItmTxt>
           </AddItemBtn>
         </AddlstItm>
       </AddList>
@@ -89,3 +89,8 @@
 const IconImg = styled.img`
   margin-right: 0.7rem;
 `;
+
+const LstItmTxt = styled(ListItemText)`
+  font-family: var(--pretendard-regular);
+`;
+

src/components/common/CancelContent.js

@@ -30,6 +30,7 @@ const TitleTypo = styled(Typography)`
   font-weight: bolder;
   font-size: 1.8rem;
   margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const ContentDiv =styled.div`

src/components/common/DelTripContent.js

@@ -29,6 +29,8 @@ const TitleTypo = styled(Typography)`
   font-weight: bolder;
   font-size: 1.8rem;
   margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
+  letter-spacing: 1px;
 `;
 
 const ContentDiv =styled.div`

src/components/common/DiaryListItem.js

@@ -7,10 +7,10 @@
 import Dot from "../../assets/icons/dot.svg";
 import { PropTypes } from "prop-types";
 import { useRecoilState } from "recoil";
 import { tripIdState, diaryIdState } from "../../recoil/commonState";
 import { useNavigate } from "react-router-dom";
 export default function DiaryListItem(props) {
   const [diaryId, setDiaryId] = useRecoilState(diaryIdState);
   const navigate = useNavigate();
   const goToDiary = () => {
     setDiaryId(props.data._id);
@@ -93,8 +93,8 @@
   color: ${COLOR.MAIN_BLACK};
   font-size: 1.8rem;
   font-weight: bold;
-  font-family: var(--inter-extrabold);
-  margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
+  margin-bottom: 0.7rem;
 `;
 
 const DateDiv = styled.div`
@@ -106,11 +106,13 @@
   font-size: 1.3rem;
   color: rgba(119, 119, 119);
   border-right: 1px solid rgba(119, 119, 119);
-  padding-right: 0.3rem;
+  padding-right: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const UserP = styled.p`
-  font-size: 1rem;
+  font-size: 1.1rem;
   color: rgba(119, 119, 119);
-  padding-left: 0.3rem;
+  padding-left: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;

src/components/common/DiaryPreviewContent.js

@@ -11,8 +11,8 @@
 
 const DiaryPreviewContent = ({ diaries }) => {
 
   const [tripId, setTripId] = useRecoilState(tripIdState);
   const [diaryId, setDiaryId] = useRecoilState(diaryIdState);
   const navigate = useNavigate();
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
   const sliderRef = useRef(null);
@@ -147,6 +147,7 @@
   padding: 0.5rem 2.2rem 0.3rem 2.2rem;
   display: flex;
   align-items: center;
+  font-family: var(--pretendard-medium);
 `;
 
 const DateDiv = styled.div`
@@ -157,6 +158,7 @@
   color: gray;
   display: flex;
   align-items: center;
+  font-family: var(--pretendard-medium);
 `;
 
 const Button = styled.button`
@@ -167,6 +169,7 @@
   border: none;
   font-size: 2rem;
   cursor: pointer;
+  font-family: var(--pretendard-medium);
 `;
 
 const ButtonLeft = styled(Button)`
@@ -195,4 +198,5 @@
   color: white;
   font-weight: bolder;
   margin: 1rem 0rem;
+  font-family: var(--pretendard-medium);
 `;

src/components/common/FriendList.js

@@ -34,7 +34,7 @@ const MyFriend = styled.p`
   padding: 2rem;
   margin: 0rem 0.5rem;
   font-size: 2rem;
-  font-weight: 900;
+  font-family: var(--pretendard-bold);
 `;
 
 const FriendItemDiv = styled.div`
@@ -54,8 +54,8 @@ const FriendImg = styled.img`
 
 const FriendNameDiv = styled.div`
   font-size: 1.8rem;
-  font-weight: 900;
   display: flex;
   align-items: center;
   margin: 1rem 1.5rem;
+  font-family: var(--pretendard-semibold);
 `;

src/components/common/RecomListItem.js

@@ -89,4 +89,5 @@ const TitleP = styled.p`
   font-weight: bold;
   margin-bottom: 0.5rem;
   margin-right: 0.2rem;
+  font-family: var(--pretendard-medium);
 `;

src/components/common/TripCalendar.js

@@ -102,9 +102,7 @@ const TripCalendar = ({ diaryInfo }) => {
         tileClassName={tileClassName}
       />
       <Drawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false)}>
-        <DiaryModal
-          content={<DiaryPreviewContent diaries={selectedDiary} />}
-        />
+        <DiaryModal content={<DiaryPreviewContent diaries={selectedDiary} />} />
       </Drawer>
     </CalendarWrapper>
   );
@@ -169,6 +167,7 @@ const CalendarStyle = styled(Calendar)`
   .react-calendar__navigation__label {
     font-size: 2.5rem;
     font-weight: 600;
+    font-family: var(--pretendard-medium);
   }
 
   .react-calendar__tile {
@@ -179,6 +178,7 @@ const CalendarStyle = styled(Calendar)`
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: var(--pretendard-medium);
   }
 
   .react-calendar__month-view__weekdays__weekday {
@@ -189,6 +189,7 @@ const CalendarStyle = styled(Calendar)`
     justify-content: center;
     align-items: center;
     text-align: center;
+    font-family: var(--pretendard-medium);
   }
   .react-calendar__month-view__weekdays__weekday--weekend abbr[title="Sunday"] {
     //일요일에 빨간 폰트

src/components/common/TripListItem.js

@@ -72,7 +72,7 @@ export default function TripListItem(props) {
             </p>
           </ModiDiv>
           <DelDiv>
-            <p style={{ color: "#a1a1a1" }} onClick={toggleModal}>
+            <p style={{ color: "#a1a1a1"}} onClick={toggleModal}>
               삭제
             </p>
           </DelDiv>
@@ -124,8 +124,9 @@ const TitleP = styled.p`
   color: ${COLOR.MAIN_EMER};
   font-size: 1.2rem;
   font-weight: bold;
-  font-family: var(--inter-extrabold);
+  font-family: var(--pretendard-regular);
   margin-bottom: 0.1rem;
+  letter-spacing: 1px;
 `;
 
 const DateP = styled.p`
@@ -143,6 +144,7 @@ const LocationDiv = styled.div`
 const LocationP = styled.p`
   font-size: 0.8rem;
   color: rgba(119, 119, 119);
+  font-family: var(--pretendard-medium);
 `;
 
 const DeleteDiv = styled.div`
@@ -178,6 +180,7 @@ const YesBtn = styled.button`
   font-size: 1.3rem;
   color: white;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;
 
 const NoBtn = styled.button`
@@ -189,4 +192,5 @@ const NoBtn = styled.button`
   font-size: 1.3rem;
   color: black;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;

src/components/common/map/MapDrawer.js

@@ -72,11 +72,15 @@ const InfoDiv = styled.div`
 const TitleP = styled.p`
   font-size: 2.2rem;
   font-weight: 800;
+  font-family: var(--pretendard-medium);
+  margin-bottom: 0.2rem;
+  letter-spacing: 1px;
 `;
 
 const DataP = styled.p`
   color: rgba(119, 119, 119);
   font-size: 1.3rem;
+  font-family: var(--pretendard-regular);
 `;
 
 const LocationDiv = styled.div`
@@ -87,19 +91,21 @@ const LocationDiv = styled.div`
 `;
 
 const LocationP = styled.p`
-  font-size: 1rem;
+  font-size: 1.2rem;
   color: rgba(119, 119, 119);
   margin-left: 0.3rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const GoToTripBtn = styled(Button)`
   color: ${COLOR.MAIN_WHITE};
-  font-size: 1.3rem;
+  font-size: 1.5rem;
   background-color: ${COLOR.MAIN_EMER};
   width: 90%;
   height: 4rem;
   border-radius: 10rem;
   font-weight: 800;
+  font-family: var(--pretendard-semibold);
   box-shadow: 0.2rem 0.2rem 0.2rem rgba(180, 180, 180);
   margin-top: 2rem;
   &:hover {

src/index.css

@@ -21,7 +21,39 @@ code {
   font-family: "InterExtraBold";
   src: url(./assets/fonts/Inter/static/Inter-ExtraBold.ttf);
 }
+
+@font-face {
+  font-family: "PretendardLight";
+  src: url(./assets/fonts/Pretendard-Light.woff);
+}
+
+@font-face {
+  font-family: "PretendardExtraLight";
+  src: url(./assets/fonts/Pretendard-ExtraLight.woff);
+}
+
+
+@font-face {
+  font-family: "PretendardBold";
+  src: url(./assets/fonts/Pretendard-Bold.woff);
+}
+
+@font-face {
+  font-family: "PretendardSemibold";
+  src: url(./assets/fonts/Pretendard-SemiBold.woff);
+}
+
+@font-face {
+  font-family: "PretendardRegular";
+  src: url(./assets/fonts/Pretendard-Regular.woff);
+}
+
 :root{
   --inter-medium: "InterMedium";
   --inter-extrabold: "InterExtraBold";
+  --pretendard-medium: "PretendardLight";
+  --pretendard-bold: "PretendardBold";
+  --pretendard-regular: "PretendardRegular";
+  --pretendard-semibold: "PretendardSemibold";
+  --pretendard-extralight: "PretendardExtraLight";
 }

src/pages/CalendarPage.js

@@ -5,7 +5,7 @@ import TripCalendar from "../components/common/TripCalendar";
 import BottomNav from "../layout/BottomNav";
 import { COLOR } from "../styles/color";
 import axios from "axios";
-
+import { Typography } from "@mui/material";
 const CalendarPage = () => {
   const SERVER_URL = process.env.REACT_APP_SERVER_URL;
   const [diaryInfo, setDiaryInfo] = useState([]);
@@ -37,18 +37,36 @@ const CalendarPage = () => {
 
 
   return (
-    <div>
-      <Title>내 캘린더</Title>
+    <StCalendarPage>
+      <TitleDiv>
+        <TitleTypo>내 캘린더</TitleTypo>
+      </TitleDiv>
       {!loading && <TripCalendar diaryInfo={diaryInfo} />}
       <BottomNav></BottomNav>
-    </div>
+    </StCalendarPage>
   );
 };
 export default CalendarPage;
 
-const Title = styled.div`
-  font-size: 3rem;
-  font-weight: 900;
+const StCalendarPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const TitleDiv = styled.div`
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+  padding-left: 2rem;
+`;
+
+const TitleTypo = styled(Typography)`
   color: ${COLOR.MAIN_GREEN};
-  padding: 3rem 2rem;
+  font-weight: 1000;
+  font-size: 2.5rem;
+  font-family: var(--pretendard-bold);
 `;

src/pages/DiaryListPage.js

@@ -156,7 +156,8 @@ const TitleDiv = styled.div`
 const TitleP = styled.p`
   font-size: 2rem;
   padding-left: 1rem;
-  font-weight: bold;
+  font-family: var(--pretendard-medium);
+  font-weight: 800;
 `;
 
 const MainDiv = styled.div`
@@ -187,11 +188,11 @@ const AddFriendBtn = styled(Button)`
   right: 5%;
   left: 70%;
   height: 3.5rem;
-  width: 9rem;
+  width: 10rem;
   background-color: ${COLOR.MAIN_EMER};
   color: white;
-  font-size: 1.1rem;
-  font-weight: 600;
+  font-size: 1.2rem;
+  font-family: var(--pretendard-regular);
   border-radius: 3rem;
   &:hover {
     background-color: ${COLOR.MAIN_EMER};
@@ -227,6 +228,7 @@ const SemititleDiv = styled.div`
 const SemititleP = styled.p`
   font-size: 1.7rem;
   margin-left: 1rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const PencilImg = styled.img`