[feat] 신고하기 UI 구현 #14

ikseong00 · 2025-01-07T08:49:04Z

Related issue 🛠

closed [feat] 신고하기 UI 구현 #13

Work Description 📝

+) Text Appearance -> feature chip : semibold , 12sp , letter spacing - 0.04
+) CalenderView
+) TODO 제거

Screenshot 📸

실행 이미지

미리보기 이미지

실행 영상

report_ui.mp4

Uncompleted Tasks 😅

여러가지 팝업들
이미지 삭제 시 2/5 줄어드는 것

줄어드는 건 viewModel 에서 observe 속성 써서 감지해야할 것 같은데 이건 더 공부해보겠습니다.

To Reviewers 📢

AutoCompleteTextView : https://tidy-tumble-f7d.notion.site/AutoCompleteTextView-17c5fdb94a61803e81bccf066054e405?pvs=4
CalendarView : https://tidy-tumble-f7d.notion.site/CalendarView-17c5fdb94a6180ee80fbf7a55f018a8e?pvs=4

- 강아지 - 고양이 - 기타

- setAdapter - background 설정

- 텍스트 뷰 클릭 - 아이템 클릭 - 텍스트 입력 - Focus 가 생길 때

- 신체적 특징 - 외적 특징 - 성격

- stroke color - 위치 컨테이너 text margin - ai button

nasohee

오좋아요!!

MinseoSONG

수고하셨습니다 !

MinseoSONG · 2025-01-15T09:20:05Z

app/src/main/java/com/example/findu/presentation/type/report/FeatureType.kt

+enum class PhysicalFeatureType(
+    val feature: String
+) {
+    PUPPY("새끼 강아지에요"),
+    ADULT("다 큰 성견이에요"),
+    SMALL("소형견이에요"),
+    MEDIUM("중형견이에요"),
+    LARGE("대형견이에요")
+}


여기 인자로 @StringRes val featureResId: Int를 받고
PUPPY(featureResId = R.string.puppy) 이런 식으로 수정해서 string을 추출하는건 어떨까 싶습니다 !

" " 안에 있는 값을 상수로 빼서 String Pool 에 넣어서 관리해야 할 것 같습니다!
근데 strings.xml , 상수 둘 중에 어느 방법이 나은진 고민되네요
xml 자체에서 가져다 쓰는 값은 strings.xml 이 확실히 맞는데,
코틀린 코드에서 사용하는 문자열 값을 strings.xml 에 넣어서 관리하면 , 코드가 약간 길어지고, strings.xml 이 많아질 것 같다는 생각이 들긴 합니다.. !

어.. 질문이 잘 이해가 안가는데 코틀린 코드이기 때문에 string을 추출없이 그대로 사용해야겠다 .. ? 라는 생각이 복잡도가 높아지지않을까?라는 걱정 때문일까요??

클린 코드 관점에서 보면 오히려 string을 추출해서 사용하는 것이 더 체계적이고, 장기적으로 유지보수와 확장성을 확보할 수 있습니다.
하드코딩을 방지할 수 있음은 물론이고, 코드 재사용에 있어서, 그리고 마지막으로는 strings.xml에는 UI에 필요한 문자열을 한 곳에서 관리하여, 코드는 로직에 집중하고 UI 관련 리소스는 별도 파일에서 관리함으로써 역할을 분리할 수 있죠 !

하드코딩 대체하는 방법으로 R.strings.xml 대신에 코드에서 사용하는 부분이니 const 로 관리하자는 말이었습니다. 코드적으로 쓰는 문자열도 strings.xml 에서 관리하면 xml + kt 상수들이 합쳐져서 오히려 너무 많아지지 않을까 ? 라는 생각이 들어서 말씀드린거였어요 !

MinseoSONG · 2025-01-15T09:21:56Z

app/src/main/java/com/example/findu/presentation/ui/report/MissingReportFragment.kt

