Merge pull request #97 from hyeonjiroh/design/#94/mypage-layout

design: #94/마이페이지 레이아웃

Author: ARON-Y

public/icon/arrow_right_icon.svg

@@ -0,0 +1,30 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import BackIcon from "../../../../../public/icon/arrow_right_icon.svg";
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          router.back();
+        }}
+        className="flex gap-2 items-center"
+      >
+        <Image
+          src={BackIcon}
+          className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
+          alt=""
+        />
+        <div className="font-medium text-md text-gray-800 tablet:text-lg">
+          돌아가기
+        </div>
+      </button>
+    </div>
+  );
+}

src/app/(after-login)/mypage/_components/BackButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Button from "@/components/common/button/Button";
+import Input from "@/components/common/input/Input";
+
+export default function PasswordSection() {
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex flex-col gap-10 tablet:gap-6">
+        <div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          비밀번호 변경
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-4">
+            {/* 로그인/회원가입 페이지에서 한 것 처럼 패스워드 토글 버튼 넣어도 좋을 것 같네요 */}
+            <Input type="password" label="현재 비밀번호" />
+            <Input type="password" label="새 비밀번호" />
+            <Input type="password" label="새 비밀번호 확인" />
+          </div>
+          <Button variant="purple">변경</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/mypage/_components/PasswordSection.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { UserInfo } from "@/lib/types";
+import { fetchUser } from "@/lib/apis/usersApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
+import Button from "@/components/common/button/Button";
+import ImageInput from "@/components/common/input/ImageInput";
+import Input from "@/components/common/input/Input";
+
+export default function ProfileSection() {
+  const [data, setData] = useState<UserInfo | null>(null);
+
+  useEffect(() => {
+    const getData = async () => {
+      const res = await fetchUser({
+        token: TOKEN_1,
+      });
+      setData(res);
+    };
+
+    getData();
+  }, []);
+
+  if (!data) return;
+
+  const { email, nickname, profileImageUrl } = data;
+
+  // 이 밑으로 formData(닉네임, 이미지) state 생성하시고, 기본값으로 각각 위의 nickname, profileImageUrl 넣어주시면 될 거예요
+  // 아래는 vercel 배포를 위해 위 값들을 임시로 사용한 테스트 코드라 나중에 삭제해주시면 됩니다
+  console.log(nickname);
+  console.log(profileImageUrl);
+
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex flex-col gap-10 tablet:gap-6">
+        <div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          프로필
+        </div>
+        <div className="flex flex-col gap-10 tablet:flex-row tablet:gap-[42px]">
+          <div>
+            <ImageInput variant="profile" />
+          </div>
+          <div className="flex flex-col gap-6 grow">
+            <div className="flex flex-col gap-4">
+              {/* 이메일 인풋에는 나중에 disabled 속성 들어가야 합니다 */}
+              <Input label="이메일" value={email} />
+              <Input label="닉네임" />
+            </div>
+            <Button variant="purple">저장</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/mypage/_components/ProfileSection.tsx

@@ -1,3 +1,17 @@
+import BackButton from "./_components/BackButton";
+import PasswordSection from "./_components/PasswordSection";
+import ProfileSection from "./_components/ProfileSection";
+
 export default function Page() {
-  return <div>/mypage</div>;
+  return (
+    <div className="flex flex-col px-3 py-4">
+      <div className="flex flex-col gap-[6px] tablet:gap-[29px]">
+        <BackButton />
+        <div className="flex flex-col gap-4 max-w-[672px] tablet:gap-6">
+          <ProfileSection />
+          <PasswordSection />
+        </div>
+      </div>
+    </div>
+  );
 }