feature: first page markup

PetitProjects/Team3/package.json

@@ -18,7 +18,8 @@
     "framer-motion": "^6.3.10",
     "jsdom": "^19.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "6"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",

PetitProjects/Team3/src/App.tsx

@@ -1,43 +1,14 @@
 import * as React from 'react';
-import { styled } from '@stitches/react';
+import Wonjong from './components/wonjong';
+import { Route, Routes } from 'react-router-dom';
 
 const App: React.FC = () => {
-  const [count, setCount] = React.useState<number>(0);
-
-  const increment = () => setCount((prev) => prev + 1);
-  const decrement = () => setCount((prev) => prev - 1);
-
   return (
-    <CounterBox>
-      <IncrementButton onClick={increment}>+</IncrementButton>
-      <CounterNumber>{count}</CounterNumber>
-      <DecrementButton onClick={decrement}>-</DecrementButton>
-    </CounterBox>
+    <Routes>
+      <Route path='wonjong' element={<Wonjong />} />
+      {/*여기에 각자 route 처리해서 컴포넌트 넣어주시면 될 것 같아요.*/}
+    </Routes>
   );
 };
 
 export default App;
-
-const CounterBox = styled('div', {
-  width: '100vw',
-  height: '100vh',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: 16,
-});
-
-const CounterNumber = styled('span', {
-  fontSize: 24,
-  fontWeight: 700,
-});
-
-const IncrementButton = styled('button', {
-  fontSize: 20,
-  fontWeight: 700,
-});
-
-const DecrementButton = styled('button', {
-  fontSize: 20,
-  fontWeight: 700,
-});

PetitProjects/Team3/src/components/AnimatedText/index.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { motion } from "framer-motion";
+import * as $ from './styles'
+
+// Word wrapper
+const Wrapper = (props: any) => {
+  // We'll do this to prevent wrapping of words using CSS
+  return <span className="word-wrapper">{props.children}</span>;
+};
+
+// AnimatedText
+// Handles the deconstruction of each word and character to setup for the
+// individual character animations
+const AnimatedText = (props: any) => {
+  // Framer Motion variant object, for controlling animation
+  const item = {
+    hidden: {
+      y: "200%",
+      color: "#FFFFFF",
+      transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.85 }
+    },
+    visible: {
+      y: 0,
+      color: "#FFFFFF",
+      transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.75 }
+    }
+  };
+
+  //  Split each word of props.text into an array
+  const splitWords = props.text.split(" ");
+
+  // Create storage array
+  const words: string[][] = [];
+
+  // Push each word into words array
+  for (const [, item] of splitWords.entries()) {
+    words.push(item.split(""));
+  }
+
+  // Add a space ("\u00A0") to the end of each word
+  words.map((word) => {
+    return word.push("\u00A0");
+  });
+
+  return (
+    <$.H1Container>
+      {words.map((word, index) => {
+        return (
+          // Wrap each word in the Wrapper component
+          <Wrapper key={index}>
+            {words[index].flat().map((element, index) => {
+              return (
+                <span
+                  style={{
+                    overflow: "hidden",
+                    display: "inline-block"
+                  }}
+                  key={index}
+                >
+                  <motion.span
+                    style={{ display: "inline-block" }}
+                    variants={item}
+                  >
+                    {element}
+                  </motion.span>
+                </span>
+              );
+            })}
+          </Wrapper>
+        );
+      })}
+      {/* {} */}
+    </$.H1Container>
+  );
+};
+
+export default AnimatedText;

PetitProjects/Team3/src/components/AnimatedText/styles.ts

@@ -0,0 +1,5 @@
+import { styled } from '@stitches/react';
+
+export const H1Container = styled('h1', {
+  margin: '0'
+})

PetitProjects/Team3/src/components/wonjong/index.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import * as $ from './styles';
+import { motion } from 'framer-motion';
+import AnimatedText from '../AnimatedText';
+
+const Wonjong = () => {
+  const [randomNumbers, setRandomNumbers] = useState<number[]>([]);
+  useEffect(() => {
+    const number1 = Math.floor(Math.random() * 30 + 10);
+    const number2 = Math.floor(Math.random() * 30 + 40);
+    const number3 = Math.floor(Math.random() * 30 + 70);
+    setRandomNumbers([number1, number2, number3]);
+  }, []);
+
+  return (
+    <$.Wrapper>
+      <$.LeftTitleContainer>
+        Wonjong Oh <br />
+        Frontend Web Developer
+      </$.LeftTitleContainer>
+      <motion.div
+        initial='hidden'
+        animate='visible'
+        variants={{
+          visible: {
+            transition: {
+              staggerChildren: 0.025,
+            },
+          },
+        }}
+      >
+        <AnimatedText text={String(randomNumbers[2])}
+                      style={{ fontSize: '60px', fontWeight: '900', textAlign: 'right', margin: '0 40px 0 0' }} />
+        <AnimatedText text={String(randomNumbers[1])}
+                      style={{ fontSize: '60px', fontWeight: '900', textAlign: 'right', margin: '0 40px 0 0' }} />
+        <AnimatedText text={String(randomNumbers[0])}
+                      style={{ fontSize: '60px', fontWeight: '900', textAlign: 'right', margin: '0 40px 0 0' }} />
+      </motion.div>
+    </$.Wrapper>
+  );
+};
+
+export default Wonjong;

PetitProjects/Team3/src/components/wonjong/styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '@stitches/react';
+
+export const Wrapper = styled('div', {
+  backgroundColor: 'black',
+  color: 'white',
+  width: '100vw',
+  height: '100vh',
+  top: '0',
+  left: '0',
+  position: 'absolute',
+  fontSize: '60px',
+  fontWeight: '900',
+  textAlign: 'right',
+  margin: '0 40px 0 0'
+});
+
+export const LeftTitleContainer = styled('p', {
+  fontSize: '40px',
+  fontWeight: '600',
+  textAlign: 'left',
+})

PetitProjects/Team3/src/main.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
 );

PetitProjects/Team3/yarn.lock

@@ -6266,6 +6266,13 @@ highlight.js@^10.4.1, highlight.js@~10.7.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8886,6 +8893,21 @@ react-refresh@^0.13.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
   integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
 
+react-router-dom@6:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
+react-router@6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react-syntax-highlighter@^15.4.5:
   version "15.5.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"