style: Render Suggestion 스타일링

sopt-makers · Jul 1, 2024 · 7a69ecb · 7a69ecb
1 parent b72294c
commit 7a69ecb
Show file tree

Hide file tree

Showing 2 changed files with 179 additions and 27 deletions.
diff --git a/src/components/feed/FeedCommentInput/FeedCommentInput.stories.ts b/src/components/feed/FeedCommentInput/FeedCommentInput.stories.ts
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FeedCommentInput from './FeedCommentInput';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof FeedCommentInput> = {
+  title: 'FeedCommentInput',
+  component: FeedCommentInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FeedCommentInput>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    users: [
+      {
+        userId: 10,
+        userName: '송림',
+        part: '웹',
+        generation: 33,
+        profileImageUrl: 'url~~~',
+      },
+      {
+        userId: 11,
+        userName: '송민규',
+        part: '서버',
+        generation: 34,
+        profileImageUrl: 'url~~~',
+      },
+      {
+        userId: 12,
+        userName: '송지환',
+        part: '서버',
+        generation: 23,
+        profileImageUrl: 'url~~~',
+      },
+    ],
+    meta: {
+      page: 1,
+      take: 10,
+      itemCount: 3,
+      pageCount: 1,
+      hasPreviousPage: false,
+      hasNextPage: false,
+    },
+  },
+};
diff --git a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx
@@ -1,45 +1,88 @@
-import { styled } from 'stitches.config';
+import { keyframes, styled } from 'stitches.config';
 import SendIcon from 'public/assets/svg/send.svg';
 import SendFillIcon from 'public/assets/svg/send_fill.svg';
 import React, { forwardRef, useRef, useState } from 'react';
 import { MentionsInput, Mention } from 'react-mentions';
 import { colors } from '@sopt-makers/colors';
+import DefaultProfile from '../../../../public/assets/svg/mention_profile_default.svg';
 import { fontsObject } from '@sopt-makers/fonts';
 
+interface UserListProps {
+  meta: {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    itemCount: number;
+    page: number;
+    pageCount: number;
+    take: number;
+  };
+  users: {
+    generation: number;
+    part: string;
+    profileImageUrl: string;
+    userId: number;
+    userName: string;
+  }[];
+}
+
 interface FeedCommentInputProps {
   writerName: string;
   onSubmit: (comment: string) => Promise<void>;
   disabled?: boolean;
+  data: UserListProps;
 }
 
 const mentionableData = [
-  { id: '1', display: '김나' },
-  { id: '2', display: '김나나니니니' },
-  { id: '3', display: '이가가' },
-  { id: '4', display: '김가가' },
+  { id: '1', value: '1', label: '김나', display: '김나', description: '33기 IOS', imageURL: '' },
+  {
+    id: '2',
+    value: '2',
+    label: '김나',
+    display: '김나',
+    description: '33기 안드로이드',
+    imageURL: '',
+  },
+  { id: '3', value: '3', label: '이가가', display: '이가가', description: '33기 웹', imageURL: '' },
+  { id: '4', value: '4', label: '김가가', display: '김가가', description: '33기 서버', imageURL: '' },
+  { id: '5', value: '1', label: '김나', display: '김나', description: '33기 IOS', imageURL: '' },
+  {
+    id: '6',
+    value: '2',
+    label: '김나가',
+    display: '김가나',
+    description: '33기 안드로이드',
+    imageURL: '',
+  },
+  { id: '7', value: '3', label: '이가가', display: '이가가', description: '33기 웹', imageURL: '' },
+  { id: '8', value: '4', label: '김가가', display: '김가가', description: '33기 서버', imageURL: '' },
 ];
 
