Skip to content

Commit

Permalink
feat(#4): 주문내역 기능구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@ckdwns1221
ckdwns1221 committed Nov 6, 2024
1 parent dafd139 commit da83438
Show file tree
Hide file tree
Showing 7 changed files with 173 additions and 171 deletions.
129 changes: 58 additions & 71 deletions src/Router.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,51 @@
import {
BrowserRouter,
Routes,
Route,
Outlet,
useLocation,
} from "react-router-dom";
import MainPage from "./pages/MainPage/MainPage.jsx";
import MainNav from "./components/common/MainNav.jsx";
import Footer from "./components/common/Footer";
import ScrollTop from "./components/common/ScrollTop.jsx";
import LoginPage from "./pages/LoginPage/LoginPage.jsx";
import NanumWrite from "./pages/NanumPage/NanumWrite.jsx";
import NanumList from "./pages/NanumPage/NanumList.jsx";
import NanumDetail from "./pages/NanumPage/NanumDetail.jsx";
import UserRegisterPage from "./pages/RegisterPage/UserRegisterPage.jsx";
import UserEditPage from "./pages/MyPage/UserEditPage.jsx";
import MyPage from "./pages/MyPage/MyPage.jsx";
import RegisterMissingSavePage from "./pages/MyPage/RegisterMissingSavePage.jsx";
import RegisterMissing from "./pages/MyPage/RegisterMissing.jsx";
import PetRegisterPage from "./pages/RegisterPage/PetRegisterPage.jsx";
import ShoppingDetail from "./pages/MainPage/ShoppingDetail.jsx";
import SideNav from "./components/common/SideNav.jsx";
import WalkPage from "./pages/WalkPage/WalkPage.jsx";
import WalkMapPage from "./pages/WalkPage/WalkMapPage.jsx";
import WalkJournalPage from "./pages/WalkPage/WalkJournalPage.jsx";
import Payment from "./pages/PaymentPage/Payment.jsx";
import PaymentEnd from "./pages/PaymentPage/PaymentEnd.jsx";
import PetEditPage from "./pages/MyPage/PetEditPage.jsx";
import PaymentHistory from "./pages/PaymentPage/PaymentHistory.jsx";
import ComunityWrite from "./pages/CommunityPage/CommunityWrite.jsx";
import CommunityList from "./pages/CommunityPage/CommunityList.jsx";
import CommunityDetail from "./pages/CommunityPage/CommunityDetail.jsx";
import HealthCare from "./pages/HealthCare/HealthCare.jsx";
import ShoppingCart from "./pages/ShoppingCart/ShoppingCart.jsx";
import { CartProvider } from "./pages/ShoppingCart/CartContext";
import PayCancelReq from "./pages/PaymentPage/PayCancelReq.jsx";
import PaymentCancelDone from "./pages/PaymentPage/PaymentCancelDone.jsx";
import RecommendedRoutesPage from "./pages/WalkPage/RecommendedRoutesPage.jsx";
import { BrowserRouter, Routes, Route, Outlet, useLocation } from 'react-router-dom';
import MainPage from './pages/MainPage/MainPage.jsx';
import MainNav from './components/common/MainNav.jsx';
import Footer from './components/common/Footer';
import ScrollTop from './components/common/ScrollTop.jsx';
import LoginPage from './pages/LoginPage/LoginPage.jsx';
import NanumWrite from './pages/NanumPage/NanumWrite.jsx';
import NanumList from './pages/NanumPage/NanumList.jsx';
import NanumDetail from './pages/NanumPage/NanumDetail.jsx';
import UserRegisterPage from './pages/RegisterPage/UserRegisterPage.jsx';
import UserEditPage from './pages/MyPage/UserEditPage.jsx';
import MyPage from './pages/MyPage/MyPage.jsx';
import RegisterMissingSavePage from './pages/MyPage/RegisterMissingSavePage.jsx';
import RegisterMissing from './pages/MyPage/RegisterMissing.jsx';
import PetRegisterPage from './pages/RegisterPage/PetRegisterPage.jsx';
import ShoppingDetail from './pages/MainPage/ShoppingDetail.jsx';
import SideNav from './components/common/SideNav.jsx';
import WalkPage from './pages/WalkPage/WalkPage.jsx';
import WalkMapPage from './pages/WalkPage/WalkMapPage.jsx';
import WalkJournalPage from './pages/WalkPage/WalkJournalPage.jsx';
import Payment from './pages/PaymentPage/Payment.jsx';
import PaymentEnd from './pages/PaymentPage/PaymentEnd.jsx';
import PetEditPage from './pages/MyPage/PetEditPage.jsx';
import PaymentHistory from './pages/PaymentPage/PaymentHistory.jsx';
import ComunityWrite from './pages/CommunityPage/CommunityWrite.jsx';
import CommunityList from './pages/CommunityPage/CommunityList.jsx';
import CommunityDetail from './pages/CommunityPage/CommunityDetail.jsx';
import HealthCare from './pages/HealthCare/HealthCare.jsx';
import ShoppingCart from './pages/ShoppingCart/ShoppingCart.jsx';
import { CartProvider } from './pages/ShoppingCart/CartContext';
import PayCancelReq from './pages/PaymentPage/PayCancelReq.jsx';
import PaymentCancelDone from './pages/PaymentPage/PaymentCancelDone.jsx';
import RecommendedRoutesPage from './pages/WalkPage/RecommendedRoutesPage.jsx';
import OrderList from './pages/OrderPage/OrderList.jsx';
import OrderDetail from './pages/OrderPage/OrderDetail.jsx';
import OrderCancel from './pages/OrderPage/OrderCancel.jsx';

function Router() {
return (
<BrowserRouter>

<CartProvider>
<ScrollTop />
<NavSelector />
<Routes>
<Route path="/" element={<Outlet />}>
<Route index element={<MainPage />} />
<Route path="login" element={<LoginPage />} />
<Route
path="shoppingDetail/:productId"
element={<ShoppingDetail />}
/>
<Route path="shoppingDetail/:productId" element={<ShoppingDetail />} />
<Route path="shoppingCart" element={<ShoppingCart />} />
<Route path="healthCare" element={<HealthCare />} />

Expand Down Expand Up @@ -85,10 +75,7 @@ function Router() {
<Route path="map" element={<WalkMapPage />} />
<Route path="journal" element={<WalkJournalPage />} />
</Route>
<Route
path="walking/recommend"
element={<RecommendedRoutesPage />}
/>
<Route path="walking/recommend" element={<RecommendedRoutesPage />} />

<Route path="myPage/:userId" element={<Outlet />}>
<Route index element={<MyPage />} />
Expand All @@ -115,34 +102,34 @@ function NavSelector() {
const location = useLocation();
const path = location.pathname;

if (path === "/") {
if (path === '/') {
return <MainNav />;
}

const navPaths = [
"/shoppingDetail",
"/shoppingCart",
"/payment",
"/nanumList/write",
"/nanumList",
"/nanumDetail",
"/healthCare",
"/walking",
"/walkingRecord",
"/community",
"/communityDetail",
"/communityWrite",
"/myPage/editUserRegister",
"/myPage/editPetRegister",
"/myPage/missingRegister",
"/myPage/missingSave",
"/myPage",
"/orderList/orderDetail/orderCancel",
"/orderList/orderDetail",
"/orderList",
"/alert",
'/shoppingDetail',
'/shoppingCart',
'/payment',
'/nanumList/write',
'/nanumList',
'/nanumDetail',
'/healthCare',
'/walking',
'/walkingRecord',
'/community',
'/communityDetail',
'/communityWrite',
'/myPage/editUserRegister',
'/myPage/editPetRegister',
'/myPage/missingRegister',
'/myPage/missingSave',
'/myPage',
'/orderList/orderDetail/orderCancel',
'/orderList/orderDetail',
'/orderList',
'/alert',
];
const isNavPath = navPaths.some((navPath) => path.startsWith(navPath));
const isNavPath = navPaths.some(navPath => path.startsWith(navPath));

return isNavPath ? <SideNav /> : <MainNav />;
}
Expand Down
2 changes: 0 additions & 2 deletions src/pages/MainPage/ShoppingDetail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ const ShoppingDetail = () => {
const [quantity, setQuantity] = useState(1);
const [isCartModalOpen, setCartModalOpen] = useState(false);
const [isPurchaseModalOpen, setPurchaseModalOpen] = useState(false);
// const userId = 5; // 테스트용 더미 유저 ID
// const { userId } = location.state || {};
const userId = localStorage.getItem('userId');

useEffect(() => {
Expand Down
33 changes: 16 additions & 17 deletions src/pages/MyPage/Sytles/MyPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import styled from 'styled-components';

export const ScrollableContainer = styled.div`
max-height: 100%;
margin: 64px 0;
width: 100%;
min-height: 100vh;
margin: 64px 0 80px;
width: 100%;
`;

export const Container = styled.div`
Expand All @@ -23,23 +23,22 @@ export const UserInfo = styled.span`
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-left: 5%;
margin: 0 auto;
text-align: left;
`;

export const EditButton = styled.button`
color: #ff6e00;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 11px;
font-weight: bold;
margin-top: 3px;
margin: 0 auto;
transition: background-color 0.3s;
color: #ff6e00;
border: none;
border-radius: 20px;
cursor: pointer;
font-size:11px;
font-weight: bold;
margin-top: 3px;
margin-left: 5%;
transition: background-color 0.3s;
&:hover {
color: #e65c00;
}
&:hover {
color: #e65c00;
}
`;
57 changes: 28 additions & 29 deletions src/pages/MyPage/UserEditPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import PopupPostCode from '../../components/Register/PopupPostCode';
import axios from '../../apis/AxiosInstance';

const ScrollableContainer = styled.div`
max-height: 100%;
margin: 64px 0;
min-height: 100vh;
margin: 64px 0 80px;
width: 100%;
`;
`;

const Container = styled.div`
display: flex;
flex-direction: column;
width: 90%;
margin-left: 5%;
margin: 0 auto;
`; // 전체 컨테이너

const Description = styled.label`
Expand All @@ -43,7 +43,7 @@ const FirstComment = styled.span`

const HightLight = styled.span`
color: #ff6e00;
`;
`;

const Label = styled.label`
font-size: 10px;
Expand Down Expand Up @@ -312,7 +312,7 @@ const RegisterButton = styled.button`
height: 43px;
text-align: center;
border-radius: 8px;
margin-left: 20px;
margin: 0 auto 80px;
&:hover {
background-color: #ff6e00;
Expand Down Expand Up @@ -383,7 +383,7 @@ const UserEditPage = () => {
detailedAddress,
zoneCode,
accountEmail: email,
profileNickname: profileNickname || '기본 프로필 닉네임',
profileNickname: profileNickname || '기본 프로필 닉네임',
health: toggleStates[0],
petCare: toggleStates[1],
missing: toggleStates[2],
Expand All @@ -409,7 +409,7 @@ const UserEditPage = () => {
<Description>
<WelcomeContainer>
<WelcomeComment>안녕하세요</WelcomeComment>
<FirstComment>{nickname}님🥳</FirstComment>
<FirstComment>{nickname}님🥳</FirstComment>
</WelcomeContainer>
<HightLight>발바닥 천국</HightLight>과🐾 당신과 반려동물의 발걸음이 더 행복해지도록 정보를 등록해 보세요.
</Description>
Expand Down Expand Up @@ -438,26 +438,25 @@ const UserEditPage = () => {
</InputContainer>

<InputContainer>
<Label>주소</Label>
<AddressContainer>
<PostSearchContainer placeholder="우편번호" value={zoneCode} readOnly style={{ display: 'none' }} />
<SearchAddressButton onClick={openPostCode}>주소검색</SearchAddressButton>
<div id="popupDom">
{isPopupOpen && (
<PopupDom>
<PopupPostCode onClose={closePostCode} setAddress={setAddress} setZoneCode={setZoneCode} />
</PopupDom>
)}
</div>
<StyledInput
placeholder="기본주소를 입력해주세요"
value={address}
onChange={e => setAddress(e.target.value)}
required
/>
</AddressContainer>
</InputContainer>

<Label>주소</Label>
<AddressContainer>
<PostSearchContainer placeholder="우편번호" value={zoneCode} readOnly style={{ display: 'none' }} />
<SearchAddressButton onClick={openPostCode}>주소검색</SearchAddressButton>
<div id="popupDom">
{isPopupOpen && (
<PopupDom>
<PopupPostCode onClose={closePostCode} setAddress={setAddress} setZoneCode={setZoneCode} />
</PopupDom>
)}
</div>
<StyledInput
placeholder="기본주소를 입력해주세요"
value={address}
onChange={e => setAddress(e.target.value)}
required
/>
</AddressContainer>
</InputContainer>
</Container>
<Divider />

Expand Down Expand Up @@ -507,8 +506,8 @@ const UserEditPage = () => {
<div className={`toggle-circle ${toggleStates[2] ? 'toggle--checked' : ''}`} />
</ThirdToggleContainer>
</SubContainer>
<RegisterButton onClick={handleUpdate}>저장하기</RegisterButton>
</Container>
<RegisterButton onClick={handleUpdate}>저장하기</RegisterButton>
</ScrollableContainer>
);
};
Expand Down
Loading

0 comments on commit da83438

Please sign in to comment.