[DESIGN] 픽 헤더 제목 영어 대신 한국어로 변경 (#935)

* feat: 헤더 sticky로 변경 * desgin: pickContentLayout paddingBottom 추가 * design: 헤더 sticky 제거
Kernel360 · Jan 8, 2025 · f4cfd01 · f4cfd01
1 parent bfdf15c
commit f4cfd01
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/frontend/techpick/src/app/(signed)/folders/unclassified/page.tsx b/frontend/techpick/src/app/(signed)/folders/unclassified/page.tsx
@@ -59,18 +59,16 @@ export default function UnclassifiedFolderPage() {
         {pickList.length === 0 ? (
           <EmptyPickRecordImage />
         ) : (
-          <>
-            <PickDraggableListLayout
-              folderId={basicFolderMap['UNCLASSIFIED'].id}
-              viewType="record"
-            >
-              {pickList.map((pickInfo) => {
-                return (
-                  <PickDraggableRecord key={pickInfo.id} pickInfo={pickInfo} />
-                );
-              })}
-            </PickDraggableListLayout>
-          </>
+          <PickDraggableListLayout
+            folderId={basicFolderMap['UNCLASSIFIED'].id}
+            viewType="record"
+          >
+            {pickList.map((pickInfo) => {
+              return (
+                <PickDraggableRecord key={pickInfo.id} pickInfo={pickInfo} />
+              );
+            })}
+          </PickDraggableListLayout>
         )}
       </PickContentLayout>
     </FolderContentLayout>

diff --git a/frontend/techpick/src/components/PickRecord/PickRecordHeader.tsx b/frontend/techpick/src/components/PickRecord/PickRecordHeader.tsx
@@ -2,7 +2,10 @@
 
 import { PickDateColumnLayout } from './PickDateColumnLayout';
 import { PickImageColumnLayout } from './PickImageColumnLayout';
-import { pickRecordHeaderLayoutStyle } from './pickRecordHeader.css';
+import {
+  pickRecordHeaderLayoutStyle,
+  columnStyle,
+} from './pickRecordHeader.css';
 import { PickTagColumnLayout } from './PickTagColumnLayout';
 import { PickTitleColumnLayout } from './PickTitleColumnLayout';
 import { Separator } from './Separator';
@@ -11,24 +14,24 @@ export function PickRecordHeader() {
   return (
     <div className={pickRecordHeaderLayoutStyle}>
       <PickImageColumnLayout>
-        <div style={{ lineHeight: '22px' }}>Image</div>
+        <div className={columnStyle}>이미지</div>
       </PickImageColumnLayout>
 
       <Separator />
 
       <PickTitleColumnLayout>
-        <div style={{ lineHeight: '22px' }}>Title</div>
+        <div className={columnStyle}>제목</div>
       </PickTitleColumnLayout>
 
       <Separator />
       <PickTagColumnLayout>
-        <div style={{ lineHeight: '22px' }}>Tags</div>
+        <div className={columnStyle}>태그</div>
       </PickTagColumnLayout>
 
       <Separator />
 
       <PickDateColumnLayout>
-        <div style={{ lineHeight: '22px' }}>date</div>
+        <div className={columnStyle}>수정일</div>
       </PickDateColumnLayout>
     </div>
   );

diff --git a/frontend/techpick/src/components/PickRecord/pickRecordHeader.css.ts b/frontend/techpick/src/components/PickRecord/pickRecordHeader.css.ts
@@ -9,4 +9,9 @@ export const pickRecordHeaderLayoutStyle = style({
   borderTop: '1px solid ',
   borderBottom: '0.5px solid ',
   borderColor: colorVars.gold7,
+  backgroundColor: colorVars.gold2,
+});
+
+export const columnStyle = style({
+  lineHeight: '24px',
 });
diff --git a/frontend/techpick/src/components/pickContentLayout.css.ts b/frontend/techpick/src/components/pickContentLayout.css.ts
@@ -5,4 +5,5 @@ export const pickContentLayoutStyle = style({
   margin: 'auto',
   marginTop: '24px',
   padding: '0 32px',
+  paddingBottom: '32px',
 });