refactor: 폰트 수정 (#40)

KMU-WINK · Sep 16, 2024 · cee52f5 · cee52f5
1 parent f85d9ea
commit cee52f5
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 33 deletions.
diff --git a/src/app/activity/project/page.tsx b/src/app/activity/project/page.tsx
@@ -44,10 +44,12 @@ const ProjectPage = () => {
           <h1 className="font-bold text-4xl text-center mb-6">WINK, 우리들의 파도</h1>
           <p className="font-regular text-xl text-center text-zinc-700">나날히 성장해 가는 우리</p>
         </div>
+
         {/* Carousel 영역 */}
         <div className="w-full max-w-carousel mt-32">
           <Carousel cards={sampleSliderProjects} />
         </div>
+
         {/* 프로젝트 목록 */}
         <div className="w-full max-w-project mx-auto mt-48 mb-20">
           <div className="grid grid-cols-3 gap-8">
@@ -63,6 +65,7 @@ const ProjectPage = () => {
             ))}
           </div>
         </div>
+
         {/* 더보기 버튼 */}
         {visibleProjects < sampleProjects.length && (
           <div className="flex justify-center mb-10">

diff --git a/src/app/activity/study/page.tsx b/src/app/activity/study/page.tsx
@@ -1,9 +1,12 @@
 'use client';
 
 import React, { useState } from 'react';
+import { FaAngleDown } from 'react-icons/fa';
 
 import { StudyCard } from '@/component';
 
+import { AnimatePresence, motion } from 'framer-motion';
+
 interface StudyType {
   id: number; // 유니크한 ID
   image: string | null; // 이미지 URL
@@ -138,15 +141,12 @@ const categories = [
 const StudyPage = () => {
   const [visibleStudyCards, setVisibleStudyCards] = useState(8);
   const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [isOpen, setIsOpen] = useState(false);
 
   const loadMore = () => {
     setVisibleStudyCards((prevVisible) => prevVisible + 8);
   };
 
-  const handleCategoryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedCategory(event.target.value);
-  };
-
   // 카테고리에 따라 필터링된 최신 스터디
   const filteredStudies =
     selectedCategory === 'All'
@@ -162,7 +162,7 @@ const StudyPage = () => {
         </div>
 
         {/* 주목할 글 */}
-        <div className="w-full max-w-study mx-auto mt-20 mb-36">
+        <div className="w-study mx-auto mt-20 mb-36">
           <h2 className="font-semibold text-3xl mb-4">🔥 주목할 글</h2>
           <div className="flex flex-col items-center w-full gap-7">
             {featuredStudies.map(({ id, image, link, title, description, category }) => (
@@ -180,20 +180,43 @@ const StudyPage = () => {
         </div>
 
         {/* 최신글 */}
-        <div className="w-full max-w-study mx-auto mt-12 mb-28">
-          <div className="flex w-full justify-between gap-7 mb-16">
+        <div className="w-study mx-auto mt-12 mb-28">
+          <div className="flex w-full justify-between gap-7 mb-16 relative">
             <h2 className="font-semibold text-xl">🌱 최신글</h2>
-            <select
-              value={selectedCategory}
-              onChange={handleCategoryChange}
-              className="px-3 py-1 border border-gray-400 rounded-md"
-            >
-              {categories.map((category) => (
-                <option key={category} value={category}>
-                  {category}
-                </option>
-              ))}
-            </select>
+            <div className="relative w-48">
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="px-3 py-1 w-full border border-gray-400 rounded-md flex justify-between items-center bg-white"
+              >
+                {selectedCategory}
+                <FaAngleDown className={`w-4 h-4 ml-2 ${isOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              <AnimatePresence>
+                {isOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, maxHeight: 0 }}
+                    animate={{ opacity: 1, maxHeight: '10rem' }}
+                    exit={{ opacity: 0, maxHeight: 0 }}
+                    transition={{ duration: 0.2, ease: 'easeInOut' }}
+                    className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg overflow-y-auto"
+                  >
+                    {categories.map((category) => (
+                      <div
+                        key={category}
+                        className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100"
+                        onClick={() => {
+                          setSelectedCategory(category);
+                          setIsOpen(false);
+                        }}
+                      >
+                        {category}
+                      </div>
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
           </div>
           <div className="flex flex-col items-center gap-7">
             {filteredStudies

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
@@ -82,14 +82,14 @@ const LoginPage = () => {
               type="button"
               label="로그인"
               onClick={onLoginButtonClick}
-              className="w-full py-2 text-base"
+              className="w-full py-2 text-base "
             />
 
             <div className="text-center text-xs">
               회원이 아니신가요?
               <Link
                 href="/auth/signup"
-                className="text-wink-300 hover:underline hover:text-wink-500 ml-1.5"
+                className="text-wink-500 hover:underline hover:text-wink-600 ml-1.5"
               >
                 회원가입
               </Link>

diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
@@ -81,7 +81,7 @@ const SignUpPage = () => {
       disabled: !!values.verifyToken,
       button: (
         <Button
-          className="w-28 py-2 text-sm"
+          className="w-32 py-4.5 px-2 text-sm"
           type="button"
           label="인증번호 요청"
           hidden={!!values.verifyToken}
@@ -204,7 +204,7 @@ const SignUpPage = () => {
               이미 회원이신가요?
               <Link
                 href="/auth/login"
-                className="text-wink-300 hover:underline hover:text-wink-500 ml-1.5"
+                className="text-wink-500 hover:underline hover:text-wink-600 ml-1.5"
               >
                 로그인
               </Link>

diff --git a/src/component/Button.tsx b/src/component/Button.tsx
@@ -7,7 +7,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<ButtonProps> = ({ className, label, ...rest }) => {
   return (
     <button
-      className={`text-white bg-wink-200 hover:bg-wink-500 rounded focus:outline-none focus:ring-2 focus:ring-wink-500 ${className}`}
+      className={`text-white bg-wink-500 hover:bg-wink-600 rounded focus:outline-none focus:ring-2 focus:ring-wink-300 ${className}`}
       {...rest}
     >
       {label}

diff --git a/src/component/Header.tsx b/src/component/Header.tsx
@@ -6,7 +6,7 @@ import { FaAngleDown } from 'react-icons/fa';
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { useMemberStore } from '@/store';
 
@@ -21,6 +21,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 export const Header: React.FC = () => {
   const router = useRouter();
 
+  const pathname = usePathname();
+
   const { member } = useMemberStore();
 
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
@@ -29,14 +31,16 @@ export const Header: React.FC = () => {
     {
       title: 'about us',
       mobileHide: true,
+      href: '/about-us',
       dropdown: [
-        { title: '동아리 소개', href: '/about-us' },
-        { title: '부원 소개', href: '/member' },
+        { title: '동아리 소개', href: '/about-us/we' },
+        { title: '부원 소개', href: '/about-us/member' },
       ],
     },
     {
       title: 'program',
       mobileHide: true,
+      href: '/activity',
       dropdown: [
         { title: '연혁', href: '/activity/history' },
         { title: '프로젝트', href: '/activity/project' },
@@ -85,7 +89,7 @@ export const Header: React.FC = () => {
               <div key={item.title} className={item.mobileHide ? 'hidden sm:block' : ''}>
                 <li className="font-bold text-sm relative cursor-pointer">
                   <div
-                    className="flex items-center gap-1"
+                    className={`flex items-center gap-1 ${pathname.startsWith(item.href) ? 'text-wink-500' : ''}`}
                     onClick={() => {
                       if (item.dropdown) {
                         handleDropdownToggle(item.title);
@@ -109,8 +113,11 @@ export const Header: React.FC = () => {
                         {item.dropdown.map((subItem) => (
                           <li
                             key={subItem.href}
-                            className="px-4 py-2 hover:bg-gray-100"
-                            onClick={() => router.push(subItem.href)}
+                            className={`px-4 py-2 hover:bg-gray-100 ${pathname.startsWith(subItem.href) ? 'text-wink-500' : ''}`}
+                            onClick={() => {
+                              router.push(subItem.href);
+                              setActiveDropdown(null);
+                            }}
                           >
                             <p>{subItem.title}</p>
                           </li>

diff --git a/src/component/ProjectCard.tsx b/src/component/ProjectCard.tsx
@@ -49,7 +49,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
               <h2 className="text-base font-medium text-center">{year}년</h2>
             </div>
           </div>
-          <div className="text-zinc-500 text-3 font-bold">
+
+          <div className="text-zinc-500 text-3 font-semibold">
             {tags.map((tag, index) => (
               <span key={index} className="mr-1">
                 #{tag}

diff --git a/src/component/admin/AdminDropdown.tsx b/src/component/admin/AdminDropdown.tsx
@@ -18,10 +18,10 @@ export const AdminDropdown = ({ value, options, onChange }: AdminDropdownProps)
     <div className="relative">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center justify-between w-full text-sm bg-white transition-colors duration-200 ease-in-out"
+        className="flex items-center justify-between w-full text-sm bg-white"
       >
         {value}
-        <FaAngleDown className={`w-4 h-4 ml-2 transition-transform duration-200 ease-in-out`} />
+        <FaAngleDown className={`w-4 h-4 ml-2`} />
       </button>
       <AnimatePresence>
         {isOpen && (
@@ -35,7 +35,7 @@ export const AdminDropdown = ({ value, options, onChange }: AdminDropdownProps)
             {options.map((option) => (
               <div
                 key={option}
-                className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 transition-colors duration-150 ease-in-out"
+                className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100"
                 onClick={() => {
                   onChange(option);
                   setIsOpen(false);