From 7ffa94a9125994fc140ea9050d512fb4a669219f Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Fri, 26 Apr 2024 22:19:13 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=EC=9E=90=EA=B0=80?=
 =?UTF-8?q?=20=EC=A7=80=EC=A0=95=ED=95=9C=20=EB=B0=B0=EA=B2=BD=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A0=95=EC=83=81=EC=A0=81?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=98=EC=98=81=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MyLetter/MyLetter.style.ts       | 17 +++++++++++++++--
 src/History/components/MyLetter/index.tsx       |  8 +++++++-
 src/History/types/historyType.ts                |  2 ++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/History/components/MyLetter/MyLetter.style.ts b/src/History/components/MyLetter/MyLetter.style.ts
index 0a6c7d99..9bd9d1f2 100644
--- a/src/History/components/MyLetter/MyLetter.style.ts
+++ b/src/History/components/MyLetter/MyLetter.style.ts
@@ -1,12 +1,25 @@
 import styled from '@emotion/styled';
 
-export const MyLetterWrapper = styled.article`
+export const MyLetterWrapper = styled.article<{
+  noteTextColor: string;
+  noteBackground: string;
+}>`
   width: 100%;
   height: 16.3rem;
   padding: 1.3rem 1.2rem;
 
   border-radius: 0.4rem;
-  background-color: ${({ theme }) => theme.colors.sub_purple};
+  ${({ noteBackground }) => {
+    if (noteBackground.substring(0, 1) === '#') {
+      return `background-color: ${noteBackground}`;
+    } else {
+      return `background: url(${noteBackground})`;
+    }
+  }};
+  background-size: 100% 16.3rem;
+  color: ${({ noteTextColor }) => {
+    return noteTextColor;
+  }};
 `;
 
 export const MyLetterFavorite = styled.h1`
diff --git a/src/History/components/MyLetter/index.tsx b/src/History/components/MyLetter/index.tsx
index 4d1a71c5..03489db4 100644
--- a/src/History/components/MyLetter/index.tsx
+++ b/src/History/components/MyLetter/index.tsx
@@ -9,6 +9,8 @@ function MyLetter({
   title,
   content,
   noteDate,
+  noteTextColor,
+  noteBackground,
 }: MyLetterProps) {
   const navigate = useNavigate();
 
@@ -17,7 +19,11 @@ function MyLetter({
   };
 
   return (
-    <S.MyLetterWrapper onClick={handleClickMyLetter}>
+    <S.MyLetterWrapper
+      onClick={handleClickMyLetter}
+      noteTextColor={noteTextColor}
+      noteBackground={noteBackground}
+    >
       <S.MyLetterFavorite>{favoriteName}</S.MyLetterFavorite>
       <S.MyLetterTitle>{title}</S.MyLetterTitle>
       <S.MyLetterContent>{content}</S.MyLetterContent>
diff --git a/src/History/types/historyType.ts b/src/History/types/historyType.ts
index ab67188d..f62bfbd4 100644
--- a/src/History/types/historyType.ts
+++ b/src/History/types/historyType.ts
@@ -30,6 +30,8 @@ export interface MyLetterProps {
   title: string;
   content: string;
   noteDate: string;
+  noteTextColor: string;
+  noteBackground: string;
 }
 
 export interface HistoryEmptyViewProps {

From a5e419dc0c710c5dde9fd93f13c4961275cd3e48 Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Sat, 27 Apr 2024 14:23:40 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20css=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/History/components/MyLetter/MyLetter.style.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/History/components/MyLetter/MyLetter.style.ts b/src/History/components/MyLetter/MyLetter.style.ts
index 9bd9d1f2..cdcfd378 100644
--- a/src/History/components/MyLetter/MyLetter.style.ts
+++ b/src/History/components/MyLetter/MyLetter.style.ts
@@ -17,9 +17,7 @@ export const MyLetterWrapper = styled.article<{
     }
   }};
   background-size: 100% 16.3rem;
-  color: ${({ noteTextColor }) => {
-    return noteTextColor;
-  }};
+  color: ${({ noteTextColor }) => noteTextColor};
 `;
 
 export const MyLetterFavorite = styled.h1`

From e2a814324f7e81eb98cfc2dc645edf8a03f1dc54 Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Sun, 28 Apr 2024 23:53:58 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20css=20=EB=B6=84=EA=B8=B0?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20=EC=82=BC=ED=95=AD?=
 =?UTF-8?q?=EC=97=B0=EC=82=B0=EC=9E=90=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MyLetter/MyLetter.style.ts        | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/History/components/MyLetter/MyLetter.style.ts b/src/History/components/MyLetter/MyLetter.style.ts
index cdcfd378..f8b7f6c3 100644
--- a/src/History/components/MyLetter/MyLetter.style.ts
+++ b/src/History/components/MyLetter/MyLetter.style.ts
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const MyLetterWrapper = styled.article<{
@@ -9,13 +10,14 @@ export const MyLetterWrapper = styled.article<{
   padding: 1.3rem 1.2rem;
 
   border-radius: 0.4rem;
-  ${({ noteBackground }) => {
-    if (noteBackground.substring(0, 1) === '#') {
-      return `background-color: ${noteBackground}`;
-    } else {
-      return `background: url(${noteBackground})`;
-    }
-  }};
+  ${({ noteBackground }) =>
+    noteBackground.substring(0, 1) === '#'
+      ? css`
+          background-color: ${noteBackground};
+        `
+      : css`
+          background: url(${noteBackground});
+        `};
   background-size: 100% 16.3rem;
   color: ${({ noteTextColor }) => noteTextColor};
 `;