Skip to content

Commit

Permalink
feat: add attendanceModal to storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeungJL
SeungJL committed May 7, 2024
1 parent 3bd6159 commit 120b16f
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 101 deletions.
148 changes: 67 additions & 81 deletions design/attendance/AttendanceModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,9 @@ import styled from "styled-components";
import Avatar from "../../components/atoms/Avatar";
import { PopOverIcon } from "../../components/atoms/Icons/PopOverIcon";
import { IFooterOptions, ModalLayout } from "../../modals/Modals";
import { DispatchBoolean } from "../../types/hooks/reactTypes";
import AttendanceBar from "./AttendanceBar";

function AttendanceModal({
isExist,
setIsModal,
}: {
isExist?: boolean;
setIsModal: DispatchBoolean;
}) {
function AttendanceModal({ type }: { type: 1 | 2 | 3 }) {
const today = dayjs();
const firstDayOfMonth = today.startOf("month");
const differenceInDays = today.diff(firstDayOfMonth, "day");
Expand All @@ -26,76 +19,73 @@ function AttendanceModal({

return (
<>
{isExist && (
<ModalLayout
title={`${dayjs().month() + 1}월 2주차 주간 체크`}
headerOptions={{}}
footerOptions={footerOptions}
setIsModal={setIsModal}
>
<ScoreBarWrapper>
<AttendanceBar myScore={17} />
<span>임시 달성시 +10 포인트, 거북이 아바타 해금!</span>
</ScoreBarWrapper>
<ProfileWrapper>
<span>이승주 (동아리원)</span>
<ImageWrapper>
<Avatar image="" size="sm" />
</ImageWrapper>
</ProfileWrapper>
<Container>
<Info>
<Item>
<span>{weekNumber}주차 스터디 투표</span>
<span>2 회</span>
</Item>
<Item>
<span>{weekNumber}주차 스터디 출석</span>
<span>2 회</span>
</Item>
<Item>
<div style={{ display: "flex" }}>
<span>이번 달 스터디 점수</span>
<PopOverIcon
title="월간 스터디 점수"
text="최소 1점을 넘어야합니다. 출석을 기준으로 정규 스터디는 1회당 1점, 개인, FREE 스터디는 2회당 1점입니다."
/>
</div>
<span>40 점</span>
</Item>
<Item>
<span>다음 참여 정산일</span>
<span> {dayjs().add(1, "month").month() + 1}월 1일</span>
</Item>
<Item>
<span>보유 보증금</span>
<span>2000원</span>
</Item>
</Info>
</Container>
<Message>
{true ? (
<div>
🎉신규 가입을 환영해요🎉
<br />
앞으로 열심히 활동해봐요~!
<ModalLayout
title={`${dayjs().month() + 1}월 2주차 주간 체크`}
headerOptions={{}}
footerOptions={footerOptions}
setIsModal={() => {}}
>
<ScoreBarWrapper>
<AttendanceBar myScore={17} />
<span>임시 달성시 +10 포인트, 거북이 아바타 해금!</span>
</ScoreBarWrapper>
<ProfileWrapper>
<span>이승주 {type === 1 ? "(동아리원)" : "(수습멤버)"}</span>
<ImageWrapper>
<Avatar image="" size="md" />
</ImageWrapper>
</ProfileWrapper>
<Container>
<Info>
<Item>
<span>{weekNumber}주차 스터디 투표</span>
<span>2 회</span>
</Item>
<Item>
<span>{weekNumber}주차 스터디 출석</span>
<span>2 회</span>
</Item>
<Item>
<div style={{ display: "flex" }}>
<span>이번 달 스터디 점수</span>
<PopOverIcon
title="월간 스터디 점수"
text="최소 1점을 넘어야합니다. 출석을 기준으로 정규 스터디는 1회당 1점, 개인, FREE 스터디는 2회당 1점입니다."
/>
</div>
) : false ? (
<div>
이번 달에 아직 스터디에 참여하지 않았어요.
<br /> {-dayjs().add(1, "month").date(1).diff(dayjs(), "day")}일 뒤에 경고를
받습니다.
</div>
) : (
<div>
🎉잘 하고 있어요🎉
<br />
이번주도 열심히 파이팅~!
</div>
)}
</Message>
</ModalLayout>
)}
<span>40 점</span>
</Item>
<Item>
<span>다음 참여 정산일</span>
<span> {dayjs().add(1, "month").month() + 1}월 1일</span>
</Item>
<Item>
<span>보유 보증금</span>
<span>2000원</span>
</Item>
</Info>
</Container>
<Message>
{type === 2 ? (
<div>
🎉신규 가입을 환영해요🎉
<br />
앞으로 열심히 활동해봐요~!
</div>
) : type === 1 ? (
<div>
이번 달 스터디에 참여하지 않았어요.
<br /> {-dayjs().add(1, "month").date(1).diff(dayjs(), "day")}일 뒤에 경고를 받습니다.
</div>
) : (
<div>
🎉잘 하고 있어요🎉
<br />
이번주도 열심히 파이팅~!
</div>
)}
</Message>
</ModalLayout>
</>
);
}
Expand Down Expand Up @@ -144,10 +134,6 @@ const Info = styled.div`
flex-direction: column;
`;

const SkeletonText = styled.div`
width: 60px;
`;

const ImageWrapper = styled.div`
margin-left: auto;
display: flex;
Expand Down
33 changes: 13 additions & 20 deletions stories/designs/attendanceModal.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,26 @@
import { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react";

import AttendanceModal from "../../design/attendance/AttendanceModal";

// Meta 타입에 typeof를 사용하여 컴포넌트 타입을 정확히 지정합니다.
const meta: Meta<typeof AttendanceModal> = {
const meta = {
title: "DESIGNS/AttendanceModal",
component: AttendanceModal,
parameters: {},
tags: ["autodocs"],
};
argTypes: {},
args: {},
} satisfies Meta<typeof AttendanceModal>;

export default meta;
type Story = StoryObj<typeof meta>;

// StoryObj를 사용할 때는 컴포넌트의 Props 타입을 정확하게 매핑합니다.
type AttendanceModalProps = {
isExist?: boolean;
setIsModal: (exist: boolean) => void;
};

export const Primary: StoryObj<typeof AttendanceModal> = {
render: (args) => {
const [isExist, setIsExist] = useState(args.isExist ?? false); // args.isExist가 undefined일 경우 false를 기본값으로 사용

// isExist 상태를 토글하는 함수
const setIsModal = () => setIsExist(!isExist);

return <div />;
export const Primary: Story = {
args: {
type: 1,
},
};
export const Secondary: Story = {
args: {
isExist: false,
type: 2,
},
};

0 comments on commit 120b16f

Please sign in to comment.