feat: 모바일 톡픽 상세 조회 페이지 댓글 UI 및 기능 구현

src/App.tsx

@@ -19,6 +19,7 @@ import TalkPickVotes from '@/pages/MyPage/TalkPick/TalkPickVotes';
 import TalkPickComments from '@/pages/MyPage/TalkPick/TalkPickComments';
 import BalanceGameWritten from '@/pages/MyPage/BalanceGame/BalanceGameWritten';
 import BalanceGameEditPage from '@/pages/BalanceGameEditPage/BalanceGameEditPage';
+import TalkPickMobilePage from '@/pages/mobile/TalkPickMobilePage/TalkPickMobilePage';
 import ProtectedRoutes from './components/Routes/ProtectedRoutes';
 import { PATH } from './constants/path';
 import { useTokenRefresh } from './hooks/common/useTokenRefresh';
@@ -92,7 +93,10 @@ const App: React.FC = () => {
           <Route path={PATH.CHANGE.PASSWORD} element={<ChangePasswordPage />} />
           <Route path={PATH.TODAY_TALKPICK} element={<TalkPickPage />} />
           <Route path={PATH.TALKPICK_PLACE} element={<TalkPickPlacePage />} />
-          <Route path={PATH.TALKPICK()} element={<TalkPickPage />} />
+          <Route
+            path={PATH.TALKPICK()}
+            element={isMobile ? <TalkPickMobilePage /> : <TalkPickPage />}
+          />
           <Route
             path={PATH.BALANCEGAME.VIEW()}
             element={isMobile ? <BalanceGameMobilePage /> : <BalanceGamePage />}

src/assets/index.ts

@@ -151,6 +151,13 @@ 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 MobileComment } from './svg/mobile-comment.svg';
+export { default as CryEmoji } from './svg/cry-emoji.svg';
+export { default as MobileLikeButtonDF } from './svg/mobile-like-button-df.svg';
+export { default as MobileLikeButtonPR } from './svg/mobile-like-button-pr.svg';
+export { default as MobileArrowUp } from './svg/mobile-arrow-up.svg';
+export { default as MobileArrowDown } from './svg/mobile-arrow-down.svg';
+export { default as MobileReport } from './svg/mobile-report.svg';
 export { default as MobileReport } from './svg/mobile-report.svg';
 export { default as PickIcon } from './svg/pick-icon.svg';
 

src/components/atoms/CategoryBarChip/CategoryBarChip.style.ts

@@ -15,15 +15,25 @@ export const getStylingBySize = (
       borderRadius: '25px',
       padding: '0 12px',
     }),
+    extraSmall: css({
+      borderRadius: '3px',
+      padding: '3px 6px',
+    }),
   };
 
   return style[size];
 };
 
