B-3: 컴포넌트 설계 — children·합성·커스텀 훅

// apps/web-spa/src/components/Section.tsx

interface SectionProps {
  title: string;
  children: React.ReactNode;
}

export function Section({ title, children }: SectionProps) {
  return (
    <section className="section" aria-label={title}>
      <h2 className="section-title">{title}</h2>
      {children}
    </section>
  );
}

 오늘의 여정

 Step 1~2   언제 쪼갤까 · children 으로 안쪽을 받는 Button
    │
 Step 3~4   자식을 여러 갈래로 받는 Card · 합성으로 카드 조립
    │
 Step 5~6   훅을 부르는 규칙 · 좋아요 로직에 이름 붙이기
    │
 Step 7~8   접기 펼치기 훅 · 댓글 입력 묶음을 훅으로
    ▼
 조각으로 조립되고 로직에 이름이 붙은 인스타 피드

// apps/web-spa/src/components/PostCard.tsx — 지난 시간까지의 모습
export function PostCard({
  id,
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
  onToggleLike,
}: PostCardViewProps) {
  // 이 댓글은 이 카드만 쓰니까 카드 안에 둔다
  const [comments, setComments] = useState<DraftComment[]>([]);

  function addComment(text: string) {
    setComments([...comments, { id: comments.length + 1, content: text }]);
  }

  function handleImageDoubleClick(event: React.MouseEvent<HTMLImageElement>) {
    // 더블클릭이 이미지를 선택 상태로 만드는 브라우저 기본 동작을 막는다
    event.preventDefault();
    onToggleLike(id);
  }

  return (
    <article className="post-card">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <img
        className="post-image"
        src={imageUrl}
        alt={`${username} 의 게시물`}
        onDoubleClick={handleImageDoubleClick}
      />
      <LikeButton
        liked={liked}
        likeCount={likeCount}
        onToggle={() => onToggleLike(id)}
      />
      <p className="post-content">
        <strong>{username}</strong> {content}
      </p>
      <p className="post-comments">
        댓글 {commentCount + comments.length}개 모두 보기
      </p>
      <ul className="comment-list">
        {comments.map((comment) => (
          <li key={comment.id}>
            <strong>me</strong> {comment.content}
          </li>
        ))}
      </ul>
      <CommentForm onSubmit={addComment} />
    </article>
  );
}

 PostCard 한 파일이 그리는 것

 Avatar             프로필 사진과 이름
 img                사진 · 더블클릭하면 좋아요
 LikeButton         좋아요 버튼과 개수
 p.post-content     캡션
 p.post-comments    댓글 수
 ul.comment-list    지금 화면에서 단 댓글
 CommentForm        댓글 입력창

// apps/web-spa/src/components/PostHeader.tsx — 이렇게 만들 뻔했습니다
interface PostHeaderProps {
  username: string;
  profileImageUrl: string;
}

export function PostHeader({ username, profileImageUrl }: PostHeaderProps) {
  return <Avatar username={username} profileImageUrl={profileImageUrl} />;
}

// apps/web-spa/src/components/PostHeader.tsx
export function PostHeader({ username, profileImageUrl }: PostHeaderProps) {
  return (
    <div className="post-header">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <button className="post-more" aria-label="게시물 메뉴">
        ⋯
      </button>
    </div>
  );
}

// apps/web-spa/src/components/PostImage.tsx

interface PostImageProps {
  imageUrl: string;
  username: string;
  onLike: () => void;
}

export function PostImage({ imageUrl, username, onLike }: PostImageProps) {
  function handleDoubleClick(event: React.MouseEvent<HTMLImageElement>) {
    // 더블클릭이 이미지를 선택 상태로 만드는 브라우저 기본 동작을 막는다
    event.preventDefault();
    onLike();
  }

  return (
    <img
      className="post-image"
      src={imageUrl}
      alt={`${username} 의 게시물`}
      onDoubleClick={handleDoubleClick}
    />
  );
}

// apps/web-spa/src/components/PostBody.tsx
interface PostBodyProps {
  username: string;
  content: string;
  liked: boolean;
  likeCount: number;
  commentCount: number;
  onToggle: () => void;
}

