[선물등록] 2차 QA 스타일 수정 적용

src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts

@@ -18,7 +18,7 @@ export const ImgPreview = styled.img`
   width: 19.2rem;
   height: 19.2rem;
 
-  object-fit: contain;
+  object-fit: cover;
 `;
 
 export const IcEmptyThumbnailWrapper = styled.div`
@@ -28,7 +28,7 @@ export const IcEmptyThumbnailWrapper = styled.div`
   margin-top: 2.8rem;
   cursor: pointer;
   img {
-    object-fit: contain;
+    object-fit: cover;
     width: 100%;
     height: 100%;
   }

src/components/GiftAdd/AddGiftLink/GiftAddFirstLinkLayout/GiftAddFirstLinkLayout.tsx

@@ -88,11 +88,13 @@ const GiftAddFirstLinkLayout = ({
         gifteeName={gifteeName}
       />
       <GiftStatusBar registeredGiftNum={itemNum} isMargin={true} />
-      <Title>
-        {itemNum === 0 ? '첫번째 상품의' : '두번째 상품의'}
-        <br />
-        판매 링크를 입력해주세요
-      </Title>
+      <S.TitleWrapper>
+        <Title>
+          {itemNum === 0 ? '첫번째 상품의' : '두번째 상품의'}
+          <br />
+          판매 링크를 입력해주세요
+        </Title>
+      </S.TitleWrapper>
       <InputUrl text={text} setText={setText} setIsActivated={setIsActivated} />
       <GiftAddBtnWrapper setStep={setStep} isActivated={isActivated} onClick={onClick} />
     </S.GiftAddLinkLayoutWrapper>

src/components/GiftAdd/AddGiftLink/common/GiftAddLinkLayout.styled.ts

@@ -7,3 +7,7 @@ export const GiftAddLinkLayoutWrapper = styled.section`
   display: flex;
   flex-direction: column;
 `;
+
+export const TitleWrapper = styled.div`
+  margin-top: 2.4rem;
+`;

src/components/GiftAdd/AddGiftLink/common/InputUrl/InputUrl.styled.ts

@@ -24,9 +24,9 @@ export const Input = styled.input<{ hasContent?: boolean }>`
   border: none;
   outline: none;
   color: ${({ theme }) => theme.colors.black};
-  ${({ theme }) => theme.fonts.body_06};
+  ${({ theme }) => theme.fonts.body_05};
 
-  input::placeholder {
+  &::placeholder {
     color: ${({ theme }) => theme.colors.G_07};
     ${({ theme }) => theme.fonts.body_06};
   }

src/components/GiftAdd/GiftAddButtons/GiftAddButtonsWrapper.styled.ts

@@ -14,6 +14,7 @@ export const GiftsItemWrapper = styled.div`
 export const GiftsItemImage = styled.img`
   width: 15.8rem;
   height: 15.8rem;
+  object-fit: cover;
 
   border-radius: 0.4rem;
   background-color: ${({ theme }) => theme.colors.G_03};

src/components/GiftAdd/ItemTextField/ItemTextField.styled.ts

@@ -41,16 +41,12 @@ export const Input = styled.input<{ $hasContent?: boolean }>`
   border: none;
   outline: none;
 
-  input::placeholder {
-    color: ${({ theme }) => theme.colors.G_07};
-    ${({ theme }) => theme.fonts.body_06};
-  }
+  ${({ theme }) => theme.fonts.body_05};
 
-  input::placeholder {
+  &::placeholder {
     color: ${({ theme }) => theme.colors.G_07};
     ${({ theme }) => theme.fonts.body_06};
   }
-
   /* Hide arrows for number input */
   input[type='number'] {
     -moz-appearance: textfield;

src/components/common/Button/Cta/medium/BtnDeleteMedium.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+
+  height: 5.2rem;
+  padding: 1.5rem 0rem 1.6rem 0rem;
+  border-radius: 2.6rem;
+
+  outline: none;
+  border: none;
+  background-color: ${({ theme: { colors } }) => colors.black};
+  color: ${({ theme: { colors } }) => colors.white};
+  ${({ theme: { fonts } }) => fonts.body_09};
+
+  &:active {
+    background-color: white;
+  }
+`;

src/components/common/Button/Cta/medium/BtnDeleteMedium.tsx

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnDeleteMedium.style';
+
+type BtnMediumProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  customStyle?: React.CSSProperties;
+  onClick?: () => void;
+};
+
+const BtnMedium = ({ disabled, children, customStyle, onClick }: BtnMediumProps) => {
+  return (
+    <S.Wrapper disabled={disabled} style={customStyle} onClick={onClick}>
+      {children}
+    </S.Wrapper>
+  );
+};
+
+export default BtnMedium;

src/components/common/Button/Cta/medium/BtnMedium.style.ts

@@ -9,7 +9,12 @@ export const Wrapper = styled.button`
   border-radius: 2.6rem;
 
   outline: none;
+  border: none;
   background-color: ${({ theme: { colors } }) => colors.black};
   color: ${({ theme: { colors } }) => colors.white};
   ${({ theme: { fonts } }) => fonts.body_09};
+
+  &:active {
+    background-color: ${({ theme: { colors } }) => colors.black};
+  }
 `;

src/components/common/Modal/DeleteModal.style.ts

@@ -13,7 +13,6 @@ export const Overlay = styled.div`
 export const DeleteModalWrapper = styled.div`
   display: flex;
   justify-content: center;
-  justify-content: flex-end;
   align-items: center;
   flex-direction: column;
   position: fixed;

src/components/common/Modal/DeleteModal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as S from './DeleteModal.style';
 import BtnMedium from '../Button/Cta/medium/BtnMedium';
 import { IcCancel } from '../../../assets/svg';
+import BtnDeleteMedium from '../Button/Cta/medium/BtnDeleteMedium';
 
 interface DeleteModalProps {
   children: React.ReactNode;
@@ -30,7 +31,7 @@ const DeleteModal = ({
         />
         <S.DeleteModalContent>{children}</S.DeleteModalContent>
         <S.BtnWrapper>
-          <BtnMedium
+          <BtnDeleteMedium
             customStyle={{
               width: '12rem',
               outline: 'none',
@@ -41,7 +42,7 @@ const DeleteModal = ({
             onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickCancel())}
           >
             네, 삭제할게요
-          </BtnMedium>
+          </BtnDeleteMedium>
           <BtnMedium customStyle={{ width: '12rem' }} onClick={onClickCancel}>
             아니오
           </BtnMedium>

src/style/GlobalStyle.ts

@@ -34,6 +34,9 @@ body {
     font-size: 62.5%;
     -ms-overflow-style: none; /* 인터넷 익스플로러  스크롤바 숨김 */
     scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
+
+    /* 버튼 클릭 시 색 제거 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 #root::-webkit-scrollbar {
     display: none; /* 크롬, 사파리, 오페라, 엣지 스크롤바 숨김 */