diff --git a/src/app/(auth)/login/_components/login-form.stories.tsx b/src/app/(auth)/login/_components/login-form.stories.tsx index 497156d1..e245f8f8 100644 --- a/src/app/(auth)/login/_components/login-form.stories.tsx +++ b/src/app/(auth)/login/_components/login-form.stories.tsx @@ -6,6 +6,16 @@ import LoginForm, { LoginFormValues } from './login-form'; const meta: Meta = { title: 'auth/login-form', component: LoginForm, + tags: ['autodocs'], + parameters: { + docs: { + subtitle: '로그인시 사용되는 폼', + description: { + component: + '포커스 이동 또는 입력 1초 이후에 이메일 형식, 비밀번호 8자이상 유효성 검사가 실행됩니다.', + }, + }, + }, }; export default meta; diff --git a/src/app/(auth)/signup/_components/signup-form.stories.tsx b/src/app/(auth)/signup/_components/signup-form.stories.tsx index 3ad935f8..3ce89904 100644 --- a/src/app/(auth)/signup/_components/signup-form.stories.tsx +++ b/src/app/(auth)/signup/_components/signup-form.stories.tsx @@ -6,6 +6,16 @@ import SignupForm, { SignupFormValues } from './signup-form'; const meta: Meta = { title: 'auth/signup-form', component: SignupForm, + tags: ['autodocs'], + parameters: { + docs: { + subtitle: '회원가입시 사용되는 폼', + description: { + component: + '포커스 이동 또는 입력 1초 이후에 이메일 형식, 비밀번호 8자이상, 비밀번호 확인 유효성 검사가 실행됩니다.', + }, + }, + }, }; export default meta; diff --git a/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx b/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx index 63f5c104..b27cbed5 100644 --- a/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx +++ b/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx @@ -7,16 +7,24 @@ const meta: Meta = { title: 'layout/category', component: InternalCategory, tags: ['autodocs'], + parameters: { + docs: { + subtitle: '운동 종목별 카테고리', + description: { + component: '크루찾기 페이지에서 운동 대종목 선택에 따라, 세부 카테고리를 보여줍니다.', + }, + }, + }, argTypes: { category: { - description: '세부 카테고리 이름 배열', + description: '카테고리 이름 배열', }, }, }; export default meta; -const Template: StoryFn = function InternalCategoryStory() { +const Template: StoryFn = function InternalCategoryStory() { const [subCategory, setSubCategory] = useState('running'); return ( @@ -28,12 +36,5 @@ const Template: StoryFn = function InternalCategoryStory( ); }; -export const Category1 = Template.bind({}); -Category1.args = { - category: categoryData[0].items, -}; - -export const Category2 = Template.bind({}); -Category2.args = { - category: categoryData[1].items, -}; +export const Default = Template.bind({}); +Default.args = {}; diff --git a/src/app/(crew)/favicon.ico b/src/app/(crew)/favicon.ico deleted file mode 100644 index 718d6fea..00000000 Binary files a/src/app/(crew)/favicon.ico and /dev/null differ diff --git a/src/app/(crew)/my-gathering/hosted/page.tsx b/src/app/(crew)/my-gathering/hosted/page.tsx index b3472b3a..1af910e7 100644 --- a/src/app/(crew)/my-gathering/hosted/page.tsx +++ b/src/app/(crew)/my-gathering/hosted/page.tsx @@ -25,6 +25,15 @@ export default function MyGatheringHostedPage() { refetch(); }, [selectedDate]); + if (hostedGatheringList?.length === 0) { + return ( +
+

내가 만든 약속이 아직 없어요

+

크루에서 약속을 만들어보세요 🙌

+
+ ); + } + return (
diff --git a/src/app/(crew)/my-gathering/joined/page.tsx b/src/app/(crew)/my-gathering/joined/page.tsx index 7c949f1e..b9ace55f 100644 --- a/src/app/(crew)/my-gathering/joined/page.tsx +++ b/src/app/(crew)/my-gathering/joined/page.tsx @@ -25,6 +25,15 @@ export default function MyGatheringJoinedPage() { refetch(); }, [selectedDate]); + if (joinedGatheringList?.length === 0) { + return ( +
+

내가 참여한 약속이 아직 없어요

+

크루에서 약속에 참여해 보세요 🙌

+
+ ); + } + return (
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 4af1b939..8fde6269 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -35,7 +35,7 @@ export default function NotFound() { xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" - shape-rendering="auto" + shapeRendering="auto" > = function PasswordInputStory( export const Default = Template.bind({}); Default.args = { - label: 'Password', - placeholder: 'Enter your password', + label: '비밀번호', + placeholder: '비밀번호를 입력해주세요', type: 'password', + inputClassNames: 'bg-gray-100', }; export const WithError = Template.bind({}); WithError.args = { - label: 'Password', - placeholder: 'Enter your password', - error: 'Password is too short', + label: '비밀번호', + placeholder: '비밀번호를 입력해주세요', + error: '비밀번호가 8자 이상이 되도록 해주세요.', type: 'password', + inputClassNames: 'bg-gray-100', }; diff --git a/src/components/common/input/text-input/text-input.stories.tsx b/src/components/common/input/text-input/text-input.stories.tsx index 4e5cc939..0b26963b 100644 --- a/src/components/common/input/text-input/text-input.stories.tsx +++ b/src/components/common/input/text-input/text-input.stories.tsx @@ -5,6 +5,15 @@ import TextInput, { TextInputProps } from '.'; const meta: Meta = { title: 'common/input/text-input', component: TextInput, + tags: ['autodocs'], + parameters: { + docs: { + subtitle: '텍스트를 입력하는 input 컴포넌트', + description: { + component: 'label, placeholder, error 설정이 가능한 text-input 컴포넌트입니다.', + }, + }, + }, }; export default meta; @@ -29,7 +38,7 @@ WithLabel.args = { export const WithError = Template.bind({}); WithError.args = { - error: 'Invalid email format', + error: '에러가 발생했습니다', type: 'text', inputClassNames: 'bg-gray-100', }; diff --git a/src/components/common/input/textarea/textarea.stories.tsx b/src/components/common/input/textarea/textarea.stories.tsx index 68a48e49..fb675cd0 100644 --- a/src/components/common/input/textarea/textarea.stories.tsx +++ b/src/components/common/input/textarea/textarea.stories.tsx @@ -5,6 +5,15 @@ import Textarea, { TextareaProps } from '.'; const meta: Meta = { title: 'common/input/textarea', component: Textarea, + tags: ['autodocs'], + parameters: { + docs: { + subtitle: '텍스트를 입력하는 textarea 컴포넌트', + description: { + component: 'label, placeholder, error 설정이 가능한 텍스트 textarea 컴포넌트입니다.', + }, + }, + }, }; export default meta; diff --git a/src/components/common/tab/tab.stories.tsx b/src/components/common/tab/tab.stories.tsx index 51aefb61..a44f90c7 100644 --- a/src/components/common/tab/tab.stories.tsx +++ b/src/components/common/tab/tab.stories.tsx @@ -8,6 +8,15 @@ const meta: Meta = { title: 'layout/tabs', component: Tabs, tags: ['autodocs'], + parameters: { + docs: { + subtitle: '화면 최상단에 위치한 헤더', + description: { + component: + "'로고, 크루찾기, 나의크루, 나의약속, 로그인/마이페이지/로그아웃'으로 구성되어 있으며 해당페이지로 연결됩니다.", + }, + }, + }, argTypes: { tabs: { description: '탭 목록 데이터 배열', @@ -40,15 +49,41 @@ const Template: StoryFn = function TabsStory({ activeTab, tabs, ...ar /> ); }; +export const MyCrewTabs = Template.bind({}); +MyCrewTabs.args = { + tabs: tabData.crewTabs, + activeTab: tabData.crewTabs[0].id, +}; +MyCrewTabs.parameters = { + docs: { + description: { + story: "'나의 크루' 페이지에서 사용되는 탭", + }, + }, +}; -export const AppointmentTabs = Template.bind({}); -AppointmentTabs.args = { +export const MyGatheringTabs = Template.bind({}); +MyGatheringTabs.args = { tabs: tabData.appointmentTabs, activeTab: tabData.appointmentTabs[0].id, }; +MyGatheringTabs.parameters = { + docs: { + description: { + story: "'나의 약속' 페이지에서 사용되는 탭", + }, + }, +}; -export const CrewTabs = Template.bind({}); -CrewTabs.args = { - tabs: tabData.crewTabs, - activeTab: tabData.crewTabs[0].id, +export const ReviewTabs = Template.bind({}); +ReviewTabs.args = { + tabs: tabData.reviewTabs, + activeTab: tabData.reviewTabs[0].id, +}; +ReviewTabs.parameters = { + docs: { + description: { + story: "'마이페이지' 페이지의 리뷰에서 사용되는 탭", + }, + }, };