-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #110 from softeerbootcamp4th/feature/30-admin-even…
…t-detail [feat] 어드민 페이지 이벤트 상세보기 페이지 구현
- Loading branch information
Showing
159 changed files
with
1,908 additions
and
955 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
src/adminPage/features/eventDetail/EventBaseDataRenderer.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import tableStyle from "./tableStyle.js"; | ||
| import EventStatus from "@admin/serverTime/EventStatus.js"; | ||
| import DrawButtonHolder from "./drawButton/DrawButtonHolder.jsx"; | ||
| import Suspense from "@common/components/Suspense.jsx"; | ||
| import ErrorBoundary from "@common/components/ErrorBoundary.jsx"; | ||
| import { formatDate } from "@common/utils.js"; | ||
|
|
||
| function EventBaseDataRenderer({ | ||
| name, | ||
| eventId, | ||
| eventFrameId, | ||
| startTime, | ||
| endTime, | ||
| description, | ||
| url, | ||
| eventType, | ||
| }) { | ||
| return ( | ||
| <div className={tableStyle}> | ||
| <p className="text-center font-bold">이벤트 명</p> | ||
| <p className="font-medium">{name}</p> | ||
| <p className="text-center font-bold">이벤트 ID</p> | ||
| <p className="font-medium">{eventId}</p> | ||
| <p className="text-center font-bold">이벤트 프레임</p> | ||
| <p>{eventFrameId}</p> | ||
| <p className="text-center font-bold">이벤트 기간</p> | ||
| <div> | ||
| {formatDate(startTime, "YYYY-MM-DD hh:mm")} ~ {formatDate(endTime, "YYYY-MM-DD hh:mm")} ( | ||
| <span className="font-medium"> | ||
| <EventStatus startTime={startTime} endTime={endTime} /> | ||
| </span> | ||
| ) | ||
| </div> | ||
| <p className="text-center font-bold self-start h-8 flex justify-center items-center"> | ||
| 이벤트 요약 | ||
| </p> | ||
| <div className="relative">{description}</div> | ||
| <p className="text-center font-bold">이벤트 URL</p> | ||
| <p> | ||
| <a href={url} className="text-blue-800 hover:underline active:underline"> | ||
| {url} | ||
| </a> | ||
| </p> | ||
| <p className="text-center font-bold">이벤트 종류</p> | ||
| <div className="flex flex-wrap justify-between items-center"> | ||
| <p className="font-medium">{eventType === "fcfs" ? "선착순" : "추첨"}</p> | ||
| {eventType === "draw" && ( | ||
| <ErrorBoundary fallback={"error"}> | ||
| <Suspense fallback={"suspense"}> | ||
| <DrawButtonHolder endTime={endTime} /> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default EventBaseDataRenderer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import EventDetail from "./index.jsx"; | ||
| import { useQuery } from "@common/dataFetch/getQuery.js"; | ||
| import { fetchServer } from "@common/dataFetch/fetchServer.js"; | ||
|
|
||
| function EventDetailFetcher({ eventId }) { | ||
| const data = useQuery(`event-detail-${eventId}`, () => | ||
| fetchServer(`/api/v1/admin/events/${eventId}`), | ||
| ); | ||
| return <EventDetail data={data} />; | ||
| } | ||
|
|
||
| export default EventDetailFetcher; |
11 changes: 11 additions & 0 deletions
11
src/adminPage/features/eventDetail/draw/EventDrawMetadataItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| function EventDrawMetadataItem({ grade, count, prizeInfo }) { | ||
| return ( | ||
| <> | ||
| <p className="font-medium">{grade}등</p> | ||
| <p>{count}명</p> | ||
| <p className="justify-self-start">{prizeInfo}</p> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default EventDrawMetadataItem; |
12 changes: 12 additions & 0 deletions
12
src/adminPage/features/eventDetail/draw/EventDrawPolicyItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { POLICY_ENUM } from "@admin/constants.js"; | ||
|
|
||
| function EventDrawPolicyItem({ action, score }) { | ||
| return ( | ||
| <> | ||
| <p className="justify-self-start">{POLICY_ENUM[action]}</p> | ||
| <p>{score}</p> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default EventDrawPolicyItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import EventDrawMetadataItem from "./EventDrawMetadataItem.jsx"; | ||
| import EventDrawPolicyItem from "./EventDrawPolicyItem.jsx"; | ||
| import tableStyle from "../tableStyle.js"; | ||
|
|
||
| function EventDrawDataRenderer({ data }) { | ||
| const gridCommonStyle = "grid px-2 gap-4 justify-items-center"; | ||
| const metadataGridStyle = `${gridCommonStyle} grid-cols-[3rem_6rem_1fr]`; | ||
| const policyGridStyle = `${gridCommonStyle} grid-cols-[3fr_1fr]`; | ||
| const headerStyle = `h-10 bg-neutral-50 rounded-lg text-black items-center font-bold text-center | ||
| *:relative *:w-full *:after:h-full *:after:absolute *:after:-right-2 *:after:border-r *:after:border-neutral-200`; | ||
| const titleStyle = "text-center font-bold self-start h-10 flex justify-center items-center"; | ||
| return ( | ||
| <> | ||
| <section className={`${tableStyle} gap-y-6`}> | ||
| <p className={titleStyle}>당첨 인원수</p> | ||
| <div className="flex flex-col gap-2"> | ||
| <div className={`${metadataGridStyle} ${headerStyle}`}> | ||
| <p>등수</p> | ||
| <p>인원 수</p> | ||
| <p className="last:after:border-r-0">경품</p> | ||
| </div> | ||
| <div className={`${metadataGridStyle} gap-y-2 font-regular`}> | ||
| {data.metadata.map((data) => ( | ||
| <EventDrawMetadataItem key={data.id} {...data} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <p className={titleStyle}>점수 정책</p> | ||
| <div className="flex flex-col gap-2"> | ||
| <div className={`${policyGridStyle} ${headerStyle}`}> | ||
| <p>액션</p> | ||
| <p className="last:after:border-r-0">배율</p> | ||
| </div> | ||
| <div className={`${policyGridStyle} gap-y-2 font-regular`}> | ||
| {data.policies.map((data) => ( | ||
| <EventDrawPolicyItem key={data.id} {...data} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default EventDrawDataRenderer; |
66 changes: 66 additions & 0 deletions
66
src/adminPage/features/eventDetail/drawButton/DrawButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { useParams } from "react-router-dom"; | ||
| import { fetchServer } from "@common/dataFetch/fetchServer.js"; | ||
| import { useQuery, useMutation } from "@common/dataFetch/getQuery.js"; | ||
| import Button from "@common/components/Button.jsx"; | ||
| import openModal from "@common/modal/openModal.js"; | ||
|
|
||
| import AlertModal from "@admin/modals/AlertModal.jsx"; | ||
|
|
||
| import DrawResultModal from "./DrawResultModal.jsx"; | ||
| import ErrorBoundary from "@common/components/ErrorBoundary.jsx"; | ||
| import Suspense from "@common/components/Suspense.jsx"; | ||
| import Spinner from "@common/components/Spinner.jsx"; | ||
| import DelaySkeleton from "@common/components/DelaySkeleton.jsx"; | ||
|
|
||
| function DrawButton() { | ||
| const { eventId } = useParams(); | ||
| const drawResultData = useQuery( | ||
| `event-detail-draw-result-${eventId}`, | ||
| () => { | ||
| return fetchServer(`/api/v1/admin/draw/${eventId}/winners`); | ||
| }, | ||
| { deferred: true }, | ||
| ); | ||
|
|
||
| const resultModal = ( | ||
| <div className="w-[calc(100vw-8rem)] h-[calc(100vh-8rem)] p-8 bg-white relative"> | ||
| <ErrorBoundary fallback={<div>에러남</div>}> | ||
| <Suspense | ||
| fallback={ | ||
| <div className="w-full h-full flex justify-center items-center"> | ||
| <DelaySkeleton> | ||
| <Spinner /> | ||
| </DelaySkeleton> | ||
| </div> | ||
| } | ||
| > | ||
| <DrawResultModal eventId={eventId} /> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| </div> | ||
| ); | ||
|
|
||
| const mutate = useMutation( | ||
| `event-detail-draw-result-${eventId}`, | ||
| () => fetchServer(`/api/v1/admin/draw/${eventId}/draw`, { method: "post" }), | ||
| { | ||
| onSuccess: () => openModal(resultModal), | ||
| onFail: () => | ||
| openModal(<AlertModal title="오류" description="추첨에 오류가 발생했습니다." />), | ||
| }, | ||
| ); | ||
|
|
||
| if (drawResultData.length === 0) | ||
| return ( | ||
| <Button className="w-32 h-8 px-4 py-1" onClick={mutate}> | ||
| 추첨하기 | ||
| </Button> | ||
| ); | ||
| return ( | ||
| <Button className="w-32 h-8 px-4 py-1" onClick={() => openModal(resultModal)}> | ||
| 결과 보기 | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| export default DrawButton; |
12 changes: 12 additions & 0 deletions
12
src/adminPage/features/eventDetail/drawButton/DrawButtonHolder.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import useServerTimeStore from "@admin/serverTime/store.js"; | ||
| import DrawButton from "./DrawButton.jsx"; | ||
|
|
||
| function DrawButtonHolder({ endTime }) { | ||
| const getServerTime = useServerTimeStore((store) => store.getData); | ||
| const serverTime = getServerTime(); | ||
|
|
||
| if (new Date(endTime) < serverTime) return <DrawButton />; | ||
| return null; | ||
| } | ||
|
|
||
| export default DrawButtonHolder; |
Oops, something went wrong.