[revise]: revise fetch function & data codes refactoring

apps/pwrcode-backend/src/main.ts

@@ -4,7 +4,7 @@ import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
-
+  app.enableCors();
   const config = new DocumentBuilder()
     .setTitle('Test Example')
     .setDescription('Hojeong API description')

apps/pwrcode-backend/src/modules/search/controllers/documents/React/extracting-state-logic-into-a-reducer.ts

@@ -0,0 +1,9 @@
+import { DataProps } from '../common/interface';
+
+export const extracting_state_logic_into_a_reducer: DataProps = {
+  title: '상태 로직을 리듀서로 추출',
+  kind: 'react',
+  type: 'info',
+  link: 'https://react.dev/learn/extracting-state-logic-into-a-reducer',
+  content: '',
+};

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

@@ -0,0 +1,24 @@
+import { DataProps } from '../common/interface';
+
+export const hooks: DataProps = {
+  title: '내장 React Hooks',
+  kind: 'react',
+  type: 'info',
+  link: 'https://react.dev/reference/react/hooks',
+  content: `
+    - 내장 React Hooks
+        - Hook을 사용하면 컴포넌트에서 다양한 React 기능을 사용 가능
+            - 자신만의 Hook을 생성 가능 
+    
+    1. State Hooks
+    
+    - 상태를 통해 컴포넌트는 사용자 입력과 같은 정보를 "기억"할 수 있습니다.
+    
+    - "useState" : 직접 업데이트할 수 있는 상태 변수를 선언
+    
+    - "useReducer" : 리듀서 함수 내부의 업데이트 논리를 사용해 상태 변수를 선언
+    
+    2. 
+    
+    `,
+};

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

@@ -0,0 +1,3 @@
+export * from './extracting-state-logic-into-a-reducer';
+export * from './hooks';
+export * from './state-a-components-memory';

apps/pwrcode-backend/src/modules/search/controllers/documents/React/state-a-components-memory.ts

@@ -0,0 +1,33 @@
+import { DataProps } from '../common/interface';
+
+export const state_a_components_memory: DataProps = {
+  title: '상태: 컴포넌트의 메모리',
+  kind: 'react',
+  type: 'info',
+  link: 'https://react.dev/learn/state-a-components-memory',
+  content: `
+
+  컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많음 
+  
+  React에서는 컴포넌트 별로 가지고 있는 메모리를 상태라고 함
+  
+  ### 일반 변수로는 충분하지 않음 
+  
+  1. 지역 변수는 렌더링 간에 유지되지 않음 
+  
+    - React가 이 컴포넌트를 두 번째로 렌더링 시에, 처음부터 렌더링함
+  
+    - 즉, 지역 변수에 대한 변경 사항을 고려하지 않음 
+  
+  2. 지역 변수를 변경해도 렌더링이 트리거되지 않음 
+  
+    - React는 새 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못함
+  
+  새 데이터로 컴포넌트를 업데이트하려면, 다음 두 가지 작업이 수행되어야 함 
+  
+  1. 렌더링 간에 데이터를 유지
+  
+  2. React를 트리거하여 새 데이터로 컴포넌트를 렌더링함(리렌더링)
+
+  `,
+};

apps/pwrcode-backend/src/modules/search/controllers/documents/common/interface.ts

@@ -0,0 +1,20 @@
+import * as ReactData from '../React';
+
+export interface DataProps {
+  id?: number;
+  title: string;
+  kind: string;
+  type: string;
+  link: string;
+  content?: string;
+}
+
+export const mappingData = Object.values(ReactData).map(
+  (data: DataProps, index: number) => {
+    const newData = {
+      ...data,
+    };
+    newData.id = index + 1;
+    return newData;
+  },
+);

apps/pwrcode-backend/src/modules/search/controllers/search.controller.ts

@@ -2,7 +2,7 @@ import { Body, Controller, Get, Post } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { SearchService } from '../search.service';
 import { SearchArticleDto } from '../dto/search-article.dto';
-import { data } from './documents/data';
+import { mappingData } from './documents/common/interface';
 
 @ApiTags('Search')
 @Controller('search')
