From 080f76799ad2eaf2366c77abf3f9a21a064f2f11 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 11 May 2026 17:35:12 +0900 Subject: [PATCH] =?UTF-8?q?feat(settings):=20=ED=9A=8C=EC=9B=90=20?= =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC=EC=9D=84=20=EB=AF=B8=EB=A6=AC?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=A4=91=EC=8B=AC=20UI=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=9C=ED=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 설정 화면에서 썸네일 URL 텍스트 노출을 제거하고 아바타 미리보기와 이미지 변경/제거 액션을 중심으로 재구성해 계정 정보 확인 흐름을 직관적으로 맞춘다. Co-authored-by: Cursor --- docs/history.md | 6 +++ docs/map.md | 2 +- docs/spec.md | 4 +- docs/todo.md | 1 + docs/update.md | 6 +++ package.json | 2 +- pages/settings/index.vue | 84 ++++++++++++++++++++++++++++------------ 7 files changed, 76 insertions(+), 29 deletions(-) diff --git a/docs/history.md b/docs/history.md index 3767653..62433f4 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,11 @@ # 의사결정 이력 +## 2026-05-11 v0.0.77 + +### 회원 설정 썸네일 표시 방식 전환 + +설정 화면에서 썸네일 URL 문자열을 직접 보여 주는 방식은 실제 사용자에게 의미가 낮고, 업로드 결과를 직관적으로 확인하기 어려웠다. 프로필 카드에서 아바타 미리보기와 이미지 변경/제거 액션을 바로 제공해 확인-수정 흐름을 단순화했다. + ## 2026-05-11 v0.0.76 ### 회원 썸네일 중앙 1:1 강제 크롭 diff --git a/docs/map.md b/docs/map.md index c245a2e..dd5a076 100644 --- a/docs/map.md +++ b/docs/map.md @@ -103,7 +103,7 @@ | pages/pages/[slug].vue | 고정 페이지 상세 | | pages/signup.vue | 회원가입 3단계, 2단계 입력에 `auth-form-input`, 패널 `auth-signup__panel`(보더·배경) | | pages/signin.vue | 로그인(다크 폼, `[color-scheme:dark]`, 입력 `auth-form-input`), 비밀번호 SVG 토글, 회원 로그인 API 연동 | -| pages/settings/index.vue | 회원 설정(썸네일 URL, 닉네임 변경/중복확인, 비밀번호 변경, 회원 탈퇴) | +| pages/settings/index.vue | 회원 설정(썸네일 미리보기/이미지 변경·제거, 닉네임 변경/중복확인, 비밀번호 변경, 회원 탈퇴) | ## 서버 API diff --git a/docs/spec.md b/docs/spec.md index b377354..9fb2698 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -84,7 +84,7 @@ - `/tag/:slug` - 태그별 게시물 목록 - `/signup` - 회원가입(3단계: 환영/입력/이메일 확인) - `/signin` - 로그인 -- `/settings` - 회원 설정(썸네일, 닉네임, 비밀번호, 회원 탈퇴) +- `/settings` - 회원 설정(썸네일 미리보기/변경/제거, 닉네임, 비밀번호, 회원 탈퇴) - 기존 `/posts/:slug`, `/tags/:slug` 상세 경로는 새 단수형 상세 경로로 리다이렉트한다. ### 공개 인증 화면(초기) @@ -589,6 +589,6 @@ APP_PORT=43118 ## 버전 관리 -- 현재 버전: v0.0.76 +- 현재 버전: v0.0.77 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정 diff --git a/docs/todo.md b/docs/todo.md index faf12d2..ed5ef02 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -13,6 +13,7 @@ - [ ] Thred 참고 화면 기준 시각 QA - [ ] 사이드바 토글 애니메이션 세부 조정 - [ ] 사용자 화면 테마 전환 초기 로드 깜빡임(FART) 최소화 +- [ ] 회원 설정 썸네일 수동 크롭 UI(선택 영역 지정) 도입 검토 ## 콘텐츠 스타일 구현 diff --git a/docs/update.md b/docs/update.md index 0b66926..1fd9571 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,11 @@ # 업데이트 이력 +## v0.0.77 + +- 회원 설정 프로필 영역에서 썸네일 URL 입력을 제거하고, 썸네일 미리보기 + 이미지 변경/제거 버튼 중심 UI로 개편. +- 썸네일 업로드 완료 안내 문구를 실제 동작과 맞게 간소화. +- 썸네일 수동 크롭 UI는 우선순위 낮은 후속 작업으로 `docs/todo.md`에 기록. + ## v0.0.76 - 회원 썸네일 업로드 시 원본 비율과 관계없이 중앙 기준 1:1 정사각형으로 강제 크롭하도록 변경. diff --git a/package.json b/package.json index d06f6dc..2280e0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "0.0.76", + "version": "0.0.77", "private": true, "type": "module", "imports": { diff --git a/pages/settings/index.vue b/pages/settings/index.vue index df00fd1..0b69ab9 100644 --- a/pages/settings/index.vue +++ b/pages/settings/index.vue @@ -15,6 +15,8 @@ const profileForm = reactive({ avatarUrl: '' }) +const avatarInputRef = ref(null) + const passwordForm = reactive({ currentPassword: '', nextPassword: '', @@ -149,7 +151,7 @@ const uploadAvatar = async (event) => { body: formData }) profileForm.avatarUrl = result.avatarUrl || '' - profileMessage.value = '썸네일이 업로드되었습니다. 프로필 저장을 눌러 반영하세요.' + profileMessage.value = '썸네일이 업로드되었습니다.' } catch (error) { profileMessage.value = error?.data?.message || '썸네일 업로드에 실패했습니다.' } finally { @@ -160,6 +162,14 @@ const uploadAvatar = async (event) => { } } +/** + * 썸네일 파일 선택창을 연다. + * @returns {void} + */ +const openAvatarFilePicker = () => { + avatarInputRef.value?.click() +} + /** * 비밀번호를 변경한다. * @returns {Promise} @@ -236,7 +246,54 @@ onMounted(loadProfile)

프로필

-
+
+
+
+ 프로필 썸네일 + + {{ (profileForm.username || profileForm.email || '@').slice(0, 1).toUpperCase() }} + +
+
+

+ 프로필 이미지 +

+
+ + +
+
+
+ - - - - -