PLUMS PoT Frontend 과제 수행 by syj0396 · Pull Request #1 · jungmir/plums-pot

syj0396 · 2024-10-01T17:50:09Z

Backend

사용자 관리 API 구현 (조회, 추가, 수정, 삭제)
전체 사용자 조회 시 검색, 필터링, 페이지네이션 사용 가능하도록 구현
username, password validation 추가
middleware를 사용하여 API Response Formatting (응답 성공/실패 공통)
{ "success": false, "result": null, "message": { "password": [ "password must be ..." ] } }
logging 추가- file에 로그 저장
API 테스트 코드 작성- 각 API 별 성공/실패 테스트

Frontend

전체 목록 조회, 사용자 추가, 수정, 삭제 기능 구현
사용자 추가, 수정 시 validation 구현
msw를 사용하여 서버 mocking

jungmir · 2024-10-06T08:26:31Z

frontend/src/App.jsx

+          <Route path="/users/add" element={<AddUserPage />} />
+          <Route path="/users/:id" element={<UserPage />} />
+          <Route path="/users/edit/:id" element={<EditUserPage />} />
+        </Routes>


라우팅이 테이블에 포함되지 않은 path에 대한 처리 부족

jungmir · 2024-10-06T08:28:03Z

frontend/src/components/AppLayout.jsx

+import PropTypes from 'prop-types';
+import Sidebar from './Sidebar';
+import CustomHeader from './CustomHeader';
+//import UserPage from '../pages/UserPage';


불필요 주석 제거 필요

jungmir · 2024-10-06T08:31:07Z

frontend/src/App.jsx

+    <Router>
+      <AppLayout>
+        <Routes>
+          <Route path="/" element={<UserListPage />} />


사용자 목록 페이지의 라우팅 path를 root로 지정한 이유

jungmir · 2024-10-06T08:32:41Z

frontend/src/App.jsx

+      <AppLayout>
+        <Routes>
+          <Route path="/" element={<UserListPage />} />
+          <Route path="/users/add" element={<AddUserPage />} />


페이지별로 라우팅을 관리하는 컴포넌트가 존재하면 좋을듯

jungmir · 2024-10-06T08:36:29Z

frontend/src/components/CustomHeader.jsx

@@ -0,0 +1,44 @@
+// // src/components/Header.jsx


주석 제거

jungmir · 2024-10-06T08:37:09Z

frontend/src/components/CustomHeader.jsx

+
+const CustomHeader = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>


antd의 Flex 컴포넌트로 대체 가능

jungmir · 2024-10-06T08:38:43Z

frontend/src/components/AppLayout.jsx

+        <Sidebar />
+      </Sider>
+      <Layout>
+        <Header style={{paddingTop: '12px', background: '#fff'}}>


Header child로 CustomHeader가 있어 중첩된 Header 구조가 되어 있음 CustomHeader가 Header를 대체하는 것이 좋을 듯

jungmir · 2024-10-06T08:40:53Z

frontend/src/components/AppLayout.jsx

+        trigger={null} 
+        className="sider"
+        style={{
+          height: '100vh',


'와 "의 혼용

jungmir · 2024-10-06T08:42:28Z

frontend/src/components/Sidebar.jsx

+  const navigate = useNavigate();
+  const items=[
+    {key: '1', label: 'Dashboard'},
+    {key: '2', label: '메일링'},


요구 사항에 없는 메뉴 기능

jungmir · 2024-10-06T08:45:06Z

frontend/src/components/UserSearchFilter.jsx

+  );
+};
+
+export default UserSearchFilter;


미사용 컴포넌트

jungmir · 2024-10-06T08:51:44Z

frontend/src/pages/UserListPage.jsx

+    setSearchValue(e.target.value);
+  }
+
+  const handleSearch = () => {


없는 이름으로 검색 후 초기화 하지 않으면 검색 기능이 동작하지 않음

jungmir · 2024-10-06T19:52:08Z

backend/config/middleware.py

+        response = None
+        if not response:
+            response = self.get_response(request)
+        if hasattr(self, 'process_response'):


process_response가 내부적으로 구현되어 있는지 체크가 정말 필요한지

jungmir · 2024-10-06T19:57:57Z

backend/config/middleware.py

+                'message': None
+            }
+
+            if hasattr(response, 'data') and getattr(response, 'data') is not None:


