Skip to content

Commit b790de8

Browse files
kangsuyeongkangsuyeong
authored
Merge pull request #281 from prgrms-web-devcourse-final-project/refactor/280-animate-layout
[refactor] 애니메이션 레이아웃 수정
2 parents 4f27fe0 + 528fb16 commit b790de8

File tree

4 files changed

+55
-135
lines changed

4 files changed

+55
-135
lines changed

‎src/App.tsx‎

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Route, Routes, useLocation } from 'react-router';
1+
import { Route, Routes } from 'react-router';
22
import Layout from '@/layouts/Layout';
33
import Landing from '@/pages/landing/Landing';
44
import Modal from '@/components/Modal';
@@ -15,11 +15,7 @@ import EditProfile from '@/pages/editprofile/EditProfile';
1515
import BlockList from '@/pages/blocklist/BlockList';
1616
import YouTubeAudioPlayer from './components/YouTubeAudioPlayer';
1717

18-
// TODO: 테스트용 나중에 지우기
19-
// import TestLoginModal from '@/components/testLogin/TestLoginModal';
20-
2118
import { useSheetStore } from './store/sheetStore';
22-
import AnimatedLayout from '@/layouts/AnimatedLayout';
2319
import KaKaoRedirection from '@/components/KaKaoRedirection';
2420
import { useSSE } from '@/hooks/useSSE';
2521
import { useYotube } from '@/hooks/useYoutube';
@@ -29,8 +25,6 @@ import UserProfile from '@/pages/user/UserProfile';
2925
import PublicRoute from '@/routes/PublicRoute';
3026

