Feature/aboutme interaction (wip)

src/components/Text/Text.tsx

@@ -4,7 +4,8 @@ import { onSmall } from '@styles/mediaQuery'
 
 export interface TextProps {
   size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  weight: 'regular' | 'bold' | number
+  weight: 'regular' | 'bold'
+  color?: string
   activate: boolean
   children: React.ReactNode
 }
@@ -18,7 +19,7 @@ const textStyleProps = {
 } as const
 
 const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
-  { size, children, ...props }: PropsWithChildren<TextProps>,
+  { size, children, color = 'white', ...props }: PropsWithChildren<TextProps>,
   ref
 ) {
   return (
@@ -31,9 +32,11 @@ const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
 export const BodyText = styled.p<{
   size: string
   weight: 'regular' | 'bold' | number
+  color?: string
   activate: boolean
 }>`
   width: 100%;
+  color: ${({ color }) => color};
 
   ${({ size, weight }) => css`
     font-size: ${size};
@@ -43,11 +46,9 @@ export const BodyText = styled.p<{
   ${({ activate }) =>
     activate
       ? css`
-          color: #fff;
           opacity: 1;
         `
       : css`
-          color: #f5f5f7;
           opacity: 0.2;
         `}
 

src/components/TextWithEffect/TextWithEffect.Scroll.tsx

@@ -9,6 +9,7 @@ import { TextProps } from '../Text/Text'
 function TextWithScrollEffect({
   size,
   weight,
+  color,
   children,
 }: PropsWithChildren<Omit<TextProps, 'activate'>>) {
   const [activated, isActivated] = useState(false)
@@ -34,7 +35,7 @@ function TextWithScrollEffect({
   }, [])
 
   return (
-    <Text ref={textRef} size={size} weight={weight} activate={activated}>
+    <Text ref={textRef} size={size} weight={weight} color={color} activate={activated}>
       {children}
     </Text>
   )

src/pages/AboutMe/components/Cards/Cards.IntroMe.tsx

@@ -1,19 +1,30 @@
+import TextWithEffectScroll from '@components/TextWithEffect'
+import { useScreenContext } from '@hooks/useScreenContext'
+import { introText } from '@pages/AboutMe/data'
 import React from 'react'
 import * as S from './Cards.style'
 
 function IntroMe() {
+  const { isSmall } = useScreenContext()
+
+  if (!isSmall) {
+    return (
+      <S.IntroduceMeWrap>
+        {introText.split('\n').map((text) => (
+          <TextWithEffectScroll size="sm" weight={'bold'}>
+            {text}
+          </TextWithEffectScroll>
+        ))}
+      </S.IntroduceMeWrap>
+    )
+  }
   return (
     <S.IntroduceMeWrap>
       <S.Title>저는 __하는 개발자입니다.</S.Title>
       <br />
-      <S.Description>
-        <p>
-          HCI, UXUI를 수학하고 관련 분야에서 일해본 경험이 있어
-          <br /> 사용자 경험 개선에 대해 함께 고민하고, <br /> 어떻게 하면 효과적으로 매 Sprint마다
-          MVP를 만들 수 있는지 <br />
-          생각할 수 있는 역량을 가진 개발자.
-        </p>
-      </S.Description>
+      <S.DevelopScr>
+        <pre>{introText}</pre>
+      </S.DevelopScr>
     </S.IntroduceMeWrap>
   )
 }

src/pages/AboutMe/components/Cards/Cards.style.ts

@@ -17,9 +17,14 @@ export const IntroduceMeWrap = styled.div`
 export const Title = styled.p`
   color: #4f83f9;
 `
-
-export const Description = styled.div`
+export const DevelopScr = styled.div`
+  width: 100%;
   color: white;
+
+  pre {
+    word-break: keep-all;
+  }
+
   ${onSmall} {
     color: #205284;
   }

src/pages/AboutMe/data.ts

@@ -0,0 +1 @@
+export const introText = `HCI, UXUI를 수학하고 관련 분야에서 일해본 경험이 있어\n사용자 경험 개선에 대해 함께 고민하고,\n어떻게 하면 효과적으로 매 Sprint마다 MVP를 만들 수 있는지\n생각할 수 있는 역량을 가진 개발자.`