diff --git a/src/features/content/ContentList.jsx b/src/features/content/ContentList.jsx index 3cae852..aa7c4ee 100644 --- a/src/features/content/ContentList.jsx +++ b/src/features/content/ContentList.jsx @@ -3,11 +3,17 @@ import { useNavigate } from 'react-router-dom'; import ContentItem from './ContentItem'; import styled from '@emotion/styled'; -const ContentListContainer = styled.div` +const ContentListContainer = styled.ul` display: flex; flex-direction: column; gap: 1.5rem; -` + padding: 0; + margin: 0; +`; + +const ContentListItem = styled.li` + list-style-type: none; +`; const ContentList = ({ contents, isBookmark, bookmarkIdList, onFavoriteToggle }) => { const navigate = useNavigate(); @@ -16,16 +22,15 @@ const ContentList = ({ contents, isBookmark, bookmarkIdList, onFavoriteToggle }) {contents.map((content, index) => { return ( - - navigate(`/content/${content.id || content.contentId}`) - } - onFavoriteToggle={onFavoriteToggle} - /> + + navigate(`/content/${content.id || content.contentId}`)} + onFavoriteToggle={onFavoriteToggle} + /> + ); })} diff --git a/src/features/home/AboutSection.jsx b/src/features/home/AboutSection.jsx index 8e19cfc..cf2661b 100644 --- a/src/features/home/AboutSection.jsx +++ b/src/features/home/AboutSection.jsx @@ -55,7 +55,7 @@ const TextContainer = styled.div` justify-content: center; gap: 1.5rem; - h1 { + h2 { font-family: 'IBM Plex Sans', sans-serif; font-size: 7rem; font-weight: bold; @@ -146,10 +146,10 @@ const TeamAbout = () => { -

+

매일 아침 한 가지,
New Insight -

+

Haruhan은 바쁜 일상 속에서도 매일 한 가지 새로운 지식을 쉽고 재미있게 전해드립니다

짧지만 깊이 있는 인사이트로, 오늘 하루도 성장하는 경험을 해보세요

diff --git a/src/features/home/HeroSection.jsx b/src/features/home/HeroSection.jsx index f2b8ea7..edaf87c 100644 --- a/src/features/home/HeroSection.jsx +++ b/src/features/home/HeroSection.jsx @@ -15,7 +15,7 @@ const TeamHeroContainer = styled.div` const TextContainer = styled.div` position: absolute; text-align: center; - p { + h1 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; font-size: 9rem; @@ -26,13 +26,13 @@ const TextContainer = styled.div` } @media (min-width: 768px) and (max-width: 1440px) { - p { + h1 { font-size: 4rem; } } @media (max-width: 767px) { - p { + h1 { font-size: 4rem; } } @@ -119,9 +119,9 @@ export default function TeamHero() { return ( -

+

'One a Day' HARUHAN -

+

{TeamHeroImages.map((src, i) => ( diff --git a/src/features/home/Knowledge/KnowledgeSectionItem.jsx b/src/features/home/Knowledge/KnowledgeSectionItem.jsx index 2d19bbe..ba72ac7 100644 --- a/src/features/home/Knowledge/KnowledgeSectionItem.jsx +++ b/src/features/home/Knowledge/KnowledgeSectionItem.jsx @@ -14,7 +14,7 @@ const Container = styled.div` } `; -const Title = styled.h3` +const Title = styled.h4` font-size: 1.5rem; margin: 0 0 1rem 0; font-weight: bold; @@ -24,7 +24,7 @@ const Title = styled.h3` } `; -const Summary = styled.h4` +const Summary = styled.h5` font-size: 1.1rem; padding: 0 0 1.5rem 0; color: #333; diff --git a/src/features/home/Knowledge/KnowledgeSectionList.jsx b/src/features/home/Knowledge/KnowledgeSectionList.jsx index fb4154a..63e21e2 100644 --- a/src/features/home/Knowledge/KnowledgeSectionList.jsx +++ b/src/features/home/Knowledge/KnowledgeSectionList.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import { knowledgeMockData } from '../../../mocks/knowledgeData'; +import { knowledgeMockData } from '@mocks/knowledgeData'; import KnowledgeSectionItem from './KnowledgeSectionItem'; import styled from '@emotion/styled'; -import useModal from '../../../hooks/useModal'; +import useModal from '@hooks/useModal'; import SubscriptionModal from '../../modal/SubscriptionModal'; const Container = styled.div` @@ -25,7 +25,7 @@ const KnowledgeSectionList = () => { onClick={openModal} /> ))} - {isModalOpen && } + {isModalOpen && } ); }; diff --git a/src/features/home/KnowledgeSection.jsx b/src/features/home/KnowledgeSection.jsx index 9124442..a1bdc80 100644 --- a/src/features/home/KnowledgeSection.jsx +++ b/src/features/home/KnowledgeSection.jsx @@ -9,7 +9,7 @@ const SectionContainer = styled.section` overflow: hidden; `; -const SectionTitle = styled.h2` +const SectionTitle = styled.h3` font-size: 2.5rem; font-weight: 700; text-align: center; diff --git a/src/features/home/PopularTopicSection.jsx b/src/features/home/PopularTopicSection.jsx index edfa059..b917476 100644 --- a/src/features/home/PopularTopicSection.jsx +++ b/src/features/home/PopularTopicSection.jsx @@ -10,7 +10,7 @@ const SectionContainer = styled.section` justify-content: center; `; -const SectionTitle = styled.h2` +const SectionTitle = styled.h3` font-size: 3rem; font-weight: 800; text-align: center; diff --git a/src/layout/Footer.jsx b/src/layout/Footer.jsx index 0adee93..c737776 100644 --- a/src/layout/Footer.jsx +++ b/src/layout/Footer.jsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import { FaGithub } from "react-icons/fa"; +import { FaGithub } from 'react-icons/fa'; const FooterContainer = styled.footer` - background-color: #F8F8F8; + background-color: #f8f8f8; padding: 1rem 0; text-align: center; `; @@ -15,12 +15,12 @@ const FooterContent = styled.div` gap: 1rem; padding-top: 1rem; font-size: 0.8rem; - color: var(--l-grey); + color: black; `; const GithubIconWrapper = styled.div` transition: transform 0.3s ease; - &:hover { + &:hover { transform: scale(1.2); } `; @@ -30,9 +30,14 @@ const Footer = () => {

© {new Date().getFullYear()} HaruHan. All rights reserved.

- - - + + +