// 사진 아래 본문 구역 — 좋아요·캡션·댓글 수가 함께 산다.
export function PostBody({
  username,
  content,
  liked,
  likeCount,
  commentCount,
  onToggle,
}: PostBodyProps) {
  return (
    <>
      <LikeButton liked={liked} likeCount={likeCount} onToggle={onToggle} />
      <p className="post-content">
        <strong>{username}</strong> {content}
      </p>
      <p className="post-comments">댓글 {commentCount}개 모두 보기</p>
    </>
  );
}

{comments.map((comment) => (
  <li key={comment.id}>
    <strong>me</strong> {comment.content}
  </li>
))}

// apps/web-spa/src/components/PostCard.tsx
export function PostCard({
  id,
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
  onToggleLike,
}: PostCardViewProps) {
  const [comments, setComments] = useState<DraftComment[]>([]);

  function addComment(text: string) {
    setComments([...comments, { id: comments.length + 1, content: text }]);
  }

  return (
    <article className="post-card">
      <PostHeader username={username} profileImageUrl={profileImageUrl} />
      <PostImage
        imageUrl={imageUrl}
        username={username}
        onLike={() => onToggleLike(id)}
      />
      <PostBody
        username={username}
        content={content}
        liked={liked}
        likeCount={likeCount}
        commentCount={commentCount + comments.length}
        onToggle={() => onToggleLike(id)}
      />
      <ul className="comment-list">
        {comments.map((comment) => (
          <li key={comment.id}>
            <strong>me</strong> {comment.content}
          </li>
        ))}
      </ul>
      <CommentForm onSubmit={addComment} />
    </article>
  );
}

 PostCard
 ├── PostHeader        Avatar + ⋯ 더보기
 ├── PostImage         사진 + 더블클릭 좋아요
 ├── PostBody          좋아요 + 캡션 + 댓글 수
 ├── ul.comment-list   (아직 카드가 직접 그린다)
 └── CommentForm

// apps/web-spa/src/components/LikeButton.tsx — 지금까지의 모습
<button
  className={liked ? 'like-button liked' : 'like-button'}
  onClick={onToggle}
>
  {liked ? '♥ 좋아요 취소' : '♡ 좋아요'}
</button>

// apps/web-spa/src/components/CommentForm.tsx — 지금까지의 모습
<button className="comment-submit" type="submit" disabled={isEmpty}>
  게시
</button>

// apps/web-spa/src/components/Button.tsx

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  // 안 적으면 'button' — form 안에서 눌러도 제출되지 않는다
  type?: 'button' | 'submit';
  // 생김새는 쓰는 쪽이 정한다
  className?: string;
  // 글자 대신 기호만 보이는 버튼은 읽어줄 이름을 따로 준다
  'aria-label'?: string;
}

export function Button({
  children,
  onClick,
  disabled,
  type = 'button',
  className,
  'aria-label': ariaLabel,
}: ButtonProps) {
  return (
    <button
      className={className}
      type={type}
      disabled={disabled}
      onClick={onClick}
      aria-label={ariaLabel}
    >
      {children}
    </button>
  );
}

 HTML 의 <button> 은 type 을 안 적으면 submit 이다
   └─ form 안에 두면 누를 때마다 폼이 제출된다

 우리 Button 은 type 을 안 적으면 button 이다
   └─ form 안에서 눌러도 아무 일이 안 일어난다
   └─ 진짜 제출할 버튼에만 type="submit" 을 적는다

'aria-label': ariaLabel,

interface IconButtonProps {
  onClick?: () => void;
}

function IconButton({ onClick }: IconButtonProps) {
  return <button onClick={onClick} />;
}

<IconButton>게시</IconButton>

error TS2559: Type '{ children: string; }' has no properties in common with type
'IntrinsicAttributes & IconButtonProps'.

<IconButton onClick={() => {}}>게시</IconButton>

error TS2322: Type '{ children: string; onClick: () => void; }' is not assignable to type
'IntrinsicAttributes & IconButtonProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IconButtonProps'.

// apps/web-spa/src/components/LikeButton.tsx
import { Button } from './Button';

interface LikeButtonProps {
  liked: boolean;
  likeCount: number;
  onToggle: () => void;
}

