From 7da42e12326e13917a4ed2870e2b86edf382d2b6 Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Thu, 8 Aug 2024 14:25:05 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=20=EB=B2=84=ED=8A=BC=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Mail/MailModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Mail/MailModal.tsx b/src/components/Mail/MailModal.tsx
index f71e63b..92b7972 100644
--- a/src/components/Mail/MailModal.tsx
+++ b/src/components/Mail/MailModal.tsx
@@ -396,7 +396,7 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
           </CustomModalFooter>
         )}
         {isSubmitted && noError && (
-          <ModalFooter>
+          <ModalFooter gap={10}>
             <Button colorScheme="blue" onClick={handlePutMail}>
               저장하기
             </Button>

From a1830be5c1f834ecaa65ed86b3bf1760e5fb4748 Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Thu, 8 Aug 2024 14:25:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat=20=EB=A9=94=EC=9D=BC=20=ED=81=AC?=
 =?UTF-8?q?=EA=B2=8C=EB=B3=B4=EA=B8=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/index.tsx | 46 ++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index cb7832b..98b9b1c 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -11,7 +11,9 @@ import {
   Divider,
   Button,
   Spinner,
+  IconButton,
 } from '@chakra-ui/react';
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import { useGetMail } from '@/api/hooks/Mail/useGetMail';
 import { useEffect, useState } from 'react';
 
@@ -19,6 +21,7 @@ export const MyPage = () => {
   const { authInfo } = useAuth();
   const [isJob, setIsJob] = useState('univ');
   const [page, setPage] = useState(0);
+  const [expandedMails, setExpandedMails] = useState<{ [key: string]: boolean }>({});
 
   const { mailData, mailLoading, mailError, refetch } = useGetMail(page, 5, isJob);
 
@@ -44,6 +47,13 @@ export const MyPage = () => {
     setPage(0);
   };
 
+  const toggleMailContent = (mailId: string) => {
+    setExpandedMails((prev) => ({
+      ...prev,
+      [mailId]: !prev[mailId],
+    }));
+  };
+
   return (
     <Wrapper>
       <LogoWrapper>
@@ -81,18 +91,30 @@ export const MyPage = () => {
               ) : mailError ? (
                 <Text>메일을 불러오는 중 오류가 발생했습니다.</Text>
               ) : mailData && mailData.content && mailData.content.length > 0 ? (
-                mailData.content.map((email, index) => (
-                  <Box key={`${isJob}-${email.createDate}-${index}`} w="100%">
-                    <HStack justify="space-between" mb={2}>
-                      <Text fontWeight="bold">{email.subject}</Text>
-                      <Text fontSize="sm" color="gray.500">
-                        {email.createDate}
-                      </Text>
-                    </HStack>
-                    <Text noOfLines={2}>{email.body}</Text>
-                    <Divider mt={2} />
-                  </Box>
-                ))
+                mailData.content.map((email, index) => {
+                  const mailId = `${isJob}-${email.createDate}-${index}`;
+                  const isExpanded = expandedMails[mailId];
+                  return (
+                    <Box key={mailId} w="100%">
+                      <HStack justify="space-between" mb={2}>
+                        <Text fontWeight="bold">{email.subject}</Text>
+                        <HStack>
+                          <Text fontSize="sm" color="gray.500">
+                            {email.createDate}
+                          </Text>
+                          <IconButton
+                            aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                            icon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                            size="sm"
+                            onClick={() => toggleMailContent(mailId)}
+                          />
+                        </HStack>
+                      </HStack>
+                      <Text noOfLines={isExpanded ? undefined : 2}>{email.body}</Text>
+                      <Divider mt={2} />
+                    </Box>
+                  );
+                })
               ) : (
                 <Text>메일이 없습니다!</Text>
               )}