Merge pull request #105 from dnd-side-project/design/#104

 design: storybook 및 기타 변동사항 수정

src/app/loading.tsx

@@ -1,3 +1,14 @@
+import Image from 'next/image'
+
 export default function Loading() {
- return <div className="text-primary-400">loading..</div>
+ return (
+ <div className="h-full bg-[#000] flex justify-center items-center">
+ <Image
+ src={'/gif/loading.gif'}
+ alt="loading.gif"
+ width={100}
+ height={100}
+ />
+ </div>
+ )
 }

src/components/domain/profile/JobGroupCard/JobGroupCard.stories.tsx

@@ -1,45 +1,82 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import JobGroup from '.'
 import JobGroupCard from '.'
+import { useState } from 'react'
 
-const meta: Meta<typeof JobGroup> = {
+const meta: Meta<typeof JobGroupCard> = {
  title: 'components/Profile/JobGroupCard',
  component: JobGroupCard,
  tags: ['autodocs'],
  argTypes: {
  id: {
  description: '각 컴포넌트에 대한 ID를 추가합니다',
+ control: 'number',
  },
  name: {
  description: '개발자, 디자이너, 기타로 분류됩니다.',
+ control: 'text',
+ },
+ selected: {
+ description: '카드가 선택된 상태를 나타냅니다.',
+ control: 'boolean',
+ },
+ onClick: {
+ description: '카드를 클릭할 때 호출되는 함수입니다.',
+ action: 'clicked',
  },
  },
 }
 
 export default meta
 
-type Story = StoryObj<typeof JobGroup>
+type Story = StoryObj<typeof JobGroupCard>
 
 export const Develop: Story = {
  args: {
  id: 1,
  name: '개발자',
+ selected: false,
+ },
+ render: (args) => {
+ const [select, setSelected] = useState(args.selected)
+
+ const handleClick = () => {
+ setSelected((prev) => !prev)
+ }
+
+ return <JobGroupCard {...args} selected={select} onClick={handleClick} />
  },
- render: () => <JobGroupCard id={1} name={'개발자'} />,
 }
 
 export const Design: Story = {
  args: {
  id: 2,
  name: '디자이너',
+ selected: false,
+ },
+ render: (args) => {
+ const [select, setSelected] = useState(args.selected)
+
+ const handleClick = () => {
+ setSelected((prev) => !prev)
+ }
+
+ return <JobGroupCard {...args} selected={select} onClick={handleClick} />
  },
- render: () => <JobGroupCard id={2} name={'디자이너'} />,
 }
 
 export const Etcetera: Story = {
  args: {
  id: 3,
  name: '기타',
+ selected: false,
+ },
+ render: (args) => {
+ const [select, setSelected] = useState(args.selected)
+
+ const handleClick = () => {
+ setSelected((prev) => !prev)
+ }
+
+ return <JobGroupCard {...args} selected={select} onClick={handleClick} />
  },
- render: () => <JobGroupCard id={3} name={'기타'} />,
 }

src/components/domain/profile/chip/Chip.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import ProfileChip from '.'
-import Chip from '.'
+import { useState } from 'react'
 
 const meta: Meta<typeof ProfileChip> = {
  title: 'components/Profile/Chip',
@@ -13,9 +13,22 @@ export default meta
 type Story = StoryObj<typeof ProfileChip>
 
 export const Default: Story = {
- render: () => (
- <div className="flex flex-col gap-2">
- <Chip id={0} name="비공개" type="기업" />
- </div>
- ),
+ render: () => {
+ const [isSelected, setIsSelected] = useState(false)
+
+ const toggleChipSelection = () => {
+ setIsSelected((prev) => !prev)
+ }
+
+ return (
+ <div className="flex flex-col gap-2">
+ <ProfileChip
+ id={0}
+ name="비공개"
+ selected={isSelected}
+ onClick={toggleChipSelection}
+ />
+ </div>
+ )
+ },
 }