[Refactor] 네브바, 로그인

IT-Cotato · Dec 12, 2024 · 8d60b3a · 8d60b3a
2 parents d69ba8f + f4be63b
commit 8d60b3a
Show file tree

Hide file tree

Showing 50 changed files with 153 additions and 557 deletions.
diff --git a/src/apis/location.api.ts b/src/apis/location.api.ts
@@ -1,5 +1,5 @@
 import { axiosInstance } from './index.api';
-import { IRecommendPlaces } from '@/types/location';
+import { IRecommendPlaces } from '@/types/Location';
 
 //장소 저장
 export const postPlace = async (usersPlace: any, roomId: string) => {

diff --git a/src/apis/login.api.ts b/src/apis/login.api.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { BACKEND_URL } from './index.api';
-import { ILoginPayload, ISignupPayload } from '@/types/login';
+import { ILoginPayload, ISignupPayload } from '@/types/Login';
 
 export const postSignup = async (signupPayload: ISignupPayload) => {
   return axios.post(`${BACKEND_URL}/api/members`, signupPayload, {

diff --git a/src/apis/place-vote.api.ts b/src/apis/place-vote.api.ts
@@ -1,4 +1,4 @@
-import { CreateSubmissionData } from '@/types/location';
+import { CreateSubmissionData } from '@/types/Location';
 import { axiosInstance } from './index.api';
 
 //room 방 생성

diff --git a/src/apis/time-vote.api.ts b/src/apis/time-vote.api.ts
@@ -1,7 +1,7 @@
 import { QUERY_KEYS } from '@/constants';
 import { axiosInstance } from './index.api';
 import { handleApiErrorCase } from './existence.api';
-import { IDatePayload } from '@/types/time-vote';
+import { IDatePayload } from '@/types/TimeVote';
 
 //room 방 생성
 export const postTimeVoteRoom = async ({ roomId, dates }: IDatePayload) => {

diff --git a/src/components/common/Button/button.tsx → src/components/common/button/Button.tsx b/src/components/common/Button/button.tsx → src/components/common/button/Button.tsx
diff --git a/src/components/common/Button/landingBtn.tsx → src/components/common/button/LandingBtn.tsx b/src/components/common/Button/landingBtn.tsx → src/components/common/button/LandingBtn.tsx
@@ -1,5 +1,6 @@
-import { IButton } from './button';
+
 import Arrow from '@/assets/imgs/HomeRe/arrow.svg';
+import { IButton } from './Button';
 
 export default function LandingBtn({ text, onClick }: IButton) {
   return (

diff --git a/src/components/Layout/Layout.tsx → src/components/layout/Layout.tsx b/src/components/Layout/Layout.tsx → src/components/layout/Layout.tsx
@@ -1,12 +1,12 @@
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
-import Navbar from '@/components/Navbar/Navbar';
+import Navbar from '@/components/navbar/Navbar';
 
 export default function Layout() {
   return (
     <Container>
+      <Navbar />
       <Content>
-        <Navbar />
         <Outlet />
       </Content>
     </Container>
@@ -21,7 +21,7 @@ const Container = styled.div`
   width: 100vw;
   max-width: 1440px;
   min-width: 1024px;
-  padding-top: 30px;
+  padding-top: 2.5rem;
 `;
 
 const Content = styled.div`

diff --git a/src/components/Layout/ProtectedRoute.tsx → src/components/layout/ProtectedRoute.tsx b/src/components/Layout/ProtectedRoute.tsx → src/components/layout/ProtectedRoute.tsx
@@ -1,6 +1,6 @@
 import { getRoomExistence } from '@/apis/existence.api';
-import Loading from '@/pages/Loading/loading';
-import NotFound from '@/pages/NotFound/not-found';
+import Loading from '@/pages/loading/Loading';
+import NotFound from '@/pages/notFound/NotFound';
 import { useQuery } from '@tanstack/react-query';
 import { Navigate, useParams } from 'react-router-dom';
 

diff --git a/src/components/Modal/PlaceModal.tsx → src/components/modal/PlaceModal.tsx b/src/components/Modal/PlaceModal.tsx → src/components/modal/PlaceModal.tsx
diff --git a/src/components/Navbar/Navbar.tsx → src/components/navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx → src/components/navbar/Navbar.tsx
@@ -1,6 +1,4 @@
 import { getPlaceRoomExists, getTimeRoomExists } from '@/apis/existence.api';
-// import { axiosInstance, BACKEND_URL } from '@/apis/index.api';
-// import { postLogout } from '@/apis/login.api';
 import { getPlaceVoted } from '@/apis/place-vote.api';
 import { getTimeVoted } from '@/apis/time-vote.api';
 
@@ -97,34 +95,42 @@ export default function Navbar() {
         <ul>
           <Link to="/" className="flex items-center gap-2">
             <MainLogo />
-            <span className="text-3xl font-semibold">syncspot</span>
+            <span className="text-3xl font-semibold text-[#253E7F]">
+              syncspot
+            </span>
           </Link>
         </ul>
-        <ul className="flex items-center gap-6 *:cursor-pointer *:transition-colors">
+        <ul
+          className={`flex justify-end items-center gap-6 *:${isLogin ? 'cursor-pointer' : 'pointer-events-none cursor-not-allowed'} *:transition-colors`}
+        >
           <li
-            onMouseEnter={() => setMidpointIsDropdownOpen(true)}
-            onMouseLeave={() => setMidpointIsDropdownOpen(false)}
-            className="relative"
+            onMouseEnter={
+              isLogin ? () => setMidpointIsDropdownOpen(true) : undefined
+            }
+            onMouseLeave={
+              isLogin ? () => setMidpointIsDropdownOpen(false) : undefined
+            }
+            className="relative "
           >
             <h1
               className={
                 Boolean(isSyncspot)
-                  ? 'text-blue-600 text-[17px]'
-                  : 'text-black text-[17px] font-light'
+                  ? 'text-primary-base text-menu'
+                  : 'text-primary-grayDark text-menu font-light'
               }
             >
               중간 지점 찾기
             </h1>
             {isMidpointDropdownOpen && (
               <ul className="absolute z-50 bg-white border border-gray-200 rounded-2xl shadow-md -left-4 top-full *:text-[15px] p-2">
                 <li
-                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
+                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
                   onClick={() => navigate(`/page/syncspot/${roomId}`)}
                 >
                   장소 입력하기
                 </li>
                 <li
-                  className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
+                  className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
                   onClick={() => navigate(`/page/syncspot/results/${roomId}`)}
                 >
                   결과 보기
@@ -133,23 +139,27 @@ export default function Navbar() {
             )}
           </li>
           <li
-            onMouseEnter={() => setPlaceVoteDropdownOpen(true)}
-            onMouseLeave={() => setPlaceVoteDropdownOpen(false)}
+            onMouseEnter={
+              isLogin ? () => setPlaceVoteDropdownOpen(true) : undefined
+            }
+            onMouseLeave={
+              isLogin ? () => setPlaceVoteDropdownOpen(false) : undefined
+            }
             className="relative"
           >
             <h1
               className={
                 isPlaceVote
-                  ? 'text-blue-600 text-[17px]'
-                  : 'text-black text-[17px] font-light'
+                  ? 'text-primary-base text-menu'
+                  : 'text-primary-grayDark text-menu font-light'
               }
             >
               장소 투표
             </h1>
             {isPlaceVoteDropdownOpen && (
               <ul className="absolute z-50 bg-white border border-gray-200 rounded-2xl shadow-md -left-9 top-full p-2 *:text-[15px]">
                 <li
-                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
+                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100 hover:font-normal"
                   onClick={() => navigate(`/page/place/create/${roomId}`)}
                 >
                   {!placeVoteData?.existence
@@ -158,7 +168,7 @@ export default function Navbar() {
                 </li>
                 {placeVoteData?.existence && (
                   <li
-                    className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:font-normal hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
+                    className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:font-normal hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
                     onClick={() => navigate(`/pate/place/vote/${roomId}`)}
                   >
                     {!isPlaceVoted?.existence ? '투표하기' : '재투표하기'}
@@ -168,23 +178,27 @@ export default function Navbar() {
             )}
           </li>
           <li
-            onMouseEnter={() => setTimeVoteDropdownOpen(true)}
-            onMouseLeave={() => setTimeVoteDropdownOpen(false)}
+            onMouseEnter={
+              isLogin ? () => setTimeVoteDropdownOpen(true) : undefined
+            }
+            onMouseLeave={
+              isLogin ? () => setTimeVoteDropdownOpen(false) : undefined
+            }
             className="relative"
           >
             <h1
               className={
                 isTimeVote
-                  ? 'text-blue-600 text-[17px]'
-                  : 'text-black text-[17px] font-light'
+                  ? 'text-primary-base text-menu'
+                  : 'text-primary-grayDark text-menu font-light'
               }
             >
               시간 투표
             </h1>
             {isTimeVoteDropdownOpen && (
               <ul className="absolute z-50 bg-white border border-gray-200 rounded-2xl shadow-md p-2 -left-9 top-full *:text-[15px]">
                 <li
-                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:font-normal hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
+                  className="px-4 py-2 font-light transition-colors cursor-pointer hover:font-normal hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
                   onClick={() => navigate(`/page/time/create/${roomId}`)}
                 >
                   {!timeVoteData?.existence
@@ -193,7 +207,7 @@ export default function Navbar() {
                 </li>
                 {timeVoteData?.existence && (
                   <li
-                    className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:font-normal hover:text-blue-600 whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
+                    className="px-4 py-2 font-light text-center transition-colors cursor-pointer hover:font-normal hover:text-primary-base whitespace-nowrap hover:opacity-90 hover:bg-gray-100"
                     onClick={() => navigate(`/page/time/vote/${roomId}`)}
                   >
                     {!isTimeVoted?.myVotesExistence ? '투표하기' : '재투표하기'}
@@ -202,16 +216,12 @@ export default function Navbar() {
               </ul>
             )}
           </li>
-          <li
-            onMouseEnter={() => setTimeVoteDropdownOpen(true)}
-            onMouseLeave={() => setTimeVoteDropdownOpen(false)}
-            className="relative"
-          >
+          <li className="relative">
             <h1
               className={
                 isTimeVote
-                  ? 'text-blue-600 text-[17px]'
-                  : 'text-black text-[17px] font-light'
+                  ? 'text-primary-base text-menu'
+                  : 'text-primary-grayDark text-menu font-light'
               }
               onClick={() => navigate('/page/aboutus')}
             >
@@ -224,8 +234,10 @@ export default function Navbar() {
             </li>
           ) : (
             <li onClick={() => navigate('/page/login')}>
-              <div className="rounded-full border-primary-600 size-5">
-                로그인
+              <div className="w-full p-2 border cursor-pointer pointer-events-auto rounded-3xl border-primary-600">
+                <h1 className="font-bold text-menu text-primary-grayDark">
+                  로그인
+                </h1>
               </div>
             </li>
           )}

diff --git a/src/components/TimeVote/calendar.tsx → src/components/timeVote/Calendar.tsx b/src/components/TimeVote/calendar.tsx → src/components/timeVote/Calendar.tsx
@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { getTimeRoomExists } from '@/apis/existence.api';
-import { DatePickerProps, Value } from '@/types/time-vote';
+import { DatePickerProps, Value } from '@/types/TimeVote';
 import { QUERY_KEYS } from '@/constants';
 
 let dates: string[] = [];

diff --git a/src/components/TimeVote/vote-calendar.tsx → src/components/timeVote/VoteCalendar.tsx b/src/components/TimeVote/vote-calendar.tsx → src/components/timeVote/VoteCalendar.tsx
@@ -4,13 +4,13 @@ import Calendar from 'react-calendar';
 
 import 'react-calendar/dist/Calendar.css';
 import CalIcon from '@/assets/imgs/Time/time-calItem-icon1.svg?react';
-import VoteDate from './vote-date';
+import VoteDate from './VoteDate';
 import {
   ResultResponse,
   Value,
   ValuePiece,
   VoteDateInfo,
-} from '@/types/time-vote';
+} from '@/types/TimeVote';
 
 // 타입 정의
 export interface DateTimeOption {

diff --git a/src/components/TimeVote/vote-date-picker.tsx → src/components/timeVote/VoteDate-picker.tsx b/src/components/TimeVote/vote-date-picker.tsx → src/components/timeVote/VoteDate-picker.tsx
@@ -1,11 +1,10 @@
-
 import React, { useEffect, useState } from 'react';
-import { formatTime, Time } from './vote-calendar';
+import { formatTime, Time } from './VoteCalendar';
 import styled from 'styled-components';
 import { MdArrowDropDown } from 'react-icons/md';
 import Checked from '@/assets/imgs/Time/checked.svg?react';
 import { getTimeVoted } from '@/apis/time-vote.api';
-import { Value, ValuePiece } from '@/types/time-vote';
+import { Value, ValuePiece } from '@/types/TimeVote';
 
 interface DateOptionProps {
   date: ValuePiece | Value;

diff --git a/src/components/TimeVote/vote-date.tsx → src/components/timeVote/VoteDate.tsx b/src/components/TimeVote/vote-date.tsx → src/components/timeVote/VoteDate.tsx
@@ -1,5 +1,4 @@
-
-import { ValuePiece, VoteDateInfo } from '@/types/time-vote';
+import { ValuePiece, VoteDateInfo } from '@/types/TimeVote';
 import styled from 'styled-components';
 
 const VoteDate = ({