feat: 톡픽 상세 조회 모바일 컴포넌트 구현 (#307)

* design: Button 컴포넌트에 outlineHighLight 스타일 값 추가

* feat: Button 컴포넌트 스토리북 텍스트 수정

* design: SummaryItem 컴포넌트 구현

* feat: SummaryBox 컴포넌트 구현 및 스토리북 작성

* feat: VoteToggle 컴포넌트 구현 및 스토리북 작성

* refactor: TalkPickSection 웹 컴포넌트 스토리북 수정

* feat: TalkPickSection 모바일 컴포넌트 구현 및 스토리북 작성

* refactor: ProfileIcon 컴포넌트에 사이즈 값 추가 및 TalkPickSection 모바일 컴포넌트 스타일 수정

* feat: ReportModal 모바일 컴포넌트 구현 및 스토리북 작성

* refactor: ReportModal 모바일 컴포넌트 커서 스타일 추가 및 사유 선택 로직 수정

* feat: 톡픽 상단 텍스트 수정 및 신고 모달 로직 연결

* feat: 톡픽에 작성자 프로필 이미지가 보여지도록 연결

* refactor: ProfileIcon 이미지 크기 수정 및 톡픽 컴포넌트 스타일 수정

* refactor: 프로필 아이콘에 데이터를 옵셔널로 전달 및 format 함수에 기본값 연결 수정

* refactor: 토스트 모달 스타일 수정

* refactor: ReportModal, TalkPickSection 이미지에 key 속성 추가

* refactor: 톡픽 투표 컴포넌트의 currentOption 오타 수정

* refactor: 톡픽 관련 모달 텍스트를 상수로 처리

* refactor: React.ReactNode를 ReactNode로 축약하여 사용

* refactor: 톡픽 이미지 alt에 image 텍스트 대신 url 값 사용

Author: areumH

src/assets/index.ts

@@ -151,6 +151,8 @@ export { default as LogoMedium } from './svg/logo-medium.svg';
 export { default as DefaultPerson } from './svg/default-person.svg';
 export { default as MobileDefaultPerson } from './svg/mobile-default-person.svg';
 export { default as MobilePlus } from './svg/mobile-plus.svg';
+export { default as MobileReport } from './svg/mobile-report.svg';
+export { default as PickIcon } from './svg/pick-icon.svg';
 
 // TODO: 이전 SVG
 export { default as Email } from './svg/email.svg';

src/assets/svg/angle-small-down.svg

@@ -1,19 +1,36 @@
 import { css } from '@emotion/react';
 
-export const profileWrapper = (size: 'small' | 'large') =>
-  css({
-    all: 'unset',
-    width: size === 'small' ? '40px' : '142px',
-    height: size === 'small' ? '40px' : '142px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '50%',
-    overflow: 'hidden',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    cursor: 'pointer',
-  });
+export const profileWrapper = css({
+  all: 'unset',
+  display: 'flex',
+  flexShrink: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  overflow: 'hidden',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  cursor: 'pointer',
+});
+
+export const getProfileSize = (size: 'extraSmall' | 'small' | 'large') => {
+  const style = {
+    large: css({
+      width: '142px',
+      height: '142px',
+    }),
+    small: css({
+      width: '40px',
+      height: '40px',
+    }),
+    extraSmall: css({
+      width: '24px',
+      height: '24px',
+    }),
+  };
+
+  return style[size];
+};
 
 export const profileImage = css({
   width: '100%',

src/assets/svg/angle-small-up.svg

@@ -1,17 +1,21 @@
 import React, { ComponentPropsWithRef, ForwardedRef, forwardRef } from 'react';
 import { NormalProfile } from '@/assets';
-import { profileWrapper, profileImage } from './ProfileIcon.style';
+import {
+  profileWrapper,
+  profileImage,
+  getProfileSize,
+} from './ProfileIcon.style';
 
 export interface ProfileProps extends ComponentPropsWithRef<'button'> {
   interaction: 'default' | 'custom';
   imgUrl?: string;
-  size?: 'small' | 'large';
+  size?: 'large' | 'small' | 'extraSmall';
 }
 
 interface ProfilePropsWithImage extends ComponentPropsWithRef<'button'> {
   interaction: 'custom';
   imgUrl: string;
-  size?: 'small' | 'large';
+  size?: 'large' | 'small' | 'extraSmall';
 }
 
 const ProfileIcon = (
@@ -25,12 +29,22 @@ const ProfileIcon = (
 ) => {
   const profileComponents = {
     normal: (
-      <button type="button" ref={ref} css={profileWrapper(size)} {...props}>
+      <button
+        type="button"
+        ref={ref}
+        css={[profileWrapper, getProfileSize(size)]}
+        {...props}
+      >
         <NormalProfile css={profileImage} />
       </button>
     ),
     settings: (
-      <button type="button" ref={ref} css={profileWrapper(size)} {...props}>
+      <button
+        type="button"
+        ref={ref}
+        css={[profileWrapper, getProfileSize(size)]}
+        {...props}
+      >
         <img css={profileImage} src={imgUrl} alt="profile" />
       </button>
     ),

src/assets/svg/mobile-report.svg

@@ -24,6 +24,18 @@ export const getVariantStyling = (
       backgroundColor: color.GY[5],
       color: color.GY[1],
     }),
+    outlineHighlightR: css({
+      border: `2px solid ${color.PINK}`,
+      borderRadius: '10px',
+      backgroundColor: 'transparent',
+      color: color.RED,
+    }),
+    outlineHighlightB: css({
+      border: `2px solid ${color.SKYBLUE}`,
+      borderRadius: '10px',
+      backgroundColor: 'transparent',
+      color: color.BLUE,
+    }),
   };
 
   return style[variant];
@@ -58,6 +70,22 @@ export const getSizeByVariantStyling = (
         height: '34px',
       }),
     },
+    outlineHighlightR: {
+      large: css({}),
+      medium: css(typo.Comment.SemiBold, {
+        width: '134px',
+        height: '72px',
+        padding: '0 21px',
+      }),
+    },
+    outlineHighlightB: {
+      large: css({}),
+      medium: css(typo.Comment.SemiBold, {
+        width: '134px',
+        height: '72px',
+        padding: '0 21px',
+      }),
+    },
   };
 
   return style[variant][size];
@@ -68,6 +96,6 @@ export const buttonStyling = css({
   justifyContent: 'center',
   alignItems: 'center',
   border: 'none',
-  whiteSpace: 'nowrap',
+  whiteSpace: 'normal',
   cursor: 'pointer',
 });

src/assets/svg/pick-icon.svg

@@ -4,7 +4,12 @@ import * as S from './Button.style';
 
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
   size?: 'large' | 'medium';
-  variant?: 'primary' | 'roundPrimary' | 'outlineShadow';
+  variant?:
+    | 'primary'
+    | 'roundPrimary'
+    | 'outlineShadow'
+    | 'outlineHighlightR'
+    | 'outlineHighlightB';
   active?: boolean;
 }
 

src/components/atoms/ProfileIcon/ProfileIcon.style.ts

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const summaryItemStyling = css(typo.Mobile.Text.Medium_12, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '4px 20px 4px 5px',
+  gap: '13px',
+  backgroundColor: color.WT_VIOLET,
+  color: color.BK,
+  borderRadius: '30px',
+});
+
+export const numberItemStyling = css(typo.Mobile.Text.Medium_12, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: 0,
+  width: '18px',
+  height: '18px',
+  backgroundColor: color.MAIN,
+  color: color.WT,
+  borderRadius: '50%',
+});