Feature/api client

.vscode/settings.json

@@ -1,4 +1,37 @@
 {
+  "workbench.iconTheme": "material-icon-theme",
+  "workbench.colorTheme": "Palenight Italic",
+  "terminal.integrated.fontFamily": "D2Coding",
+  "gitlens.defaultDateFormat": null,
+  "editor.bracketPairColorization.enabled": true,
+  "javascript.format.enable": false,
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.fontSize": 18,
+  "editor.inlineSuggest.enabled": true,
+  "github.copilot.enable": {
+    "*": true,
+    "yaml": false,
+    "plaintext": false,
+    "markdown": true
+  },
+  "svelte.enable-ts-plugin": true,
+  "powermode.shake.enabled": false,
+  "powermode.presets": "magic",
+  "window.zoomLevel": 0,
+  "liveServer.settings.donotShowInfoMsg": true,
+  "javascript.updateImportsOnFileMove.enabled": "never",
   "search.exclude": {
     "**/.yarn": true,
     "**/.pnp.*": true

.yarnrc.yml

@@ -3,3 +3,7 @@ plugins:
     spec: "@yarnpkg/plugin-typescript"
 
 yarnPath: .yarn/releases/yarn-3.2.0.cjs
+packageExtensions:
+  '@toast-ui/editor@*':
+    dependencies:
+      prosemirror-transform: '*'

package.json

@@ -13,7 +13,9 @@
     "@emotion/react": "^11.8.2",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
-    "@toast-ui/react-editor": "^3.1.3",
+    "@toast-ui/editor": "^3.1.7",
+    "@toast-ui/react-editor": "^3.1.7",
+    "axios": "^0.27.2",
     "next": "12.1.0",
     "next-images": "^1.8.4",
     "react": "17.0.2",

src/api/Api.ts

@@ -0,0 +1,10 @@
+import { apiClient } from "../utils/apiClient";
+
+export const getBoardItem = async () => {
+  try{
+    const { data } = await apiClient.get('https://gcinside.herokuapp.com/gallery')
+    return { data };
+  } catch (e: any){
+    console.log(e);
+  }
+}

src/components/Board/Board.tsx

@@ -1,138 +1,48 @@
-import BoardItem from '../BoardItem/BoardItem'
-import * as S from './Style'
+import BoardItem from '../BoardItem/BoardItem';
+import * as S from './Style';
 import * as I from '../../Assets/index';
+import { useEffect, useState } from 'react';
+import { getBoardItem } from '@/src/api/Api';
 
 export const DummyData = [
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },      
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },  
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },
-        {
-            id: 5,
-            image: 'img_url',
-            title: '게시글 이름',
-            name: '닉네임',
-            date: '2022.03.29',
-            like: 5,
-        },    
-]
+  {
+    id: 1,
+    image: 'img_url',
+    name: 'GSM 갤러리',
+    description: 'GSM갤러리입니다.',
+  },
+  {
+    id: 2,
+    image: 'img_url',
+    name: '테스트 갤러리',
+    description: '테스트 갤러리 입니다.',
+  },
+];
 
 const Board = () => {
-    return(
-        <S.Positioner>
-                {DummyData && DummyData.map((item, idx) => {
-                    return(
-                        <S.BoardContainer key={item.id}>
-                            <BoardItem 
-                                id={item.id}
-                                title={item.title}
-                                name={item.name}
-                                date={item.date}
-                                like={item.like}
-                                image={item.image === 'img_url' ? <I.NotFoundImg /> : 'IMG'}
-                            />
-                        </S.BoardContainer>
-                    )}
-                )}
-        </S.Positioner>
-    )
-}
+  const [galleryList, setGalleryList] = useState([]);
+  useEffect(() => {
+    getBoardItem().then(res => {
+      res && setGalleryList(res.data.gallery_list);
+    });
+  }, []);
+  return (
+    <S.Positioner>
+      {DummyData &&
+        DummyData.map((item, idx) => {
+          return (
+            <S.BoardContainer key={item.id}>
+              <BoardItem
+                id={item.id}
+                description={item.description}
+                name={item.name}
+                image={item.image === 'img_url' ? <I.NotFoundImg /> : 'IMG'}
+              />
+            </S.BoardContainer>
+          );
+        })}
+    </S.Positioner>
+  );
+};
 
-export default Board;
+export default Board;

src/components/BoardItem/BoardItem.tsx

@@ -2,37 +2,27 @@
 import * as S from './Style';
 
 interface BoardItemProps {
-    id: number;
-    title: string;
-    name: string;
-    date: string;
-    like: number;
-    image: any;
+  id: number;
+  name: string;
+  description: string;
+  image: any;
 }
 
-const BoardItem:React.FC<BoardItemProps> = ({
-    id,
-    title,
-    name,
-    date,
-    like,
-    image
+const BoardItem: React.FC<BoardItemProps> = ({
+  id,
+  name,
+  description,
+  image,
 }) => {
-
-    return(
-        <S.DummyContainer key={id}>
-            <S.ImageBox>{image}</S.ImageBox>
-            <S.Wrapper>
-                <S.TitleWrapper>{title}</S.TitleWrapper>
-                <S.SecondWrapper>
-                    <S.NameWrapper>{name}</S.NameWrapper>
-                    {date}
-                </S.SecondWrapper>
-            </S.Wrapper>
-            <S.LikeWrapper>{like}K</S.LikeWrapper>
-    </S.DummyContainer>  
-    )
+  return (
+    <S.DummyContainer key={id}>
+      <S.ImageBox>{image}</S.ImageBox>
+      <S.Wrapper>
+        <S.TitleWrapper>{name}</S.TitleWrapper>
+        <S.SecondWrapper>{description}</S.SecondWrapper>
+      </S.Wrapper>
+    </S.DummyContainer>
+  );
+};
 
-}
-
-export default BoardItem;
+export default BoardItem;

src/components/Profile/Profile.tsx

@@ -3,22 +3,22 @@ import * as I from '../../Assets/index';
 import Link from 'next/link';
 
 const Profile = () => {
-    return(
-        <S.Positioner>
-            <S.ImgWrapper>
-                <I.ProfileImg />
-                <Link href="/Setting">
-                    <S.IconWrapper>
-                        <I.Setting />
-                    </S.IconWrapper>
-                </Link>
-            </S.ImgWrapper>
-            <S.UserInfo>
-                <S.NameWrapper>닉네임</S.NameWrapper>
-                <S.EmailWrapper>s00000@gsm.hs.kr</S.EmailWrapper>
-            </S.UserInfo>
-        </S.Positioner>
-    )
-}
+  return (
+    <S.Positioner>
+      <S.ImgWrapper>
+        <I.ProfileImg />
+        <Link href="/setting">
+          <S.IconWrapper>
+            <I.Setting />
+          </S.IconWrapper>
+        </Link>
+      </S.ImgWrapper>
+      <S.UserInfo>
+        <S.NameWrapper>닉네임</S.NameWrapper>
+        <S.EmailWrapper>s00000@gsm.hs.kr</S.EmailWrapper>
+      </S.UserInfo>
+    </S.Positioner>
+  );
+};
 
-export default Profile;
+export default Profile;