Merge pull request #324 from Team-Lecue/QA/#316-apply-custom

[ Mypage ] 내기록보기 - 사용자가 지정한 배경 / 텍스트 색 반영

src/History/components/MyLetter/MyLetter.style.ts

@@ -1,12 +1,25 @@
+import { css } from '@emotion/react';
 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 }) =>
+    noteBackground.substring(0, 1) === '#'
+      ? css`
+          background-color: ${noteBackground};
+        `
+      : css`
+          background: url(${noteBackground});
+        `};
+  background-size: 100% 16.3rem;
+  color: ${({ noteTextColor }) => noteTextColor};
 `;
 
 export const MyLetterFavorite = styled.h1`

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>

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 {