Release v0.2.0

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 };

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 }) {
             />
           )}
         </Header>
-        <Content>{message.content}</Content>
+        <Content $fontFamily={messageFontFamily[message.font]}>{message.content}</Content>
         <CreatedDate>{formatDate(message.createdAt, ".")}</CreatedDate>
       </StyledMessageCard>
     </MessageCardBase>

src/features/rolling-paper/components/header/rolling-paper-header.jsx

@@ -126,7 +126,7 @@ function RollingPaperHeader({
                 profiles={messages.map((message) => message.profileImageURL)}
               />
             )}
-            <ReceivedReactions reactions={reactions} />
+            {reactions.length > 0 && <ReceivedReactions reactions={reactions} />}
           </DividedContainer>
           <DividedContainer layout="compact">
             {isEditing || (

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`

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("이름을 입력해 주세요"); // 이거 안전장치로 필요할까요?

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 (
     <Content>
@@ -158,7 +164,7 @@ function MainPage() {
         }}
       >
         <Link to="/list">
-          <button className="cta-button">구경해 보기</button>
+          <MoveButton size={BUTTON_SIZE.large} title="구경해 보기" />
         </Link>
       </div>
     </Content>

src/pages/messages-page.jsx

@@ -53,6 +53,7 @@ const BackgroundColor = styled.div`
 `;
 
 const BackgroundImage = styled.div`
+  height: 100%;
   ${({ $backgroundImageUrl }) =>
     $backgroundImageUrl
       ? `

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 (
     <SendContainer>
       <Wrapper>