22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos 23 | voluptates quae nostrum totam quaerat, commodi asperiores ullam. 24 | Neque enim beatae, cum, optio, tempora autem est a sint vitae ipsum 25 | debitis! Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Quos voluptates quae nostrum totam quaerat, commodi asperiores 27 | ullam. Neque enim beatae, cum, optio, tempora autem est a sint vitae 28 | ipsum debitis! 29 |
30 |11 | {label 12 | ?.split('') 13 | .map((s, i) => 14 | React.createElement(GlowStyled, { key: `s-${i}`, index: i }, s), 15 | )} 16 |
17 | ); 18 | }); 19 | 20 | const H1 = styled.h1` 21 | font-size: 12em; 22 | text-transform: uppercase; 23 | `; 24 | 25 | const animate = keyframes` 26 | 0%, 100% 27 | { 28 | color: white; 29 | filter: blur(1px); 30 | text-shadow: 0 0 10px Aqua; 31 | text-shadow: 0 0 20px Aqua; 32 | text-shadow: 0 0 40px Aqua; 33 | text-shadow: 0 0 80px Aqua; 34 | text-shadow: 0 0 120px Aqua; 35 | text-shadow: 0 0 200px Aqua; 36 | text-shadow: 0 0 300px Aqua; 37 | text-shadow: 0 0 400px Aqua; 38 | } 39 | 5%, 95% { 40 | color: #111; 41 | filter: blur(0px); 42 | text-shadow: none; 43 | } 44 | `; 45 | 46 | const GlowStyled = styled.span<{ index: number }>` 47 | text-transform: uppercase; 48 | display: table-cell; 49 | margin: 0; 50 | padding: 0; 51 | animation: ${animate} 2s linear infinite; 52 | animation-delay: ${(props) => `${props.index * 0.25}s`}; 53 | `; 54 | -------------------------------------------------------------------------------- /src/components/GlowingText/README.md: -------------------------------------------------------------------------------- 1 | ### `Glowing Text` 2 | 3 |  4 | -------------------------------------------------------------------------------- /src/components/GlowingText/index.ts: -------------------------------------------------------------------------------- 1 | export * from './GlowingText'; 2 | -------------------------------------------------------------------------------- /src/components/HalfCircularBackground/index.ts: -------------------------------------------------------------------------------- 1 | export * from './HalfCircularBackground'; 2 | -------------------------------------------------------------------------------- /src/components/HeartAnimation/HeartAnimation.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import styled, { keyframes } from 'styled-components'; 3 | 4 | export const HeartAnimation = memo(() => { 5 | return-
7 |
-
10 |
- 제이콥이 배고프다.
11 |
12 | -
13 |
- 제이콥은 개발자다.
14 |
15 | -
16 |
- 제이콥은 먹는게 좋다.
17 |
18 | -
19 |
- 제이콥은 옷이 좋다.
20 |
21 | -
22 |
- 제이콥은 성격이 좋다.
23 |
24 | -
25 |
- 제이콥은 일한다.
26 |
27 | -
28 |
- 제이콥이 코딩한다.
29 |
30 |
-
9 |
46 | {list.map(({ text, items = [] }, i) => (
47 |
62 | ))}
63 |
64 | );
65 | });
66 |
67 | const ContextMenu = styled.span`
68 | display: flex;
69 | flex-direction: column;
70 | padding: 8px 0;
71 | margin: 0 16px;
72 | transition: all 0.3s ease;
73 | border-radius: 4px;
74 | cursor: pointer;
75 |
76 | &:hover {
77 | margin: 0;
78 | padding-left: 16px;
79 | padding-right: 16px;
80 | background: lightgray;
81 | }
82 | `;
83 |
--------------------------------------------------------------------------------
/src/components/Menu/MenuItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, memo } from 'react';
2 | import styled from 'styled-components';
3 |
4 | type Props = {
5 | text: string;
6 | open?: boolean;
7 | onToggle?: (event: React.MouseEvent
10 |
13 | -
7 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 14 | odit porro ex voluptatum dolorum deserunt eligendi nostrum quisquam 15 | tempora earum nam alias error, aliquam nisi, odio autem? Neque, 16 | deleniti libero! 17 |
18 |
20 |
22 | );
23 | },
24 | ],
25 | } as Meta;
26 |
27 | const Template: Story = (args) =>
23 |
25 | );
26 | },
27 | ],
28 | parameters: {
29 | docs: {
30 | description: { component: '마우스 포인터를 따라 눈동자가 움직입니다.' },
31 | },
32 | },
33 | } as Meta;
34 |
35 | const Template: Story = (args) =>
30 |
32 | );
33 | },
34 | ],
35 | } as Meta;
36 |
37 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: {
30 | component: '보이지 않는 영역을 힘겹게 개척하는 네온사인 사각형입니다.',
31 | },
32 | },
33 | },
34 | } as Meta;
35 |
36 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '고스트 효과' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = (args) =>
28 |
30 | );
31 | },
32 | ],
33 | } as Meta;
34 |
35 | const Template: Story = (args) => (
36 | <>
37 |
23 |
25 | );
26 | },
27 | ],
28 | parameters: {
29 | docs: {
30 | description: {
31 | component:
32 | '(checkbox/radio)타입의 input과 스타일을 조작하는 기초를 제공합니다.',
33 | },
34 | },
35 | },
36 | } as Meta;
37 |
38 | const options = [
39 | { value: 'Jacob ...', name: 'test' },
40 | { value: 'Jacob is good!', name: 'test' },
41 | ];
42 |
43 | const Template: Story = () => {
44 | const [radioValue, setRadioValue] = useState
23 |
25 | );
26 | },
27 | ],
28 | parameters: {
29 | docs: {
30 | description: { component: '반짝 반짝.' },
31 | },
32 | },
33 | } as Meta;
34 |
35 | const Template: Story
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '컨텐츠 아래쪽에 라운드된 배경을 제공합니다.' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '하트 하트~' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: 'hover 효과가 들어간 카드입니다..' },
30 | },
31 | backgrounds: {
32 | default: 'whitesmoke',
33 | },
34 | },
35 | } as Meta;
36 |
37 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | } as Meta;
28 |
29 | const Template: Story = () => {
30 | return
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '그라데이션 로더(스피너)입니다.' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = () => {
35 | return
23 |
25 | );
26 | },
27 | ],
28 | } as Meta;
29 |
30 | const Template: Story
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '리스트를 클릭했을때 나오는 메뉴.' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = () => {
35 | return (
36 | <>
37 | Context Menu
38 | 39 | 40 | ); 41 | }; 42 | 43 | export const ContextMenu = Template.bind({}); 44 | -------------------------------------------------------------------------------- /src/stories/MiniWavy.stories.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties } from 'react'; 2 | import { Meta, Story } from '@storybook/react'; 3 | import { MiniWavy } from '../components'; 4 | 5 | export default { 6 | title: 'jacob-css/MiniWavy', 7 | component: MiniWavy, 8 | decorators: [ 9 | (Story) => { 10 | const style = { 11 | display: 'flex', 12 | flexDirection: 'column', 13 | justifyContent: 'center', 14 | alignItems: 'center', 15 | height: '100vh', 16 | overflow: 'hidden', 17 | boxSizing: 'border-box', 18 | } as CSSProperties; 19 | 20 | return ( 21 |
22 |
24 | );
25 | },
26 | ],
27 | } as Meta;
28 |
29 | const Template: Story = () => {
30 | return
21 |
23 | );
24 | },
25 | ],
26 | } as Meta;
27 |
28 | const Template: Story = (args) =>
23 |
25 | );
26 | },
27 | ],
28 | } as Meta;
29 |
30 | const Template: Story = () => {
31 | return
23 |
25 | );
26 | },
27 | ],
28 | } as Meta;
29 |
30 | const Template: Story
23 |
25 | );
26 | },
27 | ],
28 | } as Meta;
29 |
30 | const Template: Story
23 |
25 | );
26 | },
27 | ],
28 | } as Meta;
29 |
30 | const Template: Story = () => {
31 | return (
32 | <>
33 | Only css!
34 |
32 |
34 | );
35 | },
36 | ],
37 | } as Meta;
38 |
39 | const Template: Story = () => {
40 | return
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: {
30 | component: 'range타입 input의 스타일을 조작하는 기초를 제공합니다. ',
31 | },
32 | },
33 | },
34 | } as Meta;
35 |
36 | const Template: Story = () => {
37 | return
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: { component: '버튼의 hover에 ripple효과를 줍니다.' },
30 | },
31 | },
32 | } as Meta;
33 |
34 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: {
30 | component: '그림자 효과를 확인하기 위한 단순 도넛입니다.',
31 | },
32 | },
33 | },
34 | } as Meta;
35 |
36 | const Template: Story = () => {
37 | return
22 |
24 | );
25 | },
26 | ],
27 | parameters: {
28 | docs: {
29 | description: {
30 | component: '데이터가 로드되기 전에 미리 보기를 표시하여 로드시간에 대한 불만을 줄입니다.',
31 | },
32 | },
33 | },
34 | } as Meta;
35 |
36 | const Template: Story = (args) =>
22 |
24 | );
25 | },
26 | ],
27 | } as Meta;
28 |
29 | const Template: Story = (args) =>
30 |
32 | );
33 | },
34 | ],
35 | } as Meta;
36 |
37 | const Template: Story = (args) => ;
38 |
39 | export const BasicCss = Template.bind({});
40 |
--------------------------------------------------------------------------------
/src/stories/TextTyping.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { TextTyping } from '../components';
4 |
5 | export default {
6 | title: 'jacob-css/TextTyping',
7 | component: TextTyping,
8 | parameters: {
9 | docs: {
10 | description: { component: '글자 입력 애니메이션' },
11 | },
12 | },
13 | decorators: [
14 | (Story) => {
15 | const style = {
16 | display: 'flex',
17 | flexDirection: 'column',
18 | position: 'absolute',
19 | left: 0,
20 | right: 0,
21 | width: '100%',
22 | alignItems: 'center',
23 | height: '100vh',
24 | boxSizing: 'border-box',
25 | } as CSSProperties;
26 |
27 | return (
28 |
29 |
31 | );
32 | },
33 | ],
34 | } as Meta;
35 |
36 | const Template: Story = (args) =>
30 |
32 | );
33 | },
34 | ],
35 | } as Meta;
36 |
37 | const Template: Story = (args) =>
30 |
32 | );
33 | },
34 | ],
35 | } as Meta;
36 |
37 | const Template: Story = (args) =>
30 |
32 | );
33 | },
34 | ],
35 | } as Meta;
36 |
37 | const Template: Story = (args) =>
27 |
29 | );
30 | },
31 | ],
32 | } as Meta;
33 |
34 | const Template: Story = (args) =>
18 |
20 | );
21 | },
22 | ],
23 | } as Meta;
24 |
25 | const Template: Story = (args) =>
19 |
21 | );
22 | },
23 | ],
24 | } as Meta;
25 |
26 | const Template: Story = (args) =>
19 |
21 | );
22 | },
23 | ],
24 | } as Meta;
25 |
26 | const Template: Story = (args) =>
18 |
20 | );
21 | },
22 | ],
23 | } as Meta;
24 |
25 | const Template: Story = (args) => cavas 공부의 결과물을 담습니다.
8 |
9 | - 대부분의 cavas 예제 코드는 김종민님의 튜토리얼 강의에서 가져왔습니다.
10 |
11 | - 예제 코드(JS)를 React로 컨버팅하면서, React에서 인터렉티브한 화면을 만들기 위한
12 | 고민을 추가하였고,
13 |
14 | - Typescript 적용을 통해 cavas의 인터페이스를 더 이해하기 위한 용도로 사용했습니다.
15 |
16 | 17 | 18 | ## 참고 자료 19 | 20 | - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations) 21 | 22 | - [sin, cos, radian에 대한 공부](https://code-masterjung.tistory.com/109) 23 | 24 | - 출처: [Interactive Developer](https://www.youtube.com/channel/UCdeWxKJuvtUG2xyN6pOJEvA) 25 | -------------------------------------------------------------------------------- /src/stories/canvasTutorial/RotatingPolygon.stories.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties } from 'react'; 2 | import { Meta, Story } from '@storybook/react'; 3 | import { RotatingPolygon } from '../../components'; 4 | 5 | export default { 6 | title: 'canvas-study/RotatingPolygon', 7 | component: RotatingPolygon, 8 | decorators: [ 9 | (Story) => { 10 | const style = { 11 | height: '100vh', 12 | width: '100%', 13 | overflow: 'hidden', 14 | background: '#fff', 15 | } as CSSProperties; 16 | 17 | return ( 18 |
19 |
21 | );
22 | },
23 | ],
24 | } as Meta;
25 |
26 | const Template: Story = (args) =>
19 |
21 | );
22 | },
23 | ],
24 | } as Meta;
25 |
26 | const Template: Story = (args) =>
21 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eaque nisi aliquid quisquam, quibusdam incidunt
22 | sint quis ad eos, atque, nesciunt ea! Earum pariatur ducimus beatae, consequatur quisquam dolore natus!
23 |