Merge pull request #101 from SOPT-all/feat/#94/newCompleteView

[Feat/#94] 이미지 첨부된 완료 뷰 구현

src/asset/svg/index.ts

@@ -5,6 +5,7 @@ export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as IcEllipse57 } from "./IcEllipse57";
 export { default as IcImagePlus } from "./IcImagePlus";
 export { default as IcNormal } from "./IcNormal";
+export { default as IcRight } from "./IcRight";
 export { default as IcRightIcon } from "./IcRightIcon";
 export { default as IcShape } from "./IcShape";
 export { default as IcChevronLeft } from "./IcChevronLeft";
@@ -14,9 +15,9 @@ export { default as IcDelete } from "./IcDelete";
 export { default as IcDeleteBlack } from "./IcDeleteBlack";
 export { default as IcDeleteWhite } from "./IcDeleteWhite";
 export { default as IcEditPen } from "./IcEditPen";
-export { default as IcLogo } from "./IcLogo";
 export { default as IcEllipses } from "./IcEllipses";
 export { default as IcLeftarrow } from "./IcLeftarrow";
+export { default as IcLogo } from "./IcLogo";
 export { default as IcMessage } from "./IcMessage";
 export { default as IcOut } from "./IcOut";
 export { default as IcPlus } from "./IcPlus";
@@ -25,12 +26,11 @@ export { default as IcRightArror } from "./IcRightArror";
 export { default as IcSearch } from "./IcSearch";
 export { default as IcSearchFillter } from "./IcSearchFillter";
 export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
-
-export { default as IcUp } from "./IcUp";
-export { default as IcTemporary } from "./IcTemporary";
 export { default as IcSettings } from "./IcSettings";
 export { default as IcTest } from "./IcTest";
 export { default as IcToastError } from "./IcToastError";
+export { default as IcUp } from "./IcUp";
+export { default as IcTemporary } from "./IcTemporary";
 export { default as Plus } from "./Plus";
 export { default as React } from "./React";
-export { default as Vite } from "./Vite";
+export { default as Vite } from "./Vite";

src/page/community/component/Tag/Tag.tsx

@@ -1,4 +1,5 @@
 import { tagContainer } from "@page/community/component/Tag/Tag.css.ts";
+import { IcRight } from "@asset/svg";
 import React from "react";
 import { color } from "@style/styles.css.ts";
 import IcRight from "@asset/svg/IcRight.tsx";
@@ -12,6 +13,7 @@ interface tagType {
 
 const Tag = ({ placeholder, value, onClick, isActive }: tagType) => {
   return (
+
     <button className={tagContainer({ active: isActive })} onClick={onClick}>
       {value === "" ? placeholder : value}
       <IcRight

src/page/onboarding/complete/Complete.css.ts

@@ -0,0 +1,33 @@
+import { style } from "@vanilla-extract/css";
+
+export const backGround = style({
+  height: "100vh",
+  background: "linear-gradient(180deg, #DEFEFF 0%, #FFF 36.13%)",
+});
+
+export const layout = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "3.2rem",
+  padding: "7.2rem 2rem 6rem 2rem",
+});
+export const titleWrapper = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+  gap: "0.8rem",
+});
+export const btnWrapper = style({
+  maxWidth: "76.8rem",
+  width: "100%",
+  position: "fixed",
+  bottom: 0,
+  display: "grid",
+  gridTemplateColumns: "repeat(2, 1fr)",
+  gap: "1.2rem",
+  whiteSpace: "nowrap",
+  padding: "1.2rem 2rem 3.2rem 2rem",
+});

src/page/onboarding/complete/Complete.tsx

@@ -1,8 +1,39 @@
+import * as styles from "./Complete.css";
+import { useNavigate } from "react-router-dom";
+import Docs from "../index/common/docs/Docs";
+import Title from "../index/common/title/Title";
+import { Button } from "@common/component/Button";
+import img from "@asset/image/beforeRegisterGraphic.png";
+import { PATH } from "@route/path";
 
 const Complete = () => {
+  const navigate = useNavigate();
+  const handleSkip = () => {
+    navigate(PATH.MAIN);
+  };
+
+  const handleNext = () => {
+    navigate(PATH.REGISTER_PET.ROOT);
+  };
+
   return (
-    <div>Complete</div>
-  )
-}
+    <div className={styles.backGround}>
+      <div className={styles.layout}>
+        <div className={styles.titleWrapper}>
+          <div>
+            <Title text={"@@@님"} />
+            <Title text={"반려동물을 등록해 주세요"} />
+          </div>
+          <Docs text={"작은 정보가 우리 아이의 건강을 지켜요"} />
+        </div>
+        <img src={img} alt="onboarding-character" width={296} height={325} />
+      </div>
+      <div className={styles.btnWrapper}>
+        <Button label="건너뛰기" size="large" variant="solidNeutral" onClick={handleSkip} />
+        <Button label="등록하기" size="large" variant="solidPrimary" onClick={handleNext} />
+      </div>
+    </div>
+  );
+};
 
-export default Complete
+export default Complete;

src/page/registerPet/complete/Complete.css.ts

@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+
+export const backGround = style({
+  height: "100vh",
+  background: "linear-gradient(180deg, #DEFEFF 0%, #FFF 36.13%)",
+});
+
+export const layout = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "3.2rem",
+  padding: "7.2rem 2rem 0 2rem",
+});
+export const titleWrapper = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+  gap: "0.8rem",
+});
+export const btnWrapper = style({
+  maxWidth: "76.8rem",
+  width: "100%",
+  position: "fixed",
+  bottom: 0,
+  whiteSpace: "nowrap",
+  padding: "1.2rem 2rem 3.2rem 2rem",
+});

src/page/registerPet/complete/Complete.tsx

@@ -1,10 +1,34 @@
+import * as styles from "./Complete.css";
+import { useNavigate } from "react-router-dom";
+import Docs from "@page/onboarding/index/common/docs/Docs";
+import Title from "@page/onboarding/index/common/title/Title";
+import { Button } from "@common/component/Button";
+import img from "@asset/image/beforeRegisterGraphic.png";
 
 const Complete = () => {
+  const navigate = useNavigate();
+  const handleSkip = () => {
+    navigate("/main");
+  };
+
   return (
-    <div>
-      반려동물 컴플리트
+    <div className={styles.backGround}>
+      <div className={styles.layout}>
+        <div className={styles.titleWrapper}>
+          <div>
+            <Title text={"@@@님"} />
+            <Title text={"등록이 완료되었습니다"} />
+          </div>
+          <Docs text={"반려동물과 함께하는 긴 시간, 더 잘 돌봐드릴게요"} />
+        </div>
+        <img src={img} alt="onboarding-character" width={296} height={325} />
+      </div>
+
+      <div className={styles.btnWrapper}>
+        <Button label="동물 등록 끝내기" size="large" variant="solidPrimary" onClick={handleSkip} />
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Complete
+export default Complete;