feat: 커뮤니티 몇몇 디테일 추가 (#1216)

* feat: 글로벌 cursor 제거

* feat: css 미세대응

* feat: 익명 체크박스 클릭 영역 추가

src/components/common/Text/index.tsx

@@ -49,6 +49,4 @@ const StyledText = styled.span<TextProps>`
       color: ${colors.error};
     `}
   ${space};
-
-  cursor: pointer;
 `;

src/components/feed/detail/DetailFeedCard.tsx

@@ -4,7 +4,7 @@ import { colors } from '@sopt-makers/colors';
 import { Flex, Stack } from '@toss/emotion-utils';
 import { m } from 'framer-motion';
 import Link from 'next/link';
-import { forwardRef, PropsWithChildren, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, PropsWithChildren, ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import Checkbox from '@/components/common/Checkbox';
@@ -441,11 +441,12 @@ interface InputProps {
 }
 
 const Input = ({ value, onChange, isBlindChecked, onChangeIsBlindChecked, isPending }: InputProps) => {
+  const id = useId();
   const [isFocus, setIsFocus] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { handleShowBlindWriterPromise } = useBlindWriterPromise();
 
-  const is버튼액티브 = isFocus && value.length > 0 && !isPending;
+  const is버튼액티브 = (isFocus || value.length > 0) && !isPending;
 
   useEffect(() => {
     const handleOutsideClick = (event: MouseEvent) => {
@@ -470,15 +471,22 @@ const Input = ({ value, onChange, isBlindChecked, onChangeIsBlindChecked, isPend
     <Container ref={containerRef} showInputAnimateArea={showInputAnimateArea}>
       <InputAnimateArea
         initial={{ height: 0 }}
-        animate={{ height: isFocus || isBlindChecked ? '28px' : 0 }}
+        animate={{ height: isFocus || isBlindChecked || value.length > 0 ? '28px' : 0 }}
         transition={{ bounce: 0, stiffness: 1000, duration: 0.2 }}
       >
         <InputContent>
-          <Checkbox size='small' checked={isBlindChecked} onChange={(e) => handleCheckBlindWriter(e.target.checked)} />
-          <Text typography='SUIT_12_M'>익명으로 남기기</Text>
+          <Checkbox
+            size='small'
+            id={`${id}-check`}
+            checked={isBlindChecked}
+            onChange={(e) => handleCheckBlindWriter(e.target.checked)}
+          />
+          <label htmlFor={`${id}-check`} css={{ display: 'flex' }}>
+            <Text typography='SUIT_12_M'>익명으로 남기기</Text>
+          </label>
         </InputContent>
       </InputAnimateArea>
-      <Flex align='flex-end'>
+      <Flex align='flex-end' css={{ gap: '4px' }}>
         <StyledTextArea
           value={value}
           onChange={(e) => onChange(e.target.value)}