dreamyPatisiel · minyoung22222 · Nov 16, 2025 · Nov 16, 2025 · Nov 16, 2025 · Nov 16, 2025
diff --git a/pages/pickpickpick/[id]/apiHooks/comment/usePostPickComment.tsx b/pages/pickpickpick/[id]/apiHooks/comment/usePostPickComment.tsx
@@ -24,7 +24,7 @@ const postPickComment = async ({ pickId, contents, isPickVotePublic }: PostPickC
   return res.data;
 };
 
-export const usePostPickComment = () => {
+export const usePostPickComment = ({ pickId }: { pickId: string }) => {
   const queryClient = useQueryClient();
   const { setToastVisible } = useToastVisibleStore();
 
@@ -33,6 +33,7 @@ export const usePostPickComment = () => {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ['pickCommentData'] });
       await queryClient.invalidateQueries({ queryKey: ['getBestComments'] });
+      await queryClient.invalidateQueries({ queryKey: ['getDetailPickData', pickId] });
       setToastVisible({ message: '댓글을 성공적으로 작성했어요!', type: 'success' });
     },
     onError: (error: ErrorRespone) => {

diff --git a/pages/pickpickpick/[id]/components/Comment.tsx b/pages/pickpickpick/[id]/components/Comment.tsx
@@ -272,7 +272,8 @@ export default function Comment({
     <div
       id={`comment-${pickCommentId}`}
       ref={commentRef}
-      className={`flex flex-col gap-[1.6rem] pt-[2.4rem] pb-[3.2rem] px-[1.6rem]
+      className={`flex flex-col gap-[1.6rem] pt-[2.4rem] pb-[3.2rem]
+        ${isMobile ? 'px-0' : 'px-[1.6rem]'}
         ${isSubComment && (isMobile ? 'px-[1.6rem]' : 'px-[3.2rem]')}     
         ${commentContainerStyle()}
         ${commentId === String(pickCommentId) ? 'comment-item' : ''}

diff --git a/pages/pickpickpick/[id]/components/PickCommentSection.tsx b/pages/pickpickpick/[id]/components/PickCommentSection.tsx
@@ -13,7 +13,7 @@ export default function PickCommentSection({
   pickId: string;
   dataIsVoted?: boolean;
 }) {
-  const { mutate: postPickCommentMutate } = usePostPickComment();
+  const { mutate: postPickCommentMutate } = usePostPickComment({ pickId: pickId });
 
   const handleWritableCommentButonClick = ({
     contents: commentContents,

diff --git a/pages/pickpickpick/[id]/components/VoteButtonV2.tsx b/pages/pickpickpick/[id]/components/VoteButtonV2.tsx
@@ -49,9 +49,9 @@ export default function VoteButtonV2({ pickOptionData, dataIsVoted, pickOrder }:
     if (!dataIsVoted) {
       return (
         <>
-          <div className='flex items-center gap-[1rem]'>
-            <span className='st2 font-bold text-gray200'>?? %</span>
-            <div className='w-[23.7rem] h-[1.6rem] rounded-[1rem] bg-gray200'></div>
+          <div className='flex items-center gap-[1rem] w-full'>
+            <span className='st2 font-bold text-gray200 whitespace-nowrap'>?? %</span>
+            <div className='flex-1 h-[1.6rem] rounded-[1rem] bg-gray200' />
           </div>
 
           <span className='st2 font-bold text-white flex gap-[1rem]'>
@@ -70,13 +70,19 @@ export default function VoteButtonV2({ pickOptionData, dataIsVoted, pickOrder }:
 
     return (
       <>
-        <div className='flex items-center gap-[1rem]'>
-          <span className={cn(`st2 font-bold text-gray200 ${percentageColor}`)}>{percent} %</span>
-          <div
-            className={cn(`h-[1.6rem] rounded-[1rem] ${percentageBarColor}`)}
-            style={{ width: `${23.7 * (percent ?? 1) * 0.01}rem` }}
-          ></div>
-          <span className={cn(`c1 font-bold ${voteCountColor}`)}>{voteTotalCount}표</span>
+        <div className='w-full flex items-center gap-[1rem]'>
+          <span className={cn(`st2 font-bold whitespace-nowrap ${percentageColor}`)}>
+            {percent} %
+          </span>
+          <div className='flex-1 h-[1.6rem] rounded-[1rem] overflow-hidden'>
+            <div
+              className={cn(`h-full rounded-[1rem] ${percentageBarColor}`)}
+              style={{ width: `${percent ?? 0}%` }}
+            />
+          </div>
+          <span className={cn(`c1 font-bold whitespace-nowrap ${voteCountColor}`)}>
+            {voteTotalCount}표
+          </span>
         </div>
 
         {isPicked ? (

diff --git a/pages/pickpickpick/[id]/index.page.tsx b/pages/pickpickpick/[id]/index.page.tsx
@@ -97,7 +97,7 @@ const PickDetailPage: NextPageWithMeta = () => {
           >
             <div className='w-full'>
               <div className={`flex items-baseline gap-[1.2rem] `}>
-                <h3 className={`font-bold mb-[0.8rem] flex w-full ${isMobile ? 'st2' : 'h3'}`}>
+                <h3 className={`font-bold flex w-full p-[1rem] ${isMobile ? 'st2' : 'h3'}`}>
                   {pickDetailData?.pickTitle}
                 </h3>
                 {pickDetailData?.isAuthor && (
@@ -112,7 +112,9 @@ const PickDetailPage: NextPageWithMeta = () => {
                 )}
               </div>
 
-              <div className={`${isMobile ? 'flex flex-col gap-[0.4rem]' : ''}`}>
+              <div
+                className={`px-[1rem] py-[0.4rem] ${isMobile ? 'flex flex-col gap-[0.4rem]' : ''}`}
+              >
                 <span className='p2 text-gray100 font-bold mr-[2rem] '>
                   <NicknameWithMaskedEmail
                     author={pickDetailData?.nickname ?? ''}
@@ -133,7 +135,7 @@ const PickDetailPage: NextPageWithMeta = () => {
                 </span>
               </div>
               {!isMobile && (
-                <div className='flex mt-[1rem] gap-[2rem]'>
+                <div className='flex gap-[2rem] p-[1rem]'>
                   <StatisticsItem
                     icon={GrayFire}
                     alt='투표 이미지'
@@ -170,7 +172,9 @@ const PickDetailPage: NextPageWithMeta = () => {
         </div>
 
         <div className='py-[4.8rem]'>
-          <h3 className='h3 mb-[2.4rem] font-bold'>나도 고민했는데! 다른 픽픽픽 💘</h3>
+          <h3 className={`${isMobile ? 'st1' : 'h3'} mb-[2.4rem] font-bold`}>
+            나도 고민했는데! 다른 픽픽픽 💘
+          </h3>
           <div className={`flex gap-[2rem] ${isMobile && 'flex-col'}`}>
             {similarPicks?.map((similarData) => (
               <Link

diff --git a/pages/pickpickpick/components/PickAnswerV2.tsx b/pages/pickpickpick/components/PickAnswerV2.tsx
@@ -1,5 +1,7 @@
 import { cn } from '@utils/mergeStyle';
 
+import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
+
 interface PickAnswerV2Props {
   title: string;
   isPicked: boolean;
@@ -40,6 +42,7 @@ export default function PickAnswerV2({
   imageUrl,
   content,
 }: PickAnswerV2Props) {
+  const { isMobile } = useMediaQueryContext();
   const isPickedOption = isVoted && isPicked;
   const isUnpickedOption = isVoted && !isPicked;
 
@@ -55,8 +58,10 @@ export default function PickAnswerV2({
   const hasMedia = Boolean(imageUrl || content);
 
   const renderMedia = () => {
-    const mediaClassName = cn('w-full rounded-Radius16 h-[12rem]', {
+    const mediaClassName = cn('w-full h-[12rem]', {
       'opacity-50': isUnpickedOption,
+      'rounded-Radius10 ': isMobile,
+      'rounded-Radius16 ': !isMobile,
     });
 
     if (imageUrl) {
@@ -84,7 +89,7 @@ export default function PickAnswerV2({
   return (
     <li
       className={cn(
-        'bg-black h-full rounded-Radius16 p-[2rem] flex flex-col justify-between items-center gap-[1rem]',
+        `${isMobile ? 'px-[1.2rem] py-[1.6rem]' : 'p-[2rem]'} bg-black h-full rounded-Radius16 flex flex-col justify-between items-center gap-[1rem]`,
         className,
       )}
     >
@@ -105,7 +110,7 @@ export default function PickAnswerV2({
           'flex-1 h3 text-center flex items-center justify-center': !hasMedia,
         })}
       >
-        {!hasMedia ? <span className='line-clamp-5 w-full'>{title}</span> : title}
+        {!hasMedia ? <span className='line-clamp-3 w-full'>{title}</span> : title}
       </p>
 
       {/* 선택지 이미지 또는 콘텐츠 */}

diff --git a/pages/pickpickpick/components/PickHeader.tsx b/pages/pickpickpick/components/PickHeader.tsx
@@ -6,7 +6,7 @@ export const PickHeader = ({ onClick }: { onClick: () => void }) => {
   const { isMobile } = useMediaQueryContext();
   return (
     <h1
-      className={`font-bold text-white cursor-pointer ${isMobile ? 'st1 px-[2.4rem]' : 'h3 mb-16'}`}
+      className={`font-bold text-white cursor-pointer ${isMobile ? 'st1' : 'h3 mb-16'}`}
       data-testid='pickheart'
       onClick={onClick}
     >

diff --git a/pages/pickpickpick/components/PickInfoV2.tsx b/pages/pickpickpick/components/PickInfoV2.tsx
@@ -79,7 +79,7 @@ export const MobilePickInfoV2 = () => {
   });
 
   return (
-    <div className='w-full flex justify-center flex-col items-center px-[2.4rem] pt-[4rem] pb-[2.8rem]'>
+    <div className='w-full flex justify-center flex-col items-center pt-[4rem] pb-[2.8rem]'>
       <p className='st2 font-bold mb-[4.4rem] text-center'>
         개발고민 혼자 끙끙 앓지말고,
         <br />

diff --git a/pages/techblog/components/Comment.tsx b/pages/techblog/components/Comment.tsx
@@ -233,9 +233,9 @@ export default function Comment({
 
   // 댓글 wrapper 스타일
   const commentDefaultStyle =
-    'flex flex-col gap-[2.4rem] border-t-[0.1rem] border-t-gray400 pt-[2.4rem] pb-[3.2rem] px-[1.6rem]';
-  const commentDesktopStyle = '';
-  const commentMobileStyle = 'py-[3.2rem]';
+    'flex flex-col gap-[2.4rem] border-t-[0.1rem] border-t-gray400 pt-[2.4rem] pb-[3.2rem]';
+  const commentDesktopStyle = 'px-[1.6rem]';
+  const commentMobileStyle = 'py-[3.2rem] px-0';
   const subCommentDesktopStyle = 'bg-gray800 px-[3.2rem] border-t-gray500';
   const subCommentMobileStyle = 'bg-gray800 px-[1.6rem] border-t-gray500';