Merge branch 'develop' into feat/#27-pretask-link-upload

src/assets/svg/IcCancelCircleFinal.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCancelCircleFinal = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <path fill='#F8F8F8' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0' />
+    <path
+      stroke='#868384'
+      strokeLinecap='round'
+      strokeWidth={1.5}
+      d='M15.182 8.818 12 12m0 0-3.182 3.182M12 12l3.182 3.182M12 12 8.818 8.818'
+    />
+  </svg>
+);
+export default SvgIcCancelCircleFinal;

src/assets/svg/index.ts

@@ -7,6 +7,7 @@ export { default as IcAlertTriangle } from './IcAlertTriangle';
 export { default as IcCalender } from './IcCalender';
 export { default as IcCancel } from './IcCancel';
 export { default as IcCancelCircle } from './IcCancelCircle';
+export { default as IcCancelCircleFinal } from './IcCancelCircleFinal';
 export { default as IcCheckContained } from './IcCheckContained';
 export { default as IcCircle } from './IcCircle';
 export { default as IcCirclePink } from './IcCirclePink';

src/components/onboarding/step01/Step01.style.ts

@@ -1,42 +1,44 @@
 import styled, { css } from 'styled-components';
 import theme from '../../../style/theme';
 
-export const Input = styled.input<{ hasContent: boolean; maxLengthReached: boolean }>`
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
+export const Wrapper = styled.div<{ hasContent: boolean; maxLengthReached: boolean }>`
+  ${({ theme }) => theme.mixin.flexBox('center', 'center')}
   width: 100%;
+  height: 3.6rem;
   margin-top: 7.2rem;
-  border: none;
-  border-bottom: 0.1rem solid ${theme.colors.G_02};
-  outline: none;
-  gap: 0.8rem;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02};
 
   ${(props) =>
     props.hasContent &&
     css`
-      border-bottom: 0.1rem solid ${theme.colors.P_06};
+      border-bottom: 0.1rem solid ${({ theme }) => theme.colors.P_06};
     `}
 
   ${(props) =>
     props.maxLengthReached &&
     css`
-      border-bottom: 0.1rem solid ${theme.colors.G_02};
+      border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02};
     `}
+`;
 
-    input::placeholder {
-    color: ${theme.colors.G_07};
-    ${theme.fonts.body_06}
-  }
+export const TextField = styled.div`
+  width: 90%;
+`;
 
-  &::-webkit-input-placeholder {
-    color: ${theme.colors.G_07};
-    ${theme.fonts.body_06}
-  }
+export const IconField = styled.div`
+  width: 10%;
+`;
+
+export const Input = styled.input<{ hasContent?: boolean; maxLengthReached?: boolean }>`
+  ${({ theme }) => theme.mixin.flexBox('flex-center', 'center')};
+  width: 100%;
+  height: 3.5rem;
+  border: none;
+  outline: none;
 
-  &:-ms-input-placeholder {
-    color: ${theme.colors.G_07};
-    ${theme.fonts.body_06}
+  input::placeholder {
+    color: ${({ theme }) => theme.colors.G_07};
+    ${({ theme }) => theme.fonts.body_06};
   }
 `;
 

src/components/onboarding/step01/Step01.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Title from '../../common/title/Title';
 import * as S from './Step01.style';
+import { IcCancelCircleFinal } from '../../../assets/svg';
 
 const NameInput = () => {
   const [text, setText] = useState<string>('');
@@ -12,19 +13,34 @@ const NameInput = () => {
     inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault();
   };
 
-  // TODO 인풋창에 x 버튼 추가 및 클릭 시 값 삭제
+
+  const handleBtnClick = () => {
+    setText('');
+  };
+
   return (
     <>
       <Title title='선물 받을 분의' />
       <Title title='이름, 혹은 닉네임을 알려주세요' />
-      <S.Input
-        type='text'
-        onChange={onChange}
-        maxLength={10}
-        placeholder='이름을 입력해주세요'
-        hasContent={text.length > 0}
-        maxLengthReached={text.length === 10}
-      />
+      <S.Wrapper hasContent={text.length > 0} maxLengthReached={text.length === 10}>
+        <S.TextField>
+          <S.Input
+            type='text'
+            value={text}
+            onChange={onChange}
+            maxLength={10}
+            placeholder='이름을 입력해주세요'
+          />
+        </S.TextField>
+        <S.IconField>
+          {text.length > 0 && (
+            <IcCancelCircleFinal
+              style={{ width: '2.4rem', height: '2.4rem' }}
+              onClick={handleBtnClick}
+            />
+          )}
+        </S.IconField>
+      </S.Wrapper>
       <S.LetterLength>({text.length}/10)</S.LetterLength>
     </>
   );