From 8506dc029abeae3b16ba7bf7a92e470de9beb00b Mon Sep 17 00:00:00 2001
From: ajs3801 <tt14an@gmail.com>
Date: Sat, 9 Sep 2023 16:07:33 +0900
Subject: [PATCH] add feature that public message has green border

---
 src/components/Message/Message.components.tsx | 29 ++++++++++++++-----
 src/components/Message/Message.styles.tsx     | 15 ++++++++++
 .../MessageBox/MessageBox.components.tsx      |  3 ++
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/Message/Message.components.tsx b/src/components/Message/Message.components.tsx
index 45019e8..09429f9 100644
--- a/src/components/Message/Message.components.tsx
+++ b/src/components/Message/Message.components.tsx
@@ -3,6 +3,7 @@ import {
   MessageHolder, 
   MessageImage,
   MessageContent,
+  MessageHolderPublic,
 } from "./Message.styles";
 
 // import assets
@@ -15,10 +16,11 @@ import { useExtractID } from "../../hooks/useExtractID";
 interface IMessage {
   id: number;
   isOpen: boolean;
+  isPublic: boolean;
   nickName: string;
 }
 
-const Message = ({ id, isOpen, nickName }: IMessage) => {
+const Message = ({ id, isOpen, isPublic, nickName }: IMessage) => {
   const userid = useExtractID();
   const navigate = useNavigate();
 
@@ -28,14 +30,25 @@ const Message = ({ id, isOpen, nickName }: IMessage) => {
 
   return (
     <MessageFrame>
-      <MessageHolder onClick={RedirectToID}>
-        {isOpen ? (
-          <MessageImage src={OpenIcon}></MessageImage>
+      {
+        isPublic ? (
+          <MessageHolderPublic onClick={RedirectToID}>
+            {isOpen ? (
+              <MessageImage src={OpenIcon}></MessageImage>
+            ) : (
+              <MessageImage src={CloseIcon}></MessageImage>
+            )}
+          </MessageHolderPublic>
         ) : (
-          <MessageImage src={CloseIcon}></MessageImage>
-        )}
-      </MessageHolder>
-
+          <MessageHolder onClick={RedirectToID}>
+            {isOpen ? (
+              <MessageImage src={OpenIcon}></MessageImage>
+            ) : (
+              <MessageImage src={CloseIcon}></MessageImage>
+            )}
+          </MessageHolder>
+        )
+      }
       <MessageContent>{nickName}</MessageContent>
     </MessageFrame>
   );
diff --git a/src/components/Message/Message.styles.tsx b/src/components/Message/Message.styles.tsx
index 4db4d19..e3175b3 100644
--- a/src/components/Message/Message.styles.tsx
+++ b/src/components/Message/Message.styles.tsx
@@ -7,6 +7,21 @@ export const MessageFrame = styled.div`
   padding-left: 2px;
   padding-right: 2px;
 `
+export const MessageHolderPublic = styled.div`
+  width: 17vw;
+  max-width: 60px;
+  height: 17vw;
+  max-height: 60px;
+  border-radius: 10px;
+  border: 1px solid #8DC63F;
+  background: #fff;
+
+  /* default */
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
 export const MessageHolder = styled.div`
   width: 17vw;
diff --git a/src/pages/MessageBox/MessageBox.components.tsx b/src/pages/MessageBox/MessageBox.components.tsx
index 17f141e..fb299a0 100644
--- a/src/pages/MessageBox/MessageBox.components.tsx
+++ b/src/pages/MessageBox/MessageBox.components.tsx
@@ -32,6 +32,7 @@ interface IBean {
   messageId: number;
   author: string;
   isOpened: boolean;
+  isPublic: boolean;
 }
 
 // interface
@@ -132,6 +133,7 @@ const MessageList = () => {
                 messageId: message.message_id,
                 author: message.author,
                 isOpened: message.is_opened,
+                isPublic: message.is_public,
               };
               beans.push(beanObject);
             }
@@ -197,6 +199,7 @@ const MessageList = () => {
                                       key={bean.messageId}
                                       id={bean.messageId}
                                       isOpen={bean.isOpened}
+                                      isPublic={bean.isPublic}
                                       nickName={bean.author}
                                     />
                                   );