Merge branch 'main' into #24

SWYP-4rd-6 · May 19, 2024 · 7dd1ad8 · 7dd1ad8
2 parents 9cd87b1 + c5912db
commit 7dd1ad8
Show file tree

Hide file tree

Showing 23 changed files with 1,018 additions and 301 deletions.
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
diff --git a/public/tour_register_photo.png b/public/tour_register_photo.png
diff --git a/src/components/Button/ArrowButton.tsx b/src/components/Button/ArrowButton.tsx
@@ -10,7 +10,7 @@ const ArrowButton = ({ activate, moveForward, moveBack }: ArrowButtonProps) => {
   const buttonStyle = `h-12 flex justify-center items-center border-2 border-[#D9D9D9] text-[#D9D9D9] transition`;
 
   return (
-    <div className="flex gap-5 justify-center items-center max-w-[400px] fixed bottom-12">
+    <div className="flex gap-5 justify-center items-center absolute bottom-12">
       <button type="button" className={`${buttonStyle} w-12`} onClick={moveBack}>
         <MaterialSymbol icon="arrow_back" fill size={24} />
       </button>

diff --git a/src/components/Common/Container.tsx b/src/components/Common/Container.tsx
@@ -68,8 +68,7 @@ const Container: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div
       ref={containerRef}
-      className="relative container-shadow shadow-2xl bg-white w-full sm:max-w-[26.875rem] h-screen 2xl:h-[58.25rem] overflow-y-scroll overflow-x-hidden left-0 mx-auto translate-x-0 lg:left-1/2 lg:mx-0 lg:translate-x-[50px] no-scroll-bar
-      "
+      className="relative container-shadow shadow-2xl bg-white w-full sm:max-w-[26.875rem] h-screen 2xl:h-[58.25rem] overflow-y-scroll overflow-x-hidden left-0 mx-auto translate-x-0 lg:left-1/2 lg:mx-0 lg:translate-x-[50px] no-scroll-bar"
     >
       {children}
     </div>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -9,7 +9,7 @@ const Header = ({ type }: headerProps) => {
   return (
     <div
       onClick={() => navigate(-1)}
-      className={`mb-[14px] cursor-pointer ${type === 'trans' && 'z-50 absolute top-0 left-0'}`}
+      className={`mb-[14px] cursor-pointer ${type === 'trans' && 'z-50 absolute top-0 left-0 box-border'}`}
     >
       <MaterialSymbol
         icon="arrow_back"

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,16 @@
+const ProgressBar = ({ step }: { step: number }) => {
+  const baseProgress = (step / 7) * 100;
+  const extraWidth = step === 7 ? 4 : 0;
+  const progress = `calc(${baseProgress}% + ${extraWidth}px)`;
+
+  return (
+    <div className="w-full bg-white h-[0.875rem] mb-[0.875rem] border-2 border-sub-none box-border relative">
+      <div
+        className="absolute -top-[2px] -left-[2px] bg-signature h-[0.875rem] transition-all duration-500"
+        style={{ width: progress, boxSizing: 'border-box' }}
+      ></div>
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/components/Register/RegisterIntro.tsx b/src/components/Register/RegisterIntro.tsx
@@ -0,0 +1,33 @@
+import { StagePropsType } from '@/pages/register-page/register-page';
+
+const RegisterIntro = ({ setStage, setStep }: StagePropsType) => {
+  return (
+    <div className="flex flex-col">
+      <div className="text-[2.25rem] text-signature font-[900] mb-5">
+        <div>당신과의 여행을</div>
+        <div>소개해주세요</div>
+      </div>
+
+      <div className="text-base text-sub-bu font-[300]">
+        <div>7개의 단계로 간단하게 시작해보세요.</div>
+        <div>설정한 내용은 언제든지 수정하실 수 있습니다.</div>
+      </div>
+
+      <button
+        type="button"
+        className={`absolute bottom-12 w-full h-12 px-[33px] flex  items-center text-white bg-signature`}
+        onClick={() => {
+          setStage(1);
+          setStep(1);
+        }}
+      >
+        <span className="font-[700] text-xl mr-[10px]">시작하기</span>
+        <span className="flex-1 text-right">
+          <img src="/arrow-forward-white.png" alt="arrow" className="h-full object-contain" />
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default RegisterIntro;