SproutSeSAC · talentforest · Jul 3, 2025 · Jun 20, 2025 · Jun 27, 2025 · Jul 3, 2025
diff --git a/src/components/common/TabNavigation.tsx b/src/components/common/TabNavigation.tsx
@@ -36,12 +36,12 @@ export default function TabNavigation<T>({
     <nav
       className={`flex items-end justify-between text-lg font-semibold ${selectedStyle.point === 'border' ? 'border-b' : ''}`}
     >
-      <ul className="flex flex-wrap justify-start gap-4">
+      <ul className="flex flex-wrap justify-start gap-5">
         {tabList.map(({ text, type }) => (
           <li
             role="presentation"
             key={text}
-            className={`relative flex cursor-pointer flex-col items-center justify-center whitespace-nowrap px-5 pb-[19px] pt-4 ${selectValue === type ? `${borderStyle} ${colorStyle}` : 'text-mainGray'} ${tabClassName}`}
+            className={`relative flex cursor-pointer flex-col items-center justify-center whitespace-nowrap px-2 pb-[19px] pt-4 ${selectValue === type ? `${borderStyle} ${colorStyle}` : 'text-mainGray'} ${tabClassName}`}
             onClick={e => onChangeValue(type, e)}
             onKeyDown={e => {
               if (e.key === 'Escape' || e.key === ' ') {

diff --git a/src/components/mypage/MyCollection.tsx b/src/components/mypage/MyCollection.tsx
@@ -178,7 +178,7 @@ export default function MyCollection() {
             </TableContainer>
           </div>
 
-          {totalPage && (
+          {!!totalPage && (
             <Pagination
               totalPages={totalPage}
               currentPage={tableFilter.page}

diff --git a/src/components/store/StoreCard.tsx b/src/components/store/StoreCard.tsx
@@ -1,15 +1,11 @@
-import { MouseEvent, useCallback, useState } from 'react';
+import { MouseEvent, useCallback } from 'react';
 
 import { useGetCampusList } from '@/services/campusCourse/campusCourseQueries';
 
 import { foodFilterDisplay } from '@/constants/store';
 import { useDialogContext, useHandleScrap } from '@/hooks';
 import { Store } from '@/types/store/storeDto';
-import {
-  BsClockFill,
-  BsFillGeoAltFill,
-  BsFillTelephoneFill,
-} from 'react-icons/bs';
+import { BsClockFill, BsFillTelephoneFill, BsGeoAltFill } from 'react-icons/bs';
 import { PiArrowSquareInThin } from 'react-icons/pi';
 
 import Icon from '@/components/common/Icon';
@@ -35,8 +31,6 @@ export default function StoreCard({
   isOpenStoreProposalEditModal,
   ...rest
 }: StoreCardProps) {
-  const [openHoursModal, setOpenHoursModal] = useState(false);
-
   const { showDialog } = useDialogContext();
 
   const { isScraped, postId, storeImageList, mapSchemaId } = storeData;
@@ -105,7 +99,10 @@ export default function StoreCard({
   };
 
   return (
-    <article className={`${width} gap-[11px]`} {...rest}>
+    <article
+      className={`${width} flex flex-col gap-3 ${isOpenStoreProposalEditModal ? 'mt-6' : 'mt-3'}`}
+      {...rest}
+    >
       {storeImageList.length === 1 ? (
         <StoreMenuImage
           src={storeImageList[0].path}
@@ -130,156 +127,131 @@ export default function StoreCard({
         </SwiperContainer>
       )}
 
-      <section
-        className={`flex flex-col gap-3 ${isOpenStoreProposalEditModal ? 'mt-6' : 'mt-3'}`}
-      >
-        <header className="mb-2 flex items-center justify-between font-semibold">
-          <div className="flex items-center gap-[10px]">
-            <h2 className="text-lg">{storeData.name || ''}</h2>
-            <span className="text-mainGray-active">
-              {storeData.foodType ? foodFilterDisplay[storeData.foodType] : '-'}
-            </span>
-          </div>
+      <header className="mb-2 flex items-center justify-between font-semibold">
+        <h2 className="text-lg">
+          <span className="mr-1.5">{storeData.name || ''}</span>
+          <span className="text-mainGray-active">
+            {storeData.foodType ? foodFilterDisplay[storeData.foodType] : '-'}
+          </span>
+        </h2>
+
+        {isOpenStoreProposalEditModal && (
+          <button
+            onClick={onOpenStoreProposalEditModalClick}
+            className="flex items-center justify-center text-base font-semibold text-mainGray-active"
+          >
+            정보 수정 제안하기
+            <Icon name="ChevronRight" width={18} height={18} />
+          </button>
+        )}
+
+        {showFavoriteButton && (
+          <FavoriteButton
+            size={18}
+            isFavorite={storeData.isScraped}
+            onClick={onScrapClick}
+            disabled={isPostScrapPending || isDeleteScrapPending}
+          />
+        )}
+      </header>
+
+      <ul className="flex flex-col gap-2">
+        <li className="relative flex w-fit max-w-full items-center">
+          <BsGeoAltFill className="mr-1.5 size-3.5 min-w-fit text-mainGray-hover" />
+
+          <span className="mr-1.5 text-darkGray-active">
+            {storeData.campusName}
+          </span>
 
-          {isOpenStoreProposalEditModal && (
-            <button
-              onClick={onOpenStoreProposalEditModalClick}
-              className="flex items-center justify-center text-base font-semibold text-mainGray-active"
-            >
-              정보 수정 제안하기
-              <Icon name="ChevronRight" width={18} height={18} />
-            </button>
-          )}
-
-          {showFavoriteButton && (
-            <FavoriteButton
-              size={18}
-              isFavorite={storeData.isScraped}
-              onClick={onScrapClick}
-              disabled={isPostScrapPending || isDeleteScrapPending}
-            />
-          )}
-        </header>
-
-        <section className="flex items-center gap-2.5">
-          <BsFillGeoAltFill className="text-mainGray-hover" size={17} />
-          <div className="relative flex items-center gap-2.5">
-            <span className="text-darkGray-active">
-              {storeData ? `${storeData.campusName}` : '-'}
+          <span className="mr-1.5">
+            도보{' '}
+            <span className="text-mainBlue">{storeData.walkTime || 0}</span>분
+          </span>
+
+          <button
+            onClick={handleOpenNaverLink}
+            className="peer flex items-center justify-center text-sm"
+          >
+            <PiArrowSquareInThin className="text-darkGray-active" size={18} />
+          </button>
+
+          <div className="absolute -right-[88px] -top-10 hidden rounded-md rounded-bl-none bg-mainGreen bg-opacity-90 px-3 py-2 peer-hover:block">
+            <span className="whitespace-normal font-medium text-white">
+              빠른 길찾기
             </span>
-            <div className="flex gap-1 text-darkGray-active">
-              <span>도보</span>
-              <span>
-                <span className="text-mainBlue">{storeData.walkTime || 0}</span>
-                <span>분</span>
-              </span>
-              <button
-                onClick={handleOpenNaverLink}
-                className="peer flex items-center justify-center text-sm"
-              >
-                <PiArrowSquareInThin
-                  className="text-mainGray-hover"
-                  size={18}
-                />
-              </button>
-              <div className="absolute -right-[88px] -top-10 hidden whitespace-normal rounded-md rounded-bl-none bg-mainGreen bg-opacity-90 px-3 py-2 font-medium text-white peer-hover:block">
-                빠른 길찾기
-              </div>
-            </div>
           </div>
-        </section>
+        </li>
+
+        <li className="flex items-center">
+          <BsClockFill className="mr-1.5 size-3.5 min-w-fit text-mainGray-hover" />
 
-        <section className="flex items-center">
-          <BsClockFill
-            className="mr-[10px] min-w-3.5 text-mainGray-hover"
-            size={15}
-          />
           <span className="min-w-max text-darkGray-active">
             {isOpenForBusiness() ? '영업 중' : '영업 종료'}
           </span>
-          <span className="mx-2 text-mainGray">|</span>
-          <div className="group relative flex text-darkGray-active">
-            <button
-              type="button"
-              onClick={e => {
-                e.preventDefault();
-                e.stopPropagation();
-                setOpenHoursModal(prev => !prev);
-              }}
-            >
-              {/* 영업시간 정보 */}
-              <span className="line-clamp-1 text-start">
-                {storeData.workingDay}
-              </span>
-
-              {/* 브레이크타임 정보 */}
-              {storeData.breakTime &&
-                (openHoursModal ? (
-                  <Icon name="ChevronUp" width={18} height={18} />
-                ) : (
-                  <Icon name="ChevronDown" width={18} height={18} />
-                ))}
-            </button>
 
-            <div className="absolute -left-[30%] bottom-8 z-50 hidden min-w-max whitespace-normal rounded-md bg-mainGreen px-4 py-3 text-white group-hover:block">
+          <span className="mx-1.5 text-mainGray">|</span>
+
+          <div className="group relative flex items-center">
+            {/* 영업시간 정보 */}
+
+            <span className="mr-1 line-clamp-1 text-start text-darkGray-active">
+              {storeData.workingDay}
+            </span>
+
+            <div className="absolute -right-[5%] top-8 z-20 hidden min-w-max whitespace-normal rounded-md bg-mainGreen px-4 py-3 text-white group-hover:block">
               {/* 삼각형 */}
-              <div className="absolute -bottom-1.5 left-1/2 h-0 w-0 -translate-x-1/2 border-x-8 border-t-8 border-x-transparent border-t-mainGreen opacity-90" />
+              <div className="absolute -top-1.5 right-[2%] h-0 w-0 -translate-x-1/2 border-x-8 border-b-8 border-x-transparent border-b-mainGreen" />
               <ul className="flex flex-col gap-1">
                 {storeData.workingDay.split(/, |\(|\)/).map(workingDay => (
                   <li key={workingDay}>{workingDay}</li>
                 ))}
+                {/* 브레이크타임 정보 */}
+                {storeData.breakTime !== ' ' && (
+                  <li>{storeData.breakTime} 브레이크타임</li>
+                )}
               </ul>
             </div>
-
-            {storeData.breakTime && openHoursModal && (
-              <div className="absolute right-0 top-6 z-10 flex w-full min-w-[166px] flex-col justify-center gap-2 rounded-lg bg-white px-2.5 py-3 text-sm shadow-card">
-                {storeData ? `${storeData.breakTime} 브레이크타임` : '-'}
-              </div>
-            )}
           </div>
-        </section>
+        </li>
 
         {storeData.contact && (
-          <section className="flex items-center">
-            <BsFillTelephoneFill
-              className="mr-[10px] text-mainGray-hover"
-              size={15}
-            />
+          <li className="flex items-center">
+            <BsFillTelephoneFill className="mr-1.5 size-3.5 min-w-fit text-mainGray-hover" />
             <span className="text-darkGray-active">{storeData.contact}</span>
-          </section>
+          </li>
         )}
+      </ul>
 
-        <div className="flex gap-1 overflow-x-auto scrollbar-hide">
-          {storeData.isZeropay && (
-            <Tag
-              text="# 제로페이"
-              color="grayLight"
-              className="h-[27px] rounded-lg px-2.5 py-1"
-            />
-          )}
-          {storeData.isLessThan10000Menu && (
-            <Tag
-              text="# 만원이하"
-              color="grayLight"
-              className="h-[27px] rounded-lg px-2.5 py-1"
-            />
-          )}
-          {storeData.isOverPerson && (
-            <Tag
-              text="# 5인 이상"
-              color="grayLight"
-              className="h-[27px] rounded-lg px-2.5 py-1"
-            />
-          )}
-          {storeData.walkTime <= 5 && (
-            <Tag
-              text="# 도보 5분 이내"
-              color="grayLight"
-              className="h-[27px] rounded-lg px-2.5 py-1"
-            />
-          )}
-        </div>
-      </section>
+      <div className="flex gap-1 overflow-x-auto scrollbar-hide">
+        {storeData.isZeropay && (
+          <Tag
+            text="# 제로페이"
+            color="grayLight"
+            className="h-[27px] rounded-lg px-2.5 py-1"
+          />
+        )}
+        {storeData.isLessThan10000Menu && (
+          <Tag
+            text="# 만원이하"
+            color="grayLight"
+            className="h-[27px] rounded-lg px-2.5 py-1"
+          />
+        )}
+        {storeData.isOverPerson && (
+          <Tag
+            text="# 5인 이상"
+            color="grayLight"
+            className="h-[27px] rounded-lg px-2.5 py-1"
+          />
+        )}
+        {storeData.walkTime <= 5 && (
+          <Tag
+            text="# 도보 5분 이내"
+            color="grayLight"
+            className="h-[27px] rounded-lg px-2.5 py-1"
+          />
+        )}
+      </div>
     </article>
   );
 }
diff --git a/src/components/store/StoreFilterForm.tsx b/src/components/store/StoreFilterForm.tsx
@@ -169,8 +169,8 @@ export default function StoreFilterForm({ onReset }: StoreFilterFormProps) {
                 );
               }}
               errorMsg={error?.message}
-              selectBoxClassName="w-full h-[46px] p-5 bg-lightGray rounded-lg border border-mainGray-active justify-between items-center inline-flex"
-              optionClassName="text-sm hover:rounded-sm hover:bg-lightGray-hover pl-1 data-[selected=true]:text-black data-[selected=true]:font-bold"
+              selectBoxClassName="w-full h-[46px]  p-5 bg-lightGray-hover rounded-lg border border-mainGray-active justify-between items-center inline-flex"
+              optionClassName="hover:rounded-sm text-[17px] hover:bg-lightGray-hover pl-1 data-[selected=true]:text-black data-[selected=true]:font-bold"
             />
           );
         }}

diff --git a/src/hooks/store/useStoreMap.ts b/src/hooks/store/useStoreMap.ts
@@ -32,7 +32,7 @@ export const useStoreMap = (mapOption: UseStoreMapOption) => {
     console.log('loading script...');
 
     const script = document.createElement('script');
-    script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${import.meta.env.VITE_NAVER_API_CLIENT_ID}&submodules=geocoder`;
+    script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${import.meta.env.VITE_NAVER_API_CLIENT_ID}&submodules=geocoder`;
     script.async = true;
 
     script.onload = () => {

diff --git a/src/layouts/MainView.tsx b/src/layouts/MainView.tsx
@@ -8,7 +8,7 @@ interface Props {
 export default function MainView({ children, className }: Props) {
   return (
     <main
-      className={`flex min-h-screen flex-1 flex-col pb-10 pl-3 pr-[50px] pt-[60px] ${className}`}
+      className={`flex min-h-screen flex-1 flex-col pb-28 pl-3 pr-[50px] pt-[60px] ${className}`}
     >
       {children}
     </main>

diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
@@ -220,7 +220,7 @@ export default function SignUp() {
                                       onChange([data[0]?.id]);
                                     }}
                                     errorMsg={errors.campusIdList?.message}
-                                    selectBoxClassName="!h-[50px] !text-base !border-darkGray"
+                                    selectBoxClassName="!h-[50px] !text-base"
                                   />
                                 ) : (
                                   <MultiSelectDropdown

diff --git a/src/pages/admin/AdminHome.tsx b/src/pages/admin/AdminHome.tsx
@@ -10,7 +10,7 @@ export default function AdminHome() {
   const { data } = useGetUserProfile();
 
   return (
-    <MainView>
+    <MainView className="!pb-12">
       <Header title={`${data?.name || ''} 관리자님, 환영합니다!`}>
         <RoleSwitchButton title="플랫폼으로 전환" />
       </Header>

diff --git a/src/pages/admin/ContentsManagement.tsx b/src/pages/admin/ContentsManagement.tsx
@@ -5,7 +5,7 @@ import PreparingPage from '@/components/common/PreparingPage';
 
 export default function ContentsManagement() {
   return (
-    <MainView>
+    <MainView className="!pb-12">
       <Header title="콘텐츠 관리" />
       <PreparingPage />
     </MainView>

diff --git a/src/pages/admin/CourseManagement.tsx b/src/pages/admin/CourseManagement.tsx
@@ -20,7 +20,7 @@ export default function CourseManagement() {
   const { data: userProfile } = useGetUserProfile();
 
   return (
-    <MainView>
+    <MainView className="!pb-12">
       <Header title="교육과정 관리" />
       {userProfile && (
         <TabNavigation<CourseManagementTabType>