[Fix] 댓글 비회원일 경우 입력 조차 안 되게

src/assets/svgs/ImgSpeakBubble.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from 'react';
+
+const SvgImgSpeakBubble = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={224} height={97} fill="none" {...props}>
+    <g filter="url(#img_speak_bubble_svg__a)">
+      <path
+        fill="#212121"
+        fillRule="evenodd"
+        d="M182.502 13.357a4 4 0 0 0-6.004 0l-10.205 11.59H28c-8.837 0-16 7.163-16 16v28c0 8.837 7.163 16 16 16h168c8.837 0 16-7.163 16-16v-28c0-8.837-7.163-16-16-16h-3.293z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <filter
+        id="img_speak_bubble_svg__a"
+        width={224}
+        height={96.947}
+        x={0}
+        y={0}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+        <feOffset />
+        <feGaussianBlur stdDeviation={6} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.829167 0 0 0 0 0.829167 0 0 0 0 0.829167 0 0 0 0.63 0" />
+        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_40004244_31242" />
+        <feBlend in="SourceGraphic" in2="effect1_dropShadow_40004244_31242" result="shape" />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgImgSpeakBubble;

src/assets/svgs/index.ts

@@ -75,6 +75,7 @@ export { default as ImgPopupNonebookmarkScrappost } from './ImgPopupNonebookmark
 export { default as ImgPopupNonebookmarkScraptool } from './ImgPopupNonebookmarkScraptool';
 export { default as ImgPopupQuit84 } from './ImgPopupQuit84';
 export { default as ImgPopupWithdrawal84 } from './ImgPopupWithdrawal84';
+export { default as ImgSpeakBubble } from './ImgSpeakBubble';
 export { default as ImgSymbollogo } from './ImgSymbollogo';
 export { default as ImgTextlogo } from './ImgTextlogo';
 export { default as ImgTextlogo177 } from './ImgTextlogo177';

src/components/common/header/Header.styled.ts

@@ -66,6 +66,34 @@ export const StyledLink = styled(Link)`
   ${({ theme }) => theme.fonts.body_16_b_1};
 `;
 
+export const HoverContent = styled.section<{ $visible: boolean }>`
+  position: absolute;
+  top: 4.1rem;
+  right: 18.8rem;
+  display: ${({ $visible }) => ($visible ? 'block' : 'none')};
+
+  p {
+    color: ${({ theme }) => theme.colors.white1};
+  }
+`;
+
+export const HoverLayout = styled.div`
+  position: relative;
+
+  p {
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    z-index: 99;
+    width: max-content;
+
+    color: ${({ theme }) => theme.colors.white1};
+    ${({ theme }) => theme.fonts.body_16_b_1};
+
+    transform: translate(-50%, -50%);
+  }
+`;
+
 export const AuthDivider = styled.span`
   margin: 0 0.8rem;
 

src/components/common/header/Header.tsx

@@ -1,4 +1,5 @@
-import { IcAlarmBlack24, IcProfileBlack24, ImgDarudalogo40 } from '@assets/svgs';
+import { IcAlarmBlack24, IcProfileBlack24, ImgDarudalogo40, ImgSpeakBubble } from '@assets/svgs';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Category } from './category/Category';
@@ -44,18 +45,31 @@ const Community = () => (
 
 const Auth = () => {
   const user = localStorage.getItem('user');
+  const [isHover, setIsHovered] = useState(false);
+
   if (user) {
     return (
       <S.AuthSection aria-label="알림/마이페이지">
         <S.MyPageSection>
-          <S.NotificationButton aria-label="알림 확인">
+          <S.NotificationButton
+            aria-label="알림 확인"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
             <IcAlarmBlack24 />
           </S.NotificationButton>
           <S.StyledLink to="/mypage">
             <S.MyPageButton aria-label="마이페이지">
               <IcProfileBlack24 />
             </S.MyPageButton>
           </S.StyledLink>
+          <S.HoverContent $visible={isHover}>
+            <S.HoverLayout>
+              <div>
+                <ImgSpeakBubble /> <p>지금은 준비 중이에요</p>
+              </div>
+            </S.HoverLayout>
+          </S.HoverContent>
         </S.MyPageSection>
       </S.AuthSection>
     );

src/pages/CommunityDetail/components/input/commentInput/CommentInput.styled.ts

@@ -39,11 +39,17 @@ const errAnimation = `
   }
 `;
 
-export const CardInputWrapper = styled.section<{ $isOverflowed: boolean; $isFocus: boolean }>`
+export const CardInputWrapper = styled.section<{ $isOverflowed: boolean; $isFocus: boolean; $isDisabled: boolean }>`
   width: 100%;
   padding: 2.2rem 5rem 3rem 2rem;
 
-  background: ${({ theme }) => theme.colors.white2};
+  background: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray6 : theme.colors.white2)};
+
+  & > textarea {
+    color: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray2 : theme.colors.gray1)};
+
+    background: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray6 : theme.colors.white2)};
+  }
   border: 1px solid
     ${({ theme, $isOverflowed, $isFocus }) =>
       $isOverflowed ? theme.colors.sys_red : $isFocus ? theme.colors.gray4 : 'none'};
@@ -63,8 +69,6 @@ export const CardInput = styled.textarea`
 
   color: ${({ theme }) => theme.colors.gray2};
 
-  background: ${({ theme }) => theme.colors.white2};
-
   resize: none;
 
   &::-webkit-scrollbar {

src/pages/CommunityDetail/components/input/commentInput/CommentInput.tsx

@@ -22,6 +22,7 @@ const CommnetInput = () => {
     text,
     isOverflowed,
     textareaRef,
+    isLogin,
     handleTextChange,
     handleInput,
     handleInputFocus,
@@ -98,16 +99,17 @@ const CommnetInput = () => {
   return (
     <S.CardWrapper>
       <S.CardSendContainer>
-        <S.CardInputWrapper $isOverflowed={isOverflowed} $isFocus={isFocus}>
+        <S.CardInputWrapper $isOverflowed={isOverflowed} $isFocus={isFocus} $isDisabled={!isLogin}>
           <S.CardInput
             value={text}
             onChange={handleTextChange}
             ref={textareaRef}
             onInput={handleInput}
             onFocus={handleInputFocus}
             onBlur={handleInputOutfocus}
-            placeholder="글을 작성해주세요."
+            placeholder={isLogin ? '글을 작성해주세요.' : '로그인 후 작성 가능합니다'}
             maxLength={1001}
+            disabled={!isLogin}
           />
           <S.CountingWords $isOverflowed={isOverflowed}>
             <span>{text.length}</span>/<span>1,000자</span>

src/pages/CommunityDetail/hooks/useTextInput.ts

@@ -1,11 +1,18 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 const useTextInput = (maxChars: number = 1000) => {
   const [text, setText] = useState('');
   const [isOverflowed, setIsOverflowed] = useState<boolean>(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isFocus, setIsFocus] = useState<boolean>(false);
+  const [isLogin, setIsLogin] = useState(false);
 
+  useEffect(() => {
+    const localKey = localStorage.getItem('user');
+    if (localKey) {
+      setIsLogin(true);
+    }
+  }, []);
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
     setText(value);
@@ -32,6 +39,7 @@ const useTextInput = (maxChars: number = 1000) => {
     text,
     isOverflowed,
     textareaRef,
+    isLogin,
     handleTextChange,
     handleInput,
     handleInputFocus,