From a677319fa3504e3f6c6b68ab5dcf562eb05ab3f2 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 17 Oct 2024 01:03:41 +0900
Subject: [PATCH] fix: fix bug with articles section

---
 src/components/Home/ArticlesSection.tsx       | 14 +++++++++++---
 src/components/Modals/LightningTalksModal.tsx |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/ArticlesSection.tsx b/src/components/Home/ArticlesSection.tsx
index 3ec8f4a..3d271c2 100644
--- a/src/components/Home/ArticlesSection.tsx
+++ b/src/components/Home/ArticlesSection.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import Link from 'next/link'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Section, SectionTitle } from './StyledComponents'
 
 interface Article {
@@ -70,16 +70,22 @@ const MAX_ARTICLES = 4
 
 const ArticlesSection: React.FC = () => {
   const [showSeeMore, setShowSeeMore] = React.useState(false)
+  const [count, setCount] = useState(MAX_ARTICLES)
 
   useEffect(() => {
     setShowSeeMore(articlesData.length > MAX_ARTICLES)
   }, [])
 
+  const handleSeeMore = () => {
+    setCount(articlesData.length)
+    setShowSeeMore(false)
+  }
+
   return (
     <Section id="articles">
       <SectionTitle>Articles</SectionTitle>
       <ArticleList>
-        {articlesData.map((article, index) => (
+        {articlesData.slice(0, count).map((article, index) => (
           <ArticleItem key={index}>
             {article.image && (
               <CustomLink href={article.href} target="_blank">
@@ -95,7 +101,9 @@ const ArticlesSection: React.FC = () => {
           </ArticleItem>
         ))}
       </ArticleList>
-      {/* {showSeeMore && <SeeMoreButton>See more</SeeMoreButton>} */}
+      {showSeeMore && (
+        <SeeMoreButton onClick={handleSeeMore}>See more</SeeMoreButton>
+      )}
     </Section>
   )
 }
diff --git a/src/components/Modals/LightningTalksModal.tsx b/src/components/Modals/LightningTalksModal.tsx
index 3f4c9c2..e9538fc 100644
--- a/src/components/Modals/LightningTalksModal.tsx
+++ b/src/components/Modals/LightningTalksModal.tsx
@@ -29,7 +29,7 @@ const LightningTalksModal = ({
     <Modal isOpen={isOpen} onClose={onClose}>
       <Container>
         <Header>
-          <h2>Submit Your Talk</h2>
+          <h2>SUBMIT YOUR TALK</h2>
           <CloseButton onClick={onClose}>
             <img src="/assets/close.svg" />
           </CloseButton>