Feature/59 goalapi

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^19.0.0",
     "react-mobile-picker": "^1.1.2",
     "react-qr-code": "^2.0.15",
+    "swiper": "^11.2.8",
     "yup": "^1.6.1",
     "zustand": "^5.0.3"
   },
@@ -75,5 +76,6 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
 }

src/app/api/goal/index.ts

@@ -1,5 +1,17 @@
 import { authAPI } from "@/app/api/config"
 
-export const getGoalInfo = (id: number) => {
-  return authAPI.get(`/goal/2025-01-25`)
+export const getGoalMainInfo = (date: string) => {
+  return authAPI.get(`/api/goal?date=${date}`)
+}
+
+export const createGoal = (request) => {
+  return authAPI.post(`/api/goal`, request)
+}
+
+export const getGoalDetailInfo = (date: string) => {
+  return authAPI.get(`/api/goal?date=${date}`)
+}
+
+export const postCertifyGoal = (goalId: number, request) => {
+  return authAPI.post(`/api/goal/${goalId}/certify`, request)
 }

src/app/api/letter/index.ts

@@ -0,0 +1,9 @@
+import { authAPI } from "@/app/api/config"
+
+export const getGoalLetter = (weeklyGoalId: number) => {
+  return authAPI.get(`/api/letter/${weeklyGoalId}`)
+}
+
+export const createGoalLetter = (weeklyGoalId: number, request: string) => {
+  return authAPI.post(`/api/letter/${weeklyGoalId}`, request)
+}

src/app/goal/_components/buttonwrapper.module.scss

@@ -1,9 +1,9 @@
 .goal__btn {
-  padding: 0 30px;
-  background: $white;
+  background: #fff;
   position: fixed;
-  bottom: 0;
-  left: 0;
   width: 100%;
-  z-index: 100;
+  left: 0;
+  bottom: 0;
+  padding: 16px 32px;
+  border-top: 1px solid #D8DADB;
 }

src/app/goal/_components/buttonwrapper.tsx

@@ -1,20 +1,39 @@
 "use client"
-import styles from "./buttonwrapper.module.scss";
-import Button from "@/components/common/button/button";
+import styles from "./buttonwrapper.module.scss"
+import Button from "@/components/common/button/button"
+import { useRouter } from "next/navigation"
+import dayjs from "dayjs"
 
-const ButtonWrapper = () => {
+type Props = {
+  step: 1 | 2 | 3
+  onNext: () => void
+  onMutate: () => void
+}
+
+const ButtonWrapper = ({ step, onNext, onMutate }: Props) => {
+  const router = useRouter()
+  const today = dayjs().format("YYYY-MM-DD")
+  const handleClick = () => {
+    if (step < 2) {
+      onNext()
+    } else if (step === 2) {
+      onMutate()
+      onNext()
+    } else if (step === 3) {
+      router.push(`/goal/detail?date=${today}`)
+    }
+  }
   return (
     <div className={styles.goal__btn}>
       <Button
-        size={"large"}
-        variant={"filled"}
-        shape={"rounded"}
-        label={"다음"}
-        onClick={() => {
-        }}
+        size="large"
+        variant="filled"
+        shape="rounded"
+        label={step < 3 ? "다음" : "목표보드로 이동하기"}
+        onClick={handleClick}
       />
     </div>
   )
 }
 
-export default ButtonWrapper;
+export default ButtonWrapper

src/app/goal/_components/complete.tsx

@@ -3,7 +3,7 @@ import Link from "next/link"
 import styles from "./complete.module.scss"
 import GoalResult from "@/app/goal/_components/goalresult"
 
-const Complete = () => {
+const Complete = ({ data }) => {
   return (
     <div className={styles.complete}>
       <CompleteIcon />
@@ -12,11 +12,9 @@ const Complete = () => {
           목표가
           <br /> 설정되었어요!
         </h2>
-        <p>2020년 5월 1일</p>
-        <Link href={"/goal/detail"}>목표 보드로 이동하기</Link>
-      </div>
-      <div className={styles.complete__item}>
-        <GoalResult />
+        <p>
+          {data.startDate} ~ {data.endDate}
+        </p>
       </div>
     </div>
   )

src/app/goal/_components/goalresult.module.scss

@@ -1,22 +1,24 @@
 .goal__result {
-  width: 160px;
-  height: 163px;
-  border: 5px solid #F2F2F5;
-  border-radius: 50%;
+  padding-right: 16px;
+
   p {
-    margin-top: 20px;
+    padding-top: 20px;
     text-align: center;
     font-weight: 700;
+
     span {
       color: #8D8D8D;
       font-weight: 400;
     }
   }
 }
+
 .goal__icon {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 5px solid #F2F2F5;
+  border-radius: 50%;
 }

src/app/goal/_components/goalresult.tsx

@@ -1,13 +1,16 @@
 import styles from "./goalresult.module.scss"
-import DefaultIcon from "@/assets/icons/goals/icon-default.svg";
-const GoalResult = () => {
+
+const GoalResult = ({ data }) => {
+  const Icon = data?.icon
   return (
     <div className={styles.goal__result}>
       <div className={styles.goal__icon}>
-        <DefaultIcon/>
+        <Icon />
       </div>
-      <p><span>01</span> 하루 물 6컵</p>
+      <p>
+        <span>{String(data?.number || 1).padStart(2, "0")}</span> {data?.name || "목표 추가"}
+      </p>
     </div>
   )
 }
-export default GoalResult
+export default GoalResult

src/app/goal/_components/step1.module.scss

@@ -10,6 +10,18 @@
       padding-left: 31px;
     }
   }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: 3px solid #F2F2F5;
+    border-radius: 50%;
+    width: 64px;
+    height: 64px;
+    margin: 0 auto;
+  }
 }
 
 .goal__result {
@@ -46,17 +58,25 @@
 
   &-control {
     width: 100%;
-    overflow-x: auto;
-    display: flex;
     margin-top: 24px;
-    gap: 16px;
-    padding: 14px;
+
+    > div {
+      text-align: center;
+    }
   }
 
   &-txt {
+    margin-top: 16px;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 5px;
     font-size: 14px;
+
+    p, input {
+      white-space: pre-wrap;
+      text-align: left;
+      max-width: 80px;
+    }
   }
 }