Skip to content

[Perf] POST페이지 사용자 경험 개선 #115

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
summerDev96 merged 2 commits into from
Jun 11, 2025
Merged

[Perf] POST페이지 사용자 경험 개선 #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1e15a8
fix: POST페이지 기능 추가 / 배경화면 자동선택 / 커스텀 색상, 이미지 계속 유지되게 변경
Chiman2937 Jun 11, 2025
7eb1d37
Merge branch 'main' of https://github.com/Chiman2937/team2-rolling-ap…
Chiman2937 Jun 11, 2025
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
2 changes: 1 addition & 1 deletion src/pages/CreateRollingPaperPage/CreateRollingPaperPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const CreateRollingPaperPage = () => {
</button>
<button className={styles['post-section__back']} onClick={handleGoBackClick}>
<img className={styles['post-section__button-logo']} src={backIcon} />
뒤로
돌아가기
</button>
</div>
{isCreatingNewPost && <LoadingOverlay description='새로운 롤링페이퍼를 만들고 있어요' />}
Expand Down
13 changes: 9 additions & 4 deletions src/pages/CreateRollingPaperPage/CreateRollingPaperPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,13 @@ $wrapper-desktop-width: 720px;

&__button-area {
display: flex;
flex-direction: row;
gap: 20px;
flex-direction: column;
gap: 30px;

@include mobile {
flex-direction: row;
gap:20px;
}
}

&__submit {
Expand All @@ -39,7 +44,7 @@ $wrapper-desktop-width: 720px;

&:disabled {
background-color: var(--color-gray-300);
cursor: auto;
cursor: not-allowed;
}
}

Expand All @@ -49,7 +54,7 @@ $wrapper-desktop-width: 720px;
align-items: center;
justify-content: center;
gap: 10px;
width: 20%;
width: 100%;
padding: 14px 0;
background-color: var(--color-white);
border: 1px solid var(--color-purple-600);
Expand Down
25 changes: 13 additions & 12 deletions src/pages/CreateRollingPaperPage/components/BackgroundField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import ImagePickArea from './ImagePickArea';
const BackgroundField = ({ formDataChange, setNewImageFileObject }) => {
const [backgroundType, setBackgroundType] = useState(null);

const showColorPickArea = backgroundType === 'color';
const showImagePickArea = backgroundType === 'image';

return (
<article className={styles['background-field__container']}>
<label className={styles['background-field__label']}>배경화면을 선택해주세요.</label>
Expand All @@ -17,18 +20,16 @@ const BackgroundField = ({ formDataChange, setNewImageFileObject }) => {
<OptionToggle.button label={'컬러'} type={'color'} />
<OptionToggle.button label={'이미지'} type={'image'} />
</OptionToggle>
{backgroundType === 'color' && (
<ColorPickArea
formDataChange={formDataChange}
setNewImageFileObject={setNewImageFileObject}
/>
)}
{backgroundType === 'image' && (
<ImagePickArea
formDataChange={formDataChange}
setNewImageFileObject={setNewImageFileObject}
/>
)}
<ColorPickArea
formDataChange={formDataChange}
setNewImageFileObject={setNewImageFileObject}
showColorPickArea={showColorPickArea}
/>
<ImagePickArea
formDataChange={formDataChange}
setNewImageFileObject={setNewImageFileObject}
showImagePickArea={showImagePickArea}
/>
</article>
);
};
Expand Down
19 changes: 16 additions & 3 deletions src/pages/CreateRollingPaperPage/components/ColorPickArea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styles from './ColorPickArea.module.scss';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useModal } from '../../../hooks/useModal';
import ColorPickerModal from './ColorPickerModal';
import ColorSwatch from './ColorSwatch';
Expand All @@ -8,7 +8,7 @@ import { getColorImageBlob } from '../../../utils/getColorImageBlob';

const DEFAULT_COLOR_KEY = ['#FFE2AD', '#ECD9FF', '#B1E4FF', '#D0F5C3'];

const ColorPickArea = ({ formDataChange, setNewImageFileObject }) => {
const ColorPickArea = ({ formDataChange, setNewImageFileObject, showColorPickArea }) => {
Copy link
Collaborator

@summerDev96 summerDev96 Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기본 색상 선택 및 색상/배경 선택 시 자동으로 선택되는 점 확인하였습니다.
배경 추가 시에 선택되는 것도 확인하였습니다!

const [selectedColor, setSelectedColor] = useState(null);
const [customColorList, setCustomColorList] = useState([null, null, null]);
const { showModal, closeModal } = useModal();
Expand All @@ -34,11 +34,24 @@ const ColorPickArea = ({ formDataChange, setNewImageFileObject }) => {
if (prev.includes(hexColor)) return prev;
return [hexColor, ...prev.slice(0, 2)];
});
handleColorSelect(hexColor);
closeModal();
};

useEffect(() => {
if (!showColorPickArea) {
setSelectedColor(null);
setNewImageFileObject(null);
} else {
handleColorSelect(DEFAULT_COLOR_KEY[0]);
}
}, [showColorPickArea]);

return (
<div className={styles['color-pick-area__container']}>
<div
className={styles['color-pick-area__container']}
style={showColorPickArea ? {} : { display: 'none' }}
>
{/* 기본 색상 선택 팔레트 */}
<label className={styles['color-pick-area__label']}>기본 색상</label>
<div className={styles['color-pick-area__palette']}>
Expand Down
1 change: 1 addition & 0 deletions src/pages/CreateRollingPaperPage/components/ColorSwatch.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
&:hover {
transform: scale(1.1);
}
Expand Down
19 changes: 16 additions & 3 deletions src/pages/CreateRollingPaperPage/components/ImagePickArea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import styles from './ImagePickArea.module.scss';
import { useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useApi } from '@/hooks/useApi';
import { getBackgroundImages } from '@/apis/backgroundImagesApi';
import AddItemButton from './AddItemButton';
import ImageSwatch from './ImageSwatch';

const ImagePickArea = ({ formDataChange, setNewImageFileObject }) => {
const ImagePickArea = ({ formDataChange, setNewImageFileObject, showImagePickArea }) => {
const [selectedImageUrl, setSelectedImageUrl] = useState(null);
const [customImageFileList, setCustomImageFileList] = useState([]);
const [customImagePreviewUrlList, setCustomImagePreviewUrlList] = useState([]);
Expand Down Expand Up @@ -38,6 +38,7 @@ const ImagePickArea = ({ formDataChange, setNewImageFileObject }) => {
const urlToRevoke = next[next.length - 1];
URL.revokeObjectURL(urlToRevoke);
}
handleImageSelect(next[0]);
return next.slice(0, 3);
});
};
Expand All @@ -59,8 +60,20 @@ const ImagePickArea = ({ formDataChange, setNewImageFileObject }) => {
fileInputRef.current.click();
};

useEffect(() => {
if (!showImagePickArea) {
setSelectedImageUrl(null);
setNewImageFileObject(null);
} else {
handleImageSelect(backgroundImageURL[0]);
}
}, [showImagePickArea]);

return (
<div className={styles['color-pick-area__container']}>
<div
className={styles['color-pick-area__container']}
style={showImagePickArea ? {} : { display: 'none' }}
>
{/* 기본 색상 선택 팔레트 */}
<label className={styles['color-pick-area__label']}>기본 이미지</label>
<div className={styles['color-pick-area__palette']}>
Expand Down
1 change: 1 addition & 0 deletions src/pages/CreateRollingPaperPage/components/ImageSwatch.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
&:hover {
transform: scale(1.1);
}
Expand Down
Loading