https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FWQWQdH9JWwcSugQeWIJMxh%2F2023-frontend-basic-react-todoapp%3Ftype%3Ddesign%26node-id%3D5-223%26t%3DHgFfpvctxroAbUVc-4

[お手本 storybook(http://shinonome.io/frontend-basic-todoapp-storybook/?path=/story/organisms-todocard--default)](https://shinonome.io/frontend-basic-todoapp-storybook/iframe.html?path=/story/organisms-todocard--default&viewMode=story&full=1&shortcuts=false&singleStory=true)

お手本 storybook(http://shinonome.io/frontend-basic-todoapp-storybook/?path=/story/organisms-todocard--default)

ここまで来るとだいぶ複雑になってきます。

まずはざっくりコンポーネントを配置して見た目を作成しましょう。

ディレクトリ構造

src
  └ components
    └ Organisms
      └ TodoCard
        ├ index.jsx
        ├ story.jsx （旧テンプレートの場合）
        └ index.stories.jsx （新テンプレートの場合）

設計（参考）

Props

なし

State

state名	説明	データ型	デフォルトの値
taskList	タスクの情報を保持する配列。配列の要素はそれぞれ「タスク名」「初期化中かどうか」の情報をもつ。ここでは仮にそれぞれ name,initializing とする。	{name: string, initializing: boolean}[]	[]

Ref

なし

Effect

なし（後の課題で追加）

その他の関数(OtherFunc)

onAddTaskButtonClick

「タスクを追加」ボタンを押した際の処理

引数