@@ -11,7 +11,7 @@ export class SearchController {
 
   @Get('/')
   public async getSearch(): Promise<void> {
-    const resp = await this.searchService.addDocuments(data);
+    const resp = await this.searchService.addDocuments(mappingData);
 
     console.log(resp);
   }

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

@@ -3,6 +3,8 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import { useAtom } from 'jotai';
+import { searchKeywordAtom } from '@/app/state';
 
 export interface ButtonProps {
   fontFamily?: string;
@@ -27,6 +29,25 @@ export function Button(props: ButtonProps) {
   );
 }
 
+export function SearchButton(props: ButtonProps) {
+  const router = useRouter();
+
+  // const [keyword, setKeyword] = useAtom(searchKeywordAtom);
+
+  return (
+    <Component
+      onClick={() => {
+        // setKeyword({ keyword: e.target.value });
+
+        router.push(`/${props.path}`);
+      }}
+      {...props}
+    >
+      {props.text}
+    </Component>
+  );
+}
+
 const Component = styled.button<ButtonProps>`
   text-align: ${(props) => props.textAlign};
   font-family: ${(props) => props.fontFamily};

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

@@ -1,6 +1,8 @@
 'use client';
 import React from 'react';
 import styled from '@emotion/styled';
+import { searchKeywordAtom, testAtom } from '@/app/state';
+import { useAtom } from 'jotai';
 
 export interface FormProps {
   placeholder: string;
@@ -14,6 +16,20 @@ export interface FormProps {
 export function Form(props: FormProps) {
   return <Component {...props} />;
 }
+
+export function SearchForm(props: FormProps) {
+  const [keyword, setKeyword] = useAtom(searchKeywordAtom);
+
+  return (
+    <Component
+      {...props}
+      onChange={(e) => {
+        setKeyword({ keyword: e.target.value });
+      }}
+    />
+  );
+}
+
 const Component = styled.input<FormProps>`
   width: ${(props) => props.width};
   appearance: ${(props) => props.appearance};

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

@@ -1,9 +1,9 @@
 'use client';
 
 import styled from '@emotion/styled';
-import React from 'react';
-import remarkGfm from 'remark-gfm';
 import Markdown from 'react-markdown';
+import React from 'react';
+
 export interface TextAreaProps {
   fontFamily: string;
   text?: string;
@@ -48,12 +48,12 @@ export function TextArea(props: TextAreaProps) {
       gap={props.gap}
       gridAutoFlow={props.gridAutoFlow}
     >
-      <Markdown remarkPlugins={[remarkGfm]}>{props.text}</Markdown>
+      <Markdown>{props.text}</Markdown>
     </Component>
   );
 }
 
-const Component = styled.pre<TextAreaProps>`
+const Component = styled.div<TextAreaProps>`
   font-family: ${(props) => props.fontFamily};
   font-style: ${(props) => props.fontStyle};
   font-weight: ${(props) => props.fontWeight};
@@ -71,5 +71,5 @@ const Component = styled.pre<TextAreaProps>`
   align-self: ${(props) => props.alignSelf};
   grid-template-columns: ${(props) => props.gridTemplateColumns};
   gap: ${(props) => props.gap};
-  grid-auto-flow: ${props => props.gridAutoFlow};
+  grid-auto-flow: ${(props) => props.gridAutoFlow};
 `;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Box } from './Box';
 import { Text } from '../../atoms/Text/Text';
-import { Form } from '../../atoms/Form/Form';
+import { Form, SearchForm } from '../../atoms/Form/Form';
 import {
   KeyWordForm,
   SearchKeyWordForm,
@@ -55,7 +55,7 @@ export const MainBottomBox: Story = {
     flexDirection: 'row',
     children: (
       <>
-        <Form {...KeyWordForm.args} />
+        <SearchForm {...KeyWordForm.args} />
         <Button {...MainFormButton.args} />
       </>
     ),
@@ -91,7 +91,7 @@ export const SearchBottomBox: Story = {
     width: '10vmax',
     children: (
       <>
-        <Form {...SearchKeyWordForm.args} />
+        <SearchForm {...SearchKeyWordForm.args} />
       </>
     ),
   },

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

@@ -33,6 +33,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const MainCard: Story = {
   args: {
+    display: 'flex',
     flexShrink: '0',
     flexDirection: 'column',
     justifyContent: 'space-between',

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

@@ -2,9 +2,6 @@
 import { FunctionComponent, ReactElement, PropsWithChildren } from 'react';
 import React from 'react';
 import styled from '@emotion/styled';
-import { useHydrateAtoms } from 'jotai/utils';
-import { atom, useAtom } from 'jotai';
-import { articleAtom } from '@/app/state';
 
 export interface CardProps extends PropsWithChildren {
   children?: ReactElement[] | ReactElement;
@@ -26,8 +23,6 @@ export interface CardProps extends PropsWithChildren {
 }
 
 export function Card(props: CardProps) {
-  // useHydrateAtoms([[articleAtom, props.data]]);
-  // const [item] = useAtom(articleAtom);
 
   return (
     <Component

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

@@ -4,6 +4,7 @@ import { CardGroup } from './CardGroup';
 import { Card } from '../../molecules/Card/Card';
 import {
   CardGroupDataServerComponent,
+  CardGroupMainDataServerComponent,
   CardGroupSearchDataServerComponent,
 } from './CardGroupDataComponent.server';
 import {
@@ -39,17 +40,15 @@ export const MainCardGroup: Story = {
     padding: '1.17rem',
     children: (
       <>
-        <Card {...MainCard.args} />
-        <Card {...MainCard.args} />
+        <CardGroupMainDataServerComponent />
       </>
     ),
   },
 };
 
-export const SearchCardGroup: Story = {
+export const SearchCardGroupStory: Story = {
   args: {
     width: '80vmax',
-    height: '100vmax',
     justifyContent: 'stretch',
     alignItems: 'center',
     padding: '6.03vmax 1.158vmax 1.158vmax 1.158vmax',