Merge pull request #285 from prgrms-web-devcourse-final-project/feat/design/284-layout-css-edit

[feat/design] 레이아웃 수정 / 프로필 페이지 애니메이션 추가

Author: kangsuyeong

src/layouts/Layout.tsx

@@ -20,38 +20,36 @@ function Layout() {
     location.pathname === '/chat';
 
   return (
-    <div className="flex justify-center w-full min-h-screen">
-      <div className="max-w-[600px] min-w-[320px] w-full bg-background flex flex-col">
-        {/* 헤더 */}
-        <HeaderWrapper />
+    <div className="max-w-[600px] min-w-[320px] w-full bg-background flex min-h-screen mx-auto">
+      {/* 헤더 */}
+      <HeaderWrapper />
 
-        {/* 메인 컨텐츠 영역 */}
-        <div
-          className={twMerge(
-            'pt-[44px] flex-1 flex justify-center w-full px-3',
-            showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
-          )}
-        >
-          <MyErrorBoundary>
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={location.pathname} // 경로가 바뀔 때마다 애니메이션 트리거
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.3 }}
-                className="flex justify-center w-full h-full"
-              >
-                <Outlet />
-              </motion.div>
-            </AnimatePresence>
-          </MyErrorBoundary>
-        </div>
-
-        {/* 하단 네비게이션 */}
-        <BottomNavWrapper />
-        {/* 글작성 버튼 */}
-        <PostButton />
+      {/* 메인 컨텐츠 영역 */}
+      <div
+        className={twMerge(
+          'pt-[44px] flex-1 flex justify-center w-full px-3',
+          showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
+        )}
+      >
+        <MyErrorBoundary>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={location.pathname} // 경로가 바뀔 때마다 애니메이션 트리거
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.3 }}
+              className="flex justify-center w-full h-full"
+            >
+              <Outlet />
+            </motion.div>
+          </AnimatePresence>
+        </MyErrorBoundary>
       </div>
+
+      {/* 하단 네비게이션 */}
+      <BottomNavWrapper />
+      {/* 글작성 버튼 */}
+      <PostButton />
     </div>
   );
 }

src/pages/editprofile/EditProfile.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import ProfileEditForm from '@/pages/editprofile/components/ProfileEditForm';
 import PasswordEditForm from '@/pages/editprofile/components/PasswordEditForm';
 import { twMerge } from 'tailwind-merge';
+import { AnimatePresence, motion } from 'framer-motion';
 
 function EditProfile() {
   const [activeTab, setActiveTab] = useState('profile');
@@ -31,13 +32,16 @@ function EditProfile() {
       </div>
 
       {/* 폼 */}
-      {activeTab === 'profile' ? (
-        // 프로필 수정 탭
-        <ProfileEditForm />
-      ) : (
-        // 비밀번호 변경 탭
-        <PasswordEditForm />
-      )}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={activeTab} // 핵심! key를 다르게 주면 된다
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+        >
+          {activeTab === 'profile' ? <ProfileEditForm /> : <PasswordEditForm />}
+        </motion.div>
+      </AnimatePresence>
     </div>
   );
 }