fix(#204): 포지션 관련 오류 수정 및 게시판 작성 및 조회 모드에 따라 포지션 처리

Gamegoo-repo · Mar 2, 2025 · 5fc9d66 · 5fc9d66
1 parent de3f237
commit 5fc9d66
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 47 deletions.
diff --git a/src/components/board/Table.tsx b/src/components/board/Table.tsx
@@ -212,15 +212,24 @@ const Table = (props: TableProps) => {
                     />
                   </Fourth>
                   <Fifth className="table_width">
-                    {data.wantP.map((posi, i) => (
+                    {data.wantP?.length > 0 ? (
+                      data.wantP.map((posi, i) => (
+                        <Image
+                          key={`${posi}-${i}`}
+                          src={setPositionImg(posi || "ANY")}
+                          width={35}
+                          height={28}
+                          alt="찾는 포지션"
+                        />
+                      ))
+                    ) : (
                       <Image
-                        key={`${posi}-${i}`}
-                        src={setPositionImg(posi)}
+                        src={setPositionImg("ANY")}
                         width={35}
                         height={28}
                         alt="찾는 포지션"
                       />
-                    ))}
+                    )}
                   </Fifth>
                   <Sixth className="table_width">
                     <Champion

diff --git a/src/components/crBoard/PositionBox.tsx b/src/components/crBoard/PositionBox.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import PositionCategory from "../common/PositionCategory";
 import { Position, PositionType } from "@/types/position/position";
 import { theme } from "@/styles/theme";
@@ -11,35 +11,27 @@ type Status = "reading" | "posting";
 interface PositionBoxProps {
   status?: Status;
   onPositionChange?: (newPositionValue: PositionState) => void;
-  main: Position;
-  sub: Position;
-  want: (Position | null)[] | undefined;
+  main: Position | null;
+  sub: Position | null;
+  want: (Position | null)[] | null;
 }
 
 export interface PositionState {
   main: Position;
   sub: Position;
-  want: (Position | null)[] | undefined | null;
+  want: (Position | null)[] | null;
 }
 
 const PositionBox = (props: PositionBoxProps) => {
   const { status, onPositionChange, main, sub, want } = props;
   const [selectedBox, setSelectedBox] = useState<PositionType | null>(null);
   const [openPosition, setOpenPosition] = useState<PositionType | null>(null);
   const [positionValue, setPositionValue] = useState<PositionState>({
-    main: main,
-    sub: sub,
+    main: main || "ANY",
+    sub: sub || "ANY",
     want: want ?? [],
   });
 
-  useEffect(() => {
-    setPositionValue({
-      main: main ?? "ANY",
-      sub: sub ?? "ANY",
-      want: want ?? [],
-    });
-  }, [main, sub, want]);
-
   /* 포지션 선택  */
   const handleCategoryButtonClick = (
     selectedValues: Position | (Position | null)[]
@@ -142,14 +134,16 @@ const PositionBox = (props: PositionBoxProps) => {
             height={34}
             alt="첫 번째 찾는 포지션"
           />
-          <StyledImage
-            $status={status}
-            onClick={() => handleBoxClick("want")}
-            src={handlePositionImgSet(positionValue.want?.[1])}
-            width={35}
-            height={34}
-            alt="두 번째 찾는 포지션"
-          />
+          {(positionValue.want?.[1] || status === "posting") && (
+            <StyledImage
+              $status={status}
+              onClick={() => handleBoxClick("want")}
+              src={handlePositionImgSet(positionValue.want?.[1])}
+              width={35}
+              height={34}
+              alt="두 번째 찾는 포지션"
+            />
+          )}
           {openPosition === "want" && (
             <PositionCategory
               selectedBox={selectedBox}

diff --git a/src/components/createBoard/PostBoard.tsx b/src/components/createBoard/PostBoard.tsx
@@ -101,9 +101,9 @@ const PostBoard = (props: PostBoardProps) => {
       setSelectedDropOption(currentPost.gameMode);
 
       setPositionValue({
-        main: currentPost.mainP,
-        sub: currentPost.subP,
-        want: currentPost.wantP,
+        main: currentPost.mainP || "ANY",
+        sub: currentPost.subP || "ANY",
+        want: currentPost.wantP || [],
       });
 
       setSelectedImageIndex(currentPost.profileImage);
@@ -229,7 +229,13 @@ const PostBoard = (props: PostBoardProps) => {
       contents: textareaValue,
       mainP: isARAM ? "ANY" : positionValue?.main,
       subP: isARAM ? "ANY" : positionValue?.sub,
-      wantP: isARAM ? ["ANY", "ANY"] : positionValue?.want,
+      wantP: isARAM
+        ? ["ANY"]
+        : Array.isArray(positionValue?.want)
+        ? positionValue?.want.length > 0
+          ? positionValue?.want
+          : ["ANY"]
+        : ["ANY"],
     };
 
     console.log("params", params);
@@ -323,9 +329,15 @@ const PostBoard = (props: PostBoardProps) => {
             <PositionBox
               status="posting"
               onPositionChange={handlePositionChange}
-              main={positionValue?.main}
-              sub={positionValue?.sub}
-              want={positionValue?.want}
+              main={positionValue?.main || null}
+              sub={positionValue?.sub || null}
+              want={
+                Array.isArray(positionValue?.want) &&
+                positionValue.want.length === 1 &&
+                positionValue.want[0] === "ANY"
+                  ? []
+                  : positionValue?.want || null
+              }
             />
           </PositionSection>
         )}

diff --git a/src/components/match/Profile.tsx b/src/components/match/Profile.tsx
@@ -36,7 +36,7 @@ import {
 import { deleteFriend } from "@/api/friend/delete";
 import { blockMember, unblockMember } from "@/api/block/block";
 import { Mike as MikeType } from "@/types/user/mike";
-import { Position as PositionType } from "@/types/position/position";
+import { Position, PositionType } from "@/types/position/position";
 import RankTier from "../common/RankTier";
 import Alert from "../common/Alert";
 
@@ -119,7 +119,7 @@ const Profile: React.FC<Profile> = ({
         mike: isMike,
         mainP: positionValue.main ?? "ANY",
         subP: positionValue.sub ?? "ANY",
-        wantP: positionValue.want ?? ["ANY", "ANY"],
+        wantP: positionValue.want ?? [],
         gameStyleResponseDTOList: gameStyleIds,
       })
     );
@@ -228,7 +228,7 @@ const Profile: React.FC<Profile> = ({
         await putPosition({
           mainP: newPositionValue.main,
           subP: newPositionValue.sub,
-          wantP: newPositionValue.want || ["ANY", "ANY"],
+          wantP: newPositionValue.want || [],
         });
 
         // 포지션 상태 업데이트
@@ -248,11 +248,13 @@ const Profile: React.FC<Profile> = ({
     }
   };
 
-  const handleCategoryButtonClick = (positionName: PositionType) => {
+  const handleCategoryButtonClick = (
+    selectedValues: Position | (Position | null)[]
+  ) => {
     if (selectedBox) {
       const newPositionValue = {
         ...positionValue,
-        [selectedBox]: positionName,
+        [selectedBox]: selectedValues,
       };
       setPositionValue(newPositionValue);
       handlePositionChange(newPositionValue);
@@ -527,7 +529,7 @@ const Profile: React.FC<Profile> = ({
             </StyledBox>
           ) : (
             <UnderRow>
-              <Position>
+              <Positions>
                 {POSITIONS.map((position, index) => (
                   <Posi
                     key={index}
@@ -551,13 +553,21 @@ const Profile: React.FC<Profile> = ({
                     />
                     {isPositionOpen[index] && (
                       <PositionCategory
+                        value={
+                          index === 0
+                            ? positionValue.main ?? "ANY"
+                            : index === 1
+                            ? positionValue.sub ?? "ANY"
+                            : (positionValue.want && positionValue.want[0]) ??
+                              "ANY"
+                        }
                         onClose={() => handlePositionClose(index)}
                         onSelect={handleCategoryButtonClick}
                       />
                     )}
                   </Posi>
                 ))}
-              </Position>
+              </Positions>
               {(profileType === "other" || profileType === "me") &&
                 user.championResponseList && (
                   <Champion
@@ -957,7 +967,7 @@ const MsgConfirm = styled(Msg)`
   margin: 80px 0;
 `;
 
-const Position = styled.div`
+const Positions = styled.div`
   display: flex;
   gap: 24px;
   align-items: center;

diff --git a/src/components/readBoard/ReadBoard.tsx b/src/components/readBoard/ReadBoard.tsx
@@ -610,9 +610,13 @@ const ReadBoard = (props: ReadBoardProps) => {
                   <Title>포지션</Title>
                   <PositionBox
                     status="reading"
-                    main={isPost.mainP}
-                    sub={isPost.subP}
-                    want={isPost.wantP}
+                    main={isPost.mainP || null}
+                    sub={isPost.subP || null}
+                    want={
+                      Array.isArray(isPost.wantP)
+                        ? isPost.wantP.filter((v) => v !== null)
+                        : null
+                    }
                   />
                 </PositionSection>
               )}

diff --git a/src/interface/board.ts b/src/interface/board.ts
@@ -25,7 +25,7 @@ export interface BoardListDetail {
   gameMode: GameMode;
   mainP: Position;
   subP: Position;
-  wantP: Position[];
+  wantP: (Position|null)[];
   championResponseList?: ChampionResponseDTOList[];
   winRate: number;
   createdAt: string;

diff --git a/src/redux/slices/matchInfo.ts b/src/redux/slices/matchInfo.ts
@@ -6,7 +6,7 @@ export interface MatchInfoState {
   mike: Mike | null;                        // 마이크 사용 여부
   mainP: Position;                             // 주 포지션
   subP: Position;                              // 부 포지션
-  wantP: Position[];                             // 원하는 포지션
+  wantP: (Position|null)[];                             // 원하는 포지션
   gameStyleResponseDTOList: number[];          // 게임 스타일 목록
 }