Skip to content

Commit a4ca568

Browse files
seueoooseueooo
authored
QA 반영 (#192)
* fix: 신고하기 모달 이벤트 전파 방지 * feat: 이용약관 링크 연결 * feat: 캡슐 생성할때 네브바에 홈버튼 없애기 * refactor: qa 반영
1 parent 5afe0fc commit a4ca568

18 files changed

Lines changed: 180 additions & 146 deletions

File tree

‎app/(main)/setting/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import SettingSection from "./_components/setting-section";
1313
import UserGreetingSection from "./_components/user-greeting-section";
1414
import { useOverlay } from "@/shared/hooks/use-overlay";
1515
import { PATH } from "@/shared/constants/path";
16+
import { EXTERNAL_LINKS } from "@/shared/constants/links";
1617
import * as styles from "./page.css";
1718

1819
const Setting = () => {
@@ -42,8 +43,11 @@ const Setting = () => {
4243
<UserGreetingSection userName={userInfo?.result.nickname || ""} />
4344
<div className={styles.itemsContainer}>
4445
<SettingSection category="서비스 정보">
45-
<SettingItem>이용약관</SettingItem>
46-
<SettingItem>개인정보 취급 방침</SettingItem>
46+
{EXTERNAL_LINKS.map((link) => (
47+
<SettingItem key={link.label} onClick={() => window.open(link.url, "_blank")}>
48+
{link.label}
49+
</SettingItem>
50+
))}
4751
</SettingSection>
4852
<SettingSection category="고객센터">
4953
<SettingItem onClick={() =>

‎app/(sub)/capsule-detail/_components/write-modal/index.tsx‎

Lines changed: 129 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -67,21 +67,6 @@ const WriteModal = ({
6767
onObjectKeyChange: (value) => setValue("objectKey", value),
6868
});
6969

70-
// 모달이 열릴 때마다 폼 초기화
71-
useEffect(() => {
72-
if (isOpen) {
73-
reset({
74-
capsuleId: capsuleData.result.id.toString(),
75-
content: "",
76-
from: "",
77-
objectKey: "",
78-
});
79-
if (uploadedImageUrl) {
80-
removeImage();
81-
}
82-
}
83-
}, [isOpen]);
84-
8570
const onSubmit = (data: WriteLetterReq) => {
8671
if (!data.content?.trim()) {
8772
alert("편지 내용을 입력해주세요.");
@@ -107,119 +92,142 @@ const WriteModal = ({
10792

10893
const handleCloseWithWarning = () => {
10994
setIsWarningOpen(true);
95+
reset({
96+
capsuleId: capsuleData.result.id.toString(),
97+
content: "",
98+
from: "",
99+
objectKey: "",
100+
});
101+
if (uploadedImageUrl) {
102+
removeImage();
103+
}
110104
};
111105

112106
return (
113-
<Modal isOpen={isOpen} onClose={onClose}>
114-
<form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
115-
<div className={styles.header}>
116-
<button
117-
type="button"
118-
className={styles.closeButton}
119-
onClick={handleCloseWithWarning}
120-
>
121-
닫기
122-
</button>
123-
<button
124-
type="submit"
125-
className={styles.title}
126-
disabled={(isPending || isUploading)}
127-
>
128-
{(isPending || isUploading) ? <PulseLoader color="#FFFFFF" size={5}/> : '편지담기'}
129-
</button>
130-
</div>
131-
132-
<div className={styles.content}>
133-
<RevealMotion delay={0.3}>
134-
<div className={styles.capsuleInfo}>
135-
<h3 className={styles.capsuleTitle}>
136-
{capsuleData.result.title}
137-
</h3>
138-
<div className={styles.timeInfo}>
139-
<p className={styles.timeCaption}>마감까지</p>
140-
<ShakeYMotion>
141-
<div className={styles.chipContainer}>
142-
<Chip>{`${capsuleData.result.remainingTime.days}일`}</Chip>
143-
<Chip>{`${capsuleData.result.remainingTime.hours}시간`}</Chip>
144-
<Chip>{`${capsuleData.result.remainingTime.minutes}분`}</Chip>
145-
</div>
146-
</ShakeYMotion>
147-
</div>
148-
</div>
149-
</RevealMotion>
150-
151-
<RevealMotion delay={0.6}>
152-
<div className={styles.textareaContainer}>
153-
<div className={styles.textareaDiv}>
154-
<textarea
155-
className={styles.textarea}
156-
placeholder="나누고 싶은 생각을 공유해보세요!"
157-
{...contentField}
158-
maxLength={1000}
159-
/>
160-
<span className={styles.charCount}>
161-
{contentField.value?.length || 0}/1000
162-
</span>
107+
<>
108+
<Modal isOpen={isOpen} onClose={onClose}>
109+
<form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
110+
<div className={styles.header}>
111+
<button
112+
type="button"
113+
className={styles.closeButton}
114+
onClick={handleCloseWithWarning}
115+
>
116+
닫기
117+
</button>
118+
<button
119+
type="submit"
120+
className={styles.title}
121+
disabled={(isPending || isUploading)}
122+
>
123+
{(isPending || isUploading) ? <PulseLoader color="#FFFFFF" size={5}/> : '편지담기'}
124+
</button>
125+
</div>
126+
127+
<div className={styles.content}>
128+
<RevealMotion delay={0.3}>
129+
<div className={styles.capsuleInfo}>
130+
<h3 className={styles.capsuleTitle}>
131+
{capsuleData.result.title}
132+
</h3>
133+
<div className={styles.timeInfo}>
134+
<p className={styles.timeCaption}>마감까지</p>
135+
<ShakeYMotion>
136+
<div className={styles.chipContainer}>
137+
<Chip>{`${capsuleData.result.remainingTime.days}일`}</Chip>
138+
<Chip>{`${capsuleData.result.remainingTime.hours}시간`}</Chip>
139+
<Chip>{`${capsuleData.result.remainingTime.minutes}분`}</Chip>
140+
</div>
141+
</ShakeYMotion>
142+
</div>
163143
</div>
164-
165-
{uploadedImageUrl ? (
166-
<div className={styles.imagePreviewContainer}>
167-
<button
168-
type="button"
169-
onClick={removeImage}
170-
className={styles.removeImageButton}
171-
>
172-
<Close />
173-
</button>
174-
<Image
175-
src={uploadedImageUrl}
176-
alt="업로드된 이미지"
177-
width={80}
178-
height={80}
179-
className={styles.imagePreview}
144+
</RevealMotion>
145+
146+
<RevealMotion delay={0.6}>
147+
<div className={styles.textareaContainer}>
148+
<div className={styles.textareaDiv}>
149+
<textarea
150+
className={styles.textarea}
151+
placeholder="나누고 싶은 생각을 공유해보세요!"
152+
{...contentField}
153+
maxLength={1000}
180154
/>
155+
<span className={styles.charCount}>
156+
{contentField.value?.length || 0}/1000
157+
</span>
181158
</div>
182-
) : (
183-
<div className={styles.imageAddButtonContainer}>
184-
<button
185-
type="button"
186-
className={styles.imageAddButton}
187-
onClick={handleImageUpload}
188-
disabled={isUploading}
189-
aria-label="이미지 추가"
190-
>
191-
<div className={styles.plusIconWrapper}>
192-
<Plus className={styles.plusIcon} />
193-
</div>
194-
<span className={styles.imageCaption}>
195-
{isUploading ? "업로드 중..." : "이미지 추가"}
196-
</span>
197-
</button>
159+
160+
{uploadedImageUrl ? (
161+
<div className={styles.imagePreviewContainer}>
162+
<button
163+
type="button"
164+
onClick={removeImage}
165+
className={styles.removeImageButton}
166+
>
167+
<Close />
168+
</button>
169+
<Image
170+
src={uploadedImageUrl}
171+
alt="업로드된 이미지"
172+
width={80}
173+
height={80}
174+
className={styles.imagePreview}
175+
/>
176+
</div>
177+
) : (
178+
<div className={styles.imageAddButtonContainer}>
179+
<button
180+
type="button"
181+
className={styles.imageAddButton}
182+
onClick={handleImageUpload}
183+
disabled={isUploading}
184+
aria-label="이미지 추가"
185+
>
186+
<div className={styles.plusIconWrapper}>
187+
<Plus className={styles.plusIcon} />
188+
</div>
189+
<span className={styles.imageCaption}>
190+
{isUploading ? "업로드 중..." : "이미지 추가"}
191+
</span>
192+
</button>
193+
</div>
194+
)}
195+
</div>
196+
</RevealMotion>
197+
198+
<RevealMotion delay={0.9}>
199+
<div className={styles.inputSection}>
200+
<p className={styles.senderTitle}>보내는 사람</p>
201+
<div className={styles.senderInputContainer}>
202+
<input
203+
id="sender-name"
204+
type="text"
205+
placeholder="꼭 입력하지 않아도 괜찮아요"
206+
className={styles.senderInput}
207+
{...fromField}
208+
maxLength={20}
209+
/>
210+
<span className={styles.senderCharCount}>
211+
{fromField.value?.length || 0}/20
212+
</span>
198213
</div>
199-
)}
200-
</div>
201-
</RevealMotion>
202-
203-
<RevealMotion delay={0.9}>
204-
<div className={styles.inputSection}>
205-
<p className={styles.senderTitle}>보내는 사람</p>
206-
<div className={styles.senderInputContainer}>
207-
<input
208-
id="sender-name"
209-
type="text"
210-
placeholder="꼭 입력하지 않아도 괜찮아요"
211-
className={styles.senderInput}
212-
{...fromField}
213-
maxLength={20}
214-
/>
215-
<span className={styles.senderCharCount}>
216-
{fromField.value?.length || 0}/20
217-
</span>
218214
</div>
219-
</div>
220-
</RevealMotion>
221-
</div>
222-
</form>
215+
</RevealMotion>
216+
</div>
217+
</form>
218+
{isConfirmOpen && (
219+
<PopupConfirmLetter
220+
openDate={formatOpenDateString(capsuleData.result.openAt)}
221+
isOpen={isConfirmOpen}
222+
close={() => setIsConfirmOpen(false)}
223+
onConfirm={() => {
224+
const currentData = getValues();
225+
handleConfirm(currentData);
226+
}}
227+
/>
228+
)}
229+
</Modal>
230+
223231
{isWarningOpen && (
224232
<PopupWarningLetter
225233
isOpen={isWarningOpen}
@@ -230,18 +238,7 @@ const WriteModal = ({
230238
confirm={() => setIsWarningOpen(false)}
231239
/>
232240
)}
233-
{isConfirmOpen && (
234-
<PopupConfirmLetter
235-
openDate={formatOpenDateString(capsuleData.result.openAt)}
236-
isOpen={isConfirmOpen}
237-
close={() => setIsConfirmOpen(false)}
238-
onConfirm={() => {
239-
const currentData = getValues();
240-
handleConfirm(currentData);
241-
}}
242-
/>
243-
)}
244-
</Modal>
241+
</>
245242
);
246243
};
247244

‎app/(sub)/create-capsule/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const CreateCapsule = () => {
109109
닫기
110110
</button>
111111
)}
112+
isHomeButton={false}
112113
/>
113114
)}
114115
<div className={styles.container}>

‎shared/constants/links.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const EXTERNAL_LINKS = [
2+
{
3+
label: "이용약관",
4+
url: "https://www.notion.so/24ecacaffc888073aaebcee3d6aa099c?source=copy_link",
5+
},
6+
{
7+
label: "개인정보 처리방침",
8+
url: "https://www.notion.so/24ecacaffc8880b08658fecc47e8aa5c?source=copy_link",
9+
},
10+
] as const;

‎shared/styles/tokens/z-index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export const zIndexTheme = {
1717
},
1818

1919
button: {
20-
2120
lineInteract: "-2",
2221
},
2322

@@ -30,5 +29,4 @@ export const zIndexTheme = {
3029
modal: {
3130
content: "10",
3231
},
33-
3432
} as const;

‎shared/ui/navbar/navbar-detail/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import * as styles from "./navbar-detail.css";
1111
interface NavbarDetailProps {
1212
renderRight?: () => ReactElement;
1313
className?: string;
14+
isHomeButton?: boolean;
1415
}
1516

16-
const NavbarDetail = ({ renderRight, className }: NavbarDetailProps) => {
17+
const NavbarDetail = ({ renderRight, className, isHomeButton = true }: NavbarDetailProps) => {
1718
const router = useRouter();
1819
const renderRightElement = renderRight ? renderRight() : null;
1920

@@ -39,9 +40,11 @@ const NavbarDetail = ({ renderRight, className }: NavbarDetailProps) => {
3940
>
4041
<BackIcon />
4142
</button>
42-
<button type="button" onClick={handleHome} className={styles.iconButton}>
43-
<HomeIcon />
44-
</button>
43+
{isHomeButton && (
44+
<button type="button" onClick={handleHome} className={styles.iconButton}>
45+
<HomeIcon />
46+
</button>
47+
)}
4548
</div>
4649
<div className={cn(styles.rightElement, className)}>
4750
{renderRightElement}

‎shared/ui/popup/popup-cancel-creation/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const PopupCancelCreation = ({ isOpen, close }: PopupCancelCreationProps) => {
2121
router.push(PATH.EXPLORE);
2222
close();
2323
}}
24+
className={styles.cancelButton}
2425
>
2526
떠나기
2627
</Popup.Button>

‎shared/ui/popup/popup-cancel-creation/popup-cancel-creation.css.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ export const title = style({
77
marginBottom: "0.6rem",
88
});
99

10+
export const cancelButton = style({
11+
color: themeVars.color.white[30],
12+
});
13+
1014
export const continueButton = style({
1115
color: themeVars.color.purple[10],
1216
});

‎shared/ui/popup/popup-confirm-letter/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const PopupConfirmLetter = ({
2828
</Popup.Content>
2929
<Image src={Lettie} alt="apng" width={200} height={200} />
3030
<Popup.Actions>
31-
<Popup.Button onClick={close}>계속 쓰기</Popup.Button>
31+
<Popup.Button onClick={close} className={styles.content}>계속 쓰기</Popup.Button>
3232
<Popup.Button className={styles.putButton} onClick={onConfirm}>
3333
편지 담기
3434
</Popup.Button>

0 commit comments

Comments
 (0)