Chore : guide, login, product page type 정의

guide page에 해당하는 일부 컴포넌트는 타입 미지정 상태, 추후 product/detail page부터 타입 지정 예정

Fixes : #22

src/app/guide/page.tsx

@@ -6,29 +6,19 @@ import small_logo from '@/assets/images/guide/small_logo.svg';
 import ContentBodyInfo from '@/components/guide/ContentBodyInfo';
 import { useRouter } from 'next/navigation';
 import { getMainPageProducts } from '@/api/requests';
-import guide_first from '@/assets/images/guide/guide_first.png';
-import guide_second from '@/assets/images/guide/guide_second.png';
-import guide_third from '@/assets/images/guide/guide_third.png';
 import guide_fourth from '@/assets/images/guide/guide_fourth.png';
 import character_2 from '@/assets/images/guide/character_2.png';
-import character_4 from '@/assets/images/guide/character_4.png';
-import character_5 from '@/assets/images/guide/character_5.png';
-import presents from '@/assets/images/guide/presents.png';
-import banner2 from '@/assets/images/banner/banner2.png';
-import SubBackground from '@/assets/images/guide/SubBackground.png';
 import 'react-alice-carousel/lib/alice-carousel.css';
 import AliceCarousel from 'react-alice-carousel';
 import { selectedNavPage } from '@/atom/states';
 import { useRecoilState } from 'recoil';
 import { useInView } from 'react-intersection-observer';
 import { flexCenter, flexColumn } from '@/styles/theme';