-const renderSuggestion = (entry, search, highlightedDisplay, index, focused) => {
-  return (
-    <div
-      key={entry.id}
-      style={{
-        backgroundColor: focused ? '#e0e0e0' : 'white',
-        padding: '5px 10px',
-        cursor: 'pointer',
-        color: 'black',
-      }}
-    >
-      {highlightedDisplay}
-    </div>
-  );
-};
-
 const FeedCommentInput = forwardRef<HTMLTextAreaElement, FeedCommentInputProps>(
-  ({ writerName, onSubmit, disabled }, ref) => {
+  ({ writerName, onSubmit, disabled, data }) => {
     const [comment, setComment] = useState('');
     const [isFocused, setIsFocused] = useState(false);
 
+    const renderSuggestion = (suggestion, search, highlightedDisplay, index, focused) => {
+      return (
+        <>
+          {suggestion.imageURL ? (
+            <></>
+          ) : (
+            <SrenderSuggestion key={suggestion.id}>
+              <DefaultProfile />
+              <div>
+                <div>{suggestion.display}</div> <p>{suggestion.description}</p>
+              </div>
+            </SrenderSuggestion>
+          )}
+        </>
+      );
+    };
+
+    const customSuggestionsContainer = children => {
+      return <ScustomSuggestionsContainer>{children}</ScustomSuggestionsContainer>;
+    };
+
     const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
     const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -72,21 +115,42 @@ const FeedCommentInput = forwardRef<HTMLTextAreaElement, FeedCommentInputProps>(
             }}
             placeholder={`${writerName}님의 피드에 댓글을 남겨보세요!`}
             onFocus={() => setIsFocused(true)}
+            customSuggestionsContainer={customSuggestionsContainer}
             style={{
+              control: {},
               '&multiLine': {
                 input: {
-                  ...fontsObject.BODY_2_16_R,
                   color: colors.gray50,
                   border: 'none',
                   padding: '0',
+
                   overflow: 'auto',
                   maxHeight: '120px',
+                  overscrollBehavior: 'none',
                 },
                 highlighter: {
-                  ...fontsObject.BODY_2_16_R,
+                  color: colors.success,
+                  border: 'none',
+                  padding: '0',
+
+                  overflow: 'auto',
                   boxSizing: 'border-box',
-                  overflow: 'hidden',
+
                   maxHeight: '120px',
+
+                  pointerEvents: 'none',
+
+                  position: 'relative',
+                  zIndex: '1',
+                },
+              },
+              suggestions: {
+                backgroundColor: 'transparent',
+                item: {
+                  borderRadius: '8px',
+                  '&focused': {
+                    background: colors.gray800,
+                  },
                 },
               },
             }}
@@ -95,11 +159,12 @@ const FeedCommentInput = forwardRef<HTMLTextAreaElement, FeedCommentInputProps>(
               trigger="@"
               displayTransform={(_, display) => `@${display}`}
               data={mentionableData}
-              renderSuggestion={renderSuggestion}
               markup="-~!@#@__display__[__id__]%^&*+"
+              renderSuggestion={renderSuggestion}
             />
           </MentionsInput>
         </CommentInput>
+
         <SendButton type="submit" onClick={handleSubmit} disabled={disabled}>
           {isFocused ? <SendFillIcon /> : <SendIcon />}
         </SendButton>
@@ -134,7 +199,7 @@ const CommentInput = styled('div', {
   border: 'none',
   outline: 'none',
   resize: 'none',
-  '&::placeholder': {
+  '&': {
     color: '$gray300',
   },
 });
@@ -145,3 +210,38 @@ const SendButton = styled('button', {
   alignItems: 'center',
   justifyContent: 'center',
 });
+
+const fadeIn = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(0)' },
+  '100%': { opacity: 1, transform: 'translateY(10px)' },
+});
+
+const ScustomSuggestionsContainer = styled('div', {
+  borderRadius: '13px',
+  boxSizing: 'border-box',
+  width: 'max-content',
+  padding: '8px',
+  background: '#17181c',
+  border: `1px solid ${colors.gray700}`,
+
+  animation: `${fadeIn} 0.5s forwards`,
+
+  maxHeight: '418px',
+  overflow: 'scroll',
+});
+
+const SrenderSuggestion = styled('button', {
+  boxSizing: 'border-box',
+  padding: '8px 12px',
+  gap: '12px',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '8px',
+  marginBottom: '6px',
+  ...fontsObject.BODY_2_16_M,
+  color: colors.gray10,
+  '& > div > p': {
+    ...fontsObject.BODY_4_13_R,
+    color: colors.gray100,
+  },
+});