Merge pull request #148 from ASAP-Lettering/feat/#141

[Feat] 홈(메인) 행성 고정 기능
ASAP-Lettering · Feb 12, 2025 · 4446e3f · 4446e3f
2 parents 6c41c34 + c91cd7f
commit 4446e3f
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 80 deletions.
diff --git a/src/api/planet/space/space.tsx b/src/api/planet/space/space.tsx
@@ -1,4 +1,4 @@
-import { authClient } from "@/api/client";
+import { authClient } from '@/api/client';
 
 // 메인 스페이스 아이디 조회
 export const getMainId = async () => {
@@ -7,6 +7,13 @@ export const getMainId = async () => {
   return response;
 };
 
+// 메인 스페이스 변경
+export const putMainSpace = async (spaceId: string) => {
+  const response = await authClient.put(`/api/v1/spaces/${spaceId}/main`);
+
+  return response;
+};
+
 // 특정 스페이스 조회
 export const getSpaceInfo = async (spaceId: string) => {
   const response = await authClient.get(`/api/v1/spaces/${spaceId}`);
@@ -21,14 +28,14 @@ export const getSpaceList = async () => {
 // 스페이스 생성
 export const postNewSpace = async ({
   spaceName,
-  templateType,
+  templateType
 }: {
   spaceName: string;
   templateType: number;
 }) => {
   return await authClient.post(`/api/v1/spaces`, {
     spaceName: spaceName,
-    templateType: templateType,
+    templateType: templateType
   });
 };
 
@@ -40,30 +47,30 @@ export const deleteSpace = async ({ spaceId }: { spaceId: string }) => {
 // 여러 스페이스 삭제
 export const deleteSpaces = async ({ spaceIds }: { spaceIds: string[] }) => {
   return await authClient.delete(`/api/v1/spaces`, {
-    data: { spaceIds },
+    data: { spaceIds }
   });
 };
 
 // 스페이스 이름 수정
 export const putSpace = async ({
   spaceId,
-  spaceName,
+  spaceName
 }: {
   spaceId: string;
   spaceName: string;
 }) => {
   return await authClient.put(`/api/v1/spaces/${spaceId}/name`, {
-    spaceName,
+    spaceName
   });
 };
 
 // 스페이스 순서 변경
 export const putSpacesOrder = async ({
-  orders,
+  orders
 }: {
   orders: { spaceId: string; index: number }[];
 }) => {
   return await authClient.put(`/api/v1/spaces/order`, {
-    orders,
+    orders
   });
 };
diff --git a/src/app/mypage/send/page.tsx b/src/app/mypage/send/page.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
 import {
   deleteSentLetter,
   deleteSentLetters,
-  getSentLetter,
-} from "@/api/mypage/user";
-import Button from "@/components/common/Button";
-import ConfirmModal from "@/components/common/ConfirmModal";
-import Loader, { LoaderContainer } from "@/components/common/Loader";
-import NavigatorBar from "@/components/common/NavigatorBar";
-import LetterTag from "@/components/mypage/LetterTag";
-import { useToast } from "@/hooks/useToast";
-import { SentLetterListType } from "@/types/letter";
-import { useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import styled from "styled-components";
+  getSentLetter
+} from '@/api/mypage/user';
+import Button from '@/components/common/Button';
+import ConfirmModal from '@/components/common/ConfirmModal';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
+import NavigatorBar from '@/components/common/NavigatorBar';
+import LetterTag from '@/components/mypage/LetterTag';
+import { useToast } from '@/hooks/useToast';
+import { SentLetterListType } from '@/types/letter';
+import { useRouter } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+import styled from 'styled-components';
 
 const SendedLetter = () => {
   const [isSelecting, setIsSelecting] = useState(false); // 항목을 선택중인지
@@ -49,7 +49,7 @@ const SendedLetter = () => {
       await fetchDeleteLetter(selectedId);
       setIsSelecting(false);
       setSelectedId([]);
-      console.log("Deleted IDs:", selectedId);
+      console.log('Deleted IDs:', selectedId);
       fetchLetterList();
     }
   };
@@ -69,7 +69,7 @@ const SendedLetter = () => {
   const fetchLetterList = async () => {
     try {
       const response = await getSentLetter();
-      setSenderArray(response.data.content);
+      setSenderArray(response.data.content.reverse());
     } catch (error) {
       console.log(error);
     }
@@ -78,22 +78,22 @@ const SendedLetter = () => {
   const fetchDeleteLetter = async (letterIds: string[]) => {
     if (letterIds.length === 1) {
       try {
-        const response = await deleteSentLetter(letterIds[0]);
+        await deleteSentLetter(letterIds[0]);
         showToast(`1개의 편지가 삭제되었어요`, {
           icon: false,
           close: true,
-          bottom: "50px",
+          bottom: '50px'
         });
       } catch (error) {
         console.log(error);
       }
     } else if (letterIds.length > 1) {
       try {
-        const response = await deleteSentLetters(letterIds);
+        await deleteSentLetters(letterIds);
         showToast(`${letterIds.length}개의 편지가 삭제되었어요`, {
           icon: false,
           close: true,
-          bottom: "50px",
+          bottom: '50px'
         });
       } catch (error) {
         console.log(error);
@@ -105,7 +105,7 @@ const SendedLetter = () => {
     <Container $isSelecting={isSelecting}>
       {isPopup && (
         <ConfirmModal
-          title={selectedId.length + "개의 편지를 정말 삭제할까요?"}
+          title={selectedId.length + '개의 편지를 정말 삭제할까요?'}
           sub="삭제된 편지는 복구되지 않아요."
           onConfirm={discardItems}
           onCancel={cancelItems}
@@ -118,7 +118,7 @@ const SendedLetter = () => {
         <Header>
           {!isSelecting ? (
             <>
-              {" "}
+              {' '}
               <SelectText onClick={() => setIsSelecting(!isSelecting)}>
                 삭제
               </SelectText>
@@ -191,10 +191,10 @@ const Container = styled.div<{
   max-height: 100%;
   justify-content: space-between;
   /* ${({ $isSelecting }) =>
-    $isSelecting ? "justify-content: space-between" : ""}; */
+    $isSelecting ? 'justify-content: space-between' : ''}; */
   color: white;
   background: ${(props) => props.theme.colors.bg};
-  background-image: url("/assets/mypage/img_background.png");
+  background-image: url('/assets/mypage/img_background.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

diff --git a/src/app/planet/manage/page.tsx b/src/app/planet/manage/page.tsx
@@ -11,6 +11,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import {
   deleteSpaces,
   getSpaceList,
+  putMainSpace,
   putSpacesOrder
 } from '@/api/planet/space/space';
 import { useToast } from '@/hooks/useToast';
@@ -104,13 +105,19 @@ const PlanetManagePage = () => {
   };
 
   /* 홈(메인) 행성 고정 */
-  const handleFixMainPlanet = () => {
+  const handleFixMainPlanet = async () => {
     const selectedPlanet = planets?.filter((planet) =>
       selectedId.includes(planet.spaceId)
     );
-
-    /* TODO: 선택 행성 (selectedId) 메인 행성으로 변경 API 연동 */
-
+    await putMainSpace(selectedId);
+    setPlanets(
+      planets.map((planet) =>
+        planet.spaceId === selectedId
+          ? { ...planet, isMainSpace: true }
+          : { ...planet, isMainSpace: false }
+      )
+    );
+    setViewSpaceId(null);
     setIsBottomUp(false);
     showToast(`${selectedPlanet[0]?.spaceName} 행성을 홈으로 고정했어요`, {
       icon: false,

diff --git a/src/app/signup/complete/page.tsx b/src/app/signup/complete/page.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import Button from "@/components/common/Button";
-import Loader, { LoaderContainer } from "@/components/common/Loader";
-import NavigatorBar from "@/components/common/NavigatorBar";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense } from "react";
-import styled from "styled-components";
+import Button from '@/components/common/Button';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
+import NavigatorBar from '@/components/common/NavigatorBar';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import styled from 'styled-components';
 
 const Signup = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const url = searchParams.get("url");
+  const url = searchParams.get('url');
 
   const handleButtonClick = () => {
     if (url) {
       router.push(`/verify/letter?url=${url}`);
     } else {
-      router.push("/onboarding");
+      router.push('/onboarding');
     }
   };
   return (
@@ -29,7 +29,7 @@ const Signup = () => {
             <br /> 레터링에 오신 걸 환영해요
           </HeaderTitle>
           <HeaderSubTitle>
-            편지에 담긴 진심으로 나만의 우주를 채워보세요!
+            편지에 담긴 진심으로 나의 스페이스를 채워보세요!
           </HeaderSubTitle>
         </Header>
         <ImageWrapper>
@@ -39,7 +39,7 @@ const Signup = () => {
       <Wrapper>
         <Button
           buttonType="primary"
-          text={url ? "나에게 온 편지 열기" : "나의 스페이스에 접속하기"}
+          text={url ? '나에게 온 편지 열기' : '나의 스페이스에 접속하기'}
           onClick={handleButtonClick}
         ></Button>
       </Wrapper>
@@ -72,7 +72,7 @@ const Container = styled.div`
   flex-direction: column;
   //overflow: scroll;
   justify-content: space-between;
-  background-image: url("/assets/signup/signup_bg.png");
+  background-image: url('/assets/signup/signup_bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { theme } from '@/styles/theme';
 import styled from 'styled-components';
 
 export default function Signup() {
@@ -10,6 +11,6 @@ const Container = styled.div`
   display: flex;
   min-height: 100%;
   padding: 20px;
-  color: white;
-  background: #060812;
+  color: ${theme.colors.white};
+  background: ${theme.colors.bg};
 `;