-type SlideInDivProps = {
-  inview: string;
-};
+import { Product, SlideInDivProps } from '@/interface/interface';
+
 function page() {
   const router = useRouter();
-  const [products, setProducts] = useState<any[]>([]);
-  const hi = 'S';
+  const [products, setProducts] = useState<Product[]>([]);
 
   const responsive = {
     512: {
@@ -53,16 +43,16 @@ function page() {
   useEffect(() => {
     const get = async () => {
       const response = await getMainPageProducts();
-
-      const clothes = response.map((item: any) => {
+      console.log('response', response);
+      const clothes = response.map((item: Product) => {
         return item;
       });
       setProducts(clothes);
     };
 
     get();
   }, []);
-  const items = products.map((item) => {
+  const items = products.map((item: Product) => {
     return (
       <div
         onClick={() => router.push(`/product/detail/${item.productId}`)}
@@ -79,7 +69,8 @@ function page() {
       </div>
     );
   });
-  const [selectedPage, setSelectedPage] = useRecoilState(selectedNavPage);
+  const [selectedPage, setSelectedPage] =
+    useRecoilState<string>(selectedNavPage);
   const goProduct = () => {
     setSelectedPage('제품 보기');
     router.push('/product');

src/app/login/kakaoLogin/page.tsx

@@ -5,11 +5,12 @@ import { kakaoLogin } from '@/api/requests';
 import { useCookies } from 'react-cookie';
 import { userInfoState } from '@/atom/states';
 import { useRecoilState } from 'recoil';
+import { UserInfoType } from '@/interface/interface';
 
 function page() {
   const [cookies, setCookie, removeCookie] = useCookies();
   const router = useRouter();
-  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+  const [userInfo, setUserInfo] = useRecoilState<UserInfoType>(userInfoState);
 
   const checkKakaoLogin = async () => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -25,7 +26,7 @@ function page() {
       setUserInfo({
         id: response.id,
         userEmail: response.email,
-        uesrNickname: response.nickname,
+        userNickname: response.nickname,
       });
       alert('환영합니다 ' + response.nickname + '님');
       router.push('/');

src/app/login/page.tsx

@@ -18,7 +18,7 @@ function page() {
   };
 
   const [imageSrc, setImageSrc] = useState<string>(check_off.src);
-  const [isClicked, setIsClicked] = useState(false);
+  const [isClicked, setIsClicked] = useState<boolean>(false);
 
   const handleClick = () => {
     if (isClicked) {

src/app/product/detail/[...slug]/page.tsx

@@ -17,7 +17,8 @@ import { useRouter } from 'next/navigation';
 import { useCookies } from 'react-cookie';
 import { userInfoState } from '@/atom/states';
 import { useRecoilState } from 'recoil';
-import { selectedNavPage, requestProducts, Product } from '@/atom/states';
+import { selectedNavPage, requestProducts } from '@/atom/states';
+import { Product, HomeFitProduct } from '@/interface/interface';
 
 function page() {
   const [products, setProducts] = useState({
@@ -104,8 +105,8 @@ function page() {
   const purchase = () => {
     const confirm = window.confirm('해당 상품을 바로 구매하시겠습니까?');
     if (confirm) {
-      if (userInfo.uesrNickname) {
-        const newProduct: Product = {
+      if (userInfo.userNickname) {
+        const newProduct: HomeFitProduct = {
           homeFittingId: 0,
           product: {
             brand: products.brand,

src/app/product/page.tsx

@@ -1,12 +1,8 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import ContentBodyInfo from '@/components/guide/ContentBodyInfo';
-import cloth_1 from '@/assets/images/mypick/cloth_1.png';
 import styled from 'styled-components';
 import { useRouter } from 'next/navigation';
-import logo_guide from '@/assets/images/guide/logo_guide.png';
-import Image from 'next/image';
-import Banner from '@/components/common/Banner';
 import {
   getCategory,
   getItemLatest,
@@ -15,22 +11,8 @@ import {
   getItemSeen,
 } from '@/api/requests';
 import { flexBetween, flexCenter, flexColumn } from '@/styles/theme';
+import { Product, CategoryType } from '@/interface/interface';
 
-interface Product {
-  brand: string;
-  detail: string;
-  discountRate: number;
-  mainImageFile: {
-    imagePath: string;
-    imageKey: string;
-    isMainImage: boolean;
-  };
-  name: string;
-  price: number;
-  productId: number;
-  productState: string;
-  size: string;
-}
 function page() {
   const router = useRouter();
   const [categoryData, setCategoryData] = useState<any>({});
@@ -74,9 +56,11 @@ function page() {
   };
   useEffect(() => {
     const fetchCategory = async () => {
-      const response: any = await getCategory();
-      const categoryMap = response.reduce((map: any, item: any) => {
+      const response: CategoryType[] = await getCategory();
+      console.log('category', response);
+      const categoryMap = response.reduce((map: any, item: CategoryType) => {
         if (item.parentId === null) {
+          //map type 정의해야 함
           return map;
         }
 
@@ -210,7 +194,7 @@ function page() {
                     .slice(index, index + 4)
                     .map((product, innerIndex) => (
                       <Products key={`${product.productId}_${innerIndex}`}>
-                        <Product
+                        <SoleProduct
                           onClick={() =>
                             router.push(`/product/detail/${product.productId}`)
                           }
@@ -222,7 +206,7 @@ function page() {
                             name={product.name}
                             price={product.price}
                           />
-                        </Product>
+                        </SoleProduct>
                       </Products>
                     ))}
                 </ProductWrapper>
@@ -256,7 +240,7 @@ const S = styled.div`
   margin-left: 108px;
 `;
 
-const Product = styled.div`
+const SoleProduct = styled.div`
   ${flexColumn}
   align-items: center;
 `;

src/app/wardrobe/register/page.tsx

@@ -59,7 +59,7 @@ function page() {
 
   const [selectedDate, setselectedDate] = useState('');
   const datePickerFormat = 'YYYY-MM-DD';
-  const selectedDateChange = (date) => {
+  const selectedDateChange = (date: any) => {
     const formattedDate = dayjs(date).format(datePickerFormat);
     setValue('returnDate', formattedDate);
   };
@@ -351,7 +351,7 @@ function page() {
                       },
                     }}
                     minDate={dayjs(formattedDate)}
-                    onChange={(newValue) => {
+                    onChange={(newValue: any) => {
                       selectedDateChange(newValue);
                     }}
                   />

src/atom/states.tsx

@@ -1,6 +1,8 @@
 'use client';
 import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
+import { HomeFitProduct, UserInfoType } from '@/interface/interface';
+
 const { persistAtom } = recoilPersist();
 
 export const keyword = atom<string>({
@@ -30,7 +32,7 @@ export const selectedSubscribePlan = atom<string>({
   default: 'BASIC',
 });
 
-export const userInfoState = atom({
+export const userInfoState = atom<UserInfoType>({
   key: 'userInfo',
   default: {
     id: 0,
@@ -40,23 +42,7 @@ export const userInfoState = atom({
   effects_UNSTABLE: [persistAtom],
 });
 
-export interface Product {
-  homeFittingId: number;
-  product: {
-    brand: string;
-    detail: string;
-    size: string;
-    price: number;
-    name: string;
-    mainImageFile: {
-      imagePath: string;
-    };
-    productId: number;
-  };
-  isChecked: boolean;
-}
-
-export const requestProducts = atom<Product[]>({
+export const requestProducts = atom<HomeFitProduct[]>({
   key: 'products',
   default: [],
   effects_UNSTABLE: [persistAtom],

src/components/common/Button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
+import { ButtonType } from '@/interface/interface';
 
-function Button({ content, num }: { content: string; num: string }) {
+function Button({ content, num }: ButtonType) {
   return <Show $num={num}>{content}</Show>;
 }
 

src/interface/interface.tsx

@@ -0,0 +1,57 @@
+export interface Product {
+  brand: string;
+  detail: string;
+  discountRate: null;
+  mainImageFile: {
+    imagePath: string;
+    imageKey: string;
+    isMainImage: boolean;
+  };
+  name: string;
+  price: number;
+  productId: number;
+  productState: string;
+  size: string;
+}
+
+export interface SlideInDivProps {
+  inview: string;
+}
+
+export interface ButtonType {
+  content: string;
+  num: string;
+}
+
+export interface HomeFitProduct {
+  homeFittingId: number;
+  product: {
+    brand: string;
+    detail: string;
+    size: string;
+    price: number;
+    name: string;
+    mainImageFile: {
+      imagePath: string;
+    };
+    productId: number;
+  };
+  isChecked: boolean;
+}
+
+export interface UserInfoType {
+  id: number;
+  userEmail: string;
+  userNickname: string;
+}
+
+export interface CategoryType {
+  id: number;
+  name: string;
+  parentId: number;
+  parentName: string;
+}
+
+export interface DetailProduct {
+  //detail/[...slug] 참고
+}