fix: resolve conflict with package lock file

package.json

@@ -96,6 +96,7 @@
     "react-dev-utils": "^12.0.0",
     "react-dom": "^17.0.2",
     "react-refresh": "^0.13.0",
+    "react-scripts": "^5.0.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
@@ -175,7 +176,6 @@
     "@storybook/storybook-deployer": "^2.8.11",
     "@storybook/testing-library": "^0.0.9",
     "@svgr/rollup": "^6.2.1",
-    "@svgr/webpack": "^6.2.1",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.3.1",

src/components/atoms/ColorTexts/ColorText/ColorText.styles.module.scss

@@ -0,0 +1,7 @@
+@import 'src/scss/mixins';
+
+.highlight {
+  color: $color-base;
+  margin-left: 5px;
+  margin-right: 5px;
+}

src/components/atoms/ColorTexts/ColorText/ColorText.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import css from './ColorText.styles.module.scss'
+
+export type ColorTextProps = {
+  isHighlight: boolean
+  isSpace: boolean
+  text: string
+  classNameHighlight?: string
+}
+
+export const ColorText = ({ isHighlight, isSpace, text, classNameHighlight }) => {
+  return (
+    <span
+      className={cx({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        [(css.highlight, classNameHighlight)]: isHighlight
+      })}
+    >
+      {isSpace && <>&nbsp;</>}
+      {<>&nbsp;</>}
+      {text}
+    </span>
+  )
+}

src/components/atoms/ColorTexts/ColorText/index.ts

@@ -0,0 +1 @@
+export * from './ColorText'

src/components/atoms/ColorTexts/ColorTexts.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { ColorTexts, ColorTextsProps } from './ColorTexts'
+
+export default {
+  title: 'atoms/ColorTexts',
+  component: ColorTexts
+} as ComponentMeta<React.ComponentType<ColorTextsProps>>
+
+const Template: ComponentStory<React.ComponentType<ColorTextsProps>> = args => <ColorTexts {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/atoms/ColorTexts/ColorTexts.styles.module.scss

@@ -0,0 +1,3 @@
+.color-text {
+  display: flex;
+}

src/components/atoms/ColorTexts/ColorTexts.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ColorText } from './ColorText'
+
+import css from './ColorTexts.styles.module.scss'
+
+export type ColorTextsProps = {
+  className?: string
+  classNameHighlight?: string
+  words: string[]
+  step: number
+}
+
+export const isHighlight = (index: number, step: number) => {
+  return (index + 1) % step === 0
+}
+
+export const ColorTexts = ({ words, step, className, classNameHighlight }: ColorTextsProps) => {
+  return (
+    <div className={cx(css.colorText, className)}>
+      {words.map((word, index) => (
+        <ColorText
+          classNameHighlight={classNameHighlight}
+          key={word}
+          isHighlight={isHighlight(index, step)}
+          isSpace={index === 0}
+          text={word}
+        />
+      ))}
+    </div>
+  )
+}

src/components/atoms/ColorTexts/index.ts

@@ -0,0 +1 @@
+export * from './ColorTexts'