💄 공지 목록 디자인 수정 (#134)

* design: 공지목록 디자인 수정 * design: 공지 목록 편집 모드 디자인 수정 * design: 폰트 크기 tailwind 사용
wafflestudio · Feb 11, 2024 · ea76db5 · ea76db5
1 parent 780071e
commit ea76db5
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 74 deletions.
diff --git a/components/common/Checkbox.tsx b/components/common/Checkbox.tsx
@@ -21,13 +21,17 @@ export default function Checkbox({
       }`}
     >
       <span
-        className={`material-symbols-rounded text-neutral-300 group-hover:text-neutral-700 group-active:text-main-orange ${
-          isChecked && 'text-neutral-700'
-        } text-lg font-light`}
+        className={`material-symbols-rounded text-neutral-400 text-lg font-light ${
+          !disabled && 'group-hover:text-neutral-600 group-active:text-main-orange'
+        } ${isChecked && 'text-neutral-600'}`}
       >
         {iconName}
       </span>
-      <span className="font-yoon text-xs text-neutral-700 font-light tracking-wide group-active:text-main-orange">
+      <span
+        className={`text-[14px] text-neutral-600 tracking-wide ${
+          !disabled && 'group-active:text-main-orange'
+        }`}
+      >
         {label}
       </span>
       <input

diff --git a/components/common/Pagination.tsx b/components/common/Pagination.tsx
@@ -27,7 +27,7 @@ export default function Pagination({
 
   return (
     <div className={`flex justify-center ${disabled && 'opacity-30'}`}>
-      <ul className="flex gap-x-[0.3125rem] font-yoon h-[1.375rem] mx-auto text-neutral-700 tracking-wide">
+      <ul className="flex gap-x-2 h-6 mx-auto text-neutral-800 tracking-wide">
         <PaginationArrow
           iconName="keyboard_double_arrow_left"
           num={1}
@@ -82,7 +82,7 @@ function PaginationArrow({ iconName, num, disabled, movePageNumber }: Pagination
 
   return (
     <li className={arrowStyle} onClick={() => disabled || movePageNumber(num)}>
-      <span className="material-symbols-rounded font-light text-xl">{iconName}</span>
+      <span className="material-symbols-rounded font-light text-2xl">{iconName}</span>
     </li>
   );
 }
@@ -103,7 +103,7 @@ function PaginationNumber({ num, isSelected, disabled, movePageNumber }: Paginat
       className={`flex items-center justify-center px-2 ${cursorStyle} ${textStyle}`}
       onClick={() => !isSelected && !disabled && movePageNumber(num)}
     >
-      <span className={`text-xs ${isSelected && 'font-bold underline'}`}>{num}</span>
+      <span className={`text-md ${isSelected && 'font-bold underline'}`}>{num}</span>
     </li>
   );
 }
diff --git a/components/common/Tags.tsx b/components/common/Tags.tsx
@@ -40,11 +40,19 @@ interface TagProps {
   tag: string;
   hoverStyle?: HoverStyle;
   defaultStyle?: DefaultStyle;
+  disabled?: boolean;
   onClick?: (tag: string) => void;
   onDelete?: (tag: string) => void;
 }
 
-export function Tag({ tag, hoverStyle, defaultStyle = 'orange', onClick, onDelete }: TagProps) {
+export function Tag({
+  tag,
+  hoverStyle,
+  defaultStyle = 'orange',
+  disabled = false,
+  onClick,
+  onDelete,
+}: TagProps) {
   const tagClass =
     'flex items-center pl-2.5 h-[24px] border rounded-[1.875rem] text-[13px] whitespace-nowrap duration-200';
   const defaultClass = DEFAULT_STYLE[defaultStyle];
@@ -59,8 +67,14 @@ export function Tag({ tag, hoverStyle, defaultStyle = 'orange', onClick, onDelet
     >
       <span className={onDelete ? '' : 'pr-2.5'}>{tag}</span>
       {onDelete && (
-        <button className="flex items-center h-full pl-1 pr-2.5 text-main-orange hover:text-neutral-400 active:text-main-orange ">
-          <span className="material-symbols-outlined  text-xs" onClick={() => onDelete(tag)}>
+        <button
+          className={`flex items-center h-full pl-1 pr-2.5 text-main-orange enabled:hover:text-neutral-400 enabled:active:text-main-orange`}
+          disabled={disabled}
+        >
+          <span
+            className="material-symbols-outlined text-xs"
+            onClick={() => !disabled && onDelete(tag)}
+          >
             close
           </span>
         </button>

diff --git a/components/common/search/KeywordInput.tsx b/components/common/search/KeywordInput.tsx
@@ -7,8 +7,6 @@ interface KeywordInputProps {
 }
 
 export default function KeywordInput({ keyword, setKeyword, disabled = false }: KeywordInputProps) {
-  const resetKeyword = () => setKeyword('');
-
   return (
     <div className="col-start-1 flex items-center">
       <h5 className="font-yoon text-md font-bold mr-3 whitespace-nowrap tracking-wide">검색어</h5>
@@ -39,7 +37,7 @@ function Input({ keyword, disabled, onChange }: InputProps) {
         ref={inputRef}
         className={`${
           keyword ? 'pl-1.5 pr-6' : 'px-1.5'
-        } w-[13.5rem] h-[1.875rem] rounded-[0.1875rem] outline outline-1 outline-neutral-300 focus:outline-neutral-700 font-yoon text-xs tracking-wide bg-transparent autofill-bg-white`}
+        } w-[13.5rem] h-[1.875rem] rounded-sm text-[13px] tracking-wide bg-white autofill-bg-white outline-none`}
         value={keyword}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value)}