export function LikeButton({ liked, likeCount, onToggle }: LikeButtonProps) {
  return (
    <div className="like-area">
      <Button
        className={liked ? 'like-button liked' : 'like-button'}
        onClick={onToggle}
      >
        {liked ? '♥ 좋아요 취소' : '♡ 좋아요'}
      </Button>
      {likeCount > 0 && <p className="post-likes">좋아요 {likeCount}개</p>}
    </div>
  );
}

// apps/web-spa/src/components/PostHeader.tsx
import { Avatar } from './Avatar';
import { Button } from './Button';

interface PostHeaderProps {
  username: string;
  profileImageUrl: string;
}

// 머리 구역에는 프로필과 더보기 버튼이 나란히 선다.
// 묶을 것이 둘 이상이라 파일을 따로 둘 이유가 생긴다.
export function PostHeader({ username, profileImageUrl }: PostHeaderProps) {
  return (
    <div className="post-header">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <Button className="post-more" aria-label="게시물 메뉴">
        ⋯
      </Button>
    </div>
  );
}

// apps/web-spa/src/components/CommentForm.tsx
<Button className="comment-submit" type="submit" disabled={isEmpty}>
  게시
</Button>

<Section title={<strong>피드</strong>}>노을 사진</Section>

error TS2322: Type 'Element' is not assignable to type 'string'.

// apps/web-spa/src/components/Card.tsx

interface CardProps {
  // 안 넘겨도 되는 자리 — 넘기지 않으면 그 자리는 그려지지 않는다
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
  // 생김새는 쓰는 쪽이 정한다
  className?: string;
}

export function Card({ header, footer, children, className }: CardProps) {
  return (
    <article className={className}>
      {header}
      {children}
      {footer}
    </article>
  );
}

 Section — 입구가 하나

   title    ─→  제목 (문자열만 받는다)
   children ─→  그 아래 전부

 Card — 입구가 셋

   header   ─→  머리말 (안 넘기면 그 칸은 안 그려진다)
   children ─→  가운데 (반드시 넘겨야 한다)
   footer   ─→  꼬리말 (안 넘기면 그 칸은 안 그려진다)

<Card header={<h3>jaehoon</h3>} footer={<Button>팔로우</Button>}>
  <p>게시물 42 · 팔로워 1240</p>
</Card>

<Card header={null} footer={isOwner && <Button>삭제</Button>}>
  노을 사진
</Card>

<Card className="profile-card" header="jaehoon" footer={42}>
  노을 사진
</Card>

<Card>{() => '노을'}</Card>

error TS2322: Type '() => string' is not assignable to type 'ReactNode'.

<Card header={() => <p>jaehoon</p>}>노을 사진</Card>

error TS2322: Type '() => React.JSX.Element' is not assignable to type 'ReactNode'.

<Card>{{ username: 'jaehoon' }}</Card>

error TS2353: Object literal may only specify known properties, and 'username'
does not exist in type 'ReactElement<...> | Iterable<ReactNode> | ReactPortal | ...'

<Card side={<p>옆</p>}>노을 사진</Card>

error TS2322: Type '{ children: string; side: Element; }' is not assignable to type
'IntrinsicAttributes & CardProps'.
  Property 'side' does not exist on type 'IntrinsicAttributes & CardProps'.

<Card header={<p>jaehoon</p>} />

error TS2741: Property 'children' is missing in type '{ header: Element; }'
  but required in type 'CardProps'.

// apps/web-spa/src/components/PostCard.tsx — 카드 안에 남아 있던 덩어리
<ul className="comment-list">
  {comments.map((comment) => (
    <li key={comment.id}>
      <strong>me</strong> {comment.content}
    </li>
  ))}
</ul>

// apps/web-spa/src/components/CommentList.tsx

export interface DraftComment {
  id: number;
  content: string;
}

interface CommentListProps {
  comments: DraftComment[];
}

