diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx index ea5d1d4..9210987 100644 --- a/src/app/mypage/layout.tsx +++ b/src/app/mypage/layout.tsx @@ -1,13 +1,17 @@ import MyNav from '@/domains/mypage/main/MyNav'; import MyProfile from '@/domains/mypage/main/MyProfile'; +import SkeletonLayout from '@/domains/mypage/skeleton/main/SkeletonLayout'; +import { Suspense } from 'react'; function Layout({ children }: { children: React.ReactNode }) { return ( -
- - -
{children}
-
+ }> +
+ + +
{children}
+
+ ); } export default Layout; diff --git a/src/app/mypage/my-active/my-comment/loading.tsx b/src/app/mypage/my-active/my-comment/loading.tsx new file mode 100644 index 0000000..5d49f91 --- /dev/null +++ b/src/app/mypage/my-active/my-comment/loading.tsx @@ -0,0 +1,24 @@ +function Loading() { + return ( + + ); +} +export default Loading; diff --git a/src/app/mypage/my-active/my-comment/page.tsx b/src/app/mypage/my-active/my-comment/page.tsx index 92772ec..25e11be 100644 --- a/src/app/mypage/my-active/my-comment/page.tsx +++ b/src/app/mypage/my-active/my-comment/page.tsx @@ -1,9 +1,16 @@ import CommentList from '@/domains/shared/components/comment/CommentList'; -function MyComment() { +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; + +function Page() { return ( - + <> + + ); } -export default MyComment; +export default Page; diff --git a/src/app/mypage/my-active/my-like/loading.tsx b/src/app/mypage/my-active/my-like/loading.tsx new file mode 100644 index 0000000..8540266 --- /dev/null +++ b/src/app/mypage/my-active/my-like/loading.tsx @@ -0,0 +1,15 @@ +import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard'; + +function Loading() { + return ( + + ); +} + +export default Loading; diff --git a/src/app/mypage/my-active/my-like/page.tsx b/src/app/mypage/my-active/my-like/page.tsx index e302dfa..ef1a370 100644 --- a/src/app/mypage/my-active/my-like/page.tsx +++ b/src/app/mypage/my-active/my-like/page.tsx @@ -1,6 +1,12 @@ import PostCard from '@/domains/community/main/PostCard'; +import { Metadata } from 'next'; -function MyPost() { +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; + +function Page() { return ( ); } -export default MyPost; +export default Page; diff --git a/src/app/mypage/my-active/my-post/loading.tsx b/src/app/mypage/my-active/my-post/loading.tsx new file mode 100644 index 0000000..8540266 --- /dev/null +++ b/src/app/mypage/my-active/my-post/loading.tsx @@ -0,0 +1,15 @@ +import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard'; + +function Loading() { + return ( + + ); +} + +export default Loading; diff --git a/src/app/mypage/my-active/my-post/page.tsx b/src/app/mypage/my-active/my-post/page.tsx index 1e96abc..3e7803f 100644 --- a/src/app/mypage/my-active/my-post/page.tsx +++ b/src/app/mypage/my-active/my-post/page.tsx @@ -1,6 +1,12 @@ import PostCard from '@/domains/community/main/PostCard'; +import { Metadata } from 'next'; -function MyPost() { +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; + +function Page() { return ( ); } -export default MyPost; +export default Page; diff --git a/src/app/mypage/my-active/page.tsx b/src/app/mypage/my-active/page.tsx index 73173d7..fc9a176 100644 --- a/src/app/mypage/my-active/page.tsx +++ b/src/app/mypage/my-active/page.tsx @@ -1,6 +1,6 @@ import { redirect } from 'next/navigation'; -function page() { +function Page() { return redirect('/mypage/my-active/my-post'); } -export default page; +export default Page; diff --git a/src/app/mypage/my-alarm/loading.tsx b/src/app/mypage/my-alarm/loading.tsx new file mode 100644 index 0000000..78d7e26 --- /dev/null +++ b/src/app/mypage/my-alarm/loading.tsx @@ -0,0 +1,24 @@ +import SkeletonAlarm from '@/domains/recipe/skeleton/SkeletonAlarm'; + +function Loading() { + return ( +
+ + + + + +
+ ); +} +export default Loading; + +// function SkeletonAlarmList({ count = 5 }: { count?: number }) { +// return ( +//
+// {Array.from({ length: count }).map((_, i) => ( +// +// ))} +//
+// ); +// } diff --git a/src/app/mypage/my-alarm/page.tsx b/src/app/mypage/my-alarm/page.tsx index a4d4b2c..ec9e77c 100644 --- a/src/app/mypage/my-alarm/page.tsx +++ b/src/app/mypage/my-alarm/page.tsx @@ -1,14 +1,20 @@ import Alarm from '@/domains/mypage/components/Alarm'; -function MyAlarm() { +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; + +function Page() { return (
-
); } -export default MyAlarm; +export default Page; diff --git a/src/app/mypage/my-setting/loading.tsx b/src/app/mypage/my-setting/loading.tsx new file mode 100644 index 0000000..b5b1021 --- /dev/null +++ b/src/app/mypage/my-setting/loading.tsx @@ -0,0 +1,6 @@ +import SkeletonSetting from '@/domains/mypage/skeleton/main/SkeletonSetting'; + +function Loading() { + return ; +} +export default Loading; diff --git a/src/app/mypage/my-setting/page.tsx b/src/app/mypage/my-setting/page.tsx index 9adc305..b7e3f79 100644 --- a/src/app/mypage/my-setting/page.tsx +++ b/src/app/mypage/my-setting/page.tsx @@ -1,38 +1,12 @@ -'use client'; -import TextButton from '@/shared/components/button/TextButton'; -import Button from '@/shared/components/button/Button'; -import ToggleBtn from '@/domains/mypage/components/ToggleBtn'; -import { useState } from 'react'; -import EditNickName from '@/domains/mypage/components/EditNickName'; -import WithdrawModal from '@/domains/mypage/components/WithdrawModal'; +import MySetting from '@/domains/mypage/main/MySetting'; -function MySetting() { - const [isOpen, setIsOpen] = useState(false); - const [isQuit, setIsQuit] = useState(false); +import { Metadata } from 'next'; +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; - return ( -
- {isOpen && setIsOpen(!isOpen)} />} - {isQuit && setIsQuit(!isQuit)} />} -
-
-
닉네임 : UserName
- setIsOpen(!isOpen)}>수정하기 -
-
-

