From fb8e1d11f639689b0449521823df8cab8d350c0c Mon Sep 17 00:00:00 2001 From: dev-owen Date: Sun, 26 Jun 2022 01:04:51 +0900 Subject: [PATCH 1/2] feature: first page markup --- PetitProjects/Team3/package.json | 3 +- PetitProjects/Team3/src/App.tsx | 41 ++-------- .../src/components/AnimatedText/index.tsx | 77 +++++++++++++++++++ .../src/components/AnimatedText/styles.ts | 5 ++ .../Team3/src/components/wonjong/index.tsx | 43 +++++++++++ .../Team3/src/components/wonjong/styles.ts | 21 +++++ PetitProjects/Team3/src/main.tsx | 7 +- PetitProjects/Team3/yarn.lock | 22 ++++++ 8 files changed, 181 insertions(+), 38 deletions(-) create mode 100644 PetitProjects/Team3/src/components/AnimatedText/index.tsx create mode 100644 PetitProjects/Team3/src/components/AnimatedText/styles.ts create mode 100644 PetitProjects/Team3/src/components/wonjong/index.tsx create mode 100644 PetitProjects/Team3/src/components/wonjong/styles.ts diff --git a/PetitProjects/Team3/package.json b/PetitProjects/Team3/package.json index efd0c57..880f347 100644 --- a/PetitProjects/Team3/package.json +++ b/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", diff --git a/PetitProjects/Team3/src/App.tsx b/PetitProjects/Team3/src/App.tsx index b5ba667..71731e1 100644 --- a/PetitProjects/Team3/src/App.tsx +++ b/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(0); - - const increment = () => setCount((prev) => prev + 1); - const decrement = () => setCount((prev) => prev - 1); - return ( - - + - {count} - - - + + } /> + {/*여기에 각자 route 처리해서 컴포넌트 넣어주시면 될 것 같아요.*/} + ); }; 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, -}); diff --git a/PetitProjects/Team3/src/components/AnimatedText/index.tsx b/PetitProjects/Team3/src/components/AnimatedText/index.tsx new file mode 100644 index 0000000..8237a14 --- /dev/null +++ b/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 {props.children}; +}; + +// 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 + + {words[index].flat().map((element, index) => { + return ( + + + {element} + + + ); + })} + + ); + })} + {/* {} */} + + ); +}; + +export default AnimatedText; diff --git a/PetitProjects/Team3/src/components/AnimatedText/styles.ts b/PetitProjects/Team3/src/components/AnimatedText/styles.ts new file mode 100644 index 0000000..2b939db --- /dev/null +++ b/PetitProjects/Team3/src/components/AnimatedText/styles.ts @@ -0,0 +1,5 @@ +import { styled } from '@stitches/react'; + +export const H1Container = styled('h1', { + margin: '0' +}) diff --git a/PetitProjects/Team3/src/components/wonjong/index.tsx b/PetitProjects/Team3/src/components/wonjong/index.tsx new file mode 100644 index 0000000..1c62c98 --- /dev/null +++ b/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([]); + 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
+ Frontend Web Developer + + + + + + + + ); +}; + +export default Wonjong; diff --git a/PetitProjects/Team3/src/components/wonjong/styles.ts b/PetitProjects/Team3/src/components/wonjong/styles.ts new file mode 100644 index 0000000..1730525 --- /dev/null +++ b/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', +}) diff --git a/PetitProjects/Team3/src/main.tsx b/PetitProjects/Team3/src/main.tsx index 9707d82..3ca6fdb 100644 --- a/PetitProjects/Team3/src/main.tsx +++ b/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( - - + + + + , ); diff --git a/PetitProjects/Team3/yarn.lock b/PetitProjects/Team3/yarn.lock index e6b2f4a..4be981b 100644 --- a/PetitProjects/Team3/yarn.lock +++ b/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" From b2d1797d49c05aab61c45ed4ef348b5da6e8a7a6 Mon Sep 17 00:00:00 2001 From: dev-owen Date: Tue, 28 Jun 2022 00:36:22 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20code=20review=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PetitProjects/Team3/src/App.tsx | 2 +- .../src/components/AnimatedText/index.tsx | 67 +++++++------------ .../src/components/AnimatedText/styles.ts | 3 +- .../components/{wonjong => Wonjong}/index.tsx | 18 +++-- .../components/{wonjong => Wonjong}/styles.ts | 0 5 files changed, 35 insertions(+), 55 deletions(-) rename PetitProjects/Team3/src/components/{wonjong => Wonjong}/index.tsx (50%) rename PetitProjects/Team3/src/components/{wonjong => Wonjong}/styles.ts (100%) diff --git a/PetitProjects/Team3/src/App.tsx b/PetitProjects/Team3/src/App.tsx index 71731e1..e71228a 100644 --- a/PetitProjects/Team3/src/App.tsx +++ b/PetitProjects/Team3/src/App.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Wonjong from './components/wonjong'; +import Wonjong from './components/Wonjong'; import { Route, Routes } from 'react-router-dom'; const App: React.FC = () => { diff --git a/PetitProjects/Team3/src/components/AnimatedText/index.tsx b/PetitProjects/Team3/src/components/AnimatedText/index.tsx index 8237a14..a2073ca 100644 --- a/PetitProjects/Team3/src/components/AnimatedText/index.tsx +++ b/PetitProjects/Team3/src/components/AnimatedText/index.tsx @@ -1,49 +1,30 @@ -import React from "react"; -import { motion } from "framer-motion"; -import * as $ from './styles' - +import React, { ReactNode } from 'react'; +import { motion } from 'framer-motion'; +import * as $ from './styles'; + +const item = { + hidden: { + y: '200%', + transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.85 }, + }, + visible: { + y: 0, + transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.75 }, + }, +}; // Word wrapper -const Wrapper = (props: any) => { +const Wrapper = ({ children }: { children: ReactNode }) => { // We'll do this to prevent wrapping of words using CSS - return {props.children}; + return {children}; }; -// 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"); - }); +const AnimatedText = ({ text }: { text: string }) => { + const words: string[][] = text.split(' ') + .map((el) => el.split('')) + .map((el) => [...el, '\u00A0']); return ( - <$.H1Container> + <$.H1Container style={{ 'bottom': `${Number(text) * 0.8}%` }}> {words.map((word, index) => { return ( // Wrap each word in the Wrapper component @@ -52,13 +33,13 @@ const AnimatedText = (props: any) => { return ( {element} diff --git a/PetitProjects/Team3/src/components/AnimatedText/styles.ts b/PetitProjects/Team3/src/components/AnimatedText/styles.ts index 2b939db..38eb027 100644 --- a/PetitProjects/Team3/src/components/AnimatedText/styles.ts +++ b/PetitProjects/Team3/src/components/AnimatedText/styles.ts @@ -1,5 +1,6 @@ import { styled } from '@stitches/react'; export const H1Container = styled('h1', { - margin: '0' + fontSize: '100px', fontWeight: '900', textAlign: 'right', margin: '0 40px 0 0', position: 'absolute', right: '0' + }) diff --git a/PetitProjects/Team3/src/components/wonjong/index.tsx b/PetitProjects/Team3/src/components/Wonjong/index.tsx similarity index 50% rename from PetitProjects/Team3/src/components/wonjong/index.tsx rename to PetitProjects/Team3/src/components/Wonjong/index.tsx index 1c62c98..46105e6 100644 --- a/PetitProjects/Team3/src/components/wonjong/index.tsx +++ b/PetitProjects/Team3/src/components/Wonjong/index.tsx @@ -6,9 +6,9 @@ import AnimatedText from '../AnimatedText'; const Wonjong = () => { const [randomNumbers, setRandomNumbers] = useState([]); 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); + const number1 = Math.floor(Math.random() * 30); + const number2 = Math.floor(Math.random() * 20 + 40); + const number3 = Math.floor(Math.random() * 20 + 80); setRandomNumbers([number1, number2, number3]); }, []); @@ -22,19 +22,17 @@ const Wonjong = () => { initial='hidden' animate='visible' variants={{ + hidden: { color: '#ffffff' }, visible: { transition: { - staggerChildren: 0.025, + staggerChildren: 0.25, }, }, }} > - - - + + + ); diff --git a/PetitProjects/Team3/src/components/wonjong/styles.ts b/PetitProjects/Team3/src/components/Wonjong/styles.ts similarity index 100% rename from PetitProjects/Team3/src/components/wonjong/styles.ts rename to PetitProjects/Team3/src/components/Wonjong/styles.ts