Merge branch 'develop' of https://github.com/TEAM-TATTOUR/tattour-client

into S1/#608-fix-bottom-sheet
TEAM-TATTOUR · Feb 19, 2024 · eaa52ec · eaa52ec
2 parents c63b48e + 2734ede
commit eaa52ec
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 52 deletions.
diff --git a/src/common/SmallTattooCard.tsx b/src/common/SmallTattooCard.tsx
@@ -3,15 +3,15 @@ import { LabelCustomSmall } from '../assets/icon';
 import { useNavigate } from 'react-router-dom';
 
 const SmallTattooCard = ({
-  id,
+  stickerId,
   img,
   title,
   discountRate,
   price,
   originalPrice,
   isCustom,
 }: {
-  id: number;
+  stickerId: number;
   img: string;
   title: string;
   discountRate: number;
@@ -21,12 +21,11 @@ const SmallTattooCard = ({
 }) => {
   const navigate = useNavigate();
 
-  const handleClickItem = (id: number) => {
-    navigate(`/detail/${id}`);
+  const handleClickItem = (stickerId: number) => {
+    navigate(`/detail/${stickerId}`);
   };
-
   return (
-    <St.SmallTattooCardItem onClick={() => handleClickItem(id)}>
+    <St.SmallTattooCardItem onClick={() => handleClickItem(stickerId)}>
       {isCustom && <LabelCustomSmall />}
       <St.SmallTattooCardImage src={img} alt='작은 타투 이미지' />
       <St.SmallTattooCardTitle>{title}</St.SmallTattooCardTitle>

diff --git a/src/components/Custom/Common/OnBoardingFooter.tsx b/src/components/Custom/Common/OnBoardingFooter.tsx
@@ -78,22 +78,23 @@ export default OnBoardingFooter;
 
 const St = {
   OnBoardingFooter: styled.footer`
-    position: sticky;
+    position: fixed;
     bottom: 0;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     width: 100%;
+    max-width: 43rem;
     height: 7rem;
 
-    background-color: ${({ theme }) => theme.colors.gray9};
+    background-color: ${({ theme }) => theme.colors.pink5};
     z-index: 2;
   `,
 
   FooterText: styled.p`
-    color: ${({ theme }) => theme.colors.pink5};
+    color: ${({ theme }) => theme.colors.gray9};
     ${({ theme }) => theme.fonts.title_semibold_18};
   `,
 };
diff --git a/src/components/Custom/Common/Receipt/ReceiptDetail.tsx b/src/components/Custom/Common/Receipt/ReceiptDetail.tsx
@@ -99,6 +99,7 @@ const St = {
     display: flex;
     flex-direction: column;
     padding-bottom: 5.8rem;
+    margin-bottom: 7rem;
 
     min-height: calc(100dvh - 36.92rem);
   `,

diff --git a/src/components/Custom/Common/Receipt/ReceiptFooter.tsx b/src/components/Custom/Common/Receipt/ReceiptFooter.tsx
@@ -22,10 +22,11 @@ const St = {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: sticky;
+    position: fixed;
     bottom: 0;
 
     width: 100%;
+    max-width: 43rem;
     height: 7rem;
 
     background-color: ${({ theme }) => theme.colors.gray9};

diff --git a/src/components/Custom/Common/Receipt/ReceiptLayout.tsx b/src/components/Custom/Common/Receipt/ReceiptLayout.tsx
@@ -1,7 +1,3 @@
-import { useState } from 'react';
-import BackBtn from '../../../../common/Header/BackBtn';
-import CancelBtn from '../../../../common/Header/CancelBtn';
-import CustomSizeEscapeModal from '../../../../common/Modal/EscapeModal/CustomSizeEscapeModal';
 import Header from '../../../Header';
 import PageLayout from '../../../PageLayout';
 import ReceiptDetail from './ReceiptDetail';
@@ -15,23 +11,8 @@ interface ReceiptLayoutProps {
 }
 
 const ReceiptLayout = ({ receiptData, haveDesign }: ReceiptLayoutProps) => {
-  const [modalOn, setModalOn] = useState(false);
-
   const renderReceiptLayoutHeader = () => {
-    return (
-      <Header
-        leftSection={<BackBtn />}
-        title='커스텀 타투'
-        rightSection={
-          <CancelBtn
-            modalOn={modalOn}
-            setModalOn={setModalOn}
-            targetModal={<CustomSizeEscapeModal setModalOn={setModalOn} />}
-          />
-        }
-        transparent={true}
-      />
-    );
+    return <Header title='커스텀 타투' transparent={true} />;
   };
 
   return (

diff --git a/src/components/Custom/Common/Size/CustomSelectSize.tsx b/src/components/Custom/Common/Size/CustomSelectSize.tsx
@@ -113,6 +113,7 @@ const St = {
     width: 100%;
     min-height: calc(100dvh - 13.6rem);
     padding: 0 2rem;
+    margin-bottom: 7rem;
   `,
 
   SizeInfoContainer: styled.article`

diff --git a/src/components/Custom/HaveDesign/Reference/CustomReference.tsx b/src/components/Custom/HaveDesign/Reference/CustomReference.tsx
@@ -62,6 +62,7 @@ const St = {
     flex-direction: column;
     /* align-items: center; */
     min-height: calc(100dvh - 13.6rem);
+    margin-bottom: 7rem;
   `,
 };
 

diff --git a/src/components/Custom/NoDesign/Img/CustomImgLayout.tsx b/src/components/Custom/NoDesign/Img/CustomImgLayout.tsx
@@ -27,7 +27,6 @@ const CustomImgLayout = ({
   setPreviewURL,
 }: CustomImgLayoutProps) => {
   // const CUSTOM_VIEW_COUNT = 2;
-  console.log('customInfo: ', customInfo);
   const [modalOn, setModalOn] = useState(false);
   const [isActiveNext, setIsActiveNext] = useState(false);
 

diff --git a/src/components/Custom/NoDesign/NoDesignFooter.tsx b/src/components/Custom/NoDesign/NoDesignFooter.tsx
@@ -42,14 +42,15 @@ export default NoDesignFooter;
 
 const St = {
   NoDesignFooter: styled.footer<{ $isActiveNext: boolean }>`
-    position: sticky;
+    position: fixed;
     bottom: 0;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     width: 100%;
+    max-width: 43rem;
     height: 7rem;
 
     background-color: ${({ $isActiveNext, theme }) =>

diff --git a/src/components/Custom/PriceFooter.tsx b/src/components/Custom/PriceFooter.tsx
@@ -63,14 +63,15 @@ const PriceFooter = ({
 
 const St = {
   CustomFooter: styled.footer`
-    position: sticky;
+    position: fixed;
     bottom: 0;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     width: 100%;
+    max-width: 43rem;
     height: 7rem;
 
     background-color: ${({ theme }) => theme.colors.gray9};

diff --git a/src/components/MyTattoo/MyLike.tsx b/src/components/MyTattoo/MyLike.tsx
@@ -9,22 +9,20 @@ const MyLike = () => {
     <CustomScrollContainer title={'LIKE'}>
       {!error &&
         !loading &&
-        response.map(
-          ({ id, stickerId, mainImageUrl, name, price, discountPrice, discountRate }) => {
-            return (
-              <SmallTattooCard
-                key={id}
-                id={stickerId}
-                img={mainImageUrl}
-                title={name}
-                price={discountPrice}
-                originalPrice={price}
-                discountRate={discountRate}
-                isCustom={false}
-              />
-            );
-          },
-        )}
+        response.map(({ stickerId, mainImageUrl, name, price, discountPrice, discountRate }) => {
+          return (
+            <SmallTattooCard
+              key={stickerId}
+              stickerId={stickerId}
+              img={mainImageUrl}
+              title={name}
+              price={discountPrice}
+              originalPrice={price}
+              discountRate={discountRate}
+              isCustom={false}
+            />
+          );
+        })}
     </CustomScrollContainer>
   );
 };

diff --git a/src/components/Register/RegisterName.tsx b/src/components/Register/RegisterName.tsx
@@ -18,7 +18,7 @@ const RegisterName = ({ setUserName }: RegisterNameProps) => {
 
       <St.InputContentsWrapper>
         <St.InputContent
-          placeholder='ex) 김타투'
+          placeholder='ex) 홍길동'
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeInputContent(e)}
           onInput={(e: React.ChangeEvent<HTMLInputElement>) => sliceMaxLength(e, 5, 'onlyString')}
         ></St.InputContent>

diff --git a/src/constants/TitleInfo.ts b/src/constants/TitleInfo.ts
@@ -1,4 +1,4 @@
-export const TITLE = ['이름을 입력해주세요', '전화번호를 입력해주세요'];
+export const TITLE = ['실명을 입력해주세요', '전화번호를 입력해주세요'];
 export const SUB_TITLE = [
   '주문 시 입금자명 확인을 위해 실명이 필요해요',
   '주문 후 문자로 안내드리기 위해 필요해요.',

diff --git a/src/page/DetailPage.tsx b/src/page/DetailPage.tsx
@@ -75,7 +75,7 @@ const DetailPage = () => {
             relatedResponse.map((el) => (
               <SmallTattooCard
                 key={el.id}
-                id={el.id}
+                stickerId={el.id}
                 img={el.imageUrl}
                 title={el.name}
                 discountRate={el.discountRate}