Feature/fix chakra progress theme error

components/atoms/ProgressBar.tsx

@@ -0,0 +1,15 @@
+import { Progress } from "@chakra-ui/react";
+
+interface IProgressBar {
+  value: number;
+  colorScheme?: "mintTheme";
+  hasStripe?: boolean;
+}
+
+export default function ProgressBar({
+  value,
+  colorScheme = "mintTheme",
+  hasStripe = false,
+}: IProgressBar) {
+  return <Progress value={value} colorScheme={colorScheme} hasStripe={hasStripe} />;
+}

components/molecules/ProgressStatus.tsx

@@ -1,5 +1,5 @@
-import { Progress } from "@chakra-ui/react";
 import styled from "styled-components";
+import ProgressBar from "../atoms/ProgressBar";
 
 interface IProgressStatus {
   value: number;
@@ -8,7 +8,7 @@ interface IProgressStatus {
 function ProgressStatus({ value }: IProgressStatus) {
   return (
     <Layout>
-      <Progress value={value} size="sm" />
+      <ProgressBar value={value} />
     </Layout>
   );
 }

models/gift.ts

@@ -0,0 +1,26 @@
+import mongoose, { Model, Schema } from "mongoose";
+
+import { IStoreApplicant } from "../types/models/store";
+
+const giftSchema: Schema = new Schema(
+  {
+    uid: { type: String, ref: "User" },
+    name: { type: String, ref: "User" },
+    cnt: { type: Number, default: 0 },
+    giftId: { type: Number },
+  },
+  {
+    toJSON: {
+      transform(_doc, ret) {
+        delete ret.createdAt;
+        delete ret.upadtedAt;
+        delete ret.__v;
+        return ret;
+      },
+    },
+  },
+);
+
+export const GiftModel =
+  (mongoose.models.GiftModel as Model<IStoreApplicant, {}, {}, {}>) ||
+  mongoose.model<IStoreApplicant>("GiftModel", giftSchema);

pageTemplates/point/pointScore/PointScoreBar.tsx

@@ -1,9 +1,10 @@
-import { Badge, Progress } from "@chakra-ui/react";
+import { Badge } from "@chakra-ui/react";
 import { faQuestionCircle } from "@fortawesome/pro-light-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
+import ProgressBar from "../../../components/atoms/ProgressBar";
 
 import {
   BADGE_COLOR_MAPPINGS,
@@ -80,11 +81,10 @@ function PointScoreBar({ myScore, hasQuestion = true }: IPointScoreBar) {
             </div>
           )}
         </Grade>
-        <Progress
+        <ProgressBar
           value={(1 - (nextBadgePoint - myScore) / badgeGap) * 100}
-          height="12px"
           colorScheme="mintTheme"
-          hasStripe
+          hasStripe={true}
         />
       </Layout>
 

pages/api/store/[id].ts

@@ -0,0 +1,22 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { BadRequestError } from "../../../libs/backend/custom-error";
+import dbConnect from "../../../libs/backend/dbConnect";
+import { GiftModel } from "../../../models/gift";
+
+export default async function getGift(req: NextApiRequest, res: NextApiResponse) {
+  await dbConnect();
+
+  if (req.method === "GET") {
+    const { id } = req.query;
+
+    const giftUsers = await GiftModel.find({ giftId: id }).select(
+      "-_id -createdAt -updatedAt -__v",
+    );
+    if (!giftUsers) {
+      throw new BadRequestError("정보에 해당하는 유저가 존재하지 않습니다.");
+    }
+
+    res.status(200).json({ users: giftUsers });
+  }
+}

pages/api/store/index.ts

@@ -0,0 +1,52 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { BadRequestError } from "../../../libs/backend/custom-error";
+import dbConnect from "../../../libs/backend/dbConnect";
+import { GiftModel } from "../../../models/gift";
+
+export default async function giftController(req: NextApiRequest, res: NextApiResponse) {
+  await dbConnect();
+
+  if (req.method === "POST") {
+    const { name, uid, cnt, giftId } = req.body;
+
+    const existingUser = await GiftModel.findOne({ uid, giftId });
+
+    if (existingUser) {
+      const user = await GiftModel.findOneAndUpdate(
+        { uid },
+        { name, uid, cnt: existingUser.cnt + cnt, giftId },
+        { new: true, runValidators: true },
+      );
+      if (!user) {
+        throw new BadRequestError("정보에 해당하는 유저가 존재하지 않습니다.");
+      }
+
+      const resUser = {
+        name: user.name,
+        uid: user.uid,
+        cnt: user.cnt,
+        giftId: user.giftId,
+      };
+
+      return res.status(200).json({ user: resUser });
+    }
+    const newUser = await GiftModel.create({ name, uid, cnt, giftId });
+    const user = {
+      name: newUser.name,
+      uid: newUser.uid,
+      cnt: newUser.cnt,
+      giftId: newUser.giftId,
+    };
+    res.status(200).json({ user });
+  }
+  if (req.method === "GET") {
+    const giftUsers = await GiftModel.find({})
+      .sort("createdAt")
+      .select("-_id -createdAt -updatedAt -__v");
+
+    res.status(200).json({
+      users: giftUsers,
+    });
+  }
+}

pages/test.tsx

@@ -11,7 +11,7 @@ import { useAdminStudyRecordQuery } from "../hooks/admin/quries";
 import { useImageUploadMutation } from "../hooks/image/mutations";
 import { studyDateStatusState } from "../recoils/studyRecoils";
 function Test() {
-  const { data } = useAdminStudyRecordQuery(dayjs("2024-04-01"), dayjs("2024-04-07"), null, "인천");
+  const { data } = useAdminStudyRecordQuery(dayjs("2024-04-16"), dayjs("2024-04-30"), null, "인천");
   console.log(data);
 
   const a = useRecoilValue(studyDateStatusState);

storage/winRecord.ts

@@ -888,6 +888,30 @@ export const WIN_RECORD: {
     detail: "알파벳 수집 보상",
     present: "스타벅스 기프티콘",
   },
+  {
+    name: "이아",
+    date: "4/29",
+    detail: "스토어 당첨 보상",
+    present: "불닭 + 바나나 우유",
+  },
+  {
+    name: "이아",
+    date: "4/29",
+    detail: "스토어 당첨 보상",
+    present: "불닭 + 바나나 우유",
+  },
+  {
+    name: "김석",
+    date: "4/29",
+    detail: "스토어 당첨 보상",
+    present: "롯데시네마 영화관람권",
+  },
+  {
+    name: "김사",
+    date: "4/29",
+    detail: "스토어 당첨 보상",
+    present: "롯데시네마 영화관람권",
+  },
 ];
 
 export const PROMOTION_WIN = [

theme.ts

@@ -108,16 +108,6 @@ const theme = extendTheme({
         },
       },
     },
-    Progress: {
-      baseStyle: {
-        track: {
-          bg: "var(--font-h7)",
-        },
-        filledTrack: {
-          bg: "var(--color-mint)",
-        },
-      },
-    },
   },
 });