hotfix : 문제풀이 디자인 수정

Ji-HoonE · Ji-HoonE · commit d70639f98fed · 2025-09-25T22:20:30.000+09:00
diff --git a/src/app/(auth)/(navigationsBarLayout)/problems/[problemId]/layout.tsx b/src/app/(auth)/(navigationsBarLayout)/problems/[problemId]/layout.tsx
@@ -17,7 +17,7 @@ export default async function ProblemPageLayout({
         <TabsToggle problemId={problemId} />
         {tabs}
       </menu>
-      <div className="w-[1px] h-full bg-border_primary" />
+      <div className="w-[1px] h-full border border-gray-800" />
       <div className="flex-1 w-full h-full">{children}</div>
     </main>
   );
diff --git a/src/app/(auth)/(navigationsBarLayout)/problems/page.tsx b/src/app/(auth)/(navigationsBarLayout)/problems/page.tsx
@@ -6,6 +6,7 @@ import ProblemTable from './ui/Table';
 import { useProblemListQuery } from '@/entities/problems/model/query';
 import { Select } from '@/shared/ui/select/Select';
 import { Button } from '@/shared/ui/button/Button';
+import { LevelUtil } from '@/shared/util/levelUtil';
 
 const categoryCodeOptions = [
   { label: '출력', value: 'OUTPUT' },
@@ -200,7 +201,7 @@ const ProblemsList = () => {
               )}
               {difficulty !== '전체' && difficulty && (
                 <div
-                  className={`flex flex-row gap-2 items-center px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-200`}
+                  className={`flex flex-row gap-2 items-center px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-200 border ${LevelUtil.getLevelBg(difficulty)} ${LevelUtil.getLevelColorClass(difficulty)}`}
                 >
                   <span>{difficultyOptions.find((item) => item.value === difficulty)?.label}</span>
                   <Image
diff --git a/src/app/(auth)/(navigationsBarLayout)/problems/ui/Table.tsx b/src/app/(auth)/(navigationsBarLayout)/problems/ui/Table.tsx
@@ -7,40 +7,10 @@ import { useMyDailySolved } from '@/entities/mypage/model/query';
 import { CheckCircle, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Cookies from 'js-cookie';
+import { LevelUtil } from '@/shared/util/levelUtil';
 
 const PAGE_LIMIT = 15;
 
-const getLevelColorClass = (levelStr: string): string => {
-  if (!levelStr) return '';
-  const level = parseInt(levelStr.replace(/[^0-9]/g, ''), 10);
-  if (level <= 2) return 'text-blue-400 font-medium';
-  if (level <= 4) return 'text-yellow-400 font-medium';
-  if (level <= 6) return 'text-orange-400 font-medium';
-  return 'text-red-400 font-medium';
-};
-
-const getLevelBg = (difficulty: string) => {
-  const level = parseInt(difficulty.replace(/[^0-9]/g, ''), 10);
-  if (level <= 2) return 'bg-blue-500/20 border-blue-500/30';
-  if (level <= 4) return 'bg-yellow-500/20 border-yellow-500/30';
-  if (level <= 6) return 'bg-orange-500/20 border-orange-500/30';
-  return 'bg-red-500/20 border-red-500/30';
-};
-
-const getLevelText = (difficulty: string) => {
-  const level = parseInt(difficulty.replace(/[^0-9]/g, ''), 10);
-  const labels = {
-    1: '입문',
-    2: '초급',
-    3: '중급',
-    4: '중상급',
-    5: '고급',
-    6: '전문가',
-    7: '마스터',
-  };
-  return `${labels[level as keyof typeof labels] || '알 수 없음'} (${level}단계)`;
-};
-
 export default function ProblemTable({
   data,
   isLoading,
@@ -179,11 +149,11 @@ export default function ProblemTable({
                       </td>
                       <td className={`px-6 py-4 text-center text-sm font-medium`}>
                         <span
-                          className={`inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200 hover:scale-105 ${getLevelBg(
+                          className={`inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200 hover:scale-105 ${LevelUtil.getLevelBg(
                             item.difficulty
-                          )} ${getLevelColorClass(item.difficulty)}`}
+                          )} ${LevelUtil.getLevelColorClass(item.difficulty)}`}
                         >
-                          {getLevelText(item.difficulty)}
+                          {LevelUtil.getLevelText(item.difficulty)}
                         </span>
                       </td>
                       <td className="px-6 py-4 text-center text-sm text-gray-300 ">
diff --git a/src/entities/problem/ui/DetailProblem.tsx b/src/entities/problem/ui/DetailProblem.tsx
@@ -4,6 +4,7 @@ import { IDetailProblemResponse } from '../api/server/getDetailProblem.type';
 import Arrow from '@/shared/ui/icons/arrow-icon';
 import Image from 'next/image';
 import MarkdownRenderer from '@/shared/mdx/MdxRenderer';
+import { LevelUtil } from '@/shared/util/levelUtil';
 
 interface IDetailProblemProps {
   detailProblem: IDetailProblemResponse;
@@ -31,7 +32,13 @@ export default function DetailProblem({ detailProblem }: IDetailProblemProps) {
         <div className="flex gap-4 items-center">
           <span className="text-gray-400">배점 : {score}점</span>
           <div className="flex gap-2 items-center">
-            <span className="text-[#FFCFA7]">{difficulty}</span>
+            <span
+              className={`inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200 ${LevelUtil.getLevelBg(
+                difficulty
+              )} ${LevelUtil.getLevelColorClass(difficulty)}`}
+            >
+              {LevelUtil.getLevelText(difficulty)}
+            </span>
             {categories && categories.length > 0 && (
               <>
                 <Arrow direction="right" className="text-white" />
diff --git a/src/features/discussions/DiscussionFooter.tsx b/src/features/discussions/DiscussionFooter.tsx
@@ -21,7 +21,7 @@ export default function DiscussionFooter({ ...props }: IDiscussionFooterProps) {
   const { problemId, replyCount, id, content, type, onDelete, onEdit, setChildRepliesOpen } = props;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-3">
       <Vote problemId={problemId} content={content} id={id} type={type} />
       {replyCount !== undefined && (
         <ShowChildReplies onClick={() => setChildRepliesOpen?.()} replyCount={replyCount} />
diff --git a/src/features/discussions/disussions/ui/Discussions.tsx b/src/features/discussions/disussions/ui/Discussions.tsx
@@ -94,19 +94,29 @@ export default function Discussions({ problemId }: IDiscussionProps) {
               }}
             /> */}
             <div className="flex flex-row gap-1">
-              {sortOptions.map((item) => {
-                return (
-                  <span
-                    key={item.value}
-                    className={`${item.value === params.sort ? `text-secondary` : ``}`}
-                    onClick={() => {
-                      setParams((prev) => ({ ...prev, sort: item.label, sortBy: item.label }));
-                    }}
-                  >
-                    {item.label}
-                  </span>
-                );
-              })}
+              <div className="flex flex-row gap-1 mb-4 bg-secondary-background rounded-[10px] p-1">
+                {sortOptions.map((item) => {
+                  const isActive = item.value === params.sort;
+                  return (
+                    <button
+                      key={item.value}
+                      className={`
+                      flex-1 py-3 px-6 rounded-[10px] font-medium transition-all duration-200
+                      ${
+                        isActive
+                          ? 'bg-[#214d35] text-white shadow-lg'
+                          : 'text-white hover:bg-[rgba(255,255,255,0.08)] hover:text-secondary'
+                      }
+                    `}
+                      onClick={() => {
+                        setParams((prev) => ({ ...prev, sort: item.label, sortBy: item.label }));
+                      }}
+                    >
+                      {item.label}
+                    </button>
+                  );
+                })}
+              </div>
             </div>
             {discussions.length < 1 ? (
               <div className="flex justify-center text-[#ccc] mt-3">
diff --git a/src/features/discussions/vote/ui/Vote.tsx b/src/features/discussions/vote/ui/Vote.tsx
@@ -54,7 +54,7 @@ export default function Vote({ content, problemId, id, type }: IVoteProps) {
             changeVoteStatus('UP');
           }}
         />
-        {voteCount.upvoteCount}
+        <p className="pt-[4px]">{voteCount.upvoteCount}</p>
       </div>
       <div className="flex items-center gap-1">
         <DownVoteIcon
@@ -63,7 +63,7 @@ export default function Vote({ content, problemId, id, type }: IVoteProps) {
             changeVoteStatus('DOWN');
           }}
         />
-        {voteCount.downvoteCount}
+        <p className="pt-[4px]">{voteCount.downvoteCount}</p>
       </div>
     </>
   );
diff --git a/src/shared/ui/InputFiled/index.tsx b/src/shared/ui/InputFiled/index.tsx
@@ -31,7 +31,9 @@ export default function UnifiedInput({ inputType, label, ...props }: Props) {
       case 'input':
         return <InputTypeFiled name={name} {...rest} />;
       case 'textarea':
-        return <TextAreaTypeFiled name={name} {...rest} />;
+        return (
+          <TextAreaTypeFiled className="border-gray-800 border shadow-lg" name={name} {...rest} />
+        );
       case 'image':
         return <ImageTypeFiled name={name} imageProps={imageProps} className={rest.className} />;
       default:
diff --git a/src/shared/util/levelUtil.ts b/src/shared/util/levelUtil.ts
@@ -0,0 +1,31 @@
+/** 유틸 함수 */
+export class LevelUtil {
+  static getLevelColorClass(levelStr: string): string {
+    if (!levelStr) return '';
+    const level = parseInt(levelStr.replace(/[^0-9]/g, ''), 10);
+    if (level <= 2) return 'text-blue-400 font-medium';
+    if (level <= 4) return 'text-yellow-400 font-medium';
+    if (level <= 6) return 'text-orange-400 font-medium';
+    return 'text-red-400 font-medium';
+  }
+  static getLevelBg(difficulty: string): string {
+    const level = parseInt(difficulty.replace(/[^0-9]/g, ''), 10);
+    if (level <= 2) return 'bg-blue-500/20 border-blue-500/30';
+    if (level <= 4) return 'bg-yellow-500/20 border-yellow-500/30';
+    if (level <= 6) return 'bg-orange-500/20 border-orange-500/30';
+    return 'bg-red-500/20 border-red-500/30';
+  }
+  static getLevelText(difficulty: string): string {
+    const level = parseInt(difficulty.replace(/[^0-9]/g, ''), 10);
+    const labels = {
+      1: '입문',
+      2: '초급',
+      3: '중급',
+      4: '중상급',
+      5: '고급',
+      6: '전문가',
+      7: '마스터',
+    };
+    return `${labels[level as keyof typeof labels] || '알 수 없음'} (${level}단계)`;
+  }
+}
