Merge pull request #27 from gamgyul-code/feat/myTripPage

hotfix: 공통 fontStyle 변경 및 적용
gamgyul-code · Aug 13, 2024 · 9c85ddf · 9c85ddf
2 parents b662990 + e0894d9
commit 9c85ddf
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 44 deletions.
diff --git a/gamgyul-front/src/components/common/AttractionItem/index.jsx b/gamgyul-front/src/components/common/AttractionItem/index.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { theme } from "../../../style/theme";
 import { useEffect, useState } from "react";
+import { applyFontStyles } from "../../../utils/fontStyles";
 
 /** 관광지 아이템 컴포넌트 (분리 필요) */
 const AttractionItem = ({ isChecked, onCheckChange }) => {
@@ -74,13 +75,11 @@ const AtrctItemInfo = styled.section`
   }
 
   h3 {
-    font-size: ${theme.fontSize.body2};
-    font-weight: 600;
+    ${applyFontStyles(theme.font.body2)}
   }
   p {
-    font-size: ${theme.fontSize.body3};
+    ${applyFontStyles(theme.font.body3)}
     color: ${theme.color.gray1};
-    font-weight: 400;
   }
 
   figure > img {

diff --git a/gamgyul-front/src/components/common/Button/index.jsx b/gamgyul-front/src/components/common/Button/index.jsx
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { theme } from "../../../style/theme";
+import { applyFontStyles } from "../../../utils/fontStyles";
 
 const Button = ({ type, size, onClick, children, color, className, disabled, ...props }) => {
   return (
@@ -10,13 +11,13 @@ const Button = ({ type, size, onClick, children, color, className, disabled, ...
 };
 
 const StyledButton = styled.button`
+  ${applyFontStyles(theme.font.body1)}
   width: 100%;
   height: ${({ type }) => (type === "small" ? "40px" : "64px")};
   border-radius: 10px;
   border: 0;
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   background-color: ${({ disabled }) => (disabled ? theme.color.grayscale_BF : theme.color.primary)};
   color: ${theme.color.white};
-  font-size: ${theme.fontSize.body1};
 `;
 export default Button;
diff --git a/gamgyul-front/src/components/common/DropDown/index.jsx b/gamgyul-front/src/components/common/DropDown/index.jsx
@@ -3,6 +3,7 @@ import { useState, useCallback } from "react";
 import ArrowUp from "../../../assets/DropDown/arrow_down.svg";
 import ArrowDown from "../../../assets/DropDown/arrow_up.svg";
 import { theme } from "../../../style/theme";
+import { applyFontStyles } from "../../../utils/fontStyles";
 
 const DropDown = ({ title, children, number, content }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,15 +30,16 @@ const StyledDropDown = styled.div`
 `;
 
 const Header = styled.h2`
+  ${applyFontStyles(theme.font.body1)}
   display: flex;
   align-items: center;
   cursor: pointer;
   padding: 16px;
   margin: 0;
-  font-size: ${theme.fontSize.body1};
 `;
 
 const NumberCircle = styled.div`
+  ${applyFontStyles(theme.font.body2)}
   width: 24px;
   height: 24px;
   background-color: #00a653;
@@ -47,8 +49,6 @@ const NumberCircle = styled.div`
   align-items: center;
   justify-content: center;
   margin-right: 10px;
-  font-size: ${theme.fontSize.body2};
-  font-weight: 500;
 `;
 
 const Title = styled.span`

diff --git a/gamgyul-front/src/components/common/Modal/index.jsx b/gamgyul-front/src/components/common/Modal/index.jsx
@@ -3,6 +3,7 @@ import { theme } from "../../../style/theme";
 import Button from "../Button";
 import { styled } from "styled-components";
 import { Link } from "react-router-dom";
+import { applyFontStyles } from "../../../utils/fontStyles";
 
 const Modal = ({ onClose }) => {
   return (
@@ -25,8 +26,7 @@ const Modal = ({ onClose }) => {
 
 /** body1 텍스트 스타일링 */
 export const StyledBody1Text = styled.span`
-  font-size: ${theme.fontSize.body1};
-  font-weight: 600;
+  ${applyFontStyles(theme.font.body1)}
 `;
 
 /** 오버레이 스타일링 */

diff --git a/gamgyul-front/src/components/common/NavigationBar/index.jsx b/gamgyul-front/src/components/common/NavigationBar/index.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { theme } from "../../../style/theme";
+import { applyFontStyles } from "../../../utils/fontStyles";
 
 const NavigationBar = () => {
   const [activeTab, setActiveTab] = useState("map");
@@ -59,10 +60,9 @@ const NaviBtn = styled.img`
 `;
 
 const NaviText = styled.p`
+  ${applyFontStyles(theme.font.body2)}
   font-size: 12px;
   text-align: center;
-  font-weight: 600;
-  font-size: ${theme.fontSize.body2};
   color: ${({ $active }) => ($active ? theme.color.primary : theme.color.gray1)};
 `;
 

diff --git a/gamgyul-front/src/pages/AttractionListPage/index.jsx b/gamgyul-front/src/pages/AttractionListPage/index.jsx
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { theme } from "../../style/theme";
 import AttractionItem from "../../components/common/AttractionItem";
 import BackNaviBtn from "../../components/common/BackNaviBtn";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const AttractionListPage = () => {
   const { id } = useParams();
@@ -66,16 +67,13 @@ const StyledAtrctHeader = styled.header`
     transform: translateX(-50%);
   }
   div > h2 {
-    font-size: ${theme.fontSize.subtitle};
+    ${applyFontStyles(theme.font.subtitle)}
     color: ${theme.color.black};
-    line-height: 36px;
-    font-weight: 600;
     white-space: pre-line;
   }
   div > p {
-    font-size: ${theme.fontSize.body3};
+    ${applyFontStyles(theme.font.body3)}
     color: ${theme.color.black};
-    font-weight: 400;
     margin-top: 4px;
   }
 `;

diff --git a/gamgyul-front/src/pages/HomePage/index.jsx b/gamgyul-front/src/pages/HomePage/index.jsx
@@ -3,6 +3,7 @@ import { HOME_PAGE_TEXT } from "../../constants/String";
 import { theme } from "../../style/theme";
 import { BasicLayout, Container } from "../../components/common/BasicLayout/layout.style";
 import { Link, useNavigate } from "react-router-dom";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const HomePage = () => {
   const navigate = useNavigate();
@@ -155,7 +156,7 @@ const StyledLiRouter = styled.li`
   }
 
   p {
-    font-size: ${theme.fontSize.body2};
+    ${applyFontStyles(theme.font.body2)}
     color: ${theme.color.black};
     width: calc(100% - 20px);
     height: calc(100% - 168px);
@@ -182,16 +183,13 @@ const StyledHomeHeader = styled.header`
     transform: translateX(-50%);
   }
   div > p:first-child {
-    font-size: ${theme.fontSize.header};
+    ${applyFontStyles(theme.font.header)}
     color: ${theme.color.black};
-    line-height: 36px;
-    font-weight: 700;
     white-space: pre-line;
   }
   div > p:nth-child(2) {
-    font-size: ${theme.fontSize.body3};
+    ${applyFontStyles(theme.font.body3)}
     color: ${theme.color.gray1};
-    font-weight: 400;
     margin-top: 8px;
   }
 `;
@@ -247,7 +245,7 @@ const StyledThemeAtrct = styled.section`
   }
 
   li p {
-    font-size: ${theme.fontSize.body2};
+    ${applyFontStyles(theme.font.body2)}
     color: ${theme.color.white};
     position: absolute;
     top: 50%;
@@ -263,6 +261,5 @@ const StyledThemeAtrct = styled.section`
 `;
 
 const StyledCategoryName = styled.h2`
-  font-size: ${theme.fontSize.body1};
-  font-weight: 600;
+  ${applyFontStyles(theme.font.body1)}
 `;
diff --git a/gamgyul-front/src/pages/LanguagePage/index.jsx b/gamgyul-front/src/pages/LanguagePage/index.jsx
@@ -7,6 +7,7 @@ import { LanguageContext } from "../../contexts/LanguageContext";
 
 import { theme } from "./../../style/theme";
 import axios from "axios";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const LanguagePage = () => {
   // const { language, changeLanguage } = useContext(LanguageContext);
@@ -17,7 +18,7 @@ const LanguagePage = () => {
   };
 
   const handleSendLanguage = () => {
-    console.log(language)
+    console.log(language);
     axios
       .post(`https://k0bcc2aad5ee3a.user-app.krampoline.com/api/languages/set?language=${language}`)
       .then((response) => {
@@ -50,7 +51,7 @@ const LanguagePage = () => {
 };
 
 const StlyedSpan = styled.span`
-  font-size: ${theme.fontSize.body2};
+  ${applyFontStyles(theme.font.body2)}
   padding-bottom: 14px;
   text-align: left;
   display: block;
@@ -70,9 +71,9 @@ const StyledLanguage = styled.div`
 `;
 
 const StyledSelect = styled.select`
+  ${applyFontStyles(theme.font.body1)}
   width: 353px;
   height: 64px;
-  font-size: ${theme.fontSize.body1};
   border-radius: 10px;
 
   border: 1px solid ${theme.color.grayscale_BF};
@@ -88,12 +89,12 @@ const StyledSelect = styled.select`
   background-size: 24px;
 
   &::placeholder {
-    font-size: ${theme.fontSize.body1}; /* Placeholder text 크기 조정 */
+    ${applyFontStyles(theme.font.body1)}
   }
 
   option {
     height: 64px; /* StyledSelect의 높이와 동일하게 설정 */
-    font-size: ${theme.fontSize.body1}; /* Option text 크기 조정 */
+    ${applyFontStyles(theme.font.body1)}
   }
 
   &:focus {

diff --git a/gamgyul-front/src/pages/LocationFormPage/index.jsx b/gamgyul-front/src/pages/LocationFormPage/index.jsx
@@ -3,6 +3,7 @@ import { styled } from "styled-components";
 import Button from "../../components/common/Button";
 import { theme } from "../../style/theme";
 import { FormLayout, StyledBottomWrapper, StyledTextBox } from "../ThemeFormPage";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const LocationFormPage = () => {
   const [selectLocation, setSelectLocation] = useState("");
@@ -74,15 +75,14 @@ const StyledOptionImg = styled.img`
 
 /** 선택 버튼 */
 const StyledOptionBtn = styled.button`
+  ${applyFontStyles(theme.font.body3)}
   width: 106px;
   height: 79px;
-  font-weight: 600;
   border-radius: 10px;
   margin-bottom: 16px;
   border: 1px solid ${({ isSelected }) => (isSelected ? theme.color.primary : theme.color.grayscale_BF)};
   background-color: ${({ isSelected }) => (isSelected ? theme.color.primary : theme.color.white)};
   color: ${({ isSelected }) => (isSelected ? theme.color.white : theme.color.black)};
-  font-size: ${theme.fontSize.body3};
   cursor: pointer;
 
   display: flex;

diff --git a/gamgyul-front/src/pages/LocationListPage/index.jsx b/gamgyul-front/src/pages/LocationListPage/index.jsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import Button from "./../../components/common/Button/index";
 import { FormLayout } from "../ThemeFormPage";
 import { theme } from "../../style/theme";
+import { applyFontStyles } from "../../utils/fontStyles";
 const LocationListPage = () => {
   return (
     <StyledFormLayout>
@@ -54,8 +55,7 @@ const Content = styled.div`
   padding-top: 48px;
 `;
 const StyledHeading = styled.h2`
-  font-size: ${theme.fontSize.subtitle};
-  font-weight: bold;
+  ${applyFontStyles(theme.font.subtitle)}
   color: ${theme.color.grayscale_21};
   margin-bottom: 24px;
 `;

diff --git a/gamgyul-front/src/pages/MapDetailPage/index.jsx b/gamgyul-front/src/pages/MapDetailPage/index.jsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import Modal from "../../components/common/Modal";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const MapDetailPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -98,12 +99,12 @@ const MapDetailPage = () => {
 
 /** SubTitle 텍스트 스타일링 */
 export const StyledSubTitleText = styled.span`
-  font-size: ${theme.fontSize.subtitle};
+  ${applyFontStyles(theme.font.subtitle)}
 `;
 
 /** body2 텍스트 스타일링 */
 export const StyledBody2Text = styled.span`
-  font-size: ${theme.fontSize.body2};
+  ${applyFontStyles(theme.font.body2)}
 `;
 
 /** body2 gray 텍스트 스타일링 */

diff --git a/gamgyul-front/src/pages/MapDetailPage2/index.jsx b/gamgyul-front/src/pages/MapDetailPage2/index.jsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import Modal from "../../components/common/Modal";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const MapDetailPage2 = () => {
   const dataId = window.localStorage.getItem("placeId");
@@ -95,12 +96,12 @@ const MapDetailPage2 = () => {
 
 /** SubTitle 텍스트 스타일링 */
 export const StyledSubTitleText = styled.span`
-  font-size: ${theme.fontSize.subtitle};
+  ${applyFontStyles(theme.font.subtitle)}
 `;
 
 /** body2 텍스트 스타일링 */
 export const StyledBody2Text = styled.span`
-  font-size: ${theme.fontSize.body2};
+  ${applyFontStyles(theme.font.body2)}
 `;
 
 /** body2 gray 텍스트 스타일링 */

diff --git a/gamgyul-front/src/pages/ThemeFormPage/index.jsx b/gamgyul-front/src/pages/ThemeFormPage/index.jsx
@@ -2,6 +2,7 @@ import Button from "../../components/common/Button";
 import { styled } from "styled-components";
 import { theme } from "../../style/theme";
 import { useState } from "react";
+import { applyFontStyles } from "../../utils/fontStyles";
 
 const ThemeFormPage = () => {
   const [selectTheme, setSelectTheme] = useState("");
@@ -36,18 +37,17 @@ const ThemeFormPage = () => {
   );
 };
 
-
 /** 텍스트 스타일링 */
 export const StyledTextBox = styled.div`
-  font-size: ${theme.fontSize.subtitle};
+  ${applyFontStyles(theme.font.subtitle)}
   text-align: center;
   margin: 0 auto;
 `;
 
 /** Theme 텍스트 스타일링 */
 const StyledThemeText = styled(StyledTextBox)`
   margin-top: 30px;
-`
+`;
 
 /** 선택 버튼 list wrapper */
 const StyledOptionList = styled.div`
@@ -63,15 +63,14 @@ const StyledOptionList = styled.div`
 
 /** 선택 버튼 */
 const StyledOptionBtn = styled.button`
+  ${applyFontStyles(theme.font.body1)}
   width: 167px;
   height: 98px;
-  font-weight: 600;
   border-radius: 10px;
   margin-bottom: 20px;
   border: 1px solid ${({ isSelected }) => (isSelected ? theme.color.primary : theme.color.grayscale_BF)};
   background-color: ${({ isSelected }) => (isSelected ? theme.color.primary : theme.color.white)};
   color: ${({ isSelected }) => (isSelected ? theme.color.white : theme.color.black)};
-  font-size: ${theme.fontSize.body1};
   cursor: pointer;
 
   display: flex;

diff --git a/gamgyul-front/src/utils/fontStyles.jsx b/gamgyul-front/src/utils/fontStyles.jsx
@@ -0,0 +1,8 @@
+/** theme 폰트 스타일 변환 함수 */
+export function applyFontStyles(font) {
+  return `
+        font-size: ${font.fontSize};
+        font-weight: ${font.fontWeight};
+        line-heigth: ${font.lineHeight};
+    `;
+}