Skip to content

fix: 스페이스 수정 > 이미지 변경이 되었음에도 버튼이 활성화되지 않는 현상 수정 #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
klmhyeonwoo merged 4 commits into from
Jan 1, 2026
Merged

fix: 스페이스 수정 > 이미지 변경이 되었음에도 버튼이 활성화되지 않는 현상 수정 #779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
410f197
fix: 스페이스 수정 > 이미지 변경이 되었음에도 버튼이 활성화되지 않는 현상 수정
klmhyeonwoo Jan 1, 2026
492b4af
feat: 스페이스 생성 > 신규 생성인 경우, 선택(기본 및 커스텀) 탭을 노출시키지 않도록 수정
klmhyeonwoo Jan 1, 2026
fab8d93
feat: ImageUploader의 onChange props 타입을 옵셔널하게 수정
klmhyeonwoo Jan 1, 2026
d00ccef
feat: ImageUploader의 onChange props 타입을 옵셔널하게 수정
klmhyeonwoo Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/web/src/app/desktop/component/retrospect/template/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export function TemplateList() {

// * @see AddSpacePage.tsx - 첫 스페이스와 회고 생성시에 템플릿 선택 화면으로 이동할 때 URL 파라미터로 타입을 넘겨줘요
const type = searchParams.get("template_type") || "";
const isInitialCreateRetrospect = type === "new_space";

const DEFAULT_TAB = ["기본", "커스텀"] as const;

const { tabs, curTab, selectTab } = useTabs(DEFAULT_TAB);
Expand All @@ -50,7 +52,8 @@ export function TemplateList() {
return (
<>
{/* ---------- 템플릿 탭 UI ---------- */}
<TemplateListTab tabs={tabs} curTab={curTab} selectTab={selectTab} TabComp={TemplateListTabButton} />
{/* 스페이스 신규 생성일 경우에는 선택(기본 및 커스텀) 탭을 노출시키지 않는다. */}
{!isInitialCreateRetrospect && <TemplateListTab tabs={tabs} curTab={curTab} selectTab={selectTab} TabComp={TemplateListTabButton} />}

{/* ---------- 템플릿 카드 리스트 UI ---------- */}
<div
Expand Down
14 changes: 12 additions & 2 deletions apps/web/src/app/desktop/space/modify/ModifySpacePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { Spacing } from "@/component/common/Spacing";
import useModifySpace, { MODIFY_SPACE_ID_QUERY_KEY } from "@/hooks/app/space/useModifySpace";
import useDesktopBasicModal from "@/hooks/useDesktopBasicModal";
import { css } from "@emotion/react";
import { useState } from "react";
import { useSearchParams } from "react-router-dom";

// 데스크톱 환경에서는 해당 수정 페이지가 모달 안에 이식되어요
export default function ModifySpacePage() {
const [searchParams] = useSearchParams();
const [isChangedImage, setIsChangedImage] = useState(false);
const spaceId = searchParams.get(MODIFY_SPACE_ID_QUERY_KEY) as string;
const {
data,
Expand All @@ -28,7 +30,7 @@ export default function ModifySpacePage() {

const initialName = data?.name || "";
const initialIntroduction = data?.introduction || "";
const isUnchanged = name === initialName && introduction === initialIntroduction;
const isUnchanged = !isChangedImage && name === initialName && introduction === initialIntroduction;

if (isLoading || isPending) return <LoadingModal />;

Expand All @@ -41,7 +43,15 @@ export default function ModifySpacePage() {
height: 100%;
`}
>
<ImageUploader defaultImg={data?.bannerUrl} setImgFile={setImgFile} />
<ImageUploader
defaultImg={data?.bannerUrl}
setImgFile={setImgFile}
onChange={(file) => {
if (file && file instanceof File) {
setIsChangedImage(true);
}
}}
/>
<Spacing size={4} />
<InputLabelContainer id={"name"}>
<Label>프로젝트 명</Label>
Expand Down
4 changes: 3 additions & 1 deletion apps/web/src/component/common/ImageUploader/ImageUploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import { getDeviceType } from "@/utils/deviceUtils";
type ImageUploaderProps = {
defaultImg?: string;
setImgFile: React.Dispatch<React.SetStateAction<File | null>>;
onChange?: (file: File | undefined) => void;
};

export const ImageUploader = ({ defaultImg, setImgFile }: ImageUploaderProps) => {
export const ImageUploader = ({ defaultImg, setImgFile, onChange }: ImageUploaderProps) => {
const [imgUrl, setImgUrl] = useState(defaultImg || DefaultSpaceImgUrl);
const { isDesktop } = getDeviceType();

Expand All @@ -31,6 +32,7 @@ export const ImageUploader = ({ defaultImg, setImgFile }: ImageUploaderProps) =>
setImgFile(file);
};
}
onChange?.(file);
};

const handleImageClick = () => {
Expand Down