Merge pull request #16 from SkyLightQP/develop

refactor: redesign MainPage

.eslintrc.js

@@ -20,10 +20,12 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/function-component-definition': 'off',
     'react/jsx-no-useless-fragment': 'off',
+    'react/require-default-props': 'off',
 
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
 
     'prettier/prettier': 'error'
   }

package.json

@@ -15,12 +15,8 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.1.1",
     "@emotion/styled": "^11.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/third-parties": "^14.2.3",
+    "@remixicon/react": "^4.2.0",
     "@supabase/auth-helpers-nextjs": "^0.9.0",
     "@supabase/auth-helpers-react": "^0.4.2",
     "@supabase/supabase-js": "^2.39.7",

src/components/ContentView/DescriptionView/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+import styled from '@emotion/styled';
+
+interface DescriptionViewProps {
+  readonly description: string;
+}
+
+export const MarkdownWrapper = styled.div`
+  & li {
+    width: 630px;
+    font-size: 16px;
+    word-break: break-all;
+    padding-left: 12px;
+    text-indent: -12px;
+    list-style-type: none;
+    line-height: 1.6;
+
+    &::before {
+      content: '- ';
+    }
+
+    @media screen and (max-width: 700px) {
+      width: 300px;
+    }
+  }
+`;
+
+export const DescriptionView: FC<DescriptionViewProps> = ({ description }) => {
+  return (
+    <MarkdownWrapper>
+      <ReactMarkdown>{description}</ReactMarkdown>
+    </MarkdownWrapper>
+  );
+};

src/components/ContentView/ExternalLinkView/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import styled from '@emotion/styled';
+import { ExternalLink } from '../../Link/ExternalLink';
+import { SchemaType } from '../../../types/type-util';
+
+interface ExternalLinkViewProps {
+  readonly links: SchemaType<'links'>[];
+}
+
+const ExternalLinkGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  & > a {
+    margin-right: 6px;
+  }
+
+  & > a:last-child {
+    margin-right: 0;
+  }
+`;
+
+export const ExternalLinkView: FC<ExternalLinkViewProps> = ({ links }) => {
+  return (
+    <ExternalLinkGroup>
+      {links
+        .sort((a, b) => a.order - b.order)
+        .map((link) => (
+          <ExternalLink key={link.id} href={link.href}>
+            {link.name}
+          </ExternalLink>
+        ))}
+    </ExternalLinkGroup>
+  );
+};

src/components/ContentView/ImageView/index.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import styled from '@emotion/styled';
+import Image from 'next/image';
+import Breakpoint from '../../../styles/Breakpoint';
+
+interface ImageViewProps {
+  readonly urls: string[];
+}
+
+const ImageGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  & > img {
+    margin-right: 16px;
+  }
+
+  & > img:last-child {
+    margin-right: 0;
+  }
+
+  @media screen and (max-width: ${Breakpoint.MOBILE}) {
+    overflow-x: auto;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  width: auto;
+  height: 80px;
+  border-radius: 10px;
+`;
+
+export const ImageView: FC<ImageViewProps> = ({ urls }) => {
+  return (
+    <ImageGroup>
+      {urls.map((src) => (
+        <StyledImage key={src} src={src} alt="프로젝트 썸네일" width="147" height="80" />
+      ))}
+    </ImageGroup>
+  );
+};

src/components/Dialogs/LinkModal.tsx

@@ -16,13 +16,12 @@ import {
 } from '@chakra-ui/react';
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRight, faBars, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
-import VerticalGap from '../VerticalGap';
+import { RiArrowRightLine, RiDeleteBin2Line, RiMenuLine } from '@remixicon/react';
 import Colors from '../../styles/Colors';
 import { SchemaType } from '../../types/type-util';
 import { useSupabase } from '../../utils/supabase';
+import { Space } from '../Space';
 
 const LinkList = styled.div`
   display: flex;
@@ -155,13 +154,13 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
             <IconButton
               colorScheme="blue"
               aria-label="Add Link"
-              icon={<FontAwesomeIcon icon={faArrowRight} />}
+              icon={<RiArrowRightLine size={20} />}
               onClick={handleSubmit(onAddClick)}
             />
           </LinkRow>
-          <VerticalGap gap={10} />
+          <Space y={10} />
           <Divider />
-          <VerticalGap gap={10} />
+          <Space y={10} />
           <DragDropContext onDragEnd={onChangeData}>
             <Droppable droppableId="link-droppable">
               {(provided) => (
@@ -174,13 +173,13 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
                           {...innerProvided.draggableProps}
                           {...innerProvided.dragHandleProps}
                         >
-                          <FontAwesomeIcon icon={faBars} size="sm" color={Colors.BACKGROUND_DARK} />
+                          <RiMenuLine size={36} color={Colors.GRAY_DARKEN} />
                           <Input type="text" placeholder="제목" width={160} {...linkRegister(`link.${index}.name`)} />
                           <Input type="url" placeholder="링크" {...linkRegister(`link.${index}.href`)} />
                           <IconButton
                             colorScheme="red"
-                            aria-label="Add Link"
-                            icon={<FontAwesomeIcon icon={faTrash} />}
+                            aria-label="Delete Link"
+                            icon={<RiDeleteBin2Line size={20} />}
                             onClick={() => onDeleteClick(Number(link.id))}
                           />
                         </LinkRow>