[revise]: revise animation & add code highlight

apps/pwrcode-backend/src/modules/search/controllers/documents/React/hooks.ts

@@ -10,13 +10,16 @@ export const hooks: DataProps = {
         - Hook을 사용하면 컴포넌트에서 다양한 React 기능을 사용 가능
             - 자신만의 Hook을 생성 가능 
 
-    1. State Hooks
-    
-    - 상태를 통해 컴포넌트는 사용자 입력과 같은 정보를 "기억"할 수 있습니다.
-    
-    - "useState" : 직접 업데이트할 수 있는 상태 변수를 선언
-    
-    - "useReducer" : 리듀서 함수 내부의 업데이트 논리를 사용해 상태 변수를 선언
-    
+\`\`\`javascript
+const div = 'test'
+\`\`\`
+
+1. State Hooks  tt
+
+- 상태를 통해 컴포넌트는 사용자 입력과 같은 정보를 "기억"할 수 있습니다.
+
+- "useState" : 직접 업데이트할 수 있는 상태 변수를 선언
+
+- "useReducer" : 리듀서 함수 내부의 업데이트 논리를 사용해 상태 변수를 선언
     `,
 };

apps/pwrcode-backend/src/modules/search/dto/search-article.dto.ts

@@ -4,7 +4,7 @@ import { IsNotEmpty, Length } from 'class-validator';
 export class SearchArticleDto {
   @ApiProperty({
     description: '???',
-    example: 'TEst',
+    example: '내장',
   })
   @IsNotEmpty()
   @Length(2, 255)

apps/pwrcode-frontend/app/design/atoms/Form/Form.stories.tsx

@@ -25,7 +25,8 @@ export const SkillForm: Story = {
     placeholder: 'Skills',
     appearance: 'none',
     background: '#fff',
-    border: '1px solid #c2d1d9',
+    border: '3px solid #c2d1d9',
+    borderRadius: '10px',
     color: 'black',
   },
 };
@@ -35,6 +36,7 @@ export const KeyWordForm: Story = {
     placeholder: 'type keyword...',
     appearance: 'none',
     background: '#fff',
+    fontFamily: 'Ubuntu',
     border: '1px solid #c2d1d9',
     color: 'black',
   },
@@ -46,6 +48,7 @@ export const SearchKeyWordForm: Story = {
     appearance: 'none',
     background: '#fff',
     border: '1px solid #c2d1d9',
+    fontFamily: 'Ubuntu',
     width: '10vmax',
     color: 'black',
   },

apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx

