Skip to content

Commit

Permalink
[#540] [모임 생성] 모임 상세 퍼널 마크업 (#542)
Browse files Browse the repository at this point in the history
* fix: InputLength text-xs 클래스 추가

* refactor: BookInfoCard의 bookId props 옵셔널로 수정

* feat: 모임가입 퍼널: 모임상세 스텝 마크업

* feat: 모임상세 스텝 스토리 작성

* chore: 개행 추가

* chore: 개행 추가

* fix: 모임 생성 funnel step 네이밍 컨벤션 수정

* fix: 빌드 에러 수정
  • Loading branch information
hanyugeon authored and gxxrxn committed Jun 17, 2024
1 parent 68dc181 commit 5d23ab3
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 3 deletions.
16 changes: 16 additions & 0 deletions src/stories/bookGroup/create/funnel/SetUpDetailStep.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { SetUpDetailStep } from '@/v1/bookGroup/create/funnel';
import { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof SetUpDetailStep> = {
title: 'bookGroup/funnel/SetUpDetailStep',
component: SetUpDetailStep,
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof SetUpDetailStep>;

export const Default: Story = {
args: {},
};
2 changes: 1 addition & 1 deletion src/v1/base/InputLength.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const InputLength = ({
const textColor = isError ? 'text-warning-800 ' : 'text-main-900';

return (
<p>
<p className="text-xs">
<span className={textColor}>{currentLength ? currentLength : 0}</span>/
{maxLength}
</p>
Expand Down
4 changes: 2 additions & 2 deletions src/v1/bookGroup/BookInfoCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const BookInfoCard = ({
removable = false,
onBookIdChange: _onBookIdChange,
}: {
bookId: number;
bookId?: number;
removable?: boolean;
onBookIdChange?: (id: APIBook['bookId']) => void;
}) => {
Expand Down Expand Up @@ -89,7 +89,7 @@ const EmptyBookInfoCard = ({ onBookSelect }: { onBookSelect?: () => void }) => {
className="flex min-h-[12.8rem] w-full cursor-pointer flex-col items-center justify-center gap-[1rem] rounded-[0.5rem] border-[0.05rem] border-cancel shadow-bookcard"
onClick={onBookSelect}
>
<IconBookPlus className="h-[2rem] w-[2rem]" />
<IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
<p className="text-xs text-placeholder">
독서모임에 사용할 책을 선택해주세요
</p>
Expand Down
71 changes: 71 additions & 0 deletions src/v1/bookGroup/create/funnel/SetUpDetailStep.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import DatePicker from '@/v1/base/DatePicker';
import ErrorMessage from '@/v1/base/ErrorMessage';
import Input from '@/v1/base/Input';
import InputLength from '@/v1/base/InputLength';
import RadioButton from '@/v1/base/RadioButton';
import Switch from '@/v1/base/Switch';
import TextArea from '@/v1/base/TextArea';
import BookInfoCard from '../../BookInfoCard';

const SetUpDetailStep = () => {
return (
<div className="flex flex-col gap-[3.2rem]">
<section className="flex flex-col gap-[0.5rem]">
<Input fontSize="large" inputStyle="line" error={true} />
<div className="flex flex-row-reverse justify-between gap-[0.4rem]">
<InputLength maxLength={20} isError={true} />
{true && <ErrorMessage>{'마크업용 에러 표시'}</ErrorMessage>}
</div>
</section>

<section>
<BookInfoCard removable={true} />
</section>

<section className="flex flex-col gap-[1.6rem]">
<h2>활동 내용</h2>
<>
<TextArea
count={true}
placeholder="독서모임에서 어떤 활동을 할 계획인지 자세히 설명해주세요."
/>
</>
</section>

<section className="flex flex-col gap-[1.6rem]">
<h2>최대 인원</h2>
<div className="inline-flex w-[23rem] flex-wrap gap-[1rem]">
<RadioButton value="제한없음" />
<RadioButton value="50명" />
<RadioButton value="100명" />
<RadioButton value="200명" />
<RadioButton value="500명" />
<RadioButton value="직접 입력" />
</div>
{false && <Input />}
</section>

<section className="flex items-center justify-between">
<h2>모임 시작일</h2>
<DatePicker />
</section>

<section className="flex items-center justify-between">
<h2>모임 종료일</h2>
<DatePicker />
</section>

<section className="flex items-start justify-between">
<div className="flex min-w-0 flex-col gap-[0.3rem]">
<h2>댓글 공개 여부</h2>
<p className="text-xs text-placeholder">
모임에 가입하지 않은 사람도 댓글을 볼 수 있어요.
</p>
</div>
<Switch />
</section>
</div>
);
};

export default SetUpDetailStep;
2 changes: 2 additions & 0 deletions src/v1/bookGroup/create/funnel/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// export { default as SelectBookStep } from './SelectBookStep';
export { default as SetUpDetailStep } from './SetUpDetailStep';

0 comments on commit 5d23ab3

Please sign in to comment.