[FE] assignment : Daystar

2024-summer-FE-seminar/packages/interface/src/api/activity-certificate/endpoint/apiAcf003.ts

@@ -27,15 +27,15 @@ const responseBodyMap = {
   [HttpStatusCode.Ok]: z.object({
     items: z.array(
       z.object({
-        orderId: z.number().int().min(1),
-        studentName: z.string(),
-        issuedNumber: z.number().int().min(1),
+        orderId: z.coerce.number().int().min(1),
+        studentName: z.coerce.string(),
+        issuedNumber: z.coerce.number().int().min(1),
         statusEnum: z.nativeEnum(ActivityCertificateOrderStatusEnum),
-        createdAt: z.date(),
+        createdAt: z.coerce.date(),
       }),
     ),
-    total: z.number().int().min(0),
-    offset: z.number().int().min(1),
+    total: z.coerce.number().int().min(0),
+    offset: z.coerce.number().int().min(1),
   }),
 };
 

2024-summer-FE-seminar/packages/interface/src/api/common-space/endpoint/apiCms006.ts

@@ -40,18 +40,18 @@ const responseBodyMap = {
   [HttpStatusCode.Ok]: z.object({
     items: z.array(
       z.object({
-        orderId: z.number().int().min(1),
+        orderId: z.coerce.number().int().min(1),
         // 상태에 관한 prop이 없어서 임의로 추가했습니다. 리뷰하실 때 시트와 함께 검토해 주세요!
         statusEnum: z.nativeEnum(CommonSpaceUsageOrderStatusEnum),
-        spaceName: z.string(),
-        chargeStudentName: z.string().max(255),
+        spaceName: z.coerce.string(),
+        chargeStudentName: z.coerce.string().max(255),
         startTerm: z.coerce.date(), // Assuming startTerm is a datetime
         endTerm: z.coerce.date(), // Assuming endTerm is a datetime
         createdAt: z.coerce.date(), // Assuming createdAt is a datetime
       }),
     ),
-    total: z.number().int().min(0),
-    offset: z.number().int().min(1),
+    total: z.coerce.number().int().min(0),
+    offset: z.coerce.number().int().min(1),
   }),
 };
 

2024-summer-FE-seminar/packages/interface/src/api/promotional-printing/endpoint/apiPrt001.ts

@@ -30,24 +30,24 @@ const responseBodyMap = {
   [HttpStatusCode.Ok]: z.object({
     items: z.array(
       z.object({
-        id: z.number().int().min(1),
-        studentName: z.string(),
+        id: z.coerce.number().int().min(1),
+        studentName: z.coerce.string(),
         status: z.nativeEnum(PromotionalPrintingOrderStatusEnum),
         orders: z.array(
           z.object({
             promotionalPrintingSizeEnum: z.nativeEnum(
               PromotionalPrintingSizeEnum,
             ),
-            numberOfPrints: z.number().min(1),
+            numberOfPrints: z.coerce.number().min(1),
           }),
         ),
-        desiredPickUpDate: z.date(),
-        pickUpTime: z.optional(z.date()),
-        createdAt: z.date(),
+        desiredPickUpDate: z.coerce.date(),
+        pickUpTime: z.optional(z.coerce.date()),
+        createdAt: z.coerce.date(),
       }),
     ),
-    total: z.number().int().min(0),
-    offset: z.number().int().min(1),
+    total: z.coerce.number().int().min(0),
+    offset: z.coerce.number().int().min(1),
   }),
 };
 

2024-summer-FE-seminar/packages/interface/src/api/rental/endpoint/apiRnt003.ts

@@ -27,25 +27,25 @@ const responseBodyMap = {
   [HttpStatusCode.Ok]: z.object({
     items: z.array(
       z.object({
-        id: z.number().int().min(0),
-        studentName: z.string(),
+        id: z.coerce.number().int().min(0),
+        studentName: z.coerce.string(),
         objects: z.array(
           z.object({
-            id: z.number().int().min(0),
-            name: z.string(),
-            number: z.number().int().min(1),
+            id: z.coerce.number().int().min(0),
+            name: z.coerce.string(),
+            number: z.coerce.number().int().min(1),
           }),
         ),
         statusEnum: z.nativeEnum(RentalOrderStatusEnum),
-        desiredStart: z.date(),
-        desiredEnd: z.date(),
-        startDate: z.date().optional(),
-        endDate: z.date().optional(),
-        createdAt: z.date(),
+        desiredStart: z.coerce.date(),
+        desiredEnd: z.coerce.date(),
+        startDate: z.coerce.date().optional(),
+        endDate: z.coerce.date().optional(),
+        createdAt: z.coerce.date(),
       }),
     ),
-    total: z.number().int().min(0),
-    offset: z.number().int().min(1),
+    total: z.coerce.number().int().min(0),
+    offset: z.coerce.number().int().min(1),
   }),
 };
 