3127
function App() {
32-
const location = useLocation();
33-
3428
const { isRequestSendingSheetOpen, isRequestReceivingSheetOpen } = useSheetStore();
3529

3630
useSpotifyAuth();
@@ -41,35 +35,31 @@ function App() {
4135

4236
return (
4337
<>
44-
{/* 테스트용 나중에 지우기 */}
45-
{/* <TestLoginModal /> */}
46-
<AnimatedLayout>
47-
<Routes location={location}>
48-
<Route path="/" element={<Layout />}>
49-
<Route element={<PublicRoute />}>
50-
<Route index element={<Landing />} />
51-
<Route path="/login" element={<Login />} />
52-
<Route path="/signup" element={<SignUp />} />
53-
</Route>
54-
55-
{/* PrivateRoute 적용 */}
56-
<Route element={<PrivateRoute />}>
57-
<Route path="/home" element={<Home />} />
58-
<Route path="/chat" element={<Chat />} />
59-
<Route path="/post" element={<Post />} />
60-
<Route path="/post/:postId/edit" element={<Post />} />
61-
<Route path="/chatroom/:chatRoomId" element={<ChatRoom />} />
62-
<Route path="/mypage" element={<UserProfile isMyPage={true} />} />
63-
<Route path="/mypage/edit" element={<EditProfile />} />
64-
<Route path="/mypage/blocklist" element={<BlockList />} />
65-
<Route path="/user/:userId" element={<UserProfile />} />
66-
</Route>
38+
<Routes>
39+
<Route path="/" element={<Layout />}>
40+
<Route element={<PublicRoute />}>
41+
<Route index element={<Landing />} />
42+
<Route path="/login" element={<Login />} />
43+
<Route path="/signup" element={<SignUp />} />
44+
</Route>
6745

68-
<Route path="/auth/login/kakao/callback" element={<KaKaoRedirection />} />
69-
<Route path="*" element={<NotFound />} />
46+
{/* PrivateRoute 적용 */}
47+
<Route element={<PrivateRoute />}>
48+
<Route path="/home" element={<Home />} />
49+
<Route path="/chat" element={<Chat />} />
50+
<Route path="/post" element={<Post />} />
51+
<Route path="/post/:postId/edit" element={<Post />} />
52+
<Route path="/chatroom/:chatRoomId" element={<ChatRoom />} />
53+
<Route path="/mypage" element={<UserProfile isMyPage={true} />} />
54+
<Route path="/mypage/edit" element={<EditProfile />} />
55+
<Route path="/mypage/blocklist" element={<BlockList />} />
56+
<Route path="/user/:userId" element={<UserProfile />} />
7057
</Route>
71-
</Routes>
72-
</AnimatedLayout>
58+
59+
<Route path="/auth/login/kakao/callback" element={<KaKaoRedirection />} />
60+
<Route path="*" element={<NotFound />} />
61+
</Route>
62+
</Routes>
7363
<Modal />
7464
{isRequestSendingSheetOpen && <ChatConnectLoadingSheet type="sending" />}
7565
{isRequestReceivingSheetOpen && <ChatConnectLoadingSheet type="receiving" />}

‎src/layouts/AnimatedLayout.tsx‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/layouts/Layout.tsx‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import { Outlet, useLocation } from 'react-router';
22
import { twMerge } from 'tailwind-merge';
33
import PostButton from '@/components/PostButton';
44
import MyErrorBoundary from '@/components/ErrorBoundary';
5-
// import { useEffect, useRef } from 'react';
6-
// import { useScrollStore } from '@/store/scrollStore';
75
import BottomNavWrapper from '@/layouts/bottomNav/BottomNavWrapper';
86
import HeaderWrapper from '@/layouts/header/HeaderWrapper';
7+
import { AnimatePresence, motion } from 'framer-motion';
98

109
function Layout() {
1110
const location = useLocation(); // 현재 URL 가져오기
@@ -20,44 +19,39 @@ function Layout() {
2019
//지난 대화 기록 페이지
2120
location.pathname === '/chat';
2221

23-
//헤더 클릭 시 스크롤
24-
// const { setScrollContainerRefCurrent } = useScrollStore();
25-
// const scrollContainerRef = useRef<HTMLDivElement | null>(null); // 스크롤 컨테이너 참조
26-
// useEffect(() => {
27-
// if (scrollContainerRef.current) setScrollContainerRefCurrent(scrollContainerRef.current);
28-
// }, [scrollContainerRef]);
29-
30-
// const handleScrollToTop = () => {
31-
// if (scrollContainerRef.current) {
32-
// scrollContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
33-
// }
34-
// };
35-
3622
return (
37-
<div
38-
// ref={scrollContainerRef}
39-
className="relative max-w-[600px] min-w-[320px] w-full h-screen mx-auto bg-background flex flex-col overflow-y-auto scroll"
40-
>
41-
{/* 헤더 */}
42-
{/* <div onClick={handleScrollToTop}>{renderHeader()}</div> */}
43-
<HeaderWrapper />
23+
<div className="flex justify-center w-full min-h-screen">
24+
<div className="max-w-[600px] min-w-[320px] w-full bg-background flex flex-col">
25+
{/* 헤더 */}
26+
<HeaderWrapper />
4427

45-
{/* 메인 컨텐츠 영역 */}
46-
<div
47-
className={twMerge(
48-
'pt-[44px] flex-1 flex justify-center w-full px-3',
49-
showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
50-
)}
51-
>
52-
<MyErrorBoundary>
53-
<Outlet />
54-
</MyErrorBoundary>
55-
</div>
28+
{/* 메인 컨텐츠 영역 */}
29+
<div
30+
className={twMerge(
31+
'pt-[44px] flex-1 flex justify-center w-full px-3',
32+
showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
33+
)}
34+
>
35+
<MyErrorBoundary>
36+
<AnimatePresence mode="wait">
37+
<motion.div
38+
key={location.pathname} // 경로가 바뀔 때마다 애니메이션 트리거
39+
initial={{ opacity: 0 }}
40+
animate={{ opacity: 1 }}
41+
transition={{ duration: 0.3 }}
42+
className="flex justify-center w-full h-full"
43+
>
44+
<Outlet />
45+
</motion.div>
46+
</AnimatePresence>
47+
</MyErrorBoundary>
48+
</div>
5649

57-
{/* 하단 네비게이션 */}
58-
<BottomNavWrapper />
59-
{/* 글작성 버튼 */}
60-
<PostButton />
50+
{/* 하단 네비게이션 */}
51+
<BottomNavWrapper />
52+
{/* 글작성 버튼 */}
53+
<PostButton />
54+
</div>
6155
</div>
6256
);
6357
}

‎src/styles/index.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,3 @@
22
@import '@styles/fonts.css';
33
@import '@styles/typography.css';
44
@import '@styles/scrollbar.css';
5-
6-
html,
7-
body {
8-
overflow-x: hidden;
9-
}

0 commit comments

Comments
 (0)