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

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/components/atoms/ProfileIcon/ProfileIcon.style.ts

@@ -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/components/atoms/ProfileIcon/ProfileIcon.tsx

@@ -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/components/mobile/atoms/Button/Button.style.ts

@@ -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/components/mobile/atoms/Button/Button.tsx

@@ -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/mobile/atoms/SummaryItem/SummaryItem.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%',
+});

src/components/mobile/atoms/SummaryItem/SummaryItem.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { numberItemStyling, summaryItemStyling } from './SummaryItem.style';
+
+export interface SummaryItemProps {
+  itemNumber?: '1' | '2' | '3';
+  children?: ReactNode;
+}
+
+const SummaryItem = ({ itemNumber = '1', children }: SummaryItemProps) => (
+  <div css={summaryItemStyling}>
+    <div css={numberItemStyling}>{itemNumber}</div>
+    {children}
+  </div>
+);
+
+export default SummaryItem;

src/components/mobile/molecules/ReportModal/ReportModal.style.ts

@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const reportModalStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '20px',
+});
+
+export const reportTextWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '6px',
+});
+
+export const reportTextStyling = css(typo.Main.SemiBold, {
+  color: color.BK,
+});
+
+export const buttonWrapperStyling = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridGap: '7px',
+});
+
+export const reportBtnWrapperStyling = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+});
+
+export const buttonStyling = css(typo.Mobile.Text.Medium_14, {
+  display: 'flex',
+  width: '143px',
+  height: '50px',
+  alignItems: 'center',
+  padding: '0 16px',
+  borderRadius: '8px',
+  backgroundColor: color.GY[5],
+  color: color.GY[6],
+  cursor: 'pointer',
+});
+
+export const selectedButtonStyling = css({
+  backgroundColor: color.WT_VIOLET,
+  color: color.MAIN,
+  outline: `2px solid ${color.MAIN}`,
+});
+
+export const getButtonStyling = (selected: boolean) =>
+  css({
+    width: '293px',
+    height: '44px',
+    borderRadius: '12px',
+    backgroundColor: selected ? color.MAIN : color.GY[2],
+  });
+
+export const reportInputStyling = css(typo.Mobile.Text.SemiBold_14, {
+  width: '100%',
+  padding: '6px 0',
+  outline: '0',
+  border: 'none',
+  borderBottom: `1px solid ${color.GY[3]}`,
+  color: color.BK,
+
+  ':-webkit-autofill': {
+    boxShadow: '0 0 0px 1000px white inset',
+  },
+
+  '&::placeholder': {
+    color: color.GY[1],
+  },
+});

src/components/mobile/molecules/ReportModal/ReportModal.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { MobileReport } from '@/assets';
+import Modal from '@/components/mobile/atoms/Modal/Modal';
+import Button from '@/components/mobile/atoms/Button/Button';
+import { reportOptions } from '@/constants/reportOption';
+import * as S from './ReportModal.style';
+
+export interface ReportModalProps {
+  isOpen?: boolean;
+  onConfirm?: (reason: string) => void;
+  onClose?: () => void;
+}
+
+const ReportModal = ({ isOpen, onConfirm, onClose }: ReportModalProps) => {
+  const [reportReason, setReportReason] = useState<string>('');
+  const [otherReason, setOtherReason] = useState<string>('');
+  const finalReportReason: string =
+    reportReason === '기타' ? otherReason : reportReason;
+
+  const handleOtherReportReason = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOtherReason(e.target.value);
+  };
+
+  const handleConfirm = () => {
+    if (!finalReportReason.trim()) return;
+    onConfirm?.(finalReportReason);
+  };
+
+  return (
+    <Modal action="share" isOpen={isOpen} onClose={onClose}>
+      <div css={S.reportModalStyling}>
+        <div css={S.reportTextWrapper}>
+          <MobileReport />
+          <div css={S.reportTextStyling}>신고사유 선택</div>
+        </div>
+        <div css={S.buttonWrapperStyling}>
+          {reportOptions.map((option) => (
+            <button
+              type="button"
+              value={option.value}
+              key={option.value}
+              onClick={() => {
+                setReportReason(option.value);
+                setOtherReason('');
+              }}
+              css={[
+                S.buttonStyling,
+                option.value === reportReason && S.selectedButtonStyling,
+              ]}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+        {reportReason === '기타' && (
+          <input
+            css={S.reportInputStyling}
+            placeholder="신고사유를 작성해주세요."
+            onChange={handleOtherReportReason}
+          />
+        )}
+        <Button
+          size="large"
+          variant="primary"
+          onClick={handleConfirm}
+          css={S.getButtonStyling(!!finalReportReason)}
+        >
+          설정 완료
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ReportModal;