ADD: 커뮤니티 익명 모드 표시, FIX: #1 프로필 레이아웃 깨지는 문제

BSSM-BSM · Oct 24, 2022 · 0534856 · 0534856
1 parent c314d5d
commit 0534856
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }