QA 반영

app/(main)/setting/page.tsx

@@ -13,6 +13,7 @@ import SettingSection from "./_components/setting-section";
 import UserGreetingSection from "./_components/user-greeting-section";
 import { useOverlay } from "@/shared/hooks/use-overlay";
 import { PATH } from "@/shared/constants/path";
+import { EXTERNAL_LINKS } from "@/shared/constants/links";
 import * as styles from "./page.css";
 
 const Setting = () => {
@@ -42,8 +43,11 @@ const Setting = () => {
       <UserGreetingSection userName={userInfo?.result.nickname || ""} />
       <div className={styles.itemsContainer}>
         <SettingSection category="서비스 정보">
-          <SettingItem>이용약관</SettingItem>
-          <SettingItem>개인정보 취급 방침</SettingItem>
+          {EXTERNAL_LINKS.map((link) => (
+            <SettingItem key={link.label} onClick={() => window.open(link.url, "_blank")}>
+              {link.label}
+            </SettingItem>
+          ))}
         </SettingSection>
         <SettingSection category="고객센터">
           <SettingItem onClick={() =>

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

@@ -67,21 +67,6 @@ const WriteModal = ({
       onObjectKeyChange: (value) => setValue("objectKey", value),
     });
 
-  // 모달이 열릴 때마다 폼 초기화
-  useEffect(() => {
-    if (isOpen) {
-      reset({
-        capsuleId: capsuleData.result.id.toString(),
-        content: "",
-        from: "",
-        objectKey: "",
-      });
-      if (uploadedImageUrl) {
-        removeImage();
-      }
-    }
-  }, [isOpen]);
-
   const onSubmit = (data: WriteLetterReq) => {
     if (!data.content?.trim()) {
       alert("편지 내용을 입력해주세요.");
@@ -107,119 +92,142 @@ const WriteModal = ({
 
   const handleCloseWithWarning = () => {
     setIsWarningOpen(true);
+    reset({
+      capsuleId: capsuleData.result.id.toString(),
+      content: "",
+      from: "",
+      objectKey: "",
+    });
+    if (uploadedImageUrl) {
+      removeImage();
+    }
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-        <div className={styles.header}>
-          <button
-            type="button"
-            className={styles.closeButton}
-            onClick={handleCloseWithWarning}
-          >
-            닫기
-          </button>
-          <button 
-            type="submit" 
-            className={styles.title} 
-            disabled={(isPending || isUploading)}
-          >
-            {(isPending || isUploading) ? <PulseLoader color="#FFFFFF" size={5}/> : '편지담기'}
-          </button>
-        </div>
-
-        <div className={styles.content}>
-          <RevealMotion delay={0.3}>
-            <div className={styles.capsuleInfo}>
-              <h3 className={styles.capsuleTitle}>
-                {capsuleData.result.title}
-              </h3>
-              <div className={styles.timeInfo}>
-                <p className={styles.timeCaption}>마감까지</p>
-                <ShakeYMotion>
-                  <div className={styles.chipContainer}>
-                    <Chip>{`${capsuleData.result.remainingTime.days}일`}</Chip>
-                    <Chip>{`${capsuleData.result.remainingTime.hours}시간`}</Chip>
-                    <Chip>{`${capsuleData.result.remainingTime.minutes}분`}</Chip>
-                  </div>
-                </ShakeYMotion>
-              </div>
-            </div>
-          </RevealMotion>
-
-          <RevealMotion delay={0.6}>
-            <div className={styles.textareaContainer}>
-              <div className={styles.textareaDiv}>
-                <textarea
-                  className={styles.textarea}
-                  placeholder="나누고 싶은 생각을 공유해보세요!"
-                  {...contentField}
-                  maxLength={1000}
-                />
-                <span className={styles.charCount}>
-                  {contentField.value?.length || 0}/1000
-                </span>
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
+          <div className={styles.header}>
+            <button
+              type="button"
+              className={styles.closeButton}
+              onClick={handleCloseWithWarning}
+            >
+              닫기
+            </button>
+            <button 
+              type="submit" 
+              className={styles.title} 
+              disabled={(isPending || isUploading)}
+            >
+              {(isPending || isUploading) ? <PulseLoader color="#FFFFFF" size={5}/> : '편지담기'}
+            </button>
+          </div>
+
+          <div className={styles.content}>
+            <RevealMotion delay={0.3}>
+              <div className={styles.capsuleInfo}>
+                <h3 className={styles.capsuleTitle}>
+                  {capsuleData.result.title}
+                </h3>
+                <div className={styles.timeInfo}>
+                  <p className={styles.timeCaption}>마감까지</p>
+                  <ShakeYMotion>
+                    <div className={styles.chipContainer}>
+                      <Chip>{`${capsuleData.result.remainingTime.days}일`}</Chip>
+                      <Chip>{`${capsuleData.result.remainingTime.hours}시간`}</Chip>
+                      <Chip>{`${capsuleData.result.remainingTime.minutes}분`}</Chip>
+                    </div>
+                  </ShakeYMotion>
+                </div>
               </div>
-
-              {uploadedImageUrl ? (
-                <div className={styles.imagePreviewContainer}>
-                  <button
-                    type="button"
-                    onClick={removeImage}
-                    className={styles.removeImageButton}
-                  >
-                    <Close />
-                  </button>
-                  <Image
-                    src={uploadedImageUrl}
-                    alt="업로드된 이미지"
-                    width={80}
-                    height={80}
-                    className={styles.imagePreview}
+            </RevealMotion>
+
+            <RevealMotion delay={0.6}>
+              <div className={styles.textareaContainer}>
+                <div className={styles.textareaDiv}>
+                  <textarea
+                    className={styles.textarea}
+                    placeholder="나누고 싶은 생각을 공유해보세요!"
+                    {...contentField}
+                    maxLength={1000}
                   />
+                  <span className={styles.charCount}>
+                    {contentField.value?.length || 0}/1000
+                  </span>
                 </div>
-              ) : (
-                <div className={styles.imageAddButtonContainer}>
-                  <button
-                    type="button"
-                    className={styles.imageAddButton}
-                    onClick={handleImageUpload}
-                    disabled={isUploading}
-                    aria-label="이미지 추가"
-                  >
-                    <div className={styles.plusIconWrapper}>
-                      <Plus className={styles.plusIcon} />
-                    </div>
-                    <span className={styles.imageCaption}>
-                      {isUploading ? "업로드 중..." : "이미지 추가"}
-                    </span>
-                  </button>
+
+                {uploadedImageUrl ? (
+                  <div className={styles.imagePreviewContainer}>
+                    <button
+                      type="button"
+                      onClick={removeImage}
+                      className={styles.removeImageButton}
+                    >
+                      <Close />
+                    </button>
+                    <Image
+                      src={uploadedImageUrl}
+                      alt="업로드된 이미지"
+                      width={80}
+                      height={80}
+                      className={styles.imagePreview}
+                    />
+                  </div>
+                ) : (
+                  <div className={styles.imageAddButtonContainer}>
+                    <button
+                      type="button"
+                      className={styles.imageAddButton}
+                      onClick={handleImageUpload}
+                      disabled={isUploading}
+                      aria-label="이미지 추가"
+                    >
+                      <div className={styles.plusIconWrapper}>
+                        <Plus className={styles.plusIcon} />
+                      </div>
+                      <span className={styles.imageCaption}>
+                        {isUploading ? "업로드 중..." : "이미지 추가"}
+                      </span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </RevealMotion>
+
+            <RevealMotion delay={0.9}>
+              <div className={styles.inputSection}>
+                <p className={styles.senderTitle}>보내는 사람</p>
+                <div className={styles.senderInputContainer}>
+                  <input
+                    id="sender-name"
+                    type="text"
+                    placeholder="꼭 입력하지 않아도 괜찮아요"
+                    className={styles.senderInput}
+                    {...fromField}
+                    maxLength={20}
+                  />
+                  <span className={styles.senderCharCount}>
+                    {fromField.value?.length || 0}/20
+                  </span>
                 </div>
-              )}
-            </div>
-          </RevealMotion>
-
-          <RevealMotion delay={0.9}>
-            <div className={styles.inputSection}>
-              <p className={styles.senderTitle}>보내는 사람</p>
-              <div className={styles.senderInputContainer}>
-                <input
-                  id="sender-name"
-                  type="text"
-                  placeholder="꼭 입력하지 않아도 괜찮아요"
-                  className={styles.senderInput}
-                  {...fromField}
-                  maxLength={20}
-                />
-                <span className={styles.senderCharCount}>
-                  {fromField.value?.length || 0}/20
-                </span>
               </div>
-            </div>
-          </RevealMotion>
-        </div>
-      </form>
+            </RevealMotion>
+          </div>
+        </form>
+        {isConfirmOpen && (
+          <PopupConfirmLetter
+            openDate={formatOpenDateString(capsuleData.result.openAt)}
+            isOpen={isConfirmOpen}
+            close={() => setIsConfirmOpen(false)}
+            onConfirm={() => {
+              const currentData = getValues();
+              handleConfirm(currentData);
+            }}
+          />
+        )}
+      </Modal>
+
       {isWarningOpen && (
         <PopupWarningLetter
           isOpen={isWarningOpen}
@@ -230,18 +238,7 @@ const WriteModal = ({
           confirm={() => setIsWarningOpen(false)}
         />
       )}
-      {isConfirmOpen && (
-        <PopupConfirmLetter
-          openDate={formatOpenDateString(capsuleData.result.openAt)}
-          isOpen={isConfirmOpen}
-          close={() => setIsConfirmOpen(false)}
-          onConfirm={() => {
-            const currentData = getValues();
-            handleConfirm(currentData);
-          }}
-        />
-      )}
-    </Modal>
+    </>
   );
 };
 

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

@@ -109,6 +109,7 @@ const CreateCapsule = () => {
               닫기
             </button>
           )}
+          isHomeButton={false}
         />
       )}
       <div className={styles.container}>

shared/constants/links.ts

@@ -0,0 +1,10 @@
+export const EXTERNAL_LINKS = [
+  {
+    label: "이용약관",
+    url: "https://www.notion.so/24ecacaffc888073aaebcee3d6aa099c?source=copy_link",
+  },
+  {
+    label: "개인정보 처리방침",
+    url: "https://www.notion.so/24ecacaffc8880b08658fecc47e8aa5c?source=copy_link",
+  },
+] as const;

shared/styles/tokens/z-index.ts

@@ -17,7 +17,6 @@ export const zIndexTheme = {
   },
 
   button: {
-
     lineInteract: "-2",
   },
 
@@ -30,5 +29,4 @@ export const zIndexTheme = {
   modal: {
     content: "10",
   },
-
 } as const;

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

@@ -11,9 +11,10 @@ import * as styles from "./navbar-detail.css";
 interface NavbarDetailProps {
   renderRight?: () => ReactElement;
   className?: string;
+  isHomeButton?: boolean;
 }
 
-const NavbarDetail = ({ renderRight, className }: NavbarDetailProps) => {
+const NavbarDetail = ({ renderRight, className, isHomeButton = true }: NavbarDetailProps) => {
   const router = useRouter();
   const renderRightElement = renderRight ? renderRight() : null;
 
@@ -39,9 +40,11 @@ const NavbarDetail = ({ renderRight, className }: NavbarDetailProps) => {
       >
         <BackIcon />
       </button>
-      <button type="button" onClick={handleHome} className={styles.iconButton}>
-        <HomeIcon />
-      </button>
+        {isHomeButton && (
+          <button type="button" onClick={handleHome} className={styles.iconButton}>
+            <HomeIcon />
+          </button>
+        )}
       </div>
       <div className={cn(styles.rightElement, className)}>
         {renderRightElement}

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

@@ -21,6 +21,7 @@ const PopupCancelCreation = ({ isOpen, close }: PopupCancelCreationProps) => {
             router.push(PATH.EXPLORE);
             close();
           }}
+          className={styles.cancelButton}
         >
           떠나기
         </Popup.Button>

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

@@ -7,6 +7,10 @@ export const title = style({
   marginBottom: "0.6rem",
 });
 
+export const cancelButton = style({
+  color: themeVars.color.white[30],
+});
+
 export const continueButton = style({
   color: themeVars.color.purple[10],
 });

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

@@ -28,7 +28,7 @@ const PopupConfirmLetter = ({
       </Popup.Content>
       <Image src={Lettie} alt="apng" width={200} height={200} />
       <Popup.Actions>
-        <Popup.Button onClick={close}>계속 쓰기</Popup.Button>
+        <Popup.Button onClick={close} className={styles.content}>계속 쓰기</Popup.Button>
         <Popup.Button className={styles.putButton} onClick={onConfirm}>
           편지 담기
         </Popup.Button>