// 댓글 한 줄은 자기 상태도 이벤트도 없어서 따로 파일을 만들지 않는다.
// 나중에 한 줄마다 좋아요나 답글이 생기면 그때 CommentItem 으로 꺼낸다.
export function CommentList({ comments }: CommentListProps) {
  return (
    <ul className="comment-list">
      {comments.map((comment) => (
        <li key={comment.id}>
          <strong>me</strong> {comment.content}
        </li>
      ))}
    </ul>
  );
}

 Step 1 을 끝냈을 때 — article 이 다섯을 세로로 늘어놓는다

   <article className="post-card">
     <PostHeader />
     <PostImage />
     <PostBody />
     <ul className="comment-list"> 안에서 map 이 돈다
     <CommentForm />
   </article>

 Step 4 를 끝냈을 때 — Card 가 세 칸으로 나눠 받는다

   <Card header={<PostHeader />} footer={<CommentForm />}>
     <PostImage />
     <PostBody />
     <CommentList />
   </Card>

// apps/web-spa/src/components/PostCard.tsx
import { useState } from 'react';
import type { PostCardProps } from '../types/derived';
import type { DraftComment } from './CommentList';
import { Card } from './Card';
import { PostHeader } from './PostHeader';
import { PostImage } from './PostImage';
import { PostBody } from './PostBody';
import { CommentList } from './CommentList';
import { CommentForm } from './CommentForm';

interface PostCardViewProps extends PostCardProps {
  onToggleLike: (id: number) => void;
}

export function PostCard({
  id,
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
  onToggleLike,
}: PostCardViewProps) {
  // 이 댓글은 이 카드만 쓰니까 카드 안에 둔다
  const [comments, setComments] = useState<DraftComment[]>([]);

  function addComment(text: string) {
    setComments([...comments, { id: comments.length + 1, content: text }]);
  }

  return (
    <Card
      className="post-card"
      header={<PostHeader username={username} profileImageUrl={profileImageUrl} />}
      footer={<CommentForm onSubmit={addComment} />}
    >
      <PostImage
        imageUrl={imageUrl}
        username={username}
        onLike={() => onToggleLike(id)}
      />
      <PostBody
        username={username}
        content={content}
        liked={liked}
        likeCount={likeCount}
        commentCount={commentCount + comments.length}
        onToggle={() => onToggleLike(id)}
      />
      <CommentList comments={comments} />
    </Card>
  );
}

 App
 └── Section  title="피드"
     └── Feed
         └── Card             PostCard 가 조립한다
             ├── header       PostHeader ─ Avatar + Button
             ├── children     PostImage
             │                PostBody ─ LikeButton
             │                CommentList
             └── footer       CommentForm ─ CommentInput + Button

 같은 모습이 세 번 나온다

 App           useState(feedPosts)       →  handleToggleLike
 CommentForm   useState('') + useRef     →  handleChange · handleSubmit
 LikeButton    useState(initialLiked)    →  handleClick        (B-2 에서 처음 만들었을 때)

 상태 하나와 그 상태를 바꾸는 함수가 늘 붙어 다닌다

export function ConditionalToggle({ expandable }: { expandable: boolean }) {
  if (expandable) {
    const [open, setOpen] = useState(false);
    return <button onClick={() => setOpen(!open)}>{open ? '접기' : '더보기'}</button>;
  }

  return null;
}

error  React Hook "useState" is called conditionally. React Hooks must be called
       in the exact same order in every component render

export function LoopToggle({ captions }: { captions: string[] }) {
  const shown: string[] = [];

  for (const caption of captions) {
    const [open] = useState(false);
    shown.push(open ? caption : caption.slice(0, 10));
  }

  return <p>{shown.join(' / ')}</p>;
}

error  React Hook "useState" may be executed more than once. Possibly because it
       is called in a loop. React Hooks must be called in the exact same order in
       every component render

export function makeToggle(initialOn: boolean) {
  const [on, setOn] = useState(initialOn);

  return { on, toggle: () => setOn(!on) };
}

error  React Hook "useState" is called in function "makeToggle" that is neither a
       React function component nor a custom React Hook function. React component
       names must start with an uppercase letter. React Hook names must start with
       the word "use"

export function EarlyReturnCard({ content }: { content: string | null }) {
  if (content === null) {
    return null;
  }

  const [open, setOpen] = useState(false);

  return <button onClick={() => setOpen(!open)}>{open ? content : '더보기'}</button>;
}

