Feature/#225 qa 위키페이지 디자인

components/Dropdown.tsx

@@ -40,15 +40,15 @@ export default function Dropdown({
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`${dropdownSize} flex items-center justify-between text-nowrap rounded-xl border border-gray-300 bg-background px-5 py-3.5 text-14 leading-none text-gray-400 hover:border-green-200 focus:ring-1 focus:ring-green-200`}
+        className={`${dropdownSize} flex h-[45px] items-center justify-between text-nowrap rounded-xl bg-gray-100 px-5 py-3.5 text-14 leading-none text-gray-400 hover:border-green-200 focus:ring-1 focus:ring-green-200`}
       >
         {selectedOption}
         <Image
           src="/icon/icon-arrowdown.svg"
-          className={`size-4 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+          className={`size-[22px] ${isOpen ? 'rotate-180' : 'rotate-0'}`}
           alt="드롭다운 화살표"
           width={7}
-          height={4}
+          height={7}
         />
       </button>
 

components/Headers/GNB.tsx

@@ -1,12 +1,25 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 export default function GNB() {
+  const router = useRouter();
+
+  // 특정 페이지에 따라 스타일 변경
+  const isWikiListPage = router.pathname === '/wikilist';
+  const isBoardsPage = router.pathname === '/boards';
+
   return (
     <div className="flex items-center gap-10 text-14">
-      <Link className="mo:hidden" href="/wikilist">
+      <Link
+        className={`${isWikiListPage ? `text-green-300` : ``} hover:text-green-200 active:text-green-300 mo:hidden`}
+        href="/wikilist"
+      >
         위키목록
       </Link>
-      <Link className="mo:hidden" href="/boards">
+      <Link
+        className={`${isBoardsPage ? `text-green-300` : ``} hover:text-green-200 active:text-green-300 mo:hidden`}
+        href="/boards"
+      >
         자유게시판
       </Link>
     </div>

components/Menu.tsx

@@ -12,9 +12,10 @@ interface MenuProps {
  */
 
 export default function Menu({ options, onSelect, menuSize }: MenuProps) {
+  const fadeIn = 'pc:animate-pcFadeIn tamo:animate-tamoFadeIn';
   return (
     <ul
-      className={`${menuSize} absolute z-10 mt-2 rounded-xl border border-gray-300 bg-background p-1 text-14 shadow-custom mo:right-0 pc:right-1/2 pc:translate-x-1/2 tamo:right-0`}
+      className={`${menuSize} ${fadeIn} absolute z-10 mt-2 rounded-xl border border-gray-300 bg-background p-[4px] text-14 shadow-custom pc:right-1/2 pc:translate-x-1/2 tamo:right-0`}
     >
       {options.map((option, index) => (
         <button
@@ -24,7 +25,7 @@ export default function Menu({ options, onSelect, menuSize }: MenuProps) {
           onKeyDown={(e) => {
             if (e.key === 'Enter' || e.key === ' ') onSelect(option);
           }}
-          className={`flex w-full cursor-pointer flex-col rounded-md px-3 py-2.5 hover:bg-green-100`}
+          className={`flex h-[35px] w-full cursor-pointer flex-col rounded-md px-[16px] py-[5px] hover:bg-green-100`}
         >
           {option}
         </button>

components/SnackBar.tsx

@@ -24,7 +24,7 @@ const severityConfig = {
     textStyle: 'text-green-300 text-14sb mo:text-12sb',
   },
   info: {
-    style: 'bg-background border-white',
+    style: 'bg-background border-background',
     icon: '/icon/icon-info.svg',
     textStyle: 'text-gray-500 text-14 mo:text-12',
   },

components/UserProfile.tsx

@@ -52,7 +52,7 @@ function UserProfile({
     }
 
     return (
-      <p className="flex h-[18px] w-[200px] text-14 mo:text-12">
+      <p className="flex h-[18px] w-[200px] text-14 mo:w-[180px] mo:text-12 pc:gap-[20px]">
         <span className="flex-[1] text-gray-400">{label}</span>
         <span className="flex-[2] text-gray-500">{data[field]}</span>
       </p>
@@ -61,14 +61,14 @@ function UserProfile({
 
   return (
     // 메인 컨테이너
-    <div className="mx-auto max-w-4xl rounded-custom bg-white shadow-custom dark:bg-gray-600 dark:shadow-custom-dark mo:w-11/12 ta:w-11/12 pc:w-[400px] pc:p-7 tamo:p-5">
+    <div className="max-w-4xl rounded-custom bg-white shadow-custom dark:bg-gray-600 dark:shadow-custom-dark pc:h-[671px] pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
       {/* 레이아웃 컨테이너: PC에서는 세로, 모바일/태블릿에서는 가로 배치 */}
       <div
-        className={`flex ${isEditing ? 'flex-col' : 'flex-col mo:flex-row ta:flex-row pc:flex-col'} pc:items-center`}
+        className={`flex ${isEditing ? 'flex-col' : 'flex-col mo:flex-row ta:flex-row pc:flex-col'}`}
       >
         {/* 프로필 이미지 섹션 */}
         <div
-          className={`flex items-center justify-center tamo:pt-4 ${isEditing ? '' : 'mo:self-start ta:self-start'}`}
+          className={`flex items-center justify-center pc:pb-[60px] pc:pt-[40px] tamo:pl-[10px] tamo:pt-4 ${isEditing ? '' : 'mo:self-start ta:self-start'}`}
         >
           {/* 이미지 업로드 버튼 */}
           <button
@@ -127,7 +127,7 @@ function UserProfile({
 
         {/* 프로필 정보 섹션 */}
         <div
-          className={`${isEditing ? 'mt-4 mo:justify-center' : 'mo:ml-4 mo:flex-1 ta:ml-4 ta:flex-1 pc:mt-4'} mt-6 pc:w-full`}
+          className={`${isEditing ? 'mt-4 mo:justify-center' : 'mo:ml-4 mo:flex-1 mo:pl-[20px] ta:ml-4 ta:flex-1 ta:pl-[40px] pc:mt-4'} mt-6 mo:pc:w-full`}
         >
           <div className="space-y-3">
             {/* 기본 정보 영역 */}

components/wiki.page/Contents.tsx

@@ -165,30 +165,34 @@ export default function Contents({ profile }: ProfileProps) {
 
   return (
     <div
-      className={`pc:grid ${isEditing ? `pc:grid-rows-[75px]` : `pc:grid-rows-[150px]`} pc:gap-x-[80px] tamo:flex tamo:flex-col tamo:gap-[10px]`}
-      style={{ gridTemplateColumns: 'minmax(300px, 800px) 400px' }}
+      className={`pc:grid ${isEditing ? `pc:grid-rows-[75px]` : `pc:grid-rows-[200px]`} mo:px-[20px] ta:px-[60px] pc:gap-x-[80px] tamo:flex tamo:w-full tamo:flex-col tamo:gap-[10px]`}
+      style={{ gridTemplateColumns: 'minmax(300px, 800px) 320px' }}
     >
       <div>
-        <ContentHeader
-          name={profile.name || ''}
-          link={`https://wikied-ten.vercel.app/wiki/${profile.code}`}
-          isEditing={isEditing}
-          isInfoSnackBarOpen={isInfoSnackBarOpen}
-          handleQuizOpen={handleQuizOpen}
-          isEmpty={isEmpty}
-          closeAndNoSave={closeAndNoSave}
-          saveContent={saveContent}
-          diffTime={diffTime}
-        />
-
-        <SnackBar
-          severity={snackBarState.severity}
-          open={snackBarState.open}
-          onClose={() => setSnackBarState({ ...snackBarState, open: false })}
-          autoHideDuration={snackBarState.autoHideDuration}
-        >
-          {snackBarState.message}
-        </SnackBar>
+        <div className="pc:pt-[40px]">
+          <ContentHeader
+            name={profile.name || ''}
+            link={`https://wikied-ten.vercel.app/wiki/${profile.code}`}
+            isEditing={isEditing}
+            isInfoSnackBarOpen={isInfoSnackBarOpen}
+            handleQuizOpen={handleQuizOpen}
+            isEmpty={isEmpty}
+            closeAndNoSave={closeAndNoSave}
+            saveContent={saveContent}
+            diffTime={diffTime}
+          />
+        </div>
+
+        <div className="fixed z-20">
+          <SnackBar
+            severity={snackBarState.severity}
+            open={snackBarState.open}
+            onClose={() => setSnackBarState({ ...snackBarState, open: false })}
+            autoHideDuration={snackBarState.autoHideDuration}
+          >
+            {snackBarState.message}
+          </SnackBar>
+        </div>
       </div>
       <WikiQuizModal
         isOpen={isQuizOpen}

pages/wiki/[code].tsx

@@ -45,7 +45,7 @@ export default function Wiki() {
 
   return (
     <>
-      <div className="mt-[160px] flex justify-center pc:mx-[100px] tamo:px-[20px]">
+      <div className="mt-[120px] flex justify-center pc:mx-[100px]">
         {profile ? <Contents profile={profile} /> : <p>불러오는 중입니다...</p>}
       </div>
     </>

tailwind.config.ts

@@ -118,6 +118,32 @@ export default {
       borderRadius: {
         custom: '10px',
       },
+      keyframes: {
+        pcFadeIn: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(-20px) translateX(50%)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0) translateX(50%)',
+          },
+        },
+        tamoFadeIn: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(-20px)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
+      },
+      animation: {
+        pcFadeIn: 'pcFadeIn 0.1s ease-in-out',
+        tamoFadeIn: 'tamoFadeIn 0.1s ease-in-out',
+      },
     },
     screens: {
       mo: { max: '743px' },