Merge pull request #228 from modern-agile-team/refactor/my-room/#172

bugfix(#172):완

Author: dmsdnWkd1234

src/app/api/axiosInstance.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_MODERN_WORLD_BASE_URL,
-  timeout: 4000,
+  timeout: 10000,
   withCredentials: true, //자격 증명(쿠키) 전송
   headers: {
     'X-Custom-Header': 'foobar',

src/app/api/inventory.ts

@@ -89,9 +89,15 @@ const INVENTORY = {
 
   async getUsersCharacterLocker(
     characterNo: number,
+    status?: boolean,
   ): Promise<UsersCharacterLockerType> {
     const result: AxiosResponse = await instance.get(
       `${this.path}/${characterNo}/characters`,
+      {
+        params: {
+          status,
+        },
+      },
     );
     return result.data[0];
   },

src/components/index-page/NewUserCreateNickname.tsx

@@ -16,15 +16,11 @@ export const NewUserCreateNewname = () => {
 
   const getCreateUserApi = async () => {
     try {
-      try {
-        await USER.createNickname(newUserNickname);
-        await USER.createCharacter(newUserCharacter);
-      } catch (err) {
-        alert('캐릭터 생성 실패');
-      }
+      await USER.createNickname(newUserNickname);
+      await USER.createCharacter(newUserCharacter);
       route.push('my-page');
     } catch (err) {
-      alert('닉네임 생성 실패');
+      alert('회원가입 실패');
     }
   };
   return (

src/components/my-room/GetUserCharacter.tsx

@@ -2,52 +2,31 @@
 
 import * as S from './style';
 import INVENTORY from '@/app/api/inventory';
-import { InventoryItemType } from '@/types/inventory';
-import { characterSize } from '@/utils/itemSizeConstains';
+
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
 export const GetUserCharacter = ({ userNo }: { userNo: number }) => {
-  const [character, setCharacter] = useState([]);
   const [characterName, setCharacterName] = useState<string>('');
 
   useEffect(() => {
-    const getUserCharacter = async (userNo: number) => {
-      const response = await INVENTORY.getInventoryCharacter(userNo);
-      setCharacter(response);
-    };
-    getUserCharacter(userNo);
     const getUsersCharacterLocker = async () => {
-      const response = await INVENTORY.getUsersCharacterLocker(userNo);
-      setCharacterName(response.character.name);
+      const response = await INVENTORY.getUsersCharacterLocker(userNo, true);
+      setCharacterName(response.character.image);
     };
     getUsersCharacterLocker();
   }, []);
 
-  const checkCharacter = characterSize.filter(
-    (e) => e.characterName === characterName,
-  )[0];
-
   return (
     <>
-      {checkCharacter ? (
-        <S.CharacterImage
-          width={checkCharacter.width}
-          height={checkCharacter.height}>
-          <Image
-            alt={'유저의 캐릭터'}
-            fill
-            sizes={'(max-width : 200px) 100vw'}
-            src={
-              (
-                character.filter(
-                  (e: InventoryItemType) => e.status,
-                )[0] as InventoryItemType
-              )?.character.image || `${process.env.NEXT_PUBLIC_S3}`
-            }
-          />
-        </S.CharacterImage>
-      ) : null}
+      <S.CharacterImage width={'20%'} height={'20%'}>
+        <Image
+          alt={'유저의 캐릭터'}
+          fill
+          sizes={'(max-width : 200px) 100vw'}
+          src={characterName || `${process.env.NEXT_PUBLIC_S3}`}
+        />
+      </S.CharacterImage>
     </>
   );
 };

src/components/my-room/MyRoom.tsx

@@ -6,6 +6,7 @@ import { Area7_8_9 } from './Area7_8_9';
 import useCheckAreaHook from './useCheckAreaHook';
 import useCheckItemSizeHook from './useCheckItemSizeHook';
 import Image from 'next/image';
+import { IMAGE } from '@/utils/image';
 
 export function MyRoom(props: {
   width: string;
@@ -19,10 +20,7 @@ export function MyRoom(props: {
           <S.FloorAndWall $border="30px 30px 0px 0px">
             <Image
               alt={'바닥 이미지'}
-              src={
-                useCheckAreaHook(11, props.userNo) ||
-                `${process.env.NEXT_PUBLIC_S3}`
-              }
+              src={useCheckAreaHook(11, props.userNo) || IMAGE.default_floor}
               fill
               sizes="(max-size:1920px) 100vw"
               objectFit="cover"
@@ -31,10 +29,7 @@ export function MyRoom(props: {
           <S.FloorAndWall $border="0px 0px 30px 30px">
             <Image
               alt={'벽지 이미지'}
-              src={
-                useCheckAreaHook(12, props.userNo) ||
-                `${process.env.NEXT_PUBLIC_S3}`
-              }
+              src={useCheckAreaHook(12, props.userNo) || IMAGE.default_wall}
               fill
               sizes={'(max-size:1080px) 100vh'}
               objectFit="cover"

src/components/my-room/style.ts

@@ -46,6 +46,7 @@ export const FloorAndWall = styled.div<StyleType>`
   border-radius: ${(props) => props.$border};
   position: relative;
   overflow: hidden;
+  z-index: 0;
 `;
 
 /**

src/utils/image.ts

@@ -31,4 +31,6 @@ export const IMAGE = {
   check: `${process.env.NEXT_PUBLIC_S3}/page/check.png`,
   handShdow: `${process.env.NEXT_PUBLIC_S3}/page/%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4/handShadow.svg`,
   null: `${process.env.NEXT_PUBLIC_S3}/items/item/null.jpg`,
+  default_wall: `${process.env.NEXT_PUBLIC_S3}/items/item/default_wall.svg`,
+  default_floor: `${process.env.NEXT_PUBLIC_S3}/items/item/default_floor.svg`,
 };

src/utils/itemSizeConstains.ts

@@ -1,12 +1,12 @@
 export const itemSize = [
   { itemNo: 1, width: '30%', height: '30%', top: '-2%' },
-  { itemNo: 2, width: '60%', height: '60%', bottom: '19%' },
-  { itemNo: 3, width: '30%', height: '30%' },
+  { itemNo: 2, width: '30%', height: '30%', bottom: '19%' },
+  { itemNo: 3, width: '30%', height: '30%', bottom: '20%' },
   { itemNo: 4, width: '30%', height: '30%' },
   { itemNo: 5, width: '30%', height: '30%' },
-  { itemNo: 6, width: '30%', height: '30%' },
+  { itemNo: 6, width: '15%', height: '15%' },
   { itemNo: 7, width: '30%', height: '30%' },
-  { itemNo: 8, width: '30%', height: '30%', bottom: '1%' },
+  { itemNo: 8, width: '30%', height: '30%', bottom: '-3%' },
   { itemNo: 9, width: '30%', height: '30%' },
   { itemNo: 10, width: '30%', height: '30%' },
   { itemNo: 11, width: '30%', height: '30%' },
@@ -18,13 +18,13 @@ export const itemSize = [
   { itemNo: 17, width: '30%', height: '30%' },
   { itemNo: 18, width: '30%', height: '30%' },
   { itemNo: 19, width: '30%', height: '30%' },
-  { itemNo: 20, width: '30%', height: '30%', bottom: '3%' },
+  { itemNo: 20, width: '30%', height: '30%', bottom: '-3%' },
   { itemNo: 21, width: '30%', height: '30%' },
   { itemNo: 22, width: '30%', height: '30%' },
   { itemNo: 23, width: '30%', height: '30%' },
   { itemNo: 24, width: '30%', height: '30%' },
   { itemNo: 25, width: '30%', height: '30%', top: '-4%' },
-  { itemNo: 26, width: '30%', height: '30%' },
+  { itemNo: 26, width: '45%', height: '45%', bottom: '30%' },
   { itemNo: 27, width: '50%', height: '50%', bottom: '25%' },
   { itemNo: 28, width: '30%', height: '30%' },
   { itemNo: 29, width: '30%', height: '30%' },
@@ -58,4 +58,5 @@ export const characterSize = [
   { characterName: '안진우똥색고양이', width: '50%', height: '50%' },
   { characterName: '김은우검은고양이', width: '50%', height: '50%' },
   { characterName: '조영은강아지', width: '50%', height: '50%' },
+  { characterName: '뽀메', width: '50%', height: '50%' },
 ];