walrus operation과 getattr default 옵션을 사용하면 좋을 것 같습니다.
예시) if response_data := getattr(response, "data", None):

jungmir · 2024-10-09T07:01:20Z

frontend/src/pages/UserPage.jsx

+    }
+
+    useEffect(() => {
+        const fetchUser = async () => {


Jotai나 hook을 사용해서 관리하면 좋을 것 같습니다.

jungmir · 2024-10-09T07:10:59Z

backend/users/views.py

+class UserViewSet(viewsets.ModelViewSet):
+    queryset = User.objects.all().order_by('id')
+    serializer_class = UserSerializer
+    filter_backends = [SearchFilter, DjangoFilterBackend]


퍼블릭하게 사용할 필터 백엔드는 settings.py에 DEFAULT_FILTER_BACKENDS 옵션으로 관리하면 좋습니다.

jungmir · 2024-10-09T07:38:58Z

backend/users/serializers.py

+class UserSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = User
+        fields = ['id', 'username', 'email', 'password', 'is_active', 'is_admin']


index는 read-only로 설정하는게 안전합니다.

jungmir · 2024-10-09T07:51:46Z

backend/users/models.py

+    )
+    email = models.EmailField(unique=True)
+    password = models.CharField(
+        max_length=16,


Django에서는 패스워드 저장할 때 해싱하여 저장하기 떄문에 글자 수가 16글자를 넘습니다.
migration 파일 보시면 max_length가 128로 설정되어 있습니다.

jungmir · 2024-10-09T07:55:50Z

backend/config/middleware.py

+"""
+logger = logging.getLogger(__name__)
+
+class ResponseFormattingMiddleware:


응답에 대한 formatting은 일반적으로 middleware보단 view / viewset에서 하는 편입니다.

syj0396 added 14 commits October 1, 2024 17:42

feature: Layout 설정

b815fd1

feature: 사용자 추가 화면 구현

1d63f93

feature: msw를 사용한 모의 API 구현

4582a2e

feature: 유저 정보 상세 조회 화면 구현

857ce64

feature: 사용자 정보 수정 화면 구현

e8164a2

feature: 유효성 검사 추가

dd639a3

feature: jotai를 활용한 상태 관리

6cbf45f

refactor: 이름 validation 수정

67c3d48

feature: ViewSet, Serializer를 사용한 API 구현

71596be

feature: validation 추가

d521057

feature: middleware를 사용하여 API Response Formatting 구현

104bdd0

feature: logging 추가 및 file에 로그 저장

aeedeab

feature: User API 테스트 코드 추가

bcb1320

update: 테스트 개선

773f7ab

jungmir reviewed Oct 6, 2024

View reviewed changes

frontend/src/components/CustomHeader.jsx

@@ -0,0 +1,44 @@

// // src/components/Header.jsx

Copy link

Owner

jungmir Oct 6, 2024

Choose a reason for hiding this comment

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

주석 제거

jungmir reviewed Oct 6, 2024

View reviewed changes

frontend/src/components/AppLayout.jsx

trigger={null}

className="sider"

style={{

height: '100vh',

Copy link

Owner

jungmir Oct 6, 2024

Choose a reason for hiding this comment

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

'와 "의 혼용

jungmir reviewed Oct 6, 2024

View reviewed changes

frontend/src/components/UserSearchFilter.jsx

);

};

export default UserSearchFilter;

Copy link

Owner

jungmir Oct 6, 2024

Choose a reason for hiding this comment

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

미사용 컴포넌트

jungmir reviewed Oct 6, 2024

View reviewed changes

jungmir reviewed Oct 9, 2024

View reviewed changes

Conversation

syj0396 commented Oct 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jungmir Oct 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

syj0396 commented Oct 1, 2024 •

edited

Loading

jungmir Oct 9, 2024 •

edited

Loading