error  React Hook "useState" is called conditionally. React Hooks must be called
       in the exact same order in every component render

 정상 — 매 렌더 같은 순서

   1) useState  → content
   2) useRef    → inputRef
   3) useState  → open

 조건부 — 어떤 렌더에서 2번이 사라지면

   1) useState  → content
   2) useState  → open        3번이 받아야 할 값을 2번이 받아간다

 expandable  true ──────── false ──────── true
             펼침(접기)     안 그려짐      더보기
                                          ▲
                              펼쳐둔 상태가 사라졌다

function PostCardBroken({ withCaption }: { withCaption: boolean }) {
  const [liked, setLiked] = useState(false);

  if (withCaption) {
    const [open, setOpen] = useState(false);
    return (
      <div>
        <button onClick={() => setOpen(!open)}>{open ? '접기' : '더보기'}</button>
        <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>
      </div>
    );
  }

  return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>;
}

Rendered more hooks than during the previous render.

Rendered fewer hooks than expected. This may be caused by an accidental early
return statement.

// apps/web-spa/src/App.tsx — 지금까지의 모습
export function App() {
  const [posts, setPosts] = useState(feedPosts);
  const likedCount = posts.filter((post) => post.liked).length;

  function handleToggleLike(id: number) {
    setPosts(toggleLike(posts, id));
  }

  return (
    <main className="feed">
      <header className="feed-header">
        <h1 className="feed-title">인스타그램</h1>
        <span className="feed-liked-count">좋아요 누른 게시물 {likedCount}개</span>
      </header>
      <Section title="피드">
        <Feed posts={posts} onToggleLike={handleToggleLike} />
      </Section>
    </main>
  );
}

// apps/web-spa/src/hooks/useLikeToggle.ts
import { useState } from 'react';
import type { Post } from '../types/instagram';
import { toggleLike } from '../lib/likes';

// 피드가 들고 있던 좋아요 상태와 갱신 함수를 통째로 옮겨 이름을 붙인 것이다.
// 옮긴 것은 코드일 뿐, 상태는 여전히 이 훅을 부른 컴포넌트의 것이다.
export function useLikeToggle(initialPosts: Post[]) {
  const [posts, setPosts] = useState(initialPosts);
  const likedCount = posts.filter((post) => post.liked).length;

  function toggle(id: number) {
    setPosts(toggleLike(posts, id));
  }

  return { posts, likedCount, toggle };
}

// apps/web-spa/src/App.tsx
import { Feed } from './components/Feed';
import { Section } from './components/Section';
import { feedPosts } from './data/feed';
import { useLikeToggle } from './hooks/useLikeToggle';

export function App() {
  const { posts, likedCount, toggle } = useLikeToggle(feedPosts);

  return (
    <main className="feed">
      <header className="feed-header">
        <h1 className="feed-title">인스타그램</h1>
        <span className="feed-liked-count">좋아요 누른 게시물 {likedCount}개</span>
      </header>
      <Section title="피드">
        <Feed posts={posts} onToggleLike={toggle} />
      </Section>
    </main>
  );
}

 상태가 사는 곳은 바뀌지 않는다

 옮기기 전
   App 안에서 useState 가 불린다  →  상태는 App 의 것

 옮긴 뒤
   App 이 useLikeToggle() 을 부르고, 그 안에서 useState 가 불린다
   훅은 App 이 렌더될 때 App 의 몸통에서 실행된다  →  상태는 여전히 App 의 것

 jaehoon   오늘 한강 노을이 미쳤다
 minji     제주도 3박 4일 기록

// apps/web-spa/src/hooks/useToggle.ts
import { useState } from 'react';

// 켜고 끄는 값 하나와 뒤집는 함수 하나.
// useState 처럼 배열로 돌려주면 쓰는 쪽이 이름을 마음대로 붙일 수 있다.
// 돌려주는 모양을 적어두지 않으면 두 값이 하나로 뭉뚱그려져 toggle() 을 부를 수 없다.
export function useToggle(initialOn = false): [boolean, () => void] {
  const [on, setOn] = useState(initialOn);

  function toggle() {
    setOn(!on);
  }

  return [on, toggle];
}

const [captionOpen, toggleCaption] = useToggle();
const [commentsOpen, toggleComments] = useToggle();

// apps/web-spa/src/components/PostBody.tsx
import { LikeButton } from './LikeButton';
import { Button } from './Button';
import { useToggle } from '../hooks/useToggle';

