devping-kr · plla2 · Feb 15, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
diff --git a/src/components/common/DatePicker/index.tsx b/src/components/common/DatePicker/index.tsx
@@ -32,22 +32,24 @@ const DatePicker = ({
 
   return (
     <div className='flex w-full items-center gap-2'>
-      <div className='flex flex-col gap-1'>
-        <span>년도</span>
+      <div className='flex w-[194px] flex-col gap-1'>
         <Selectbox
           options={years}
           onChange={onYearChange}
           placeholder='년도'
           selectedValue={selectedYear.toString()}
+          className='flex justify-start'
+          buttonSize='sm'
         />
       </div>
-      <div className='flex flex-col gap-1'>
-        <span>월</span>
+      <div className='flex w-[194px] flex-col gap-1'>
         <Selectbox
           options={months}
           onChange={onMonthChange}
           placeholder='월'
           selectedValue={selectedMonth.toString()}
+          className='flex justify-start'
+          buttonSize='sm'
         />
       </div>
     </div>

diff --git a/src/components/common/Icon/assets/ArrowNext.tsx b/src/components/common/Icon/assets/ArrowNext.tsx
@@ -10,17 +10,16 @@ const ArrowNext = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 20 20'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M6.875 3.75L13.125 10L6.875 16.25'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9.86321 6.2636C10.2147 5.91213 10.7845 5.91213 11.136 6.2636L16.236 11.3636C16.5875 11.7151 16.5875 12.2849 16.236 12.6364L11.136 17.7364C10.7845 18.0879 10.2147 18.0879 9.86321 17.7364C9.51174 17.3849 9.51174 16.8151 9.86321 16.4636L14.3268 12L9.86321 7.5364C9.51174 7.18492 9.51174 6.61508 9.86321 6.2636Z'
+        fill={color}
       />
     </svg>
   );

diff --git a/src/components/common/Icon/assets/ArrowNextBlock.tsx b/src/components/common/Icon/assets/ArrowNextBlock.tsx
@@ -11,14 +11,14 @@ const ArrowNextBlock = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
+      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
         fillRule='evenodd'
         clipRule='evenodd'
         d='M18.336 11.4697C18.6875 11.7626 18.6875 12.2374 18.336 12.5303L13.236 16.7803C12.8845 17.0732 12.3147 17.0732 11.9632 16.7803C11.6117 16.4874 11.6117 16.0126 11.9632 15.7197L16.4268 12L11.9632 8.28033C11.6117 7.98744 11.6117 7.51256 11.9632 7.21967C12.3147 6.92678 12.8845 6.92678 13.236 7.21967L18.336 11.4697ZM7.236 7.21967L12.336 11.4697C12.6875 11.7626 12.6875 12.2374 12.336 12.5303L7.236 16.7803C6.88453 17.0732 6.31468 17.0732 5.96321 16.7803C5.61174 16.4874 5.61174 16.0126 5.96321 15.7197L10.4268 12L5.96321 8.28033C5.61174 7.98744 5.61174 7.51256 5.96321 7.21967C6.31468 6.92678 6.88453 6.92678 7.236 7.21967Z'
-        stroke='none'
         fill={color}
       />
     </svg>

diff --git a/src/components/common/Icon/assets/ArrowPrev.tsx b/src/components/common/Icon/assets/ArrowPrev.tsx
@@ -10,17 +10,16 @@ const ArrowPrev = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 20 20'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M13.125 16.25L6.875 10L13.125 3.75'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M14.1364 6.2636C14.4879 6.61508 14.4879 7.18492 14.1364 7.5364L9.67279 12L14.1364 16.4636C14.4879 16.8151 14.4879 17.3849 14.1364 17.7364C13.7849 18.0879 13.2151 18.0879 12.8636 17.7364L7.7636 12.6364C7.41213 12.2849 7.41213 11.7151 7.7636 11.3636L12.8636 6.2636C13.2151 5.91213 13.7849 5.91213 14.1364 6.2636Z'
+        fill={color}
       />
     </svg>
   );

diff --git a/src/components/common/Icon/assets/ArrowPrevBlock.tsx b/src/components/common/Icon/assets/ArrowPrevBlock.tsx
@@ -11,14 +11,14 @@ const ArrowPrevBlock = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
+      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
         fillRule='evenodd'
         clipRule='evenodd'
         d='M5.66399 11.4697C5.31252 11.7626 5.31252 12.2374 5.66399 12.5303L10.764 16.7803C11.1155 17.0732 11.6853 17.0732 12.0368 16.7803C12.3883 16.4874 12.3883 16.0126 12.0368 15.7197L7.57318 12L12.0368 8.28033C12.3883 7.98744 12.3883 7.51256 12.0368 7.21967C11.6853 6.92678 11.1155 6.92678 10.764 7.21967L5.66399 11.4697ZM16.764 7.21967L11.664 11.4697C11.3125 11.7626 11.3125 12.2374 11.664 12.5303L16.764 16.7803C17.1155 17.0732 17.6853 17.0732 18.0368 16.7803C18.3883 16.4874 18.3883 16.0126 18.0368 15.7197L13.5732 12L18.0368 8.28033C18.3883 7.98744 18.3883 7.51256 18.0368 7.21967C17.6853 6.92678 17.1155 6.92678 16.764 7.21967Z'
-        stroke='none'
         fill={color}
       />
     </svg>

diff --git a/src/components/common/Icon/assets/Search.tsx b/src/components/common/Icon/assets/Search.tsx
@@ -5,17 +5,15 @@ const Search = ({ width, height, color }: SVGProps<SVGSVGElement>) => {
     <svg
       width={width}
       height={height}
-      viewBox='0 0 16 16'
-      fill='none'
+      viewBox='0 0 20 20'
+      fill={color}
       xmlns='http://www.w3.org/2000/svg'
-      color={color}
     >
       <path
-        d='M14.7506 14.7506L10.8528 10.8528M10.8528 10.8528C11.9078 9.7979 12.5004 8.36711 12.5004 6.87521C12.5004 5.38331 11.9078 3.95252 10.8528 2.89759C9.7979 1.84265 8.36711 1.25 6.87521 1.25C5.38331 1.25 3.95252 1.84265 2.89759 2.89759C1.84265 3.95252 1.25 5.38331 1.25 6.87521C1.25 8.36711 1.84265 9.7979 2.89759 10.8528C3.95252 11.9078 5.38331 12.5004 6.87521 12.5004C8.36711 12.5004 9.7979 11.9078 10.8528 10.8528Z'
-        stroke='currentColor'
-        strokeWidth='1'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z'
+        fill={color}
       />
     </svg>
   );

diff --git a/src/components/common/Icon/assets/index.ts b/src/components/common/Icon/assets/index.ts
@@ -35,20 +35,20 @@ type IconMapEntry = {
 };
 
 type ColorClassNames = {
-  [group in 'white' | 'dark' | 'red' | 'green' | 'gray' | 'grey']: {
+  [group in 'white' | 'dark' | 'red' | 'green' | 'gray' | 'grey' | 'black']: {
     [shade: number]: string;
   };
 };
 
 export const iconMap: Record<string, IconMapEntry> = {
-  search: { type: 'stroke', file: Search },
+  search: { type: 'fill', file: Search },
   edit: { type: 'fill', file: Edit },
   xmark: { type: 'fill', file: Xmark },
   plus: { type: 'stroke', file: Plus },
   arrowUp: { type: 'fill', file: Arrowup },
   arrowDown: { type: 'fill', file: ArrowDown },
-  arrowPrev: { type: 'stroke', file: ArrowPrev },
-  arrowNext: { type: 'stroke', file: ArrowNext },
+  arrowPrev: { type: 'fill', file: ArrowPrev },
+  arrowNext: { type: 'fill', file: ArrowNext },
   arrowPrevBlock: { type: 'fill', file: ArrowPrevBlock },
   arrowNextBlock: { type: 'fill', file: ArrowNextBlock },
   dashboard: {
@@ -132,6 +132,9 @@ const COLOR_CLASSNAMES: ColorClassNames = {
   dark: {
     100: 'dark-100',
   },
+  black: {
+    100: 'black-100',
+  },
   red: {
     100: 'red-100',
     200: 'red-200',
@@ -187,7 +190,7 @@ type ColorShade = keyof (typeof COLOR_CLASSNAMES)[ColorGroup];
 export type HoverColor = `${ColorGroup}${ColorShade}`;
 
 const getColorClass = (color?: HoverColor): string => {
-  if (!color) return COLOR_CLASSNAMES.dark[100];
+  if (!color) return COLOR_CLASSNAMES.black[100];
 
   const match = color.match(/^(\w+)(\d+)$/);
   if (!match) return COLOR_CLASSNAMES.gray[600];

diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx
@@ -93,6 +93,11 @@ export const SubTitle1Black = customTypography('span', {
   color: 'black',
 });
 
+export const SubTitle1Green500 = customTypography('span', {
+  type: 'Subtitle1',
+  color: 'green',
+});
+
 export const Subtitle2Black = customTypography('span', {
   type: 'Subtitle2',
   color: 'black',

diff --git a/src/components/feature/ViewChart/index.tsx b/src/components/feature/ViewChart/index.tsx
@@ -6,7 +6,10 @@ import dayjs from 'dayjs';
 import { surveyType } from '@/type/survey/surveyResponse';
 import ControlTab from '@/components/common/ControlTab';
 import Pagination from '@/components/common/Pagination';
-import { HeadPrimary } from '@/components/common/Typography';
+import {
+  SubTitle1Black,
+  SubTitle1Green500,
+} from '@/components/common/Typography';
 import GetAllListControls from '@/components/shared/GetAllList/Controls';
 import GetAllListHeader from '@/components/shared/GetAllList/Header';
 import GetAllListTable from '@/components/shared/GetAllList/ListTable';
@@ -80,10 +83,10 @@ const ViewChart = () => {
   };
 
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='flex flex-col gap-6'>
       {surveyList && (
         <>
-          <GetAllListHeader title='설문 결과 리스트' />
+          <GetAllListHeader title='설문 결과 조회' />
           <GetAllListControls
             type='viewChart'
             selectedMonth={selectedMonth}
@@ -92,14 +95,21 @@ const ViewChart = () => {
             onYearChange={setSelectedYear}
             searchValue={searchValue}
             handleChangeSearchValue={handleChangeSearchValue}
-            inputPlaceholder='설문 이름을 입력해주세요.'
+            inputPlaceholder='설문 이름을 입력하세요'
             handleSearchSubmit={handleSearchSubmit}
           />
-          {surveyList?.data.totalItems === 0 ? (
-            <HeadPrimary>설문이 존재하지 않습니다</HeadPrimary>
-          ) : (
-            <div className='flex flex-col gap-6 rounded-2xl bg-white-100 p-6'>
-              <div className='flex items-center justify-end gap-6'>
+          <div className='flex flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+            <div className='flex items-center justify-between gap-6'>
+              <div className='flex items-center gap-1'>
+                <SubTitle1Black>총</SubTitle1Black>
+                <div>
+                  <SubTitle1Green500>
+                    {surveyList.data.totalItems}
+                  </SubTitle1Green500>
+                  <SubTitle1Black>개</SubTitle1Black>
+                </div>
+              </div>
+              <div className='flex items-center gap-6'>
                 <ControlTab
                   controlTabItems={SURVEY_FILTER_OPTIONS}
                   selectedFilter={selectedFilter!}
@@ -116,19 +126,19 @@ const ViewChart = () => {
                   setSelectedTab={setSelectedTab}
                 />
               </div>
-              <GetAllListTable
-                data={convertToTableRowData(surveyList.data.surveys)}
-                onRowClick={(id) => router.push(`${ROUTES.VIEW.CHART}/${id}`)}
-                headerType='viewChart'
-              />
-              <Pagination
-                limit={PAGE_LIMIT}
-                page={page}
-                setPage={setPage}
-                totalPosts={surveyList.data.totalItems}
-              />
             </div>
-          )}
+            <GetAllListTable
+              data={convertToTableRowData(surveyList.data.surveys)}
+              onRowClick={(id) => router.push(`${ROUTES.VIEW.CHART}/${id}`)}
+              headerType='viewChart'
+            />
+            <Pagination
+              limit={PAGE_LIMIT}
+              page={page}
+              setPage={setPage}
+              totalPosts={surveyList.data.totalItems}
+            />
+          </div>
         </>
       )}
     </div>

diff --git a/src/components/shared/GetAllList/Controls/index.tsx b/src/components/shared/GetAllList/Controls/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { cn } from '@/utils/core';
+import Button from '@/components/common/Button/Button';
 import DatePicker from '@/components/common/DatePicker';
+import Icon from '@/components/common/Icon';
 import { Input } from '@/components/common/Input';
 import { Option, Selectbox } from '@/components/common/Selectbox';
+import { Subtitle2White } from '@/components/common/Typography';
 import { ORGANIZATION_LIST } from '@/constants/_category';
 
 interface Props {
@@ -54,22 +56,34 @@ const GetAllListControls = ({
         onMonthChange={onMonthChange}
         onYearChange={onYearChange}
       />
-      <div
-        className={cn(
-          'flex w-full items-end justify-end gap-5',
-          type === 'viewChart' && 'w-1/2',
-        )}
-      >
-        <Input
-          isLeftIcon
-          height='basic'
-          placeholder={inputPlaceholder}
-          bgcolor='meal'
-          includeButton
-          value={searchValue}
-          onChange={handleChangeSearchValue}
-          onSubmit={handleSearchSubmit}
-        />
+      <div className='flex w-full items-end justify-end gap-2'>
+        <div className='relative h-12 w-60'>
+          <div className='absolute right-[14px] top-[14px]'>
+            <Icon
+              name='search'
+              width={20}
+              height={20}
+              className=''
+              color='black'
+            />
+          </div>
+          <Input
+            variant='white'
+            placeholder={inputPlaceholder}
+            value={searchValue}
+            onChange={handleChangeSearchValue}
+          />
+        </div>
+        <div className='w-[60px]'>
+          <Button
+            variant='primary'
+            size='sm'
+            onClick={handleSearchSubmit}
+            width='full'
+          >
+            <Subtitle2White>검색</Subtitle2White>
+          </Button>
+        </div>
         {type === 'viewPlan' && setOrganization && setSelectedCategory && (
           <div className='flex gap-1 whitespace-pre'>
             <Selectbox

diff --git a/src/components/shared/GetAllList/Header/index.tsx b/src/components/shared/GetAllList/Header/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { PageHeaderTitle } from '@/components/common/Typography';
+import { H2Black } from '@/components/common/Typography';
 
 interface Props {
   title: string;
 }
 
 const ViewPlanHeader = ({ title }: Props) => {
-  return <PageHeaderTitle>{title}</PageHeaderTitle>;
+  return <H2Black>{title}</H2Black>;
 };
 
 export default ViewPlanHeader;