TextInput variations 구현

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+## What is this PR? 🔍
+- 무슨 목적/이유로 구현했는지
+
+### 🛠️ Issue
+- Closes #number
+
+## Changes 📝
+- 작업한 내용 적어주세요
+
+## To Reviewers 📢
+- 이 부분 좀 같이 봐주세요 / 혹은 하고 싶은 말

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "serve": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:css": "stylelint './src/**/*.tsx'",
     "preview": "vite preview",
@@ -24,7 +25,8 @@
     "react-router-dom": "^6.16.0",
     "styled-components": "^6.0.8",
     "styled-normalize": "^8.0.7",
-    "swiper": "^11.0.4"
+    "swiper": "^11.0.4",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.4.0",

src/apis/oauth/signup.ts

@@ -1,5 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { OAuthResponse } from '@interfaces/api/oauth';
+
 import client from '@apis/fetch';
 
 interface SingnUpRequestDTO {
@@ -10,16 +12,34 @@ interface SingnUpRequestDTO {
   job: string;
 }
 
+type TermsConsetResponseDTO = Omit<OAuthResponse, 'newMember'>;
+
+interface TermsConsentRequestDTO {
+  memberId: number;
+  listen_marketing: boolean;
+}
+
 const signup = (req: SingnUpRequestDTO) => {
   return client.post({
     path: '/auth/signup/profile',
     body: req,
   });
 };
 
+const terms = (req: TermsConsentRequestDTO) => {
+  return client.post<TermsConsetResponseDTO>({
+    path: '/auth/signup/terms',
+    body: req,
+  });
+};
+
 const useSignup = () => {
   return useMutation({ mutationFn: signup });
 };
 
-export { useSignup };
-export type { SingnUpRequestDTO };
+const useTerms = () => {
+  return useMutation({ mutationFn: terms });
+};
+
+export { useSignup, useTerms };
+export type { SingnUpRequestDTO, TermsConsentRequestDTO };

src/assets/icons/index.ts

@@ -6,6 +6,7 @@ import NewAlarmIcon from './alarm-new.svg?react';
 import AppleIcon from './apple.svg?react';
 import BLogoIcon from './b-logo.svg?react';
 import BigDownChevronIcon from './big-down-chevron.svg?react';
+import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
 import CommentIcon from './comment.svg?react';
@@ -37,6 +38,7 @@ export {
   AppleIcon,
   BigDownChevronIcon,
   BLogoIcon,
+  CheckIcon,
   ClockIcon,
   CloseIcon,
   CommentIcon,

src/assets/styles/theme.ts

@@ -54,42 +54,3 @@ export const theme: DefaultTheme = {
   colors,
   zIndex,
 };
-
-export const input = {
-  t1: {
-    default: {
-      border: `none`,
-      backgroundColor: '#342b52',
-    },
-    error: {
-      border: `1px solid ${colors.purple2}`,
-      backgroundColor: '#342b52',
-    },
-  },
-  t2: {
-    default: {
-      fontSize: '2rem',
-      fontWeight: 400,
-      lineHeight: '140%',
-      padding: '0 0 10px 0',
-      border: 'none',
-      borderBottom: `1px solid ${colors.navy2}`,
-      backgroundColor: 'transparent',
-      borderRadius: 0,
-      outline: 'none',
-    },
-    error: {
-      fontSize: '2rem',
-      fontWeight: 400,
-      lineHeight: '140%',
-      padding: '0 0 10px 0',
-      border: 'none',
-      borderBottom: `1px solid ${colors.purple2}`,
-      borderRadius: 0,
-      backgroundColor: 'transparent',
-      outline: 'none',
-    },
-  },
-};
-
-export type InputTypes = keyof typeof input;

src/components/commons/BottomSheet/BottomSheet.tsx

@@ -16,6 +16,7 @@ interface BottomSheetProps {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   snapPoints?: number[];
   initialSnap?: number;
+  transparent?: boolean;
   children: React.ReactNode;
 }
 
@@ -24,6 +25,7 @@ const BottomSheet = ({
   setIsOpen,
   snapPoints = [0.9, 0.7, 0],
   initialSnap = 0.7,
+  transparent = true,
   children,
 }: BottomSheetProps) => {
   const screenHeight = window.innerHeight;
@@ -110,6 +112,7 @@ const BottomSheet = ({
     <ReactPortal>
       <Backdrop
         onClick={handleOnClickBackdrop}
+        transparent={transparent}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -158,15 +161,16 @@ const HandleBar = styled.div`
   border-radius: 5px;
 `;
 
-const Backdrop = styled(motion.div)`
+const Backdrop = styled(motion.div)<{ transparent: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   z-index: ${(props) => props.theme.zIndex.sheet};
   width: 100%;
   height: 100%;
 
-  /* background: rgb(0 0 0 / 50%); */
+  ${({ transparent }) =>
+    transparent ? 'background: transparent;' : 'background: rgb(0 0 0 / 50%);'}
 `;
 
 const Wrapper = styled(motion.div)`

src/components/commons/CheckBox/CheckBox.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+import { CheckIcon } from '@icons/index';
+
+import { Row } from '../Flex/Flex';
+import Text from '../Text/Text';
+
+interface CheckboxProps {
+  id: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  children: React.ReactNode;
+}
+
+function Checkbox({ id, checked, onChange, children }: CheckboxProps) {
+  return (
+    <Row alignItems="center" gap={16}>
+      <CheckBoxLabel checked={checked} htmlFor={id}>
+        <HiddenCheckbox id={id} type="checkbox" onChange={onChange} checked={checked} />
+        {checked && <CheckIcon width="14px" height="14px" />}
+      </CheckBoxLabel>
+      <label htmlFor={id} style={{ userSelect: 'none' }}>
+        {children}
+      </label>
+    </Row>
+  );
+}
+
+export default Checkbox;
+
+const CheckBoxLabel = styled.label<{ checked: boolean }>`
+  position: relative;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  background: ${({ checked, theme }) =>
+    checked ? `${theme.colors.purple}` : 'rgb(77 59 124 / 20%)'};
+  border-radius: 3px;
+
+  & > svg {
+    position: absolute;
+    top: 3px;
+    left: 3.5px;
+  }
+`;
+
+const HiddenCheckbox = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+`;

src/components/commons/TextInput/TextInput.styles.tsx

@@ -1,46 +1,46 @@
 import { css, styled } from 'styled-components';
 
-const StyledInput = styled.input<{ hasLeft: boolean }>`
+import { TextInputTheme } from './theme';
+
+const StyledInput = styled.input<{ inputTheme: TextInputTheme }>`
   width: 100%;
-  padding: 14px 16px;
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1.4;
   color: ${({ theme }) => theme.colors.white};
-  border-radius: 10px;
-
-  ${({ hasLeft }) =>
-    hasLeft &&
-    css`
-      padding-left: 35px;
-    `}
+  appearance: none;
+  background-color: transparent;
+  border: none;
 
   &:focus {
     outline: none;
   }
 
   &::placeholder {
-    color: ${({ theme }) => theme.colors.purple};
+    color: ${({ inputTheme }) => inputTheme.placeholderColor};
     opacity: 0.6;
   }
 `;
 
-const InputContainer = styled.div`
+const InputContainer = styled.div<{ hasError: boolean; inputTheme: TextInputTheme }>`
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ inputTheme }) => inputTheme.padding};
+  background-color: ${({ inputTheme }) => inputTheme.backgroundColor};
+  border-bottom: ${({ inputTheme, theme, hasError }) =>
+    !inputTheme.rounded && `1px solid ${hasError ? theme.colors.purple2 : theme.colors.navy2}`};
+  border-radius: ${({ inputTheme }) => inputTheme.rounded && '10px'};
+  box-shadow: ${({ theme, inputTheme, hasError }) =>
+    hasError && inputTheme.rounded && `0 0 0 1px ${theme.colors.purple2} inset`};
 `;
 
 const InputPrefix = styled.div`
-  position: absolute;
-  top: 14px;
-  left: 16px;
+  margin-right: 10px;
 `;
 
-const InputSuffix = styled.div`
-  position: absolute;
-  right: 16px;
-  bottom: calc(50% - 10px);
-  transform: translateY(-50%);
-`;
+const InputSuffix = styled.div``;
 
 const ErrorMessage = styled.div`
   position: absolute;

src/components/commons/TextInput/TextInput.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
-import { ConfigKeys, InputType } from 'src/constants/form';
+import { InputType } from 'src/constants/form';
 
-import { InputTypes, colors, input } from '@styles/theme';
+import { colors } from '@styles/theme';
 
 import Text from '../Text/Text';
 
@@ -13,6 +13,7 @@ import {
   InputSuffix,
   StyledInput,
 } from './TextInput.styles';
+import { TextInputTheme, theme1 } from './theme';
 
 interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: InputType;
@@ -21,26 +22,23 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   left?: () => React.ReactNode;
   right?: () => React.ReactNode;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  theme?: InputTypes;
+  theme?: TextInputTheme;
 }
 
 const TextInput = (props: TextInputProps) => {
-  const { id, type = 'text', options, placeholder, left, right, onKeyDown, theme = 't1' } = props;
+  const { id, type = 'text', options, placeholder, left, right, onKeyDown, theme = theme1 } = props;
   const {
     register,
     formState: { errors },
   } = useFormContext();
 
-  const inputTheme = input[theme];
-
   return (
     <div style={{ position: 'relative', width: '100%' }}>
-      <InputContainer>
+      <InputContainer inputTheme={theme} hasError={!!errors[id]}>
         {left && <InputPrefix>{left()}</InputPrefix>}
         <StyledInput
-          hasLeft={left !== undefined}
+          inputTheme={theme}
           type={type}
-          style={{ ...(errors[id] ? inputTheme.error : inputTheme.default) }}
           placeholder={placeholder}
           {...register(id, options)}
           onKeyDown={onKeyDown}

src/components/commons/TextInput/theme.ts

@@ -0,0 +1,39 @@
+import { CSSProperties } from 'react';
+
+import { colors } from '@styles/theme';
+
+export interface TextInputTheme {
+  padding: CSSProperties['padding'];
+  rounded: boolean;
+  fontSize: CSSProperties['fontSize'];
+  fontWeight: CSSProperties['fontWeight'];
+  backgroundColor: CSSProperties['backgroundColor'];
+  placeholderColor: CSSProperties['color'];
+}
+
+export const theme1: TextInputTheme = {
+  padding: '14px 16px',
+  rounded: true,
+  fontSize: '1.4rem',
+  fontWeight: 600,
+  backgroundColor: colors.navy2_40,
+  placeholderColor: colors.purple,
+};
+
+export const theme2: TextInputTheme = {
+  padding: '16px',
+  rounded: true,
+  fontSize: '1.6rem',
+  fontWeight: 500,
+  backgroundColor: colors.navy2_40,
+  placeholderColor: colors.purple2,
+};
+
+export const theme3: TextInputTheme = {
+  padding: '10px 0',
+  rounded: false,
+  fontSize: '2rem',
+  fontWeight: 400,
+  backgroundColor: 'transparent',
+  placeholderColor: colors.purple2,
+};