Main

src/components/CountNumber.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled'
+
+type CountNumberProps = {
+  currentLength: number
+  maxLength: number
+  color: string
+  right: number
+}
+
+type StyleCountNumberProps = {
+  color: string
+  right: number
+}
+
+const CountNumber = ({ right, currentLength, maxLength, color }: CountNumberProps): JSX.Element => {
+  return (
+    <StyleCountNumber
+      right={right}
+      color={color}
+    >{`${currentLength}/${maxLength}`}</StyleCountNumber>
+  )
+}
+
+const StyleCountNumber = styled.span<StyleCountNumberProps>`
+  position: relative;
+  right: ${(props) => props.right}px;
+  bottom: 3px;
+  font-size: 12px;
+  color: ${(props) => props.color};
+`
+
+export default CountNumber

src/components/Input.tsx

@@ -0,0 +1,72 @@
+import styled from '@emotion/styled'
+
+type InputProps = {
+  placeholder?: string
+  placeholderSize?: string
+  placeholderColor?: string
+  width?: string
+  height?: string
+  borderColor?: string
+  borderWidth?: string
+  inputTextColor?: string
+  inputTextSize?: string
+  inputBackgroundColor?: string
+  borderRadius?: string
+}
+
+const Input = ({
+  placeholder,
+  placeholderSize,
+  placeholderColor,
+  width,
+  height,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  inputTextColor,
+  inputTextSize,
+  inputBackgroundColor,
+}: InputProps) => {
+  return (
+    <>
+      <InputWrapper>
+        <StyleInput
+          placeholder={placeholder}
+          placeholderSize={placeholderSize}
+          placeholderColor={placeholderColor}
+          width={width}
+          height={height}
+          borderColor={borderColor}
+          borderWidth={borderWidth}
+          inputTextColor={inputTextColor}
+          inputTextSize={inputTextSize}
+          inputBackgroundColor={inputBackgroundColor}
+          borderRadius={borderRadius}
+        ></StyleInput>
+      </InputWrapper>
+    </>
+  )
+}
+
+const InputWrapper = styled.div`
+  position: relative;
+`
+
+const StyleInput = styled.input<InputProps>`
+  ::placeholder {
+    font-size: ${(props) => props.placeholderSize};
+    color: ${(props) => props.placeholderColor};
+  }
+  position: relative;
+  placeholder: ${(props) => props.placeholder};
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  border-color: ${(props) => props.borderColor};
+  border-width: ${(props) => props.borderWidth};
+  color: ${(props) => props.inputTextColor};
+  background-color: ${(props) => props.inputBackgroundColor};
+  border-radius: ${(props) => props.borderRadius};
+  font-size: ${(props) => props.inputTextSize};
+`
+
+export default Input

src/components/common/Buttons/NormalButton/NormalButton.tsx

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+import { typo } from '@/styles/typo'
+
+import { NormalButtonStyles, NormalButtonType } from './NormalButtonStyles'
+
+const NormalButton = styled.button<{
+  normalButtonType: NormalButtonType
+  isDarkMode?: boolean
+}>`
+  ${({ normalButtonType, isDarkMode = false }) => {
+    const processedTypeKey = isDarkMode ? `${normalButtonType}-dark` : normalButtonType
+    const processedType = (
+      NormalButtonStyles[processedTypeKey as NormalButtonType] ? processedTypeKey : normalButtonType
+    ) as NormalButtonType
+
+    console.log(processedType)
+
+    const fontFunc = typo[NormalButtonStyles[processedType].font]
+    return css`
+      ${fontFunc(
+        NormalButtonStyles[processedType].fontWeight,
+        NormalButtonStyles[processedType].letterSpacing,
+      )}
+      width: ${NormalButtonStyles[processedType].width}px;
+      height: ${NormalButtonStyles[processedType].height}px;
+      color: ${NormalButtonStyles[processedType].fontColor};
+      background-color: ${NormalButtonStyles[processedType].backgroundColor};
+      box-shadow: ${NormalButtonStyles[processedType].boxShadow};
+      border-radius: ${NormalButtonStyles[processedType].borderRadius}px;
+    `
+  }}
+`
+
+export default NormalButton

src/components/common/DarkSelectorButton/index.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+
+import { palette } from '@/styles/palette'
+
+type ToggleButtonProps = {
+  buttonName: string
+  selectedButtonColor: string
+  defaultButtonColor?: string
+  selectedTextColor: string
+  onClick?: () => void
+}
+
+type StyledButtonProps = {
+  backgroundColor: string
+  textColor: string
+}
+
+const DarkSelectorButton = ({
+  buttonName,
+  selectedButtonColor,
+  defaultButtonColor = palette.WHITE,
+  selectedTextColor = palette.SECONDARY,
+  onClick,
+}: ToggleButtonProps) => {
+  const [backgroundColor, setBackgroundColor] = useState(defaultButtonColor)
+  const [textColor, setTextColor] = useState(palette.SECONDARY) // 텍스트 색상에 대한 state
+
+  const handleButtonClick = () => {
+    setBackgroundColor((prevColor) => {
+      if (prevColor === defaultButtonColor) {
+        setTextColor(selectedTextColor)
+        return selectedButtonColor
+      } else {
+        setTextColor(palette.SECONDARY)
+        return defaultButtonColor
+      }
+    })
+    if (onClick) onClick()
+  }
+
+  return (
+    <StyledButton
+      backgroundColor={backgroundColor}
+      textColor={textColor}
+      onClick={handleButtonClick}
+    >
+      {buttonName}
+    </StyledButton>
+  )
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+  margin: 0 4px;
+  height: 36px;
+  padding: 10px 15px 10px 15px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  background-color: ${(props) => props.backgroundColor};
+  transition: background-color 0.3s;
+  &:hover {
+    opacity: 0.9;
+  }
+  &:focus {
+    outline: none;
+  }
+  color: ${(props) => props.textColor};
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: -1px;
+`
+
+export default DarkSelectorButton

src/components/common/WhiteSelectorButton/index.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+
+import { palette } from '@/styles/palette'
+
+type ToggleButtonProps = {
+  buttonName: string
+  selectedButtonColor: string
+  defaultButtonColor?: string
+  onClick?: () => void
+}
+
+type StyledButtonProps = {
+  backgroundColor: string
+}
+
+const WhiteSelectorButton = ({
+  buttonName,
+  selectedButtonColor,
+  defaultButtonColor = palette.TERTIARY,
+  onClick,
+}: ToggleButtonProps) => {
+  const [backgroundColor, setBackgroundColor] = useState(defaultButtonColor)
+
+  const handleButtonClick = () => {
+    setBackgroundColor((prevColor) =>
+      prevColor === defaultButtonColor ? selectedButtonColor : defaultButtonColor,
+    )
+    if (onClick) onClick()
+  }
+
+  return (
+    <StyledButton backgroundColor={backgroundColor} onClick={handleButtonClick}>
+      {buttonName}
+    </StyledButton>
+  )
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+  margin: 0 4px;
+  height: 36px;
+  padding: 10px 15px 10px 15px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  background-color: ${(props) => props.backgroundColor};
+  transition: background-color 0.3s;
+  &:hover {
+    opacity: 0.9;
+  }
+  &:focus {
+    outline: none;
+  }
+  color: ${palette.WHITE};
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  letter-spacing: -1px;
+  font-weight: 600;
+`
+
+export default WhiteSelectorButton