From 05348561f3e31eb3ba63125a489ffef0f2350f51 Mon Sep 17 00:00:00 2001
From: leehj050211 <leehj050211@gmail.com>
Date: Tue, 25 Oct 2022 08:15:00 +0900
Subject: [PATCH] =?UTF-8?q?ADD:=20=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=20?=
 =?UTF-8?q?=EC=9D=B5=EB=AA=85=20=EB=AA=A8=EB=93=9C=20=ED=91=9C=EC=8B=9C,?=
 =?UTF-8?q?=20FIX:=20#1=20=ED=94=84=EB=A1=9C=ED=95=84=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B9=A8=EC=A7=80=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/board/commentWrite.tsx       |  2 +-
 components/common/header.tsx            | 20 +++++++++++---------
 pages/board/[boardId]/[[...params]].tsx |  5 +++--
 styles/header.module.css                | 17 +++++++++++++----
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/components/board/commentWrite.tsx b/components/board/commentWrite.tsx
index 8d3673f..1a2bb1a 100644
--- a/components/board/commentWrite.tsx
+++ b/components/board/commentWrite.tsx
@@ -55,7 +55,7 @@ export const CommentWrite = ({
                 content !== null && 
                 <EditorInput
                     setCallback={setContent}
-                    placeholder={parentComment? `${nickname}에게 답글`: '댓글 내용'}
+                    placeholder={(parentComment? `${nickname}에게 답글`: '댓글') + (boardAnonymousMode? ' (익명 On)': ' (익명 Off)')}
                     className='comment-input'
                     refCallback={setActiveEditor}
                 />
diff --git a/components/common/header.tsx b/components/common/header.tsx
index a697c28..ffd076e 100644
--- a/components/common/header.tsx
+++ b/components/common/header.tsx
@@ -52,15 +52,17 @@ export const Header = () => {
             user.isLogin
             ? <div className={`dropdown-menu ${styles.dropdown}`}>
                 <span className={`${styles.item} ${styles.user_profile_wrap}`}>
-                    <span>{user.nickname}</span>
-                    <div className='user-profile'>
-                        <Image
-                            src={profileSrc}
-                            onError={() => setProfileSrc(DefaultProfilePic)}
-                            width='128px'
-                            height='128px'
-                            alt='user profile'
-                        />
+                    <div>
+                        <span>{user.nickname}</span>
+                        <div className='user-profile'>
+                            <Image
+                                src={profileSrc}
+                                onError={() => setProfileSrc(DefaultProfilePic)}
+                                width='128px'
+                                height='128px'
+                                alt='user profile'
+                            />
+                        </div>
                     </div>
                 </span>
                 <ul className='dropdown-content'>
diff --git a/pages/board/[boardId]/[[...params]].tsx b/pages/board/[boardId]/[[...params]].tsx
index 49e7e05..9fff07f 100644
--- a/pages/board/[boardId]/[[...params]].tsx
+++ b/pages/board/[boardId]/[[...params]].tsx
@@ -9,7 +9,7 @@ import { headerOptionState } from '../../../store/common.store';
 import { Board, BoardListRes, Category, Comment, DeletedComment, DetailPost } from '../../../types/boardType';
 import { BoardView } from '../../../components/board/boardView';
 import { PostView } from '../../../components/board/postView';
-import { boardAndPostIdState, postOpenState, postState } from '../../../store/board.store';
+import { boardAndPostIdState, boardAnonymousModeState, postOpenState, postState } from '../../../store/board.store';
 import { PostWrite } from '../../../components/board/postWrite';
 import { EmoticonBoxWrap } from '../../../components/board/emoticonBox';
 
@@ -18,6 +18,7 @@ const BoardPage: NextPage = () => {
     const [, setHeaderOption] = useRecoilState(headerOptionState);
     const router = useRouter();
     const [, setBoardAndPostId] = useRecoilState(boardAndPostIdState);
+    const [boardAnonymousMode] = useRecoilState(boardAnonymousModeState);
 
     const {boardId} = router.query;
     const [postId, editPostId] = router.query.params?.length? router.query.params: [undefined, undefined];
@@ -33,7 +34,7 @@ const BoardPage: NextPage = () => {
             setHeaderOption({title: boardList[boardId]?.boardName});
         else if (postId === 'write')
             setHeaderOption({
-                title: boardList[boardId]?.boardName,
+                title: `글쓰기 ${boardAnonymousMode? '(익명 On)': '(익명 Off)'}`,
                 allMenu: {
                     goBack: true
                 }
diff --git a/styles/header.module.css b/styles/header.module.css
index 6e8f2d3..7b8c5cf 100644
--- a/styles/header.module.css
+++ b/styles/header.module.css
@@ -226,19 +226,28 @@
 }
 
 .user_profile_wrap {
+    padding: 0;
+    height: 100%;
+}
+
+.user_profile_wrap > div {
     display: flex;
     align-items: center;
     gap: .5rem;
-    padding: 0;
-    height: 100%;
+    max-width: 18rem;
+    padding: 0 1rem;
 }
 
 .user_profile_wrap span {
-    margin-left: auto;
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 1rem;
+    font-size: 1.6rem;
 }
 
 .user_profile_wrap :global(.user-profile) {
-    margin-right: 2rem;
     height: 5.2rem;
     width: 5.2rem;
 }