[Feat] 마이페이지 - 기본 페이지 구현

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*
 
 # vercel
 .vercel

next.config.mjs

@@ -2,6 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
 
+  env: {
+    NEXT_PUBLIC_KEYDEUK_API_BASE_URL: process.env.NEXT_PUBLIC_KEYDEUK_API_BASE_URL,
+  },
+
   images: {
     remotePatterns: [
       {

public/index.ts

@@ -1,3 +1,4 @@
+export { default as AlertIcon } from './svgs/alertIcon.svg';
 export { default as ChevronIcon } from './svgs/chevron.svg';
 export { default as EyeOffIcon } from './svgs/eyeOff.svg';
 export { default as EyeOnIcon } from './svgs/eyeOn.svg';

src/api/profileAPI.ts

@@ -0,0 +1,84 @@
+import { FieldValues } from 'react-hook-form';
+
+const BASE_URL = process.env.NEXT_PUBLIC_KEYDEUK_API_BASE_URL;
+
+interface PutEditProfileProps {
+  payload: FieldValues;
+  token: string | null;
+}
+
+/**
+ * 주어진 토큰을 사용하여 사용자 데이터를 호출
+ *
+ * @param {string} token - 인증 토큰입니다.
+ * @returns {Promise<Object>} - 사용자 데이터를 반환합니다.
+ * @throws {Error} - 요청이 실패한 경우 에러를 던집니다.
+ */
+export async function getUserData(token: string | null) {
+  if (!token) {
+    return null;
+  }
+
+  try {
+    const res = await fetch(`${BASE_URL}/api/v1/users/me`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * 주어진 payload로 사용자 프로필을 업데이트
+ *
+ * @param {FieldValues} payload - 사용자 프로필을 업데이트할 데이터입니다.
+ * @returns {Promise<Object>} - 응답 데이터를 반환합니다.
+ * @throws {Error} - 요청이 실패한 경우 에러를 던집니다.
+ */
+export async function putEditProfile({ payload, token }: PutEditProfileProps) {
+  try {
+    const res = await fetch(`${BASE_URL}/api/v1/users/me`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * 주어진 닉네임이 사용 가능한지 확인
+ *
+ * @param {string} nickname - 확인할 닉네임입니다.
+ * @returns {Promise<Object>} - 닉네임이 사용 가능한지 여부를 나타내는 응답 데이터를 반환합니다.
+ * @throws {Error} - 요청이 실패한 경우 에러를 던집니다.
+ */
+export async function checkNickname(nickname: string) {
+  try {
+    const res = await fetch(`${BASE_URL}/api/v1/users/check/nickname?nickname=${nickname}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    throw error;
+  }
+}

src/app/(test)/bk/page.tsx

@@ -1,83 +1,7 @@
 'use client';
 
-import { InputField } from '@/components';
-import Dropdown from '@/components/Dropdown/Dropdown';
-import classNames from 'classnames/bind';
-import { FormEvent } from 'react';
-
-import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
-import styles from './page.module.scss';
-
-const cn = classNames.bind(styles);
-
-const OPTIONS = ['인기순', '조회순', '최신순', '가격 낮은순', '가격 높은순', '직접 입력'];
+import EditProfileModal from '@/app/my-info/_components/UserProfile/EditProfileModal/EditProfileModal';
 
 export default function Page() {
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    // const formData = new FormData(e.currentTarget);
-    // const payload = Object.fromEntries(formData.entries());
-    // console.log(payload);
-  };
-
-  // const handleClick = (e: MouseEvent<HTMLInputElement>) => {
-  //   console.log('onClick', true, e.currentTarget.value);
-  // };
-  const handleClick = () => {};
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <InputField
-        label='비밀번호'
-        id='이메일'
-        name='인풋'
-        type='password'
-        placeholder='이메일을 입력해 주세요'
-        suffixIcon='eye'
-        sizeVariant='md'
-      />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <div style={{ width: '600px' }}>
-        <Dropdown
-          options={OPTIONS}
-          name='드롭다운'
-          sizeVariant='md'
-          placeholder='fdsa'
-          onClick={handleClick}
-          className={cn('dropdown')}
-        />
-      </div>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      {/* <TextField label='텍스트필드' id='텍스트' name='텍스트' placeholder='최소 20자 이상 입력해 주세요' /> */}
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      {/* <RadioField options={OPTIONS} label='숫자' value='6' /> */}
-      {/* <ItemOverview /> */}
-      <Breadcrumb />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <button style={{ border: '1px solid', width: '100%', height: '10vh', textAlign: 'center' }} type='submit'>
-        테스트
-      </button>
-    </form>
-  );
+  return <EditProfileModal />;
 }

src/app/layout.tsx

@@ -1,7 +1,10 @@
-import { Header } from '@/components';
 import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
 import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
 import { ReactNode } from 'react';
+
+import { getUserData } from '@/api/profileAPI';
+import { Header } from '@/components';
 import { Providers } from './providers';
 
 import '@/styles/reset.css';
@@ -18,9 +21,11 @@ export default async function RootLayout({
 }>) {
   const queryClient = new QueryClient();
 
-  // 유저 data api 호출
-  // const Token = cookies().get('accessToken')?.value ?? null;
-  // await queryClient.prefetchQuery({ queryKey: ['userData'], queryFn: () => getUserData(Token), });
+  const token = cookies().get('accessToken')?.value || null;
+
+  if (token) {
+    await queryClient.prefetchQuery({ queryKey: ['userData'], queryFn: () => getUserData(token) });
+  }
 
   return (
     <html lang='ko'>

src/app/my-info/_components/DeliveryStatus/DeliveryStatus.module.scss

@@ -0,0 +1 @@
+// init

src/app/my-info/_components/DeliveryStatus/DeliveryStatus.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames/bind';
+import styles from './DeliveryStatus.module.scss';
+
+const cn = classNames.bind(styles);
+
+const DELIVERY_STATUS_LIST = [
+  { label: '주문접수', count: 1 },
+  { label: '결제완료', count: 0 },
+  { label: '배송준비중', count: 0 },
+  { label: '배송중', count: 0 },
+  { label: '배송완료', count: 0 },
+];
+
+export default function DeliveryStatus() {
+  return (
+    <ul className={cn('status-list')}>
+      {DELIVERY_STATUS_LIST.map((status, i) => (
+        <li key={status.label} className={cn('status-item')}>
+          <span className={cn('status-count', { active: status.count > 0 })}>{status.count}</span>
+          <span className={cn('status-label', { active: status.count > 0 })}>{status.label}</span>
+          {i < DELIVERY_STATUS_LIST.length - 1 && <span className={cn('separator')}>&gt;</span>}
+        </li>
+      ))}
+    </ul>
+  );
+}

src/app/my-info/_components/MyInfoEmptyCase/MyInfoEmptyCase.module.scss

@@ -0,0 +1,23 @@
+.empty-case {
+  flex-direction: column;
+  width: 100%;
+  gap: 2.4rem;
+  padding: 8rem 3.2rem;
+  border-radius: 0.8rem;
+  @include flex-center;
+
+  .empty-case-text {
+    color: $gray-40;
+    @include pretendard-20-600;
+  }
+
+  .empty-case-button {
+    width: 12.8rem;
+    height: 4rem;
+    @include pretendard-16-500;
+  }
+}
+
+.background-color {
+  background-color: $gray-10;
+}

src/app/my-info/_components/MyInfoEmptyCase/MyInfoEmptyCase.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components';
+import { ROUTER } from '@/constants/route';
+import { AlertIcon } from '@/public/index';
+import classNames from 'classnames/bind';
+import Link from 'next/link';
+import styles from './MyInfoEmptyCase.module.scss';
+
+const cn = classNames.bind(styles);
+
+interface MyInfoEmptyCaseProps {
+  children: string;
+  isBackgroundColor?: boolean;
+}
+
+export default function MyInfoEmptyCase({ children, isBackgroundColor }: MyInfoEmptyCaseProps) {
+  return (
+    <div className={cn('empty-case', { 'background-color': isBackgroundColor })}>
+      <AlertIcon />
+      <p className={cn('empty-case-text')}>{children}</p>
+      <Button
+        as={Link}
+        href={ROUTER.SHOP.ALL}
+        backgroundColor='background-gray-40'
+        className={cn('empty-case-button')}
+        paddingVertical={8}
+        radius={4}
+      >
+        키득 둘러보기
+      </Button>
+    </div>
+  );
+}

src/app/my-info/_components/RecentProducts/RecentProducts.module.scss

@@ -0,0 +1,8 @@
+.recent {
+  @include flex-column(4rem);
+
+  .recent-title {
+    color: $black;
+    @include pretendard-20-600;
+  }
+}

src/app/my-info/_components/RecentProducts/RecentProducts.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames/bind';
+import MyInfoEmptyCase from '../MyInfoEmptyCase/MyInfoEmptyCase';
+import styles from './RecentProducts.module.scss';
+
+const cn = classNames.bind(styles);
+
+export default function RecentProducts() {
+  return (
+    <article className={cn('recent')}>
+      <h1 className={cn('recent-title')}>최근 본 상품</h1>
+      <MyInfoEmptyCase isBackgroundColor>최근 본 상품이 없습니다</MyInfoEmptyCase>
+    </article>
+  );
+}

src/app/my-info/_components/SNB/SNB.module.scss

@@ -1,17 +1,22 @@
 .snb {
   @include flex-column(4rem);
 
+  position: absolute;
+  top: 18.6rem;
+  left: 12rem;
+  width: 20rem;
+
+  .snb-main {
+    @include pretendard-30-700;
+
+    margin-bottom: 2rem;
+  }
+
   .snb-sections {
     @include flex-column(1.6rem);
 
     color: $black;
 
-    &.snb-section-1 {
-      @include pretendard-30-700;
-
-      margin-bottom: 0.4rem;
-    }
-
     .snb-category {
       @include pretendard-20-700;
     }
@@ -23,6 +28,18 @@
         @include pretendard-18-400;
 
         color: $gray-50;
+
+        /* stylelint-disable-next-line max-nesting-depth */
+        &:focus {
+          @include pretendard-18-700;
+
+          color: $primary;
+        }
+
+        /* stylelint-disable-next-line max-nesting-depth */
+        &:hover {
+          color: $primary-60;
+        }
       }
     }
   }