// 이 글자 수를 넘는 캡션은 접어서 보여준다
const CAPTION_LIMIT = 10;

interface PostBodyProps {
  username: string;
  content: string;
  liked: boolean;
  likeCount: number;
  commentCount: number;
  onToggle: () => void;
}

// 사진 아래 본문 구역 — 좋아요·캡션·댓글 수가 함께 산다.
export function PostBody({
  username,
  content,
  liked,
  likeCount,
  commentCount,
  onToggle,
}: PostBodyProps) {
  const [captionOpen, toggleCaption] = useToggle();
  const isLong = content.length > CAPTION_LIMIT;
  const shownContent =
    isLong && !captionOpen ? `${content.slice(0, CAPTION_LIMIT).trimEnd()}...` : content;

  return (
    <>
      <LikeButton liked={liked} likeCount={likeCount} onToggle={onToggle} />
      <p className="post-content">
        <strong>{username}</strong> {shownContent}
        {isLong && (
          <Button className="caption-toggle" onClick={toggleCaption}>
            {captionOpen ? '접기' : '더 보기'}
          </Button>
        )}
      </p>
      <p className="post-comments">댓글 {commentCount}개 모두 보기</p>
    </>
  );
}

 같은 useToggle 을 두 곳에서 불러도 상태는 섞이지 않는다

 PostCard #1 → PostBody → useToggle()  →  captionOpen = true
 PostCard #2 → PostBody → useToggle()  →  captionOpen = false

 훅이 공유하는 것은 코드이고, 상태는 부른 쪽마다 따로 생긴다

// apps/web-spa/src/components/CommentForm.tsx — 지금까지의 모습
import { useRef, useState } from 'react';
import { Button } from './Button';
import { CommentInput } from './CommentInput';

interface CommentFormProps {
  onSubmit: (content: string) => void;
}

export function CommentForm({ onSubmit }: CommentFormProps) {
  const [content, setContent] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const isEmpty = content.trim() === '';

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setContent(event.target.value);
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (isEmpty) {
      return;
    }
    onSubmit(content.trim());
    setContent('');
    inputRef.current?.focus();
  }

  return (
    <form className="comment-form" onSubmit={handleSubmit}>
      <CommentInput ref={inputRef} value={content} onChange={handleChange} />
      <Button className="comment-submit" type="submit" disabled={isEmpty}>
        게시
      </Button>
    </form>
  );
}

// apps/web-spa/src/hooks/useCommentInput.ts
import { useRef, useState } from 'react';

// 댓글 입력창 하나를 돌리는 데 필요한 것을 통째로 묶었다.
// 입력값·입력창 손잡이·빈 값 판정·두 핸들러가 늘 함께 다니던 묶음이다.
export function useCommentInput(onSubmit: (content: string) => void) {
  const [content, setContent] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const isEmpty = content.trim() === '';

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setContent(event.target.value);
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (isEmpty) {
      return;
    }
    onSubmit(content.trim());
    setContent('');
    inputRef.current?.focus();
  }

  return { content, inputRef, isEmpty, handleChange, handleSubmit };
}

// apps/web-spa/src/components/CommentForm.tsx
import { Button } from './Button';
import { CommentInput } from './CommentInput';
import { useCommentInput } from '../hooks/useCommentInput';

interface CommentFormProps {
  onSubmit: (content: string) => void;
}

export function CommentForm({ onSubmit }: CommentFormProps) {
  const { content, inputRef, isEmpty, handleChange, handleSubmit } =
    useCommentInput(onSubmit);

  return (
    <form className="comment-form" onSubmit={handleSubmit}>
      <CommentInput ref={inputRef} value={content} onChange={handleChange} />
      <Button className="comment-submit" type="submit" disabled={isEmpty}>
        게시
      </Button>
    </form>
  );
}

 CommentForm 의 몸통

 옮기기 전   준비 17 줄  +  화면 8 줄
 옮긴 뒤     준비  2 줄  +  화면 8 줄

 useLikeToggle    피드 하나에 하나       객체 { posts, likedCount, toggle }
 useToggle        카드마다 하나씩        배열 [on, toggle]
 useCommentInput  댓글 폼마다 하나씩     객체 { content, inputRef, isEmpty, 핸들러 둘 }