remove: remove previous components, containers, pages

src/component/About.jsx

@@ -1,15 +1,8 @@
 import React from 'react';
-
 import styled from '@emotion/styled';
 
-import Header from './about/Header';
-import Genre from './about/Genre';
-import Debut from './about/Debut';
-import Wiki from './about/Wiki';
-import Social from './about/Social';
-
-import { entImages, GidleGroupImage } from '../assets/images';
-import MemberList from './MemberList';
+import about from '/public/about.json';
+import GidleGroupImage from '/public/images/member-banner.png';
 
 const Container = styled.div({
   display: 'flex',
@@ -21,34 +14,53 @@ const Container = styled.div({
   justifyContent: 'space-around',
 });
 
-const GroupImage = styled.img({
-  display: 'block',
-  width: '100%',
-  margin: '1em',
-  border: 0,
-});
+const GroupImage = styled.img(
+  {
+    display: 'block',
+    width: '100%',
+    margin: '1em',
+    border: 0,
+  },
+  props => ({
+    src: props.src,
+    alt: props.alt,
+  })
+);
 
-export default function About({ about, members, handleClick }) {
+export default function About({ handleClick }) {
   const {
-    name,
-    debutDate,
-    genres,
-    wiki,
-    social,
+    group: {
+      name: {
+        kor: groupKorName,
+        eng: groupEngNAme,
+      },
+      members: members
+    },
+    debutDate: debutDate,
+    officialColor: officialColor,
+    company: company,
+    Distributions: Distributions,
+    links: links
   } = about;
 
+  const memberList = members.map((member) => {
+    return {
+      name: {
+        kor: member.name.kor,
+        eng: member.name.eng
+      },
+      birthday: member.birthday,
+      imgPath: member.imgPath,
+      sns: member.sns,
+    }
+  })
+
   return (
     <Container>
       <GroupImage
         src={GidleGroupImage}
         alt={`${name.kor} 사진`}
       />
-      <Header name={name} />
-      <Genre genres={genres} />
-      <Debut debutDate={debutDate} />
-      <MemberList members={members} handleClick={handleClick} />
-      <Wiki wiki={wiki} />
-      <Social social={social} />
     </Container>
   );
 }

src/component/AlbumList.jsx

@@ -2,33 +2,21 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
-import KorAlbumList from './albumList/KorAlbumList';
-import EtcAlbumList from './albumList/EtcAlbumList';
-
 const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
 });
 
 export default function AlbumList({
-  korMiniAlbums,
-  korSingles,
-  korDigitalSingles,
-  etcAlbums,
+  albums,
   handleClick,
 }) {
+
   return (
     <Container>
-      <KorAlbumList
-        korMiniAlbums={korMiniAlbums}
-        korSingles={korSingles}
-        korDigitalSingles={korDigitalSingles}
-        handleClick={handleClick}
-      />
-      <EtcAlbumList
-        etcAlbums={etcAlbums}
-        handleClick={handleClick}
-      />
+      {albums.map((album) => (
+        <Album album={album}/>
+      ))}
     </Container>
   );
 }

src/component/Home.jsx

@@ -9,15 +9,13 @@ const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  // height: '100vh',
   height: '100%',
   padding: '2em',
   alignItems: 'center',
   justifyContent: 'space-around',
   backgroundImage: `linear-gradient(
-    60deg,
-    #E11900,
-    #7E00BF
+    #e11900,
+    #7e00bf
   )`,
   backgroundAttachment: 'fixed',
 });

src/component/MemberDetail.jsx

@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import Name from './memberDetail/Name';
 import Roles from './memberDetail/Roles';
 
-import { membersImages } from '../assets/images';
 import Birthday from './memberDetail/Birthday';
 
 const Container = styled.div({

src/component/about/GroupImage.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styled from '@emotion/styled';
+
+export default GroupImage = styled.img(
+  {
+    display: 'block',
+    width: '100%',
+    margin: '1em',
+    border: 0,
+  },
+  props => ({
+    src: props.src,
+    alt: props.alt,
+  })
+)
+

src/component/about/Header.jsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import GroupName from './GroupName';
 
-import { GidleLogoImage } from '../../assets/images';
+// import { GidleLogoImage } from '../../assets/images';
 
 const HeaderLayout = styled.div({
   display: 'flex',
@@ -19,14 +19,20 @@ const GroupIcon = styled.img({
 });
 
 export default function Header({ name }) {
+  // return (
+  //   <HeaderLayout>
+  //     <GroupIcon
+  //       src={GidleLogoImage}
+  //       alt={`${name.kor} 로고`}
+  //     />
+  //     <hr height="3em" width="0em" />
+  //     <GroupName name={name} />
+  //   </HeaderLayout>
+  // );
+
   return (
     <HeaderLayout>
-      <GroupIcon
-        src={GidleLogoImage}
-        alt={`${name.kor} 로고`}
-      />
-      <hr height="3em" width="0em" />
-      <GroupName name={name} />
+      asdf
     </HeaderLayout>
-  );
+  )
 }

src/component/about/Social.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
-import { socialImages } from '../../assets/images';
+// import { socialImages } from '../../assets/images';
 
 const Container = styled.div({
   display: 'flex',

src/component/about/Wiki.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
-import {
-  NamuwikiLogoImage,
-  WikipediaLogoImage,
-} from '../../assets/images';
+// import {
+//   NamuwikiLogoImage,
+//   WikipediaLogoImage,
+// } from '../../assets/images';
 
 const WikiLayout = styled.div({
   display: 'flex',

src/component/albumList/Album.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import path from 'path';
+
+const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export default function Album({ album }) {
+  const src = path.join(process.cwd(), 'public/images/albums', album.filename);
+  return (
+    <Container>
+      <img src={album.fileName} alt={album.title} />
+    </Container>
+  );
+}