-export const categoryBarChipStyling = css(typo.Comment.SemiBold, {
+export const categoryBarChipStyling = css({
+  ...typo.Comment.SemiBold,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: color.MAIN,
   color: color.WT,
+  '@media (max-width: 430px)': {
+    ...typo.Mobile.Text.SemiBold_10,
+    backgroundColor: color.WT_VIOLET,
+    color: color.MAIN,
+  },
 });

src/components/atoms/CategoryBarChip/CategoryBarChip.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import * as S from './CategoryBarChip.style';
 
 export interface CategoryBarChipProps {
-  size?: 'large' | 'small';
+  size?: 'large' | 'small' | 'extraSmall';
   children?: ReactNode;
 }
 

src/components/atoms/CommentProfile/CommentProfile.style.ts

@@ -1,13 +1,17 @@
 import { css } from '@emotion/react';
 import color from '@/styles/color';
 
-export const containerStyle = css`
-  display: inline-flex;
-  padding: 5px;
-  align-items: center;
-  gap: 10px;
-  border-radius: 50px 50px 0 50px;
-`;
+export const containerStyle = css({
+  display: 'inline-flex',
+  padding: '5px',
+  alignItems: 'center',
+  gap: '10px',
+  borderRadius: '50px 50px 0 50px',
+  '@media (max-width: 430px)': {
+    padding: '2.7px',
+    borderRadius: '27.3px 27.3px 0 27.3px',
+  },
+});
 
 export const getProfileColor = (option: 'A' | 'B' | null) => {
   const backgroundColors = {
@@ -29,6 +33,10 @@ export const profileWrapper = css({
   backgroundSize: 'cover',
   backgroundPosition: 'center',
   cursor: 'pointer',
+  '@media (max-width: 430px)': {
+    width: '24.5px',
+    height: '24.5px',
+  },
 });
 
 export const profileImage = css({

src/components/atoms/LikeButton/LikeButton.style.ts

@@ -2,46 +2,62 @@ import { css } from '@emotion/react';
 import color from '@/styles/color';
 import typo from '@/styles/typo';
 
-export const likeButton = css`
-  display: inline-flex;
-  align-items: center;
-  flex-direction: row;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition:
-    background-color 0.3s,
-    color 0.3s;
-`;
+export const likeButton = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexDirection: 'row',
+  backgroundColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s, color 0.3s',
+  '@media (max-width: 430px)': {
+    display: 'flex',
+    padding: 0,
+  },
+});
 
-export const icon = css`
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-`;
+export const icon = css({
+  width: '22px',
+  height: '22px',
+  objectFit: 'contain',
+  '@media (max-width: 430px)': {
+    width: '16px',
+    height: '16px',
+  },
+});
 
-export const defaultLabel = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 22px;
-  height: 29px;
-  ${typo.Number.Medium_18}
-  color: ${color.GY[1]};
-  padding: 0;
-  margin: 0;
-`;
+export const defaultLabel = css({
+  ...typo.Number.Medium_18,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '22px',
+  height: '29px',
+  color: color.GY[1],
+  padding: 0,
+  margin: 0,
+  '@media (max-width: 430px)': {
+    ...typo.Mobile.Main.Regular_12,
+    width: '15px',
+    height: '15px',
+  },
+});
 
-export const pressedLabel = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 22px;
-  height: 29px;
-  ${typo.Number.Medium_18}
-  color: ${color.MAIN};
-  padding: 0;
-  margin: 0;
-`;
+export const pressedLabel = css({
+  ...typo.Number.Medium_18,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '22px',
+  height: '29px',
+  color: color.MAIN,
+  padding: 0,
+  margin: 0,
+  '@media (max-width: 430px)': {
+    ...typo.Mobile.Main.Regular_12,
+    width: '15px',
+    height: '15px',
+  },
+});

src/components/atoms/LikeButton/LikeButton.tsx

@@ -1,26 +1,53 @@
 import React, { forwardRef } from 'react';
 import type { ComponentPropsWithRef, ForwardedRef } from 'react';
-import { LikeButtonDF, LikeButtonPR } from '@/assets';
+import {
+  LikeButtonDF,
+  LikeButtonPR,
+  MobileLikeButtonDF,
+  MobileLikeButtonPR,
+} from '@/assets';
 import * as S from './LikeButton.style';
 
 export interface LikeButtonProps extends ComponentPropsWithRef<'button'> {
   likeCount: number;
   likeState?: boolean;
+  isMobile?: boolean;
 }
 
 const LikeButton = (
-  { likeCount, likeState = false, ...attributes }: LikeButtonProps,
+  {
+    likeCount,
+    likeState = false,
+    isMobile = false,
+    ...attributes
+  }: LikeButtonProps,
   ref: ForwardedRef<HTMLButtonElement>,
 ) => {
+  let Icon;
+
+  switch (true) {
+    case likeState && isMobile:
+      Icon = MobileLikeButtonPR;
+      break;
+    case likeState && !isMobile:
+      Icon = LikeButtonPR;
+      break;
+    case !likeState && isMobile:
+      Icon = MobileLikeButtonDF;
+      break;
+    case !likeState && !isMobile:
+      Icon = LikeButtonDF;
+      break;
+    default:
+      Icon = LikeButtonDF;
+      break;
+  }
+
   return (
     <button type="button" ref={ref} css={S.likeButton} {...attributes}>
-      {likeState ? (
-        <LikeButtonPR css={S.icon} />
-      ) : (
-        <LikeButtonDF css={S.icon} />
-      )}
+      <Icon css={S.icon} />
       <span css={[S.defaultLabel, likeState && S.pressedLabel]}>
-        {likeCount}
+        {isMobile && likeCount === 0 ? '좋아요' : likeCount}
       </span>
     </button>
   );

src/components/atoms/MenuTap/MenuTap.style.ts

@@ -24,9 +24,16 @@ export const menuStlying = css({
   borderRadius: '10px',
   overflow: 'hidden',
   boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)',
+  '@media (max-width: 430px)': {
+    width: '58px',
+    backgroundColor: color.WT,
+    border: `1px solid ${color.GY[3]}`,
+    borderRadius: '6px',
+  },
 });
 
-export const menuItemStyling = css(typo.Comment.SemiBold, {
+export const menuItemStyling = css({
+  ...typo.Comment.SemiBold,
   width: '100%',
   padding: '10px',
   cursor: 'pointer',
@@ -35,4 +42,10 @@ export const menuItemStyling = css(typo.Comment.SemiBold, {
   ':last-child': {
     borderBottom: 'none',
   },
+  '@media (max-width: 430px)': {
+    ...typo.Mobile.Text.Medium_12,
+    padding: '7px',
+    color: color.GY[1],
+    borderBottom: `1px solid ${color.GY[3]}`,
+  },
 });

src/components/atoms/MoreButton/MoreButton.style.ts

@@ -11,7 +11,15 @@ export const moreButtonStyling = (icon: Required<MoreButtonProps>['icon']) =>
     gap: '7px',
     color: icon === 'plus' ? color.GY[1] : color.MAIN,
     cursor: 'pointer',
-    '@media (max-width: 430px)': {
-      ...typo.Mobile.Text.SemiBold_14,
-    },
+    '@media (max-width: 430px)':
+      icon === 'arrow'
+        ? {
+            ...typo.Mobile.Text.Medium_12,
+            color: color.GY[1],
+            gap: '3px',
+          }
+        : {
+            ...typo.Mobile.Text.SemiBold_14,
+            color: color.GY[1],
+          },
   });

src/components/atoms/MoreButton/MoreButton.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, ComponentPropsWithRef, ForwardedRef } from 'react';
-import { More, MoreReply, MoreSmall } from '@/assets';
+import { MobileArrowDown, More, MoreReply, MoreSmall } from '@/assets';
 import * as S from './MoreButton.style';
 
 export interface MoreButtonProps extends ComponentPropsWithRef<'button'> {
@@ -12,7 +12,14 @@ const MoreButton = (
   ref: ForwardedRef<HTMLButtonElement>,
 ) => {
   const getIcon = () => {
-    if (size === 'small') return <MoreSmall />;
+    if (size === 'small') {
+      switch (icon) {
+        case 'arrow':
+          return <MobileArrowDown />;
+        default:
+          return <MoreSmall />;
+      }
+    }
     return icon === 'plus' ? <More /> : <MoreReply />;
   };
 

src/components/atoms/ToastModal/ToastModal.style.ts

@@ -30,7 +30,6 @@ export const toastModalStyling = css({
   padding: '20px 30px',
   borderRadius: '35px',
   boxShadow: '1px 1px 10px rgba(0, 0, 0, 0.07)',
-
   '@media (max-width: 430px)': {
     ...typo.Mobile.Text.SemiBold_12,
     padding: '14px 24px',