@@ -7,6 +7,8 @@ import { useAtom } from 'jotai';
 export interface FormProps {
   placeholder: string;
   border?: string;
+  fontFamily?: string;
+  borderRadius?: string;
   appearance?: string;
   background?: string;
   color?: string;
@@ -25,7 +27,7 @@ export function SearchForm(props: FormProps) {
       {...props}
       value={keyword.keyword}
       onChange={(e) => {
-        setKeyword({ keyword: e.target.value });
+        setKeyword({ ...keyword, keyword: e.target.value });
       }}
     />
   );
@@ -37,6 +39,8 @@ const Component = styled.input<FormProps>`
   background: ${(props) => props.background};
   border: ${(props) => props.border};
   color: ${(props) => props.color};
+  border-radius: ${(props) => props.borderRadius};
+  font-family: ${(props) => props.fontFamily};
   padding: 10px 20px;
   &::placeholder {
     color: #c2d1d9;

apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx

@@ -5,7 +5,7 @@ import Markdown from 'react-markdown';
 import React from 'react';
 import remarkMdx from 'remark-mdx';
 import remarkBreaks from 'remark-breaks';
-import Image from 'next/image';
+import Editor from '@monaco-editor/react';
 
 export interface TextAreaProps {
   fontFamily: string;
@@ -55,10 +55,11 @@ export function TextArea(props: TextAreaProps) {
         components={{
           img(props) {
             const { src, ...rest } = props;
-            return <img 
-              src={src}
-              width={'100vw'}
-            {...rest} />;
+            return <img src={src} width={'100vw'} {...rest} />;
+          },
+          code(props) {
+            const { children, className, node, ...rest } = props;
+            return <Editor defaultValue={String(children)} />;
           },
         }}
         remarkPlugins={[remarkMdx, remarkBreaks]}

apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx

@@ -39,10 +39,10 @@ export const MainCard: Story = {
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '30vmax',
-    height: '50vmax',
+    height: '50vmin',
     border: '10px solid rgba(176, 166, 149, 0.50)',
-    padding: '1.19rem 1.75rem 3.25rem 1.75rem',
-    animation: '15s linear 1s infinite running slideintest',
+    // padding: '1.19rem 1.75rem 3.25rem 1.75rem',
+    // animation: '15s linear 1s infinite running slideintest',
     background: '#F2F5F7',
     children: (
       <>
@@ -75,8 +75,7 @@ export const SearchCardStory: Story = {
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '75vmax',
-    height: '50vmax',
-    gap: '10px',
+    height: '85vmin',
     border: '10px solid rgba(176, 166, 149, 0.50)',
     // padding: '1.19rem 0 3.25rem 0',
     background: '#F2F5F7',

apps/pwrcode-frontend/app/design/molecules/Card/Card.tsx

@@ -23,7 +23,6 @@ export interface CardProps extends PropsWithChildren {
 }
 
 export function Card(props: CardProps) {
-
   return (
     <Component
       width={props.width}

apps/pwrcode-frontend/app/design/molecules/DropDown/DropDown.stories.tsx

@@ -32,7 +32,9 @@ export const MainDropDown: Story = {
   args: {
     appearance: 'none',
     background: '#fff',
-    border: '1px solid #c2d1d9',
+    border: '3px solid #c2d1d9',
+    borderRadius: '10px',
+    fontFamily: 'Ubuntu',
     color: 'black',
     data: [
       { value: 'React', name: 'React' },
@@ -46,9 +48,13 @@ export const SelectDropDown: Story = {
   args: {
     appearance: 'none',
     background: '#fff',
-    border: '1px solid #c2d1d9',
+    border: '3px solid #c2d1d9',
+    borderRadius: '10px',
     color: 'black',
     width: '10vmax',
+    height: '10vmin',
+    fontFamily: 'Ubuntu',
+    fontSize: '1.2rem',
     data: [
       { value: 'React', name: 'React' },
       { value: 'Vue', name: 'Vue' },

apps/pwrcode-frontend/app/design/molecules/DropDown/DropDown.tsx

@@ -2,6 +2,8 @@
 import { FunctionComponent, ReactElement, PropsWithChildren } from 'react';
 import React from 'react';
 import styled from '@emotion/styled';
+import { useAtom } from 'jotai';
+import { searchKeywordAtom } from '@/app/state';
 
 interface DropDownDataObj {
   value: string;
@@ -11,10 +13,14 @@ interface DropDownProps extends PropsWithChildren {
   data?: DropDownDataObj[];
   placeholder?: string;
   width?: string;
+  height?: string;
   border?: string;
+  borderRadius?: string;
   appearance?: string;
   background?: string;
+  fontFamily?: string;
   color?: string;
+  fontSize?: string;
 }
 
 export function DropDown(props: DropDownProps) {
@@ -28,13 +34,26 @@ export function DropDown(props: DropDownProps) {
     },
   );
 
+  const [keyword, setKeyword] = useAtom(searchKeywordAtom);
+
   return (
     <Component
       width={props.width}
+      height={props.height}
       appearance={props.appearance}
       background={props.background}
       border={props.border}
+      borderRadius={props.borderRadius}
       color={props.color}
+      fontSize={props.fontSize}
+      fontFamily={props.fontFamily}
+      value={keyword.skill}
+      onChange={(e) => {
+        setKeyword({
+          ...keyword,
+          skill: e.target.value,
+        });
+      }}
     >
       {optionsList}
     </Component>
@@ -43,13 +62,16 @@ export function DropDown(props: DropDownProps) {
 
 const Component = styled.select<DropDownProps>`
   width: ${(props) => props.width};
-
+  height: ${(props) => props.height};
   & select {
     appearance: ${(props) => props.appearance};
   }
   background: ${(props) => props.background};
   border: ${(props) => props.border};
+  border-radius: ${(props) => props.borderRadius};
   color: ${(props) => props.color};
+  font-size: ${(props) => props.fontSize};
+  font-family: ${(props) => props.fontFamily};
   padding: 10px 20px;
   &::placeholder {
     color: #c2d1d9;
@@ -63,6 +85,7 @@ const Component = styled.select<DropDownProps>`
   &:focus {
     outline: 1px solid black;
   }
+  cursor: pointer;
 `;
 
 const OptionComponent = styled.option``;

apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx

@@ -38,6 +38,8 @@ export const MainCardGroup: Story = {
     // primary: true,
     width: '35vmax',
     padding: '1.17rem',
+    justifyContent: 'center',
+    alignItems: 'center',
     children: (
       <>
         <CardGroupMainDataServerComponent />
@@ -51,6 +53,7 @@ export const SearchCardGroupStory: Story = {
     width: '80vmax',
     justifyContent: 'stretch',
     alignItems: 'center',
+    gap: '10px',
     padding: '6.03vmax 1.158vmax 10px 1.158vmax',
     overflow: 'scroll',
     children: <CardGroupSearchDataServerComponent />,

apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx

@@ -25,6 +25,7 @@ export interface CardGroupProps extends PropsWithChildren {
   justifyContent?: string;
   alignItems?: string;
   data?: ResponseBodyProps;
+  gap?: string;
 }
 
 export function CardGroup(props: CardGroupProps) {
@@ -38,6 +39,7 @@ export function CardGroup(props: CardGroupProps) {
       zIndex={props.zIndex}
       justifyContent={props.justifyContent}
       alignItems={props.alignItems}
+      gap={props.gap}
     >
       {props.children}
     </Component>
@@ -49,9 +51,9 @@ const Component = styled.div<CardGroupProps>`
   width: ${(props) => props.width};
   height: ${(props) => props.height};
   flex-direction: column;
+  gap: ${(props) => props.gap};
   padding: ${(props) => props.padding};
   animation: ${(props) => props.animation};
-  gap: 10px;
   z-index: ${(props) => props.zIndex};
   overflow: ${(props) => props.overflow};
   justify-content: ${(props) => props.justifyContent};

apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx

@@ -1,6 +1,7 @@
 'use client';
+import styled from '@emotion/styled';
 
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { Text } from '../../atoms/Text/Text';
 import { CustomLink } from '../../atoms/Link/Link';
 
@@ -32,7 +33,7 @@ import {
 } from '@tanstack/react-query';
 import { atomsWithQuery } from 'jotai-tanstack-query';
 
-// import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 async function getCardData() {
   const response = await fetch('http://localhost:4000/search', {
@@ -106,6 +107,31 @@ export function CardGroupDataServerComponent(
   );
 }
 
+const StyledMainComponent = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  /* animation: 30s fadein 1s infinite running slideintest; */
+  /* &:hover {
+    animation-play-state: paused;
+  } */
+  & > div {
+    /* transform: translate(100vmin, 0px); */
+    /* animation: 5s ease-in infinite normal forwards slidein; */
+    position: absolute;
+    height: 75vmin;
+  }
+`;
+
+const variants = {
+  open: { x: 0, y: 0, zIndex: 3 },
+  closed: { x: '1vmax', y: '1vmax', zIndex: 2 },
+  boxed: { x: '0vw', y: '70vh', zIndex: 1 },
+};
+
 export function CardGroupMainDataServerComponent(
   props: CardDataServerComponentProps,
 ) {
@@ -124,18 +150,38 @@ export function CardGroupMainDataServerComponent(
     throw new Error('Failed to fetch');
   }
 
+  const [cardsState, setCardsState] = useState([1, 0, -1]);
+
   return (
-    <>
-      {data?.hits?.map((item) => {
+    <StyledMainComponent>
+      {data?.hits?.map((item, index) => {
         return (
-          <Card {...MainCard.args} data={item}>
-            <Text {...ReactText.args} text={item.title} />
-            <TextArea {...SearchTextArea.args} text={item.content} />
-            <CustomLink {...MainLink.args} href={item.link} />
-          </Card>
+          <motion.div
+            variants={variants}
+            transition={{ type: 'spring', stiffness: 100 }}
+            onClick={() => {
+              const copyArr = new Array(3).fill(-1);
+              copyArr[index] = 1;
+              copyArr[(index + 1) % copyArr.length] = 0;
+              setCardsState(copyArr);
+            }}
+            animate={
+              cardsState[index] === 1
+                ? 'open'
+                : cardsState[index] === 0
+                ? 'closed'
+                : 'boxed'
+            }
+          >
+            <Card {...MainCard.args} data={item}>
+              <Text {...ReactText.args} text={item.title} />
+              <TextArea {...SearchTextArea.args} text={item.content} />
+              <CustomLink {...MainLink.args} href={item.link} />
+            </Card>
+          </motion.div>
         );
       })}
-    </>
+    </StyledMainComponent>
   );
 }