2024-summer-FE-seminar/packages/web/src/app/Daystar/my/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+// use client에 대해서는 공부가 더 필요할 것 같습니다
+import React from "react";
+
+import DaystarMyPageMainFrame from "@sparcs-clubs/web/features/Daystar/my/frames/DaystarMyPageMainFrame";
+
+const DaystarMy = () => <DaystarMyPageMainFrame />;
+
+export default DaystarMy;

2024-summer-FE-seminar/packages/web/src/app/Daystar/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState } from "react";
+
+import styled from "styled-components";
+
+import Card from "@sparcs-clubs/web/common/components/Card";
+import DaystarItemNumberInput from "@sparcs-clubs/web/common/components/Daystar/DaystarItemNumberInput";
+import DaystarTextInput from "@sparcs-clubs/web/common/components/Daystar/DaystarTextInput";
+import ItemNumberInput from "@sparcs-clubs/web/common/components/Forms/ItemNumberInput";
+import TextInput from "@sparcs-clubs/web/common/components/Forms/TextInput";
+import Select from "@sparcs-clubs/web/common/components/Select";
+import Typography from "@sparcs-clubs/web/common/components/Typography";
+
+const DaystarWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const Daystar = () => {
+  const [firstText, setFirstText] = useState("");
+  const [secondText, setSecondText] = useState("");
+  const [firstItemNumber, setFirstItemNumber] = useState("0");
+  const [solItemNumber, setSolItemNumber] = useState("0");
+
+  const [secondHasError, setSecondHasError] = useState(false);
+
+  const handleSecondTextChange = (value: string) => {
+    setSecondText(value);
+    setSecondHasError(value.length < 5); // 5글자보다 짧으면 에러 뜨는 것으로 테스트
+  };
+
+  const handleFirstItemNumberChange = (value: string) => {
+    setFirstItemNumber(value);
+  };
+
+  const handleSolItemNumberChange = (value: string) => {
+    setSolItemNumber(value);
+  };
+
+  return (
+    <DaystarWrapper>
+      <TextInput placeholder="" />
+      <ItemNumberInput placeholder="" />
+      <Select items={[]} />
+      <Card outline gap={16}>
+        <Typography type="h3">부모 컴포넌트가 받는 값들</Typography>
+        <Typography>
+          입력 값들
+          <br />
+          {`1번째 InputText : ${firstText}`}
+          <br />
+          {`2번째 InputText : ${secondText}`}
+          <br />
+          {`1번째 ItemNumberInput : ${firstItemNumber}`}
+          <br />
+          {`기존 ItemNumberInput : ${solItemNumber}`}
+        </Typography>
+      </Card>
+      <DaystarTextInput placeholder="Placeholder" handleChange={setFirstText} />
+      <DaystarTextInput
+        placeholder="5글자 미만이면 Error"
+        errorMessage={secondHasError ? "5글자 이상 입력해주세요" : ""}
+        handleChange={handleSecondTextChange}
+      />
+      <DaystarTextInput placeholder="Disabled" disabled />
+      <DaystarItemNumberInput
+        label="Label"
+        value={firstItemNumber}
+        itemLimit={50}
+        unit="개"
+        placeholder="0개"
+        handleChange={handleFirstItemNumberChange}
+      />
+      <DaystarItemNumberInput
+        label="Disabled"
+        itemLimit={50}
+        disabled
+        unit="개"
+        placeholder="0개"
+        handleChange={handleFirstItemNumberChange}
+      />
+      <ItemNumberInput
+        label="기존 Component"
+        value={solItemNumber}
+        itemLimit={9}
+        unit="개"
+        placeholder="(기존) 0개"
+        handleChange={handleSolItemNumberChange}
+      />
+    </DaystarWrapper>
+  );
+};
+
+export default Daystar;