diff --git a/src/components/font/message-font.js b/src/components/font/message-font.js
new file mode 100644
index 0000000..9a37060
--- /dev/null
+++ b/src/components/font/message-font.js
@@ -0,0 +1,15 @@
+const messageFontFamily = Object.freeze({
+ "Noto Sans": "Noto Sans",
+ "Pretendard": "Pretendard",
+ "나눔명조": "Nanum Myeongjo",
+ "나눔손글씨 손편지체": "NanumPenScript"
+});
+
+const fontOptions = Object.freeze([
+ { title: "Noto Sans", fontFamily: "Noto Sans" },
+ { title: "Pretendard", fontFamily: "Pretendard" },
+ { title: "나눔명조", fontFamily: "Nanum Myeongjo" },
+ { title: "나눔손글씨 손편지체", fontFamily: "NanumPenScript" },
+]);
+
+export { fontOptions, messageFontFamily };
diff --git a/src/features/message/components/message-card.jsx b/src/features/message/components/message-card.jsx
index 6a355da..d96f358 100644
--- a/src/features/message/components/message-card.jsx
+++ b/src/features/message/components/message-card.jsx
@@ -3,6 +3,7 @@ import deleteImage from "../../../assets/ic-trash.svg";
import { OutlinedButton } from "../../../components/button/button";
import BUTTON_SIZE from "../../../components/button/button-size";
import Colors from "../../../components/color/colors";
+import { messageFontFamily } from "../../../components/font/message-font";
import { formatDate } from "../../../utils/formatter";
import { media } from "../../../utils/media";
import MessageCardBase from "./message-card-base";
@@ -18,6 +19,7 @@ const Header = styled.header`
const Content = styled.div`
margin: 16px 0;
+ font-family: ${({ $fontFamily }) => $fontFamily};
font-size: 18px;
font-weight: 400;
line-height: 28px;
@@ -79,7 +81,7 @@ function MessageCard({ isEditing, index, message, onClick, onDelete }) {
/>
)}
- {message.content}
+ {message.content}
{formatDate(message.createdAt, ".")}
diff --git a/src/features/rolling-paper/components/header/rolling-paper-header.jsx b/src/features/rolling-paper/components/header/rolling-paper-header.jsx
index 3bb87df..0a95fe5 100644
--- a/src/features/rolling-paper/components/header/rolling-paper-header.jsx
+++ b/src/features/rolling-paper/components/header/rolling-paper-header.jsx
@@ -126,7 +126,7 @@ function RollingPaperHeader({
profiles={messages.map((message) => message.profileImageURL)}
/>
)}
-
+ {reactions.length > 0 && }
{isEditing || (
diff --git a/src/pages/404-page.jsx b/src/pages/404-page.jsx
index cde6c03..e0354cd 100644
--- a/src/pages/404-page.jsx
+++ b/src/pages/404-page.jsx
@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
import { useNavigate } from "react-router";
-import { PrimaryButton } from "../components/button/button";
-import BUTTON_SIZE from "../components/button/button-size";
import styled from "styled-components";
import CrushedPaperPlane from "../assets/ic-paperairplane.svg";
import logoImage from "../assets/logo.svg";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
import { media } from "../utils/media";
const TopContainer = styled.article`
diff --git a/src/pages/create-post-page.jsx b/src/pages/create-post-page.jsx
index 69d2f08..cba1a1b 100644
--- a/src/pages/create-post-page.jsx
+++ b/src/pages/create-post-page.jsx
@@ -116,15 +116,6 @@ function CreatePostPage() {
}
};
- const handleBackgroundSelect = (e) => {
- let typeSelect = e.target.textContent;
-
- if (typeSelect === "컬러" || typeSelect === "이미지") {
- setBackgroundType(typeSelect);
- setSelected(0);
- }
- };
-
const handleCreate = async () => {
if (!trimmed) {
setNameError("이름을 입력해 주세요"); // 이거 안전장치로 필요할까요?
diff --git a/src/pages/main-page.jsx b/src/pages/main-page.jsx
index 455c6ee..b26be4c 100644
--- a/src/pages/main-page.jsx
+++ b/src/pages/main-page.jsx
@@ -4,6 +4,8 @@ import emojiImg from "../assets/ld-emoji.png";
import cardImg1 from "../assets/ld-img01.png";
import cardImg2 from "../assets/ld-img02.png";
import cardImg3 from "../assets/ld-img03.png";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
const Content = styled.div`
width: 100%;
@@ -115,6 +117,10 @@ const PointBadge = styled.div`
width: fit-content;
`;
+const MoveButton = styled(PrimaryButton)`
+ width: 280px;
+`;
+
function MainPage() {
return (
@@ -158,7 +164,7 @@ function MainPage() {
}}
>
-
+
diff --git a/src/pages/messages-page.jsx b/src/pages/messages-page.jsx
index e97fcd8..25f37c9 100644
--- a/src/pages/messages-page.jsx
+++ b/src/pages/messages-page.jsx
@@ -53,6 +53,7 @@ const BackgroundColor = styled.div`
`;
const BackgroundImage = styled.div`
+ height: 100%;
${({ $backgroundImageUrl }) =>
$backgroundImageUrl
? `
diff --git a/src/pages/send-message-page.jsx b/src/pages/send-message-page.jsx
index 7ddbeb4..79e134a 100644
--- a/src/pages/send-message-page.jsx
+++ b/src/pages/send-message-page.jsx
@@ -1,16 +1,17 @@
import { useState } from "react";
-import TextField from "../components/text-field/text-field";
-import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
-import Colors from "../components/color/colors";
+import { useNavigate, useParams } from "react-router";
import styled from "styled-components";
+import { apiClient } from "../api/client";
import Avatar from "../components/avatar/avatar";
import AVATAR_SIZE from "../components/avatar/avatar-size";
-import BUTTON_SIZE from "../components/button/button-size";
-import { useNavigate, useParams } from "react-router";
import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
+import Colors from "../components/color/colors";
+import { fontOptions } from "../components/font/message-font";
import TextEditor from "../components/text-editor/text-editor";
+import TextField from "../components/text-field/text-field";
+import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
import { media } from "../utils/media";
-import { apiClient } from "../api/client";
const SendContainer = styled.div`
display: flex;
@@ -175,13 +176,6 @@ function SendMessagePage() {
trimmed !== "" && content.replace(/<[^>]+>/g, "").trim() !== "";
// 정규식 유효성 검사로 html 태그 찾기("<"로 시작해서 ">"로 끝나는 문자 중 > 를 제외한(^ not) 모든 문자 제외)
- const fontOptions = [
- { title: "Noto Sans", fontFamily: "Noto Sans" },
- { title: "Pretendard", fontFamily: "Pretendard" },
- { title: "나눔명조", fontFamily: "Nanum Myeongjo" },
- { title: "나눔손글씨 손편지체", fontFamily: "NanumPenScript" },
- ];
-
return (