Merge pull request #43 from Team-INSERT/layouts/emoticon

이모티콘 모달 추가
Team-INSERT · Aug 1, 2023 · a59803a · a59803a
2 parents 3d5ec27 + 3120113
commit a59803a
Show file tree

Hide file tree

Showing 40 changed files with 575 additions and 182 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ["bssm.kro.kr"],
+    domains: ["bssm.kro.kr", "discord.com"],
   },
 };
 

diff --git a/...orum-post/layouts/PostBody/CommentBox.tsx → src/components/atoms/CommentBox.tsx b/...orum-post/layouts/PostBody/CommentBox.tsx → src/components/atoms/CommentBox.tsx
@@ -1,20 +1,26 @@
 import color from "@/styles/color";
 import React from "react";
 import styled from "styled-components";
-import Emoji from "@/page/forum-post/assets/Emoji";
 import { font } from "@/styles/font";
+import Emoji from "@/global/assets/svgs/Emoji";
+import useEmoji from "@/hooks/useEmoji";
 import AnonymousBox from "@/components/atoms/AnonymousBox";
+import EmojiModal from "@/components/common/Modal/EmojiModal";
 
 const CommentBox = () => {
   const [isAnonymous, setIsAnonymous] = React.useState(false);
+  const { openEmoji, closeEmoji, visible } = useEmoji();
 
   return (
     <Container>
       <CommentCount>124</CommentCount>
       <CommentWriteBox>
         <CommentTextArea />
         <CommentToolBox>
-          <Emoji width={20} height={20} />
+          {visible && (
+            <EmojiModal onClose={closeEmoji} top="-24%" right="84%" />
+          )}
+          <Emoji onClick={openEmoji} />
           <AnonymousBox clicked={isAnonymous} setClicked={setIsAnonymous} />
           <CommentUploadButton />
         </CommentToolBox>
@@ -48,7 +54,7 @@ const CommentWriteBox = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 `;
 
 const CommentTextArea = styled.textarea`
@@ -64,11 +70,12 @@ const CommentToolBox = styled.div`
   gap: 16px;
   align-items: center;
   margin-left: auto;
+  position: relative;
 `;
 
 const CommentUploadButton = styled.button`
-  width: 70px;
-  height: 32px;
+  width: 60px;
+  height: 26px;
   background-color: ${color.primary_blue};
   color: white;
   border-radius: 3px;

diff --git a/src/components/atoms/CustomEditor.tsx b/src/components/atoms/CustomEditor.tsx
@@ -1,65 +1,79 @@
 import React from "react";
 import { Editor as TinymcEditor } from "@tinymce/tinymce-react";
 import { font } from "@/styles/font";
+import styled from "styled-components";
+import useEmoji from "@/hooks/useEmoji";
+import EmojiModal from "../common/Modal/EmojiModal";
+
+interface IBlobInfo {
+  id: () => string;
+  name: () => string;
+  filename: () => string;
+  blob: () => Blob;
+  base64: () => string;
+  blobUri: () => string;
+  uri: () => string | undefined;
+}
 
 const CustomEditor = () => {
   const [content, setContent] = React.useState("");
+  const { openEmoji, closeEmoji, visible } = useEmoji();
 
-  const imagesUploadHandler = async (blobInfo: any): Promise<string> => {
+  const imagesUploadHandler = async (blobInfo: IBlobInfo): Promise<string> => {
     return new Promise(() => {
       const file = new FormData();
       file.append("file", blobInfo.blob());
     });
   };
 
   return (
-    <TinymcEditor
-      init={{
-        language: "ko_KR",
-        height: "300px",
-        menubar: false,
-        content_css: "white",
-        plugins: [
-          "code",
-          "autolink",
-          "lists",
-          "link",
-          "image",
-          "charmap",
-          "preview",
-          "anchor",
-          "searchreplace",
-          "visualblocks",
-          "media",
-          "table",
-          "wordcount",
-          "codesample",
-        ],
-        toolbar:
-          "undo redo codesample | bold italic | alignleft alignright aligncenter alignjustify | emoticon image media | preview code",
-        codesample_global_prismjs: true,
-        setup: (tinymceEditor) => {
-          tinymceEditor.ui.registry.addButton("emoticon", {
-            text: "이모티콘",
-            onAction: () => {
-              console.log(1);
-              //   openModal("emoticon");
-            },
-          });
-        },
-        relative_urls: false,
-        convert_urls: false,
-        extended_valid_elements: "img[src|class|alt|e_id|e_idx|e_type]",
-        images_upload_handler: imagesUploadHandler,
-        init_instance_callback: (e) => {
-          const css = document.createElement("style");
-          css.innerHTML = StyledCSS;
-          e.contentDocument.head.appendChild(css);
-        },
-      }}
-      value={content}
-      onEditorChange={(props) => setContent(props)}
-    />
+    <Container>
+      {visible && <EmojiModal top="14%" left="54%" onClose={closeEmoji} />}
+      <TinymcEditor
+        init={{
+          language: "ko_KR",
+          height: "300px",
+          menubar: false,
+          content_css: "white",
+          plugins: [
+            "code",
+            "autolink",
+            "lists",
+            "link",
+            "image",
+            "charmap",
+            "preview",
+            "anchor",
+            "searchreplace",
+            "visualblocks",
+            "media",
+            "table",
+            "wordcount",
+            "codesample",
+          ],
+          toolbar:
+            "undo redo codesample | bold italic | alignleft alignright aligncenter alignjustify | emoticon image media | preview code",
+          codesample_global_prismjs: true,
+          setup: (tinymceEditor) => {
+            tinymceEditor.ui.registry.addButton("emoticon", {
+              icon: "emoji",
+              onAction: openEmoji,
+            });
+          },
+          relative_urls: false,
+          convert_urls: false,
+          extended_valid_elements: "img[src|class|alt|e_id|e_idx|e_type]",
+          images_upload_handler: imagesUploadHandler,
+          init_instance_callback: (e) => {
+            const css = document.createElement("style");
+            css.innerHTML = StyledCSS;
+            e.contentDocument.head.appendChild(css);
+          },
+        }}
+        value={content}
+        onEditorChange={(props) => setContent(props)}
+      />
+    </Container>
   );
 };
 
@@ -86,4 +100,8 @@ const StyledCSS = `
   }
 `;
 
+const Container = styled.div`
+  position: relative;
+`;
+
 export default CustomEditor;
diff --git a/src/components/common/Header/Navigation.tsx b/src/components/common/Header/Navigation.tsx
@@ -19,7 +19,7 @@ const navigations = [
   },
   {
     name: "일정표",
-    href: "/schedule",
+    href: "/calender",
   },
   {
     name: "게시판",

diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -32,6 +32,7 @@ const Layout = styled.div`
   align-items: center;
   background-color: ${color.white};
   border-bottom: 1px solid ${color.on_tertiary};
+  z-index: 4;
 `;
 
 const Container = styled.header`

diff --git a/src/components/common/Modal/EmojiModal/ModalHeader.tsx b/src/components/common/Modal/EmojiModal/ModalHeader.tsx
@@ -0,0 +1,47 @@
+import XIcon from "@/global/assets/svgs/XIcon";
+import HoldingBackTears from "@/global/assets/svgs/emojis/HoldingBackTears";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+interface IModalHeaderProps {
+  handleClickCloseButton: () => void;
+}
+
+const ModalHeader = ({ handleClickCloseButton }: IModalHeaderProps) => {
+  return (
+    <Container>
+      <HoldingBackTears width={14} height={14} isHover />
+      <Title />
+      <CloseButton onClick={handleClickCloseButton}>
+        <XIcon width={10} height={10} />
+      </CloseButton>
+    </Container>
+  );
+};
+
+const Container = styled.header`
+  width: 100%;
+  padding: 10px 0 10px 14px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+`;
+
+const Title = styled.span`
+  ${font.p3};
+  font-weight: 600;
+  color: ${color.black};
+
+  &:after {
+    content: "이모티콘";
+  }
+`;
+
+const CloseButton = styled.button`
+  margin: 0 20px 0 auto;
+`;
+
+export default ModalHeader;
diff --git a/src/components/common/Modal/EmojiModal/ModalList.tsx b/src/components/common/Modal/EmojiModal/ModalList.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components";
+import ModalListItem from "./ModalListItem";
+
+const ModalList = () => {
+  return (
+    <List>
+      {Array.from({ length: 4 }).map((_, i) => (
+        <ModalListItem key={i} />
+      ))}
+    </List>
+  );
+};
+
+const List = styled.div`
+  width: 100%;
+  height: 300px;
+  padding: 12px;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export default ModalList;
diff --git a/src/components/common/Modal/EmojiModal/ModalListItem.tsx b/src/components/common/Modal/EmojiModal/ModalListItem.tsx
@@ -0,0 +1,71 @@
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import Image from "next/image";
+import React from "react";
+import styled from "styled-components";
+
+const ModalListItem = () => {
+  return (
+    <ListItem>
+      <ListItemHead>
+        <ListItemImage
+          src="https://bssm.kro.kr/resource/board/emoticon/11/3.webp"
+          width={16}
+          height={16}
+          alt="emoji"
+        />
+        <ListItemTitle>동물티콘</ListItemTitle>
+      </ListItemHead>
+      <EmojiList>
+        {Array.from({ length: 13 }).map((_, i) => (
+          <EmojiListItem
+            key={i}
+            src={`https://bssm.kro.kr/resource/board/emoticon/3/${i}.png`}
+            alt="emoji"
+            width={50}
+            height={50}
+          />
+        ))}
+      </EmojiList>
+    </ListItem>
+  );
+};
+
+const ListItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const ListItemHead = styled.hgroup`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 3px;
+`;
+
+const ListItemTitle = styled.h1`
+  ${font.p3};
+`;
+
+const ListItemImage = styled(Image)`
+  border-radius: 4px;
+`;
+
+const EmojiList = styled.div`
+  width: 100%;
+  flex-wrap: wrap;
+`;
+
+const EmojiListItem = styled(Image)`
+  cursor: pointer;
+  padding: 1.5px 3px;
+
+  &:hover {
+    background-color: ${color.on_tertiary};
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+  }
+`;
+
+export default ModalListItem;