Skip to content

feat: reogrganization main#47

Merged
tjrmswo merged 3 commits intomainfrom
feat/reorganize-mainpage
Feb 22, 2025
Merged

feat: reogrganization main#47
tjrmswo merged 3 commits intomainfrom
feat/reorganize-mainpage

Conversation

@tjrmswo
Copy link
Contributor

@tjrmswo tjrmswo commented Feb 17, 2025

Feedback from another team member

  • There are many unused state values, and the styles.css file should not be created.
  • Keyframes can be implemented using Tailwind CSS.
  • Common component values should not be modified, but several changes have been made.

Accordingly, the decision has been made to restructure the table using mockData and submit it again."

@tjrmswo tjrmswo added the feature New Feature label Feb 17, 2025
@tjrmswo tjrmswo requested review from HakSooDev and lsc2159 February 17, 2025 12:33
@tjrmswo tjrmswo self-assigned this Feb 17, 2025
Copy link
Contributor

@HakSooDev HakSooDev left a comment

Choose a reason for hiding this comment

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

커밋할때 자동 linting 이 돌아갈텐데 안돌아가있네요. 한번 확인해주시겠어요?

고생하셨습니다.

return (
<SidebarProvider>
<div className="flex h-screen bg-background text-foreground">
<div className="flex h-screen w-full bg-background text-foreground">
Copy link
Contributor

Choose a reason for hiding this comment

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

flex size-full bg-background text-foreground
이면 충분할것 같네요

<div>
<h1>Light Switch</h1>
<div className="flex w-full flex-col gap-5 p-3">
<header className="flex w-[270px] flex-row items-center justify-between">
Copy link
Contributor

Choose a reason for hiding this comment

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

특별한 경우가 아니라면 px 지정은 안해주는게 좋을것 같네요.
px 을 적어놓으면 나중에 layout 바뀌면 바로 깨져요.
flex-row 도 default 값이여서 생략 가능합니다.
className="flex items-center gap-3" 이면 충분할것 같습니다.

<div className="flex w-full flex-col gap-5 p-3">
<header className="flex w-[270px] flex-row items-center justify-between">
<FlagIcon size={20} />
<span className="text-[1.2rem] font-semibold">
Copy link
Contributor

Choose a reason for hiding this comment

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

text-[1.2rem] => text-xl

</span>
</header>

<DataTable columns={columns} data={ExampleData as TableDataType[]} />
Copy link
Contributor

Choose a reason for hiding this comment

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

as 는 되도록이면 안쓰는게 좋습니다.
as TableDataType[] 지우셔도 될것 같습니다.

@@ -0,0 +1,8 @@
export type TableDataType = {
Copy link
Contributor

Choose a reason for hiding this comment

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

타입 fields 들은 다 camelCase 여야 합니다.

variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
>
Name
Copy link
Contributor

Choose a reason for hiding this comment

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

Name 이 아니고 Key 로 해야할것 같습니다. 관련해서 모두 Key 로 바꿔주세요.

header: 'By',
},
{
accessorKey: 'Status',
Copy link
Contributor

Choose a reason for hiding this comment

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

Status 는 ToggleButton 으로 하는게 좋을것 같습니다.

header: 'Status',
},
{
accessorKey: 'Default Value',
Copy link
Contributor

Choose a reason for hiding this comment

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

table 에서 default value 를 보여줄필요는 없을것 같습니다.

@@ -0,0 +1,78 @@
'use client';
Copy link
Contributor

Choose a reason for hiding this comment

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

이친구는 component가 아니라서 일단은 components/featureFlagColumns.tsx 로 하는게 좋을것 같습니다..

Copy link
Contributor Author

Choose a reason for hiding this comment

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

헤더에 React 요소를 반환중이라 use client가 필요했는데 sorting 기능 사용하지 않을 예정이니 모두 삭제하고 string만 반환하게 바꾸겠습니다.

@@ -0,0 +1,8 @@
export type TableDataType = {
Copy link
Contributor

Choose a reason for hiding this comment

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

type 들은 data 에따라서 type 이 나뉘어야지 페이지에따라서 type 을 지정하면 안될것 같습니다.
일단 types.ts 만들어서 FeatureFlagTableType 으로 넣어놓는게 좋을것 같습니다.

@tjrmswo
Copy link
Contributor Author

tjrmswo commented Feb 17, 2025

피드백 관련해서 모두 수정해서 올려놨습니다

@@ -1,116 +1,102 @@
import { TableDataType } from '@/types/home';
import { featureFlagTableType } from '@/types/types';
Copy link
Contributor

Choose a reason for hiding this comment

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

파일에 오타있습니다.

@@ -0,0 +1,7 @@
export type featureFlagTableType = {
Copy link
Contributor

Choose a reason for hiding this comment

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

보통 Type 이름은 pascal case 고 fields 들은 camel case 입니다.

Type: string;
Created: string;
By: string;
ToggleButton: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

ToggleButton 아니고 active 나 이런거 일것 같은데 백엔드 타입 한번 확인해보시겠어요?

@@ -0,0 +1,28 @@
'use client';
Copy link
Contributor

Choose a reason for hiding this comment

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

components/ui 에는 shared UI component 가 들어가야합니다.
이친구는 Home 에서만 쓰이면 거기 안에만 들어가있어도 충분하지 않을까요?

Copy link
Contributor

Choose a reason for hiding this comment

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

여기서 use client 필요한가요?

@@ -1,17 +1,14 @@
'use client';
Copy link
Contributor

Choose a reason for hiding this comment

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

이친구는 components/ 에 들어가는게 더 맞을것 같습니다.

}

export function DataTable<TData extends TableDataType, TValue>({
export function DataTable<TData extends featureFlagTableType, TValue>({
Copy link
Contributor

Choose a reason for hiding this comment

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

component 이름도 바꿔주세요

variant="outline"
size="sm"
onClick={handlePreviousPage}
onClick={() => table.previousPage()}
Copy link
Contributor

Choose a reason for hiding this comment

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

() => table.previousPage() => table.previousPage

@tjrmswo tjrmswo merged commit 946f2e6 into main Feb 22, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New Feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants