[style] 마이페이지 탭별 페이지#29 #30 (#85)

* [style]mybar

* [style]알람설정

* [style] 탭 메뉴 접근성

* [style]마이페이지

* [style]마이페이지 반응형 수정

* [style]툴팁컴포넌트

* [chore]포매팅

Author: mtm-git1018

src/app/mypage/layout.tsx

@@ -0,0 +1,13 @@
+import MyNav from '@/domains/mypage/main/MyNav';
+import MyProfile from '@/domains/mypage/main/MyProfile';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-1024 page-layout py-12">
+      <MyProfile />
+      <MyNav />
+      <div className="mt-5">{children}</div>
+    </div>
+  );
+}
+export default Layout;

src/app/mypage/my-active/my-comment/page.tsx

@@ -0,0 +1,9 @@
+import CommentList from '@/domains/shared/components/comment/CommentList';
+function MyComment() {
+  return (
+    <ul>
+      <CommentList></CommentList>
+    </ul>
+  );
+}
+export default MyComment;

src/app/mypage/my-active/my-like/page.tsx

@@ -0,0 +1,27 @@
+import PostCard from '@/domains/community/main/PostCard';
+
+function MyPost() {
+  return (
+    <ul>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+    </ul>
+  );
+}
+export default MyPost;

src/app/mypage/my-active/my-post/page.tsx

@@ -0,0 +1,18 @@
+import PostCard from '@/domains/community/main/PostCard';
+
+function MyPost() {
+  return (
+    <ul>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+      <li>
+        <PostCard label="팁"></PostCard>
+      </li>
+      <li>
+        <PostCard label="레시피"></PostCard>
+      </li>
+    </ul>
+  );
+}
+export default MyPost;

src/app/mypage/my-active/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+
+function page() {
+  return redirect('/mypage/my-active/my-post');
+}
+export default page;

src/app/mypage/my-alarm/page.tsx

@@ -0,0 +1,14 @@
+import Alarm from '@/domains/mypage/components/Alarm';
+
+function MyAlarm() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Alarm></Alarm>
+      <Alarm></Alarm>
+
+      <Alarm></Alarm>
+      <Alarm></Alarm>
+    </div>
+  );
+}
+export default MyAlarm;

src/app/mypage/my-setting/page.tsx

@@ -0,0 +1,39 @@
+'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';
+
+function MySetting() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isQuit, setIsQuit] = useState(false);
+
+  return (
+    <section className="flex flex-col h-80 md:h-100 lg:h-125 justify-between">
+      {isOpen && <EditNickName open={isOpen} onClose={() => setIsOpen(!isOpen)} />}
+      {isQuit && <WithdrawModal open={isQuit} onClose={() => setIsQuit(!isQuit)} />}
+      <div>
+        <div className="flex justify-between py-5 border-b-1 border-gray-light">
+          <div className="text-lg">닉네임 : UserName</div>
+          <TextButton onClick={() => setIsOpen(!isOpen)}>수정하기</TextButton>
+        </div>
+        <div className="flex justify-between py-5">
+          <h2>알람설정</h2>
+          <ToggleBtn />
+        </div>
+      </div>
+      <div className="p-4 bg-gray w-20 flex-center items-center">ToopTip</div>
+      <div className="flex justify-between items-center">
+        <TextButton onClick={() => setIsQuit(!isQuit)}>회원탈퇴</TextButton>
+
+        <div className="flex gap-2 ">
+          <Button color="purple">취소</Button>
+          <Button>변경상태 저장</Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+export default MySetting;

src/app/mypage/mybar/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+import CocktailCard from '@/domains/recipe/CocktailCard';
+import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
+
+function MyBar() {
+  return (
+    <div
+      className="grid grid-cols-2 mt-10 gap-8 w-full sm:[grid-template-columns:repeat(2,minmax(0,320px))]  md:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
+     lg:[grid-template-columns:repeat(4,minmax(0,250px))]"
+    >
+      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>
+      <CocktailCard
+        src={Img}
+        type="myBar"
+        name="Old Pashioned"
+        nameKo="올드 패션드"
+      ></CocktailCard>{' '}
+      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
+      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
+      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
+      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>
+    </div>
+  );
+}
+export default MyBar;

src/app/mypage/page.tsx

@@ -1,4 +1,6 @@
-function Page() {
-  return <div>mypage</div>;
+import { redirect } from 'next/navigation';
+
+function page() {
+  return redirect('/mypage/mybar');
 }
-export default Page;
+export default page;

src/domains/mypage/components/Alarm.tsx

@@ -0,0 +1,37 @@
+'use client';
+import SsuryAlram from '@/shared/assets/ssury/ssury_bell.webp';
+import clsx from 'clsx';
+import Image from 'next/image';
+import { useState } from 'react';
+
+function Alarm() {
+  const [isClick, setIsClick] = useState(false);
+
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+  return (
+    <div
+      className={clsx(
+        `px-3 md:px-5 py-4 h-auto md:h-33 cursor-pointer bg-gray-dark/80 rounded-2xl`,
+        isClick ? 'opacity-50' : 'bg-gray-dark/80'
+      )}
+      onClick={handleClick}
+    >
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2 items-center">
+            <Image src={SsuryAlram} alt="알람" width={40} height={40} />
+            <p className="text-sm text-white/80">9월 18일</p>
+          </div>
+          <p className="text-sm text-white/80">10분 전</p>
+        </div>
+        <div className="flex flex-col">
+          <h2 className="text-lg font-bold">새로운 좋아요 알림</h2>
+          <p className="text-sm text-white/80">User님이 내 글에 좋아요를 누르셨습니다.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Alarm;