알람설정

- -
-
-
- setIsQuit(!isQuit)}>회원탈퇴 - -
- - -
-
-
- ); +function Page() { + return ; } -export default MySetting; +export default Page; diff --git a/src/app/mypage/mybar/loading.tsx b/src/app/mypage/mybar/loading.tsx new file mode 100644 index 0000000..9bc8bb8 --- /dev/null +++ b/src/app/mypage/mybar/loading.tsx @@ -0,0 +1,24 @@ +import SkeletonCocktailCard from '@/domains/recipe/skeleton/SkeletonCocktailCard'; + +function Loading() { + return ( +
+ + + + + + + + {/* {Array.from({ length: 6 }).map((_, i) => ( + + ))} */} +
+ ); +} +export default Loading; diff --git a/src/app/mypage/mybar/page.tsx b/src/app/mypage/mybar/page.tsx index c1c34b7..e2e3238 100644 --- a/src/app/mypage/mybar/page.tsx +++ b/src/app/mypage/mybar/page.tsx @@ -1,8 +1,13 @@ -'use client'; import CocktailCard from '@/domains/recipe/CocktailCard'; import Img from '@/shared/assets/images/dummy/exampleCocktail.png'; +import { Metadata } from 'next'; -function MyBar() { +export const metadata: Metadata = { + title: 'SSOUL | 마이페이지', + description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다', +}; + +function Page() { return (
@@ -9,4 +9,4 @@ function page() {
); } -export default page; +export default Page; diff --git a/src/domains/community/components/postInfo/PostInfo.tsx b/src/domains/community/components/postInfo/PostInfo.tsx deleted file mode 100644 index 80d7243..0000000 --- a/src/domains/community/components/postInfo/PostInfo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -function PostInfo({ hasUserName = false }: { hasUserName?: boolean }) { - return ( -
    - {hasUserName && ( - <> -
  • 실버븬
    • - - - )} -
  • 3분 전
    • - -
  • 조회 3
    • - -
  • 댓글 3
    • -
- ); -} - -export default PostInfo; diff --git a/src/domains/mypage/main/MyNav.tsx b/src/domains/mypage/main/MyNav.tsx index c764de2..bff0aca 100644 --- a/src/domains/mypage/main/MyNav.tsx +++ b/src/domains/mypage/main/MyNav.tsx @@ -2,11 +2,11 @@ import TabMenu from '@/domains/mypage/main/TabMenu'; import TextButton from '@/shared/components/button/TextButton'; import Link from 'next/link'; - import { useState } from 'react'; import DeleteAllModal from '../components/DeleteAllModal'; +import { usePathname } from 'next/navigation'; -const options = [ +const MAIN_TABMENU = [ { title: '나만의 BAR', href: '/mypage/mybar', @@ -25,7 +25,7 @@ const options = [ }, ]; -const ActiveTab = [ +const SUB_TABMENU = [ { title: '내가 쓴 글', href: '/mypage/my-active/my-post', @@ -41,8 +41,14 @@ const ActiveTab = [ ]; function MyNav() { - const [isClick, setIsClick] = useState(0); - const [activeTab, setActiveTab] = useState(0); + const pathname = usePathname(); + + const currentIndex = MAIN_TABMENU.findIndex((opt) => pathname.startsWith(opt.href)); + const isActive = currentIndex === -1 ? 0 : currentIndex; + + const subIndex = SUB_TABMENU.findIndex((opt) => pathname.startsWith(opt.href)); + const isSubActive = subIndex === -1 ? 0 : subIndex; + const [isDeleteAll, setIsDeleteAll] = useState(false); return ( @@ -56,8 +62,8 @@ function MyNav() { - {options.map((_, i) => ( + {MAIN_TABMENU.map((_, i) => ( ))} - {(isClick == 0 || isClick == 2) && ( + {(isActive == 0 || isActive == 2) && ( setIsDeleteAll(!isDeleteAll)}> 전체삭제 )} - {isClick == 1 && ( + {isActive == 1 && ( )} - {isClick === 1 && - ActiveTab.map((_, i) => ( + {isActive === 1 && + SUB_TABMENU.map((_, i) => ( diff --git a/src/domains/mypage/main/MySetting.tsx b/src/domains/mypage/main/MySetting.tsx new file mode 100644 index 0000000..f50e9ac --- /dev/null +++ b/src/domains/mypage/main/MySetting.tsx @@ -0,0 +1,37 @@ +'use client'; +import EditNickName from '@/domains/mypage/components/EditNickName'; +import ToggleBtn from '@/domains/mypage/components/ToggleBtn'; +import WithdrawModal from '@/domains/mypage/components/WithdrawModal'; +import Button from '@/shared/components/button/Button'; +import TextButton from '@/shared/components/button/TextButton'; +import { useState } from 'react'; + +function MySetting() { + const [isOpen, setIsOpen] = useState(false); + const [isQuit, setIsQuit] = useState(false); + return ( +
+ {isOpen && setIsOpen(!isOpen)} />} + {isQuit && setIsQuit(!isQuit)} />} +
+
+
닉네임 : UserName
+ setIsOpen(!isOpen)}>수정하기 +
+
+

알람설정

+ +
+
+
+ setIsQuit(!isQuit)}>회원탈퇴 + +
+ + +
+
+
+ ); +} +export default MySetting; diff --git a/src/domains/mypage/main/TabMenu.tsx b/src/domains/mypage/main/TabMenu.tsx index 320bbc3..3cc986a 100644 --- a/src/domains/mypage/main/TabMenu.tsx +++ b/src/domains/mypage/main/TabMenu.tsx @@ -1,11 +1,9 @@ import tw from '@/shared/utills/tw'; import { cva } from 'class-variance-authority'; -import { Dispatch, SetStateAction } from 'react'; interface Props { title: string; isClick: number; - setIsClick: Dispatch>; index: number; role: string; type?: 'default' | 'underLine'; @@ -59,17 +57,11 @@ export const TabClass = cva( } ); -function TabMenu({ title, setIsClick, isClick, role, type, index, id, ...rest }: Props) { +function TabMenu({ title, isClick, role, type, index, id, ...rest }: Props) { const isActive = index == isClick; return ( - ); diff --git a/src/domains/mypage/skeleton/main/SkeletonLayout.tsx b/src/domains/mypage/skeleton/main/SkeletonLayout.tsx new file mode 100644 index 0000000..21c4d34 --- /dev/null +++ b/src/domains/mypage/skeleton/main/SkeletonLayout.tsx @@ -0,0 +1,13 @@ +import SkeletonMypageNav from '@/domains/mypage/skeleton/main/SkeletonMypageNav'; +import SkeletonMyProfile from '@/domains/mypage/skeleton/main/SkeletonMyProfile'; + +function SkeletonLayout() { + return ( +
+ + +
+
+ ); +} +export default SkeletonLayout; diff --git a/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx b/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx new file mode 100644 index 0000000..ad134e5 --- /dev/null +++ b/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx @@ -0,0 +1,51 @@ +// domains/mypage/skeleton/SkeletonMyProfile.tsx +function SkeletonMyProfile() { + return ( +
+
+
+ {/* 왼쪽: 프로필 */} +
+ {/* 아바타 + 이름 */} +
+
+
+
+ {/* 통계 리스트 */} +
    + {['좋아요', '글', '댓글', '칵테일 킵'].map((_, i) => ( +
  • +
    + {i < 3 && |} +
    • + ))} +
+
+ + {/* 오른쪽: MyAbv + AbvGraph */} + +
+
+
+ ); +} +export default SkeletonMyProfile; diff --git a/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx b/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx new file mode 100644 index 0000000..8d694ad --- /dev/null +++ b/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx @@ -0,0 +1,29 @@ +function SkeletonMypageNav() { + return ( +
+

+ 마이페이지 탭 메뉴 (로딩 중) +

+ + {/* 메인 탭 메뉴 스켈레톤 */} + + + {/* 전체삭제 버튼 자리 (조건부) */} +
+
+
+
+ ); +} +export default SkeletonMypageNav; diff --git a/src/domains/mypage/skeleton/main/SkeletonSetting.tsx b/src/domains/mypage/skeleton/main/SkeletonSetting.tsx new file mode 100644 index 0000000..b594cce --- /dev/null +++ b/src/domains/mypage/skeleton/main/SkeletonSetting.tsx @@ -0,0 +1,32 @@ +function SkeletonSetting() { + return ( + + ); +} +export default SkeletonSetting; diff --git a/src/domains/recipe/components/details/RecipeComment.tsx b/src/domains/recipe/components/details/RecipeComment.tsx new file mode 100644 index 0000000..321c305 --- /dev/null +++ b/src/domains/recipe/components/details/RecipeComment.tsx @@ -0,0 +1,12 @@ +import CommentHeader from '@/domains/shared/components/comment/CommentHeader'; +import CommentList from '@/domains/shared/components/comment/CommentList'; + +function RecipeComment() { + return ( +
+ + +
+ ); +} +export default RecipeComment; diff --git a/src/domains/recipe/components/main/Accordion.tsx b/src/domains/recipe/components/main/Accordion.tsx index 7e64bfc..5e5dea9 100644 --- a/src/domains/recipe/components/main/Accordion.tsx +++ b/src/domains/recipe/components/main/Accordion.tsx @@ -2,20 +2,20 @@ import SelectBox from '@/domains/shared/components/select-box/SelectBox'; -const selectOption = [ +const SELECT_OPTIONS = [ { id: 'abv', - option: ['', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'], + option: ['도수 전체', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'], title: '도수', }, { id: 'base', - option: ['', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'], + option: ['베이스 전체', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'], title: '베이스', }, { id: 'glass', - option: ['', '클래식', '롱', '슈터', '숏'], + option: ['글라스 전체', '클래식', '롱', '슈터', '숏'], title: '글라스', }, ]; @@ -23,7 +23,7 @@ const selectOption = [ function Accordion() { return (
    - {selectOption.map(({ id, option, title }) => { + {SELECT_OPTIONS.map(({ id, option, title }) => { return (
  • diff --git a/src/domains/recipe/details/DetailMain.tsx b/src/domains/recipe/details/DetailMain.tsx index 71c6f2c..55aa0d6 100644 --- a/src/domains/recipe/details/DetailMain.tsx +++ b/src/domains/recipe/details/DetailMain.tsx @@ -9,6 +9,7 @@ import Image from 'next/image'; import DetailList from './DetailList'; import { Suspense } from 'react'; import SkeletonDetail from '../skeleton/SkeletonDetail'; +import RecipeComment from '../components/details/RecipeComment'; function DetailMain() { return ( @@ -46,7 +47,9 @@ function DetailMain() { -
    {/* 여기에 댓글 컴포넌트 */}
    +
    + +
    ); diff --git a/src/domains/recipe/skeleton/SkeletonAlarm.tsx b/src/domains/recipe/skeleton/SkeletonAlarm.tsx new file mode 100644 index 0000000..1f7f8d6 --- /dev/null +++ b/src/domains/recipe/skeleton/SkeletonAlarm.tsx @@ -0,0 +1,26 @@ +function SkeletonAlarm() { + return ( +