+            // 클릭하면 드랍다운이 생김
+            setOnClickListener {
+                dropDownHeight = requireContext().dpToPx(DROP_DOWN_HEIGHT)
+                showDropDown()
+                binding.svMissingReportContainer.verticalScrollToYPosition(SCROLL_OFFSET)
+            }
+            // 드랍다운 아이템이 선택되면 소프트 키보드가 사라지고, 하단 레이아웃이 보임
+            setOnItemClickListener { _, _, _, _ ->
+                requireContext().hideKeyboard(windowToken)
+                clearFocus()
+            }
+            // text 가 변경되면 드랍다운의 크기를 줄임
+            addTextChangedListener { text ->
+                ReportDummys.dummyBreeds
+                    .filter { it.contains(text.toString()) }
+                    .let { matches ->
+                        dropDownHeight = if (matches.size > DROP_DOWN_MAX_COUNT) {
+                            requireContext().dpToPx(DROP_DOWN_HEIGHT)
+                        } else ViewGroup.LayoutParams.WRAP_CONTENT
+                    }


개인적으로 이런 코드 관련 설명형 주석 처리를 안좋아해서 .. 코드 관련 설명은 pr에 추가해주시고 주석은 지우는게 어떨까요? 사실 코드를 잘 작성해주셔서 굳이 주석이 없어도 이해가 잘됩니다 !

https://tidy-tumble-f7d.notion.site/AutoCompleteTextView-17c5fdb94a61803e81bccf066054e405?pvs=4

주석 제거하구 참고자료/아티클 공유 에 올렸습니다

MinseoSONG · 2025-01-15T09:23:52Z

app/src/main/java/com/example/findu/presentation/ui/report/adapter/ReportImageAdapter.kt

+        val list = currentList.toMutableList()
+        list.remove(uri)
+        submitList(list)
+//        notifyItemChanged(0)


이 코드는 주석처리해둔 이유가 있으실까요?? 사용되지 않는 코드라면 깔끔하게 지워두는게 좋을 것 같습니다 !

테스트 하면서 놓쳤던 것 같아요 지우겠습니다 !

MinseoSONG · 2025-01-15T09:30:20Z

app/src/main/java/com/example/findu/presentation/ui/report/adapter/ReportImageAdapter.kt

+        @SuppressLint("SetTextI18n")
+        fun bind(count: Int) {
+            // 사진 개수 카운트
+            binding.tvReportDefaultCount.text = (count - 1).toString()
+
+            binding.root.setOnClickListener {
+                // TODO : 사진 이미지 업로드 기능 설정
+            }
+        }


하드코딩 문자열을 사용하기 위해 이 어노테이션을 추가하신 것 같은데 그것보다는 string을 추출해서 하드코딩을 방지하는게 좋지 않을까요??
예를들어,
Hello, %d
으로 추출해두고
binding.tvReportDefaultCount.text = context.getString(R.string.greeting_message, count-1)
이런 식으로 사용가능합니다 !

1~5 의 여러 숫자를 다뤄야 해서 이런 식으로 해도 괜찮을까요 ?

넵 좋은데, 네이밍을 좀 더 직관적으로 어느 화면에, 어느 용도로 쓰이는지를 써주시는게 가독성 측면에서 좋을 것 같습니다 !
코드를 짠 본인뿐만 아니라 다른 사람들이 봤을 때도 어떻게 쓰이는지를 한번에 알 수 있게요!

MinseoSONG · 2025-01-15T09:32:31Z

app/src/main/res/layout/item_feature_chip.xml

+        android:layout_marginHorizontal="5dp"
+        android:checkable="true"
+        app:textStartPadding="2dp"
+        android:letterSpacing="-0.4"


letterSpacing을 따로 주신 이유가 있으실까요? 프로젝트 기초세팅을 할 때 typography에 letterSpacing까지 선언해줬던 기억이 있어서 .. 확인 부탁드립니다 !

이 부분에 그냥 적용했더니 글이 잘려서 디자이너 분께서도 자간을 줄인 것 같아요.
그래서 figma 에 맞게 적용시켰습니다.

그럼 그에 맞게 폰트 수정을 요청하거나 저희 자체에서 폰트를 수정하는게 맞지않을까요? 같은 속성이 이중으로 들어가는 점이 좋지 않은 코드로 보입니다.

담당 분께서 휴가가셔서

이렇게 했습니다.

MinseoSONG · 2025-01-15T09:33:21Z

app/src/main/res/layout/item_report_default_image.xml

+        android:background="@drawable/bg_report_item_default"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small" />


여기 공백은 뭘까요 !

위 코드가 회색 default ViewHolder 에 쓰이는 부분인데 , 그냥 크기를 맞추려고 공백을 넣었습니다.
근데 rootview 에 setOnClickListener 를 달 예정이어서 공백을 줄이는게 맞겠네요. 수정하겠습니다

app/src/main/res/values/strings.xml

MinseoSONG · 2025-01-15T09:37:42Z

app/src/main/res/values/strings.xml

+    <string name="report_character_feature">성격</string>
+    <string name="report_additional_description">추가 설명 작성하기</string>
+    <string name="report_option">(옵션)</string>
+    <string name="report_description_hint">자유롭게 추가 설명을 작성해주세요!\n\n\n</string>


이 \n\n\n은 뭘까요?? 끝에 들어간다면 그냥 string을 사용한 text를 기준으로 margin이나 padding으로 bottom에 값을 주는게 좋아보입니다.

hint 에 \n\n\n 적용

hint 그냥 적용

Edittext 에서 쓰는 hint 인데 입력 텍스트가 많아질수록 커지게 하려고 height 를 wrap 으로 했더니 , 기본 크기가 작더라구요. 그래서 꼼수 느낌으로 string 에 엔터를 추가해서 디폴트 크기를 넓히려고 했습니다.
Line 수에 따라서 크기를 kt 파일에서 조정하는 방법도 있을 것 같은데, 이 방법이 편해보여서 적용했습니다.
코드쪽에서 조절하는게 나은지 의견 있으시면 말씀해주세요 !

코드쪽에서 조절하는게 나을 것 같습니다 꼼수가 걸리지 않는다면 다행이지만 너무 잘보여서 🥲
그리고 아직 시간이 많으니 이런 부분에 있어서 대충 넘어가기보다는 꼼꼼히 잘 작성해두는게 좋을 것 같아요 !
데모데이 직전 코드들이 더 엉망일거라 ^_ 9 ..

MinseoSONG · 2025-01-16T15:54:44Z

app/src/main/res/layout/item_report_default_image.xml

+        app:layout_constraintTop_toTopOf="parent"
+        app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small" />


이 부분 여백을 말한 거였습니다 ㅠ 하지만 이 코리로 다른 수정 사항까지 발견했다면 오히려 좋아 .. 😀

MinseoSONG · 2025-01-16T16:00:01Z

app/src/main/java/com/example/findu/presentation/type/report/FeatureType.kt

@@ -0,0 +1,33 @@
+package com.example.findu.presentation.type.report
+
+// TODO : Back 과 논의 후 특징 enum naming 정리 후 상수화


TODO 역시 주석처리가 아닌 따로 노션에 아카이빙해두거나 TODO함수를 사용하는게 좋지않을까 싶습니다 !
코드적으로 보기 좋지않아요

ikseong00 added 20 commits January 4, 2025 03:50

[feat] #13: 목격신고화면 - WitnessReportFragment 생성

1de37f7

[feat] #13: 목격신고화면 - 사진 리사이클러뷰 생성

5eae406

[feat] #13: 목격신고화면 - 축종 선택 라디오그룹 생성

bbf7f25

[feat] #13: 목격신고화면 - 털색 추가

4c2aa72

[feat] #13: 목격신고화면 - 이미지 업로드 리사뷰 아이템 추가

653c28a

[feat] #13: 목격신고화면 - 성별 추가

de0bb7e

[feat] #13: 목격신고화면 - 특징 콘테이너 구현

c108753

[feat] #13: 목격신고화면 - 추가 설명 칸 작성

2f0e9eb

[refactor] #13: 목격신고화면 - layout weight 조정

a3174f4

[refactor] #13: 목격신고화면 - layout weight 조정 및 성별 삭제

7bafebc

[feat] #13: 실종신고화면 - MissingReportFragment 생성

b3041c3

[feat] #13: 신고화면 - 업로드 이미지 리사이클러뷰 아이템 생성

6172934

[feat] #13: 신고화면 - 업로드 이미지 리사이클러뷰 기본 아이템 생성

dc51228

[refactor] #13: 신고화면 - 아이템 간격, weight 수정

56ea988

[refactor] #13: 신고화면 - AI 버튼 stroke 수정

e319df1

[feat] #13: 신고화면 - 품종 선택 리사뷰 아이템 생성

ec37419

[refactor] #13: 신고화면 - 추가 설명 입력 부분 gravity 변경

3b7d6a6

[feat] #13: 신고화면 - 품종 리사뷰 아이템 변경

8313f02

[feat] #13: 신고화면 - 위치 선택 컨테이너 생성

b8f4bc8

[refactor] #13: 신고화면 - 위치 텍스트 크기 변경

d7fc33f

ikseong00 added 🐾익성 feat labels Jan 7, 2025

ikseong00 self-assigned this Jan 7, 2025

[refactor] #13: SVG drawable 이름 img -> icon 으로 변경

6ec1a83

ikseong00 added the no merge label Jan 8, 2025

ikseong00 and others added 5 commits January 8, 2025 20:31

merge develop

8c95870

[feat] #13: 신고 - 축종 enum class SpeciesType.kt 생성

da6a3a5

- 강아지 - 고양이 - 기타

[feat] #13: Add Glide dependency

9917d54

[refactor] #13: 실종 신고 , 목격 신고 업로드 이미지 아이템.xml 통일

dc9f166

[feat] #13: 신고 - 실종/목격 신고 enum class ReportType.kt 생성

cecc1d6

ikseong00 added 22 commits January 11, 2025 00:47

[feat] #13: 신고 - 품종 어댑터 연결

e147826

- setAdapter - background 설정

[feat] #13: 신고 - 품종 어댑터 리스너 연결

5b91be4

- 텍스트 뷰 클릭 - 아이템 클릭 - 텍스트 입력 - Focus 가 생길 때

[feat] #13: 신고 - 목격신고에도 같은 코드 적용

a1b6600

[refactor] #13: 신고 - 품종 드랍다운 구분선 크기, 스크롤뷰 id 추가

6ef3bc3

[feat] #13: 신고 - 털색 컬러 타입 FurColorType.kt 추가

15d27d3

[feat] #13: 신고 - 털색 ListAdapter 추가

4c8ebbe

[feat] #13: 신고 - 털색 RecyclerView 추가

5e57146

[refactor] #13: 신고 - 품종 actv 마진 간격, 백그라운드 조절

939d184

[refactor] #13: 신고 털색 - 기본 checked 상태 false 로 설정

a5d18bb

[feat] #13: 신고 - 털색 리사뷰 어댑터 연결

9146d89

[feat] #13: 신고 - 털색 클릭 이벤트 설정

97baff9

[refactor] #13: 신고 - 위치 부분 글씨 크기 변경

7b42c58

[feat] #13: 신고 - 특징 타입 생성

a07358f

- 신체적 특징 - 외적 특징 - 성격

[feat] #13: 신고 - 특징 리사뷰 생성

89fcb1a

[feat] #13: 신고 - 특징 리사뷰 3개 적용

1654905

[refactor] #13: 신고 - 특징 elevation 조정

a7408f6

[feat] #13: CalenderView 의존성 추가

7fd2e5d

[feat] #13: 신고 - 날짜 선택 CalendarView 추가

3ae7e93

[feat] #13: 신고 - CalendarView 날짜 선택 범위 설정 및 구현

9bcd614

[chore] #13: 신고 관련한 xml 문자들 strings.xml 파일로 이동 및 view 에서 놓친 기본 속성들 추가

aa6c30b

[feat] #13: 신고 - 이미지 삭제 기능 추가

063331f

[feat] #13: 신고 - 날짜 단일 선택 속성 추가

87c2daa

ikseong00 removed the no merge label Jan 11, 2025

ikseong00 added 3 commits January 15, 2025 00:00

[refactor] #13: 신고 - 디자인 수정 사장 반영

1920da0

- stroke color - 위치 컨테이너 text margin - ai button

[fix] #13: 신고 - 품종 focus 시 드랍다운 높이가 커지는 현상 수정

77ad713

[refactor] #13: 신고 - 특징 리사이클러뷰 스크롤 되는 현상 수정

89c68df

nasohee approved these changes Jan 15, 2025

View reviewed changes

MinseoSONG reviewed Jan 15, 2025

View reviewed changes

MinseoSONG reviewed Jan 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] 신고하기 UI 구현 #14

[feat] 신고하기 UI 구현 #14

ikseong00 commented Jan 7, 2025 •

edited

Loading

nasohee left a comment

MinseoSONG left a comment

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 16, 2025

ikseong00 Jan 17, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 16, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 16, 2025

ikseong00 Jan 17, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 15, 2025

ikseong00 Jan 15, 2025

MinseoSONG Jan 16, 2025

MinseoSONG Jan 16, 2025

MinseoSONG Jan 16, 2025

		app:layout_constraintTop_toTopOf="parent"
		app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small" />

		@@ -0,0 +1,33 @@
		package com.example.findu.presentation.type.report

		// TODO : Back 과 논의 후 특징 enum naming 정리 후 상수화

[feat] 신고하기 UI 구현 #14

Are you sure you want to change the base?

[feat] 신고하기 UI 구현 #14

Conversation

ikseong00 commented Jan 7, 2025 • edited Loading

Related issue 🛠

Work Description 📝

Screenshot 📸

Uncompleted Tasks 😅

To Reviewers 📢

nasohee left a comment

Choose a reason for hiding this comment

MinseoSONG left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ikseong00 commented Jan 7, 2025 •

edited

Loading