@@ -56,7 +54,7 @@ interface ResetKeywordButtonProps {
 function ResetKeywordButton({ onClick }: ResetKeywordButtonProps) {
   return (
     <span
-      className="material-symbols-outlined absolute top-[8px] right-1.5 text-neutral-500 hover:text-neutral-700 text-md cursor-pointer"
+      className="material-symbols-outlined absolute top-[8px] right-1.5 text-neutral-400 hover:text-neutral-700 text-md cursor-pointer"
       onClick={onClick}
     >
       close

diff --git a/components/common/search/SearchBox.tsx b/components/common/search/SearchBox.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useReducer, useState } from 'react';
+import { FormEvent, useState } from 'react';
 
 import { StraightNode } from '@/components/common/Nodes';
 
@@ -22,7 +22,6 @@ export default function SearchBox({
   disabled = false,
   setSearchParams,
 }: SearchBoxProps) {
-  const [expanded, toggleExpanded] = useReducer((x) => !x, true);
   const [keyword, setKeyword] = useState<string>(initKeyword);
   const [selectedTags, setSelectedTags] = useState<string[]>(initTags);
 
@@ -44,20 +43,17 @@ export default function SearchBox({
   };
 
   return (
-    <div className={`mb-6 w-full ${disabled && 'opacity-30'}`}>
-      <SearchHeader disabled={disabled} expanded={expanded} toggleExpanded={toggleExpanded} />
-      {expanded && (
-        <SearchForm
-          disabled={disabled}
-          onSubmit={search}
-          tags={tags}
-          selectedTags={selectedTags}
-          setSelectedTags={setSelectedTags}
-          keyword={keyword}
-          setKeyword={setKeyword}
-        />
-      )}
-      <StraightNode double={true} margin="mt-6 mb-3" />
+    <div className={`mb-9 w-full ${disabled && 'opacity-30'}`}>
+      <SearchForm
+        disabled={disabled}
+        onSubmit={search}
+        tags={tags}
+        selectedTags={selectedTags}
+        setSelectedTags={setSelectedTags}
+        keyword={keyword}
+        setKeyword={setKeyword}
+      />
+      <StraightNode double={true} margin="mt-9 mb-3" />
       <SelectedTags
         tags={initTags}
         deleteTag={deleteTag}
@@ -67,23 +63,3 @@ export default function SearchBox({
     </div>
   );
 }
-
-interface SearchHeaderProps {
-  disabled: boolean;
-  expanded: boolean;
-  toggleExpanded: () => void;
-}
-
-function SearchHeader({ disabled, expanded, toggleExpanded }: SearchHeaderProps) {
-  const iconName = expanded ? 'expand_less' : 'expand_more';
-
-  return (
-    <h4
-      className={`flex items-center gap-1 ${disabled ? 'cursor-default' : 'cursor-pointer'} w-fit`}
-      onClick={() => !disabled && toggleExpanded()}
-    >
-      <span className="text-md font-bold font-yoon text-neutral-700 tracking-wide">검색</span>
-      <span className="material-symbols-outlined font-semibold text-neutral-700">{iconName}</span>
-    </h4>
-  );
-}
diff --git a/components/common/search/SearchForm.tsx b/components/common/search/SearchForm.tsx
@@ -24,7 +24,7 @@ export default function SearchForm({
 }: SearchFormProps) {
   return (
     <form
-      className="grid grid-cols-[auto_1fr_auto] grid-rows-auto gap-y-7 pt-4 pl-3 pr-2.5 min-w-max"
+      className="grid grid-cols-[auto_1fr_auto] grid-rows-auto gap-y-5 p-6 min-w-max bg-neutral-100"
       onSubmit={onSubmit}
     >
       <TagFilter
@@ -42,7 +42,7 @@ export default function SearchForm({
 function SearchButton({ disabled }: { disabled: boolean }) {
   return (
     <button
-      className="col-start-3 px-3 py-[0.1875rem] rounded-[0.0625rem] bg-neutral-200 enabled:hover:bg-neutral-300 font-yoon font-bold text-xs tracking-[0.02em]"
+      className="col-start-3 px-3 py-[0.1875rem] rounded-[0.0625rem] bg-neutral-200 enabled:hover:bg-neutral-300 font-semibold text-xs tracking-wider"
       disabled={disabled}
     >
       결과 보기

diff --git a/components/common/search/SelectedTags.tsx b/components/common/search/SelectedTags.tsx
@@ -10,22 +10,28 @@ interface SelectedTagsProps {
 export default function SelectedTags({ tags, deleteTag, resetTags, disabled }: SelectedTagsProps) {
   return (
     <div className="flex justify-between items-start gap-3 px-2.5">
-      <Tags tags={tags.length ? tags : ['전체']} deleteTag={deleteTag} />
+      <Tags tags={tags.length ? tags : ['전체']} deleteTag={deleteTag} disabled={disabled} />
       {tags.length > 0 && <TagResetButton onClick={resetTags} disabled={disabled} />}
     </div>
   );
 }
 
 interface TagsProps {
   tags: string[];
+  disabled: boolean;
   deleteTag: (tag: string) => void;
 }
 
-function Tags({ tags, deleteTag }: TagsProps) {
+function Tags({ tags, disabled, deleteTag }: TagsProps) {
   return (
     <div className={`flex flex-wrap items-center gap-2.5`}>
       {tags.map((tag) => (
-        <Tag key={tag} tag={tag} onDelete={tag === '전체' ? undefined : deleteTag} />
+        <Tag
+          key={tag}
+          tag={tag}
+          onDelete={tag === '전체' ? undefined : deleteTag}
+          disabled={disabled}
+        />
       ))}
     </div>
   );
@@ -40,7 +46,7 @@ function TagResetButton({ disabled, onClick }: TagResetButtonProps) {
   return (
     <button
       onClick={onClick}
-      className="flex items-center gap-[0.125rem] text-main-orange enabled:hover:text-neutral-400 text-xs whitespace-nowrap"
+      className="flex items-center gap-[0.125rem] text-main-orange enabled:hover:text-neutral-400 text-sm whitespace-nowrap"
       disabled={disabled}
     >
       <span className="material-symbols-outlined scale-x-[-1] font-light text-base">refresh</span>

diff --git a/components/common/search/TagFilter.tsx b/components/common/search/TagFilter.tsx
@@ -26,7 +26,7 @@ export default function TagFilter({
 
   return (
     <div className="flex row-span-1 col-span-full">
-      <h5 className="text-md font-bold font-yoon whitespace-nowrap mr-6 text-neutral-700 tracking-wide">
+      <h5 className="text-md font-bold whitespace-nowrap mr-6 text-neutral-800 tracking-wide">
         태그
       </h5>
       <div className={`grow grid ${gridStyle} gap-x-7 gap-y-2.5`}>

diff --git a/components/notice/AdminFeatures.tsx b/components/notice/AdminFeatures.tsx
@@ -52,7 +52,7 @@ export default function AdminFeatures({
   return (
     <div className="flex mt-12 mx-2.5">
       {isEditMode && (
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <SelectedCountStatus count={selectedPostIds.size} />
           <BatchButton
             disabled={selectedPostIds.size === 0}
@@ -94,11 +94,11 @@ export default function AdminFeatures({
 
 function SelectedCountStatus({ count }: { count: number }) {
   return (
-    <div className="flex items-center gap-1 mr-3">
+    <div className="flex items-center gap-1">
       <span className="material-symbols-rounded text-neutral-500 text-lg font-extralight">
         check_box
       </span>
-      <span className="text-neutral-500 text-xs tracking-wide">{count}개 게시물 선택</span>
+      <span className="text-neutral-500 text-sm tracking-wide">{count}개 게시물 선택</span>
     </div>
   );
 }
diff --git a/components/notice/NoticeButtons.tsx b/components/notice/NoticeButtons.tsx
@@ -9,7 +9,7 @@ interface BatchButtonProps {
 export function BatchButton({ disabled, onClick, children }: BatchButtonProps) {
   return (
     <button
-      className="px-3 h-[2.1875rem] border border-neutral-200 bg-neutral-100 rounded-[0.0625rem] text-neutral-500 text-xs font-noto font-medium disabled:bg-neutral-50 disabled:text-neutral-300"
+      className="px-3 h-[2.1875rem] border border-neutral-200 bg-neutral-100 rounded-[0.0625rem] text-neutral-500 text-xs font-medium disabled:bg-neutral-50 disabled:text-neutral-300"
       onClick={onClick}
       disabled={disabled}
     >
@@ -27,7 +27,7 @@ export function EditButton({ isEditMode, toggleEditMode }: EditButtonProps) {
   return (
     <button
       type="button"
-      className="px-[0.875rem] h-[2.1875rem] rounded-[0.0625rem] bg-main-orange hover:bg-neutral-500 text-xs tracking-[0.02em] font-noto font-bold"
+      className="px-4 h-[2.1875rem] rounded-[0.0625rem] bg-main-orange hover:bg-neutral-500 text-white text-xs tracking-wider leading-loose font-semibold"
       onClick={toggleEditMode}
     >
       {isEditMode ? '완료' : '편집'}
@@ -45,7 +45,7 @@ export function CreateButton({ mainPath, disabled }: CreateButtonProps) {
     <Link href={`${mainPath}/create`}>
       <button
         type="button"
-        className="ml-4 px-[0.875rem] h-[2.1875rem] rounded-[0.0625rem] bg-neutral-200 enabled:hover:bg-neutral-300 text-xs tracking-[0.02em] font-noto font-bold disabled:opacity-30"
+        className="ml-4 px-3 h-[2.1875rem] rounded-[0.0625rem] bg-neutral-800 enabled:hover:bg-neutral-300 text-white text-xs tracking-wider leading-loose font-semibold disabled:opacity-30"
         disabled={disabled}
       >
         새 게시글

diff --git a/components/notice/NoticeList.tsx b/components/notice/NoticeList.tsx
@@ -27,9 +27,9 @@ export default function NoticeList({
   };
 
   return posts.length ? (
-    <div className="mt-6 mb-8 mx-2.5 text-xs border-y border-neutral-200">
+    <div className="mt-9 mb-10 mx-2.5 border-y border-neutral-200">
       <NoticeListHeader isEditMode={isEditMode} />
-      <ul className={`font-noto ${isEditMode && 'divide-y divide-neutral-200 divide-dashed'}`}>
+      <ul className={`${isEditMode && 'divide-y divide-neutral-200 divide-dashed'}`}>
         {posts.map((post, i) => (
           <NoticeListRow
             key={i}

diff --git a/components/notice/NoticeListHeader.tsx b/components/notice/NoticeListHeader.tsx
@@ -5,7 +5,7 @@ export default function NoticeListHeader({ isEditMode }: { isEditMode: boolean }
 
   return (
     <h5
-      className={`h-10 ${paddingLeft} flex font-yoon items-center border-b border-neutral-200 text-neutral-700`}
+      className={`h-11 ${paddingLeft} flex text-[15px] items-center border-b border-neutral-200 text-neutral-800`}
     >
       <span className={`${NOTICE_ROW_CELL_WIDTH.title} pl-3 tracking-wide`}>제목</span>
       <span className={`${NOTICE_ROW_CELL_WIDTH.date} pl-8 tracking-wide`}>날짜</span>

diff --git a/components/notice/NoticeListRow.tsx b/components/notice/NoticeListRow.tsx
@@ -31,11 +31,9 @@ export default function NoticeListRow({
 }: NoticeListRowProps) {
   return (
     <li
-      className={`flex items-center h-10 py-2.5 ${
-        post.isPinned ? 'font-noto font-bold' : 'font-noto-demi'
-      } ${!isEditMode && (post.isPrivate ? 'bg-neutral-200' : 'odd:bg-neutral-100')} ${
-        isSelected && 'bg-neutral-100'
-      } `}
+      className={`flex items-center text-[14px] h-11 py-2.5 ${post.isPinned && 'font-semibold'} ${
+        !isEditMode && (post.isPrivate ? 'bg-neutral-200' : 'odd:bg-neutral-50')
+      } ${isSelected && 'bg-neutral-100'} `}
     >
       {isEditMode && (
         <CheckboxCell

diff --git a/components/notice/NoticePageContent.tsx b/components/notice/NoticePageContent.tsx
@@ -60,7 +60,7 @@ export default function NoticePageContent({
   // edit mode에서 페이지 나가려고 할 때 경고 띄워주기: 변경사항이 저장되지 않았습니다. 정말 나가시겠습니까?
 
   return (
-    <PageLayout titleType="big" titleMargin="mb-6">
+    <PageLayout titleType="big" titleMargin="mb-[44px]" bodyStyle={{ paddingTop: 54 }}>
       <SearchBox
         tags={NoticeTags}
         initTags={tags}

diff --git a/public/image/checkbox_orange.svg b/public/image/checkbox_orange.svg