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%3D3-959%26t%3DHgFfpvctxroAbUVc-4

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

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

Atoms/AddTaskButton は Atoms/EditButton に毛が生えたようなもので、 アイコンに加えてテキストもボタンに加えただけです。 今までの知識を活かして作成してみましょう。 また、DOMの構造が簡潔になることを目指しましょう。

ディレクトリ構造

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

前のページ

Atoms/EditButton

次のページ

Atoms/Checkbox