Repository: YAPP-Github/25th-Web-Team-2-FE
Pull request #123: [YS-374] 밀린 디자인 화면 반영 및 QA 수정
Author: login: eeeyooon
Labels: name: design
description: css와 같은 스타일링
Created: 2025-04-27T14:42:51Z | Merged: 2025-04-27T15:05:06Z

## Issue Number

<!-- #이슈번호 -->

close #79 

## As-Is

디자인 QA
- 내가 작성한 글 디자인 QA
- 공고 등록 및 수정 QA

<!-- 문제 상황 정의 -->

## To-Be
디자인 QA 반영
- 작성 글 테이블 위치, 여백, 요소 크기 수정 / 작성 글 EmptyView 수정 등
- datePicker -> 하루 진행 / 시작일 / 종료일 텍스트 추가, 에러메세지 위치 수정, input padding 수정 등

<!-- 변경 사항 -->

## Check List

- [x] 테스트가 전부 통과되었나요?
- [x] 모든 commit이 push 되었나요?
- [x] merge할 branch를 확인했나요?
- [x] Assignee를 지정했나요?
- [x] Label을 지정했나요?

## Test Screenshot

<img width="1230" alt="image" src="https://github.com/user-attachments/assets/f37a3791-b2f6-4f3a-a875-5ee068664675" />
<img width="487" alt="image" src="https://github.com/user-attachments/assets/7c94adbf-ddc0-48bc-b243-76c8bacd27e9" />



## (Optional) Additional Description

브랜치 관리를 하다가 이전 작업을 날렸더라고요.. ^.^ 호호.. 새로 시작했습니다.
이 PR은 대부분 디자인 QA 반영이라 스타일 코드 변경 위주입니다. 가볍게 넘기셔도 괜찮습니다!
디자인 QA 먼저 해결하였고 해결 못한 기능 위주 QA가 있는데 해당 내용은 새로 이슈 파서 진행하겠습니다. 

<br/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **스타일**
    - 내 글 목록, 테이블, 페이지네이션, 포스트 액션 등 다양한 컴포넌트의 여백, 정렬, 폰트, 아이콘 크기 등 스타일이 개선되었습니다.
    - 날짜 선택기에서 선택된 날짜에 "하루 진행", "시작일", "종료일" 라벨이 시각적으로 표시됩니다.
- **버그 수정**
    - 내 글 목록에서 오류 발생 시 헤더와 정렬 UI가 보이지 않도록 변경되었습니다.
- **기능 개선**
    - 토글 및 메뉴 아이콘이 더 일관된 크기와 정렬로 표시됩니다.
    - 날짜 선택기의 선택 구간이 더 명확하게 구분됩니다.
    - 내 글 목록 헤더가 별도 컴포넌트로 분리되어 가독성과 유지보수성이 향상되었습니다.
    - 게시글 정렬 기능의 UI가 개선되어 사용자가 현재 정렬 상태를 쉽게 확인하고 변경할 수 있습니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Linked issue #79: [YS-374] 밀린 디자인 화면 반영 및 QA 수정
### 🎟️ 상위 작업 (Ticket Number)

YS-373

### 🌳 브랜치명 (Branch)

feat

### 📝 상세 내용(Description)

밀린 디자인 화면 반영 및 QA 수정

### ✅ TODO (Tasks)

- [x] 밀린 디자인 화면 반영
- [x] QA 수정
- [x] 내가 작성한 글 화면 디자인 QA
- [x] No-content 디자인 QA
- [x] 공고 등록 및 수정 디자인 QA


### 🔎 Reference

_No response_
Linked issue comments: user: login: github-actions[bot]
created_at: 2025-02-28T04:24:51Z
body: Jira Issue Created: [YS-374](https://yappsocks.atlassian.net/browse/YS-374)

[YS-374]: https://yappsocks.atlassian.net/browse/YS-374?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
author_association: NONE

Diff:
diff --git a/src/app/my-posts/MyPostsPage.css.ts b/src/app/my-posts/MyPostsPage.css.ts
index 870f18b8..10bc858d 100644
--- a/src/app/my-posts/MyPostsPage.css.ts
+++ b/src/app/my-posts/MyPostsPage.css.ts
@@ -6,7 +6,7 @@ export const myPostsLayoutContainer = style({
   width: 'fit-content',
   margin: '0 auto',
   backgroundColor: colors.field01,
-  paddingBottom: '2.6rem',
+  paddingBottom: '5.6rem',
 });
 
 export const myPostsLayout = style({
diff --git a/src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx b/src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx
index 2a0e74c4..b7622da1 100644
--- a/src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx
+++ b/src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx
@@ -2,18 +2,10 @@
 
 import { useState } from 'react';
 
-import {
-  myPostContainerLayout,
-  myPostsHeaderContainer,
-  myPostsHeaderText,
-  postsSorting,
-} from './MyPostsContainer.css';
 import useMyPostsQuery from '../../hooks/useMyPostsQuery';
+import MyPostsHeader from '../MyPostsHeader/MyPostHeader';
 import MyPostsTable from '../MyPostsTable/MyPostsTable';
 
-import Icon from '@/components/Icon';
-import { colors } from '@/styles/colors';
-
 export const PAGE_SIZE = 10;
 
 const MyPostsContainer = () => {
@@ -31,23 +23,13 @@ const MyPostsContainer = () => {
   };
 
   return (
-    <div className={myPostContainerLayout}>
-      <div className={myPostsHeaderContainer}>
-        <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
-        {myPostAPIResponse.data?.content && myPostAPIResponse.data.content.length > 0 && (
-          <div className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer' }}>
-            <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
-            <Icon
-              icon="ArrowSorting"
-              width={20}
-              height={20}
-              color={colors.icon04}
-              rotate={order === 'DESC' ? 0 : 180}
-            />
-          </div>
-        )}
-      </div>
-
+    <div>
+      <MyPostsHeader
+        isError={!!myPostAPIResponse.isError}
+        hasPosts={!!myPostAPIResponse.data?.content.length}
+        order={order}
+        toggleOrder={toggleOrder}
+      />
       <MyPostsTable
         myPostAPIResponse={myPostAPIResponse}
         currentPage={currentPage}
diff --git a/src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx b/src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx
new file mode 100644
index 00000000..b6281a56
--- /dev/null
+++ b/src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx
@@ -0,0 +1,35 @@
+import { myPostsHeaderContainer, myPostsHeaderText, postsSorting } from './MyPostsHeader.css';
+
+import Icon from '@/components/Icon';
+import { colors } from '@/styles/colors';
+
+interface MyPostsHeaderProps {
+  isError: boolean;
+  hasPosts: boolean;
+  order: 'DESC' | 'ASC';
+  toggleOrder: () => void;
+}
+
+const MyPostsHeader = ({ isError, hasPosts, order, toggleOrder }: MyPostsHeaderProps) => {
+  if (isError) return null;
+
+  return (
+    <div className={myPostsHeaderContainer}>
+      <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
+      {hasPosts && (
+        <div className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer' }}>
+          <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
+          <Icon
+            icon="ArrowSorting"
+            width={20}
+            height={20}
+            color={colors.icon04}
+            rotate={order === 'DESC' ? 0 : 180}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MyPostsHeader;
diff --git a/src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts b/src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts
new file mode 100644
index 00000000..f0f2a78d
--- /dev/null
+++ b/src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts
@@ -0,0 +1,26 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/styles/colors';
+import { fonts } from '@/styles/fonts.css';
+
+export const myPostsHeaderContainer = style({
+  display: 'flex',
+  flexFlow: 'row nowrap',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const myPostsHeaderText = style({
+  ...fonts.title.medium.SB20,
+  marginBottom: '2rem',
+  marginTop: '1.2rem',
+});
+
+export const postsSorting = style({
+  ...fonts.label.large.SB14,
+  color: colors.text03,
+  display: 'flex',
+  flexFlow: 'row nowrap',
+  alignItems: 'center',
+  gap: '0.4rem',
+});
diff --git a/src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts b/src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts
index ac2fd0ec..c53b29ac 100644
--- a/src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts
+++ b/src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts
@@ -55,6 +55,27 @@ globalStyle(`${textAlignRight} div`, {
   textAlign: 'right',
 });
 
+export const tableInfoRow = style({
+  ...fonts.body.normal.R16,
+});
+
+export const tableBody = style({});
+
+export const tableRow = style({});
+
+globalStyle(`${tableBody} > ${tableRow} > td`, {
+  paddingTop: '0.4rem',
+  paddingBottom: '0.4rem',
+});
+
+globalStyle(
+  `${tableBody} > ${tableRow}:first-child > td, ${tableBody} > ${tableRow}:last-child > td`,
+  {
+    paddingTop: '0',
+    paddingBottom: '0',
+  },
+);
+
 export const tableEmptyViewLayout = style({
   width: '100%',
   margin: '0 auto',
diff --git a/src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx b/src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx
index c68364f5..04c4d420 100644
--- a/src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx
+++ b/src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx
@@ -24,6 +24,9 @@ import {
   tableEmptyViewLayout,
   emptyTitle,
   emptySubTitle,
+  tableInfoRow,
+  tableBody,
+  tableRow,
 } from './MyPostsTable.css';
 import { MyPosts, UseMyPostsQueryResponse } from '../../hooks/useMyPostsQuery';
 import useUpdateRecruitStatusMutation from '../../hooks/useUpdateRecruitStatusMutation';
@@ -134,13 +137,13 @@ const MyPostsTable = ({
     {
       accessorKey: 'uploadDate',
       header: '게시 날짜',
-      cell: ({ row }) => <div>{row.getValue('uploadDate')}</div>,
+      cell: ({ row }) => <div className={tableInfoRow}>{row.getValue('uploadDate')}</div>,
       size: 108,
     },
     {
       accessorKey: 'views',
       header: '조회수',
-      cell: ({ row }) => <div>{row.getValue('views')}</div>,
+      cell: ({ row }) => <div className={tableInfoRow}>{row.getValue('views')}</div>,
       size: 80,
     },
     {
@@ -159,7 +162,7 @@ const MyPostsTable = ({
             <Icon icon="ToggleOn" width={32} height={18} cursor="pointer" />
           </button>
         ) : (
-          <Icon icon="ToggleOff" width={32} height={18} />
+          <Icon icon="ToggleOff" width={32} height={18} cursor="notAllowed" />
         );
       },
       size: 68,
@@ -232,8 +235,7 @@ const MyPostsTable = ({
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
-                  const isLeftAlign =
-                    header.column.id === 'title' || header.column.id === 'recruitStatus';
+                  const isLeftAlign = header.column.id === 'title';
                   return (
                     <TableHead
                       key={header.id}
@@ -249,14 +251,13 @@ const MyPostsTable = ({
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody>
+          <TableBody className={tableBody}>
             <tr style={{ height: '1.2rem' }} />
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
+                <TableRow key={row.id} className={tableRow}>
                   {row.getVisibleCells().map((cell) => {
-                    const isLeftAlign =
-                      cell.column.id === 'title' || cell.column.id === 'recruitStatus';
+                    const isLeftAlign = cell.column.id === 'title';
                     return (
                       <TableCell
                         key={cell.id}
diff --git a/src/app/my-posts/components/Pagination/Pagination.css.ts b/src/app/my-posts/components/Pagination/Pagination.css.ts
index 9a3f7e2d..5c996ef7 100644
--- a/src/app/my-posts/components/Pagination/Pagination.css.ts
+++ b/src/app/my-posts/components/Pagination/Pagination.css.ts
@@ -16,7 +16,8 @@ export const paginationContent = style({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  gap: '0.4rem',
+  justifyContent: 'center',
+  gap: '0.8rem',
 });
 
 export const paginationItem = style({
@@ -26,11 +27,15 @@ export const paginationItem = style({
 });
 
 export const paginationLink = style({
-  padding: '0.8rem 1.2rem',
-  borderRadius: '0.4rem',
+  width: '2.4rem',
+  height: '2.4rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   textDecoration: 'none',
   fontSize: '1.4rem',
   cursor: 'pointer',
+  borderRadius: '0.8rem',
   selectors: {
     '&:hover': {
       backgroundColor: colors.field02,
@@ -46,13 +51,11 @@ export const active = style({
 export const paginationPrevious = style({
   display: 'flex',
   alignItems: 'center',
-  gap: '0.4rem',
 });
 
 export const paginationNext = style({
   display: 'flex',
   alignItems: 'center',
-  gap: '0.4rem',
 });
 
 export const paginationEllipsis = style({
diff --git a/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts b/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts
index 783de49d..54436cdd 100644
--- a/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts
+++ b/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts
@@ -6,8 +6,8 @@ import { zIndex } from '@/styles/zIndex';
 
 export const postsActionsPopoverContainer = style({
   marginLeft: '-1.6rem',
-  height: '2rem',
-  verticalAlign: 'middle',
+  height: '1.6rem',
+  width: '1.6rem',
 });
 
 export const postsActionsPopoverContent = style({
diff --git a/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx b/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx
index 9f7803b8..476fd277 100644
--- a/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx
+++ b/src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx
@@ -36,7 +36,6 @@ const PostActionsPopover = ({ experimentPostId }: PostActionsPopoverProps) => {
   const queryClient = useQueryClient();
   const { mutate: deleteExperimentPostMutation } = useDeleteExperimentPostMutation();
 
-  // todo 공고 수정
   const handleEdit = () => {
     setPopoverOpen(false);
     router.push(`/edit/${experimentPostId}`);
@@ -67,7 +66,7 @@ const PostActionsPopover = ({ experimentPostId }: PostActionsPopoverProps) => {
       <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverTrigger asChild>
           <button aria-label="수정 / 삭제 팝오버 열기" className={postsActionsPopoverContainer}>
-            <Icon role="button" icon="MenuDots" width={20} height={20} cursor="pointer" />
+            <Icon role="button" icon="MenuDots" width={12} height={12} cursor="pointer" />
           </button>
         </PopoverTrigger>
         <PopoverContent
diff --git a/src/app/upload/components/DatePickerForm/DatePickerForm.css.ts b/src/app/upload/components/DatePickerForm/DatePickerForm.css.ts
index d14464b4..b53f7615 100644
--- a/src/app/upload/components/DatePickerForm/DatePickerForm.css.ts
+++ b/src/app/upload/components/DatePickerForm/DatePickerForm.css.ts
@@ -95,7 +95,6 @@ export const popoverLayout = style({
 export const datepickerCustomClass = style({});
 
 globalStyle(`.${datepickerCustomClass} .rdp-months`, {
-  // width: '40rem',
   position: 'relative',
   paddingTop: '1.2rem',
 });
@@ -176,6 +175,7 @@ globalStyle(`.${datepickerCustomClass} .rdp-weekdays`, {
 
 globalStyle(`.${datepickerCustomClass} .rdp-weekdays th`, {
   ...fonts.label.medium.M13,
+  verticalAlign: 'middle',
 });
 
 globalStyle(`.${datepickerCustomClass} .rdp-weekdays th:first-of-type`, {
@@ -229,3 +229,39 @@ globalStyle(`.${datepickerCustomClass} .rdp-range_end .rdp-day_button`, {
 globalStyle(`.${datepickerCustomClass} .rdp-selected`, {
   ...fonts.body.normal.M16,
 });
+
+globalStyle(
+  `.${datepickerCustomClass} .rdp-day.single-day-selected,
+  .${datepickerCustomClass} .rdp-day.start-day-selected,
+  .${datepickerCustomClass} .rdp-day.end-day-selected`,
+  {
+    position: 'relative',
+  },
+);
+
+globalStyle(
+  `.${datepickerCustomClass} .rdp-day.single-day-selected::after,
+  .${datepickerCustomClass} .rdp-day.start-day-selected::after,
+  .${datepickerCustomClass} .rdp-day.end-day-selected::after`,
+  {
+    ...fonts.label.small.M12,
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    fontSize: '1.2rem',
+    color: colors.textPrimary,
+    whiteSpace: 'nowrap',
+  },
+);
+
+globalStyle(`.${datepickerCustomClass} .rdp-day.single-day-selected::after`, {
+  content: '"하루 진행"',
+});
+
+globalStyle(`.${datepickerCustomClass} .rdp-day.start-day-selected::after`, {
+  content: '"시작일"',
+});
+
+globalStyle(`.${datepickerCustomClass} .rdp-day.end-day-selected::after`, {
+  content: '"종료일"',
+});
diff --git a/src/app/upload/components/DatePickerForm/DatePickerForm.tsx b/src/app/upload/components/DatePickerForm/DatePickerForm.tsx
index 2fef7eda..fb7f5782 100644
--- a/src/app/upload/components/DatePickerForm/DatePickerForm.tsx
+++ b/src/app/upload/components/DatePickerForm/DatePickerForm.tsx
@@ -170,6 +170,31 @@ const DatePickerForm = forwardRef<HTMLInputElement, DatePickerFormProps>(
                 className={datepickerCustomClass}
                 captionLayout="dropdown-months"
                 showOutsideDays
+                modifiers={{
+                  singleDay:
+                    selectedDates.from &&
+                    selectedDates.to &&
+                    selectedDates.from.getTime() === selectedDates.to.getTime()
+                      ? [selectedDates.from]
+                      : [],
+                  startDay:
+                    selectedDates.from &&
+                    selectedDates.to &&
+                    selectedDates.from.getTime() !== selectedDates.to.getTime()
+                      ? [selectedDates.from]
+                      : [],
+                  endDay:
+                    selectedDates.from &&
+                    selectedDates.to &&
+                    selectedDates.from.getTime() !== selectedDates.to.getTime()
+                      ? [selectedDates.to]
+                      : [],
+                }}
+                modifiersClassNames={{
+                  singleDay: 'single-day-selected',
+                  startDay: 'start-day-selected',
+                  endDay: 'end-day-selected',
+                }}
               />
             </Popover.Content>
           </Popover.Portal>
diff --git a/src/app/upload/components/DescriptionSection/DescriptionSection.tsx b/src/app/upload/components/DescriptionSection/DescriptionSection.tsx
index 60c9fdab..1f455d25 100644
--- a/src/app/upload/components/DescriptionSection/DescriptionSection.tsx
+++ b/src/app/upload/components/DescriptionSection/DescriptionSection.tsx
@@ -210,7 +210,7 @@ const DescriptionSection = ({ images, setImages }: DescriptionSectionProps) => {
 
           {/* 에러 메시지  */}
           {errors.content?.message && (
-            <p className={formMessage} style={{ marginTop: '-1.2rem' }}>
+            <p className={formMessage} style={{ marginTop: '-0.2rem' }}>
               {errors.content.message}
             </p>
           )}
diff --git a/src/app/upload/components/InputForm/InputForm.css.ts b/src/app/upload/components/InputForm/InputForm.css.ts
index b59e2fb7..a9578d5a 100644
--- a/src/app/upload/components/InputForm/InputForm.css.ts
+++ b/src/app/upload/components/InputForm/InputForm.css.ts
@@ -61,6 +61,7 @@ export const textSubMessageLayout = styleVariants({
     justifyContent: 'space-between',
     alignItems: 'center',
     marginTop: '0.4rem',
+    marginBottom: '0.8rem',
   },
   noCounter: {
     display: 'flex',
diff --git a/src/app/upload/components/OutlineSection/OutlineSection.css.ts b/src/app/upload/components/OutlineSection/OutlineSection.css.ts
index d7e7010a..083f45d9 100644
--- a/src/app/upload/components/OutlineSection/OutlineSection.css.ts
+++ b/src/app/upload/components/OutlineSection/OutlineSection.css.ts
@@ -78,7 +78,7 @@ export const disabledInput = style({
   width: '100%',
   maxWidth: '45.2rem',
   height: '4.8rem',
-  padding: '10px',
+  padding: '1.6rem',
   borderRadius: '1.2rem',
   outline: 'none',
   border: `0.1rem solid ${colors.line01}`,
diff --git a/src/components/Icon/icons/MenuDots.tsx b/src/components/Icon/icons/MenuDots.tsx
index cd28b418..6e3e93f6 100644
--- a/src/components/Icon/icons/MenuDots.tsx
+++ b/src/components/Icon/icons/MenuDots.tsx
@@ -5,13 +5,14 @@ import { colors } from '@/styles/colors';
 function MenuDots(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="4"
+      width="3"
       height="12"
       viewBox="0 0 4 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
       aria-label="메뉴 더보기"
+      transform="translate(0,-1)"
       {...props}
     >
       <path
diff --git a/src/components/Icon/icons/ToggleOff.tsx b/src/components/Icon/icons/ToggleOff.tsx
index 2ea5c5e2..b2638972 100644
--- a/src/components/Icon/icons/ToggleOff.tsx
+++ b/src/components/Icon/icons/ToggleOff.tsx
@@ -5,17 +5,17 @@ import { colors } from '@/styles/colors';
 function ToggleOff(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="42"
-      height="38"
-      viewBox="0 -4 42 38"
+      width={props.width ?? '32'}
+      height={props.height ?? '38'}
+      viewBox="0 -2 32 38"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
       aria-label="토글 스위치 꺼짐"
-      transform="translate(-2, 0)"
+      transform="translate(10, 1)"
     >
       <rect y="6" width="32" height="18" rx="9" fill={props.color || colors.field05} />
-      <g filter="url(#filter0_d_3107_24218)">
+      <g>
         <circle cx="9" cy="15" r="7" fill="white" />
       </g>
       <defs>
diff --git a/src/components/Icon/icons/ToggleOn.tsx b/src/components/Icon/icons/ToggleOn.tsx
index d15b6736..a99bc2b9 100644
--- a/src/components/Icon/icons/ToggleOn.tsx
+++ b/src/components/Icon/icons/ToggleOn.tsx
@@ -5,17 +5,17 @@ import { colors } from '@/styles/colors';
 function ToggleOn(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="42"
-      height="38"
-      viewBox="0 -4 42 38"
+      width={props.width ?? '32'}
+      height={props.height ?? '38'}
+      viewBox="0 -4 32 38"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
       aria-label="토글 스위치 켜짐"
-      transform="translate(0,3)"
+      transform="translate(4,3)"
     >
       <rect y="6" width="32" height="18" rx="9" fill={props.color || colors.primaryMint} />
-      <g filter="url(#filter0_d_3107_24227)">
+      <g>
         <circle cx="23" cy="15" r="7" fill="white" />
       </g>
       <defs>


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>src/app/upload/components/DatePickerForm/DatePickerForm.css.ts (1)</summary><blockquote>

`233-267`: **선택된 날짜에 대한 레이블 추가로 사용자 경험 향상**

날짜 선택 시 "하루 진행", "시작일", "종료일"과 같은 레이블을 추가하여 사용자에게 명확한 시각적 피드백을 제공하는 좋은 개선입니다. 레이블 스타일이 일관되게 적용되고 있습니다.

하나 제안하자면, 모바일 화면에서 레이블이 잘릴 수 있으므로 반응형 스타일을 고려해 보는 것이 좋을 것 같습니다.

</blockquote></details>
<details>
<summary>src/components/Icon/icons/ToggleOff.tsx (1)</summary><blockquote>

`18-19`: **불필요한 필터 제거 확인**

필터 속성이 제거되었지만 SVG의 defs 섹션에는 여전히 필터 정의가 남아있습니다. 필터를 사용하지 않는다면 관련 defs도 함께 제거하는 것이 좋을 것 같습니다.

```diff
-      <defs>
-        <filter
-          id="filter0_d_3107_24218"
-          x="0"
-          y="0"
-          width="38"
-          height="38"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="4" />
-          <feGaussianBlur stdDeviation="6" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.0627451 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 0.1 0"
-          />
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3107_24218" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_3107_24218"
-            result="shape"
-          />
-        </filter>
-      </defs>
```

</blockquote></details>
<details>
<summary>src/components/Icon/icons/ToggleOn.tsx (1)</summary><blockquote>

`18-18`: **그림자 효과 제거가 디자인 일관성에 도움이 됩니다.**

`<g>` 요소에서 드롭 섀도우 필터를 제거한 것은 ToggleOff 아이콘과의 일관성을 유지하고 디자인을 단순화하는 데 도움이 됩니다. 필터 정의는 여전히 SVG에 남아 있지만 더 이상 참조되지 않습니다.

아직 사용되지 않는 필터 정의(21-53줄)를 제거하여 코드를 간소화하는 것을 고려해보세요. 현재는 필터가 정의되어 있지만 더 이상 사용되지 않아 불필요한 코드로 남아 있습니다.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 267634e88ba49b954ef21de333fb2dd4ea18ad37 and 42f51bce1a7405ad65ad5aebedf94993f299b059.

</details>

<details>
<summary>📒 Files selected for processing (15)</summary>

* `src/app/my-posts/MyPostsPage.css.ts` (1 hunks)
* `src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx` (1 hunks)
* `src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts` (1 hunks)
* `src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx` (5 hunks)
* `src/app/my-posts/components/Pagination/Pagination.css.ts` (2 hunks)
* `src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts` (1 hunks)
* `src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx` (1 hunks)
* `src/app/upload/components/DatePickerForm/DatePickerForm.css.ts` (2 hunks)
* `src/app/upload/components/DatePickerForm/DatePickerForm.tsx` (1 hunks)
* `src/app/upload/components/DescriptionSection/DescriptionSection.tsx` (1 hunks)
* `src/app/upload/components/InputForm/InputForm.css.ts` (1 hunks)
* `src/app/upload/components/OutlineSection/OutlineSection.css.ts` (1 hunks)
* `src/components/Icon/icons/MenuDots.tsx` (1 hunks)
* `src/components/Icon/icons/ToggleOff.tsx` (1 hunks)
* `src/components/Icon/icons/ToggleOn.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (7)</summary>

<details>
<summary>src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx (1)</summary><blockquote>

<details>
<summary>src/components/Icon/index.tsx (1)</summary>

* `Icon` (21-53)

</details>

</blockquote></details>
<details>
<summary>src/app/upload/components/DescriptionSection/DescriptionSection.tsx (1)</summary><blockquote>

<details>
<summary>src/app/upload/components/DescriptionSection/DescriptionSection.css.ts (1)</summary>

* `formMessage` (161-166)

</details>

</blockquote></details>
<details>
<summary>src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx (3)</summary><blockquote>

<details>
<summary>src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts (3)</summary>

* `tableInfoRow` (58-60)
* `tableBody` (62-62)
* `tableRow` (64-64)

</details>
<details>
<summary>src/components/Icon/index.tsx (1)</summary>

* `Icon` (21-53)

</details>
<details>
<summary>src/app/my-posts/components/Table/Table.tsx (2)</summary>

* `TableBody` (62-62)
* `TableRow` (62-62)

</details>

</blockquote></details>
<details>
<summary>src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts (2)</summary><blockquote>

<details>
<summary>src/styles/fonts.css.ts (1)</summary>

* `fonts` (1-174)

</details>
<details>
<summary>src/app/my-posts/components/Table/Table.css.ts (2)</summary>

* `tableBody` (23-23)
* `tableRow` (25-28)

</details>

</blockquote></details>
<details>
<summary>src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx (3)</summary><blockquote>

<details>
<summary>src/app/my-posts/components/MyPostsContainer/MyPostsContainer.css.ts (2)</summary>

* `myPostsHeaderText` (15-19)
* `postsSorting` (21-28)

</details>
<details>
<summary>src/components/Icon/index.tsx (1)</summary>

* `Icon` (21-53)

</details>
<details>
<summary>src/styles/colors.ts (1)</summary>

* `colors` (1-46)

</details>

</blockquote></details>
<details>
<summary>src/components/Icon/icons/ToggleOff.tsx (1)</summary><blockquote>

<details>
<summary>src/styles/colors.ts (1)</summary>

* `colors` (1-46)

</details>

</blockquote></details>
<details>
<summary>src/components/Icon/icons/ToggleOn.tsx (1)</summary><blockquote>

<details>
<summary>src/styles/colors.ts (1)</summary>

* `colors` (1-46)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (27)</summary><blockquote>

<details>
<summary>src/app/upload/components/DatePickerForm/DatePickerForm.css.ts (1)</summary>

`178-178`: **세로 정렬 추가로 디자인 개선**

weekday 헤더의 세로 정렬을 추가하여 UI 일관성을 개선했습니다. 캘린더 헤더의 텍스트가 중앙에 위치하게 됩니다.

</details>
<details>
<summary>src/app/upload/components/DatePickerForm/DatePickerForm.tsx (1)</summary>

`173-197`: **날짜 선택 시각적 구분 기능 추가**

`modifiers`와 `modifiersClassNames` 속성을 사용하여 선택된 날짜에 따라 다른 시각적 피드백을 제공하는 개선 사항입니다. 단일 날짜, 시작일, 종료일에 대한 명확한 구분이 가능해졌습니다.

코드 로직이 깔끔하게 구현되었으며, CSS 클래스와 잘 연동됩니다. 날짜 선택 사용성이 크게 향상될 것으로 보입니다.

</details>
<details>
<summary>src/app/upload/components/OutlineSection/OutlineSection.css.ts (1)</summary>

`81-81`: **반응형 디자인 개선 확인**

픽셀 단위 패딩에서 rem 단위로 변경한 것은 반응형 디자인 측면에서 좋은 변화입니다. 사용자의 기본 폰트 크기 설정에 더 잘 적응하고 다양한 화면 크기에서 더 일관된 비율을 유지할 수 있습니다.

</details>
<details>
<summary>src/components/Icon/icons/ToggleOff.tsx (1)</summary>

`8-10`: **아이콘 동적 크기 조정 및 위치 개선**

동적 크기 조정을 지원하도록 수정된 것이 좋습니다. props로 크기를 받을 수 있게 되어 재사용성이 향상되었습니다. viewBox와 transform 속성이 변경되어 아이콘의 위치와 크기가 적절하게 조정되었습니다.



Also applies to: 15-15

</details>
<details>
<summary>src/app/my-posts/MyPostsPage.css.ts (1)</summary>

`9-9`: **여백 개선으로 가독성 향상**

하단 패딩을 2.6rem에서 5.6rem으로 증가시켜 컨테이너 하단의 여백이 더 넓어졌습니다. 이로 인해 페이지의 시각적 균형이 개선되고 콘텐츠가 더 잘 분리되어 가독성이 향상되었습니다.

</details>
<details>
<summary>src/app/upload/components/DescriptionSection/DescriptionSection.tsx (1)</summary>

`213-213`: **오류 메시지 위치 조정 확인**

오류 메시지의 상단 여백을 -1.2rem에서 -0.2rem으로 조정하여 메시지가 컨텐츠와 적절한 간격을 유지하도록 개선되었습니다. 이러한 미세 조정은 사용자 경험 향상에 중요합니다.

</details>
<details>
<summary>src/app/my-posts/components/PostActionsPopover/PostActionsPopover.tsx (1)</summary>

`69-69`: **아이콘 크기 조정이 올바르게 적용되었습니다.**

MenuDots 아이콘의 크기를 20x20px에서 12x12px로 줄여 디자인 가이드라인에 맞게 조정하였습니다. 이는 MenuDots.tsx의 SVG 크기 변경과 일치하며 UI 일관성 향상에 기여합니다.

</details>
<details>
<summary>src/app/upload/components/InputForm/InputForm.css.ts (1)</summary>

`64-64`: **마진 조정으로 간격이 개선되었습니다.**

withCounter 스타일에 marginBottom: '0.8rem' 속성을 추가하여 요소 사이의 수직 간격을 개선했습니다. 이러한 미세한 조정은 디자인 QA 요구사항에 맞게 UI의 가독성과 일관성을 향상시킵니다.

</details>
<details>
<summary>src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts (1)</summary>

`9-10`: **팝오버 컨테이너 크기 조정이 적절합니다.**

팝오버 컨테이너의 높이를 2rem에서 1.6rem으로 줄이고, verticalAlign 속성 대신 명확한 width: '1.6rem'을 적용하여 레이아웃을 개선했습니다. 이 변경은 PostActionsPopover.tsx에서 MenuDots 아이콘 크기를 12x12px로 조정한 것과 일관성이 있습니다.

</details>
<details>
<summary>src/components/Icon/icons/MenuDots.tsx (1)</summary>

`8-8`: **SVG 아이콘 비율과 위치가 개선되었습니다.**

MenuDots 아이콘의 너비를 4에서 3으로 줄이고 transform="translate(0,-1)" 속성을 추가하여 아이콘을 위로 1단위 이동시켰습니다. 이러한 조정은 디자인 QA 피드백을 반영하여 아이콘의 시각적 균형과 정렬을 개선합니다.



Also applies to: 15-15

</details>
<details>
<summary>src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx (1)</summary>

`36-52`: **에러 상태에 따른 헤더 표시를 개선했습니다!**

API 응답에 오류가 없을 때만 헤더 부분을 표시하도록 하는 조건부 렌더링을 적용한 것이 좋습니다. 이 방식으로 오류 발생 시 사용자에게 불필요한 헤더 정보를 보여주지 않게 되었습니다.

</details>
<details>
<summary>src/app/my-posts/components/Pagination/Pagination.css.ts (2)</summary>

`19-20`: **페이지네이션 콘텐츠 정렬 개선**

중앙 정렬과 여백을 늘려 페이지네이션의 가독성이 향상되었습니다.

---

`30-38`: **페이지 링크 스타일 개선**

고정된 크기와 플렉스 레이아웃을 적용하여 페이지 링크의 정렬과 일관성이 향상되었습니다. 테두리 반경도 증가시켜 더 현대적인 모양으로 개선되었습니다.

</details>
<details>
<summary>src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx (8)</summary>

`27-29`: **새로운 테이블 스타일 클래스 추가**

테이블의 스타일링을 위한 클래스를 추가하여 코드 유지보수성이 향상되었습니다.

---

`140-140`: **게시 날짜 셀에 일관된 스타일 적용**

게시 날짜 셀에 `tableInfoRow` 클래스를 적용하여 일관된 폰트 스타일을 유지하도록 개선했습니다.

---

`146-146`: **조회수 셀에 일관된 스타일 적용**

조회수 셀에 `tableInfoRow` At once, I'll translate this to Korean:

**쟁점 수 셀에 일관된 스타일 적용**

조회수 셀에 `tableInfoRow` 클래스를 적용하여 일관된 폰트 스타일을 유지하도록 개선했습니다.

---

`165-165`: **비활성화된 토글에 적절한 커서 스타일 적용**

비활성화된 토글 아이콘에 `cursor="notAllowed"`를 추가하여 사용자에게 상호작용 불가능함을 시각적으로 알려주는 UI 개선이 이루어졌습니다.

---

`238-238`: **테이블 헤더 정렬 로직 개선**

제목 컬럼만 왼쪽 정렬하도록 정렬 로직을 단순화하여 코드 가독성이 향상되었습니다.

---

`254-254`: **테이블 본문에 스타일 클래스 적용**

테이블 본문에 `tableBody` 클래스를 적용하여 전역 스타일을 통한 일관된 여백 관리가 가능해졌습니다.

---

`258-258`: **테이블 행에 스타일 클래스 적용**

테이블 행에 `tableRow` 클래스를 적용하여 행 단위의 스타일 조정이 용이해졌습니다.

---

`260-260`: **테이블 셀 정렬 로직 개선**

테이블 셀에서도 제목 컬럼만 왼쪽 정렬하도록 정렬 로직을 단순화하여 일관성이 향상되었습니다.

</details>
<details>
<summary>src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts (3)</summary>

`58-60`: **테이블 정보 행을 위한 스타일 정의**

정보 행에 일관된 폰트 스타일(`fonts.body.normal.R16`)을 적용하여 가독성을 높였습니다.

---

`62-64`: **테이블 구조를 위한 스타일 정의**

테이블의 본문과 행을 위한 스타일 클래스를 추가하여 전역 스타일 적용을 위한 선택자로 활용할 수 있게 되었습니다.

---

`66-77`: **테이블 셀 여백 조정을 위한 전역 스타일 적용**

테이블 셀에 여백을 일관되게 적용하고, 첫 번째와 마지막 행에는 패딩을 제거하여 시각적 균형을 맞추는 디자인 개선이 이루어졌습니다.

</details>
<details>
<summary>src/components/Icon/icons/ToggleOn.tsx (3)</summary>

`8-9`: **동적 크기 조정 기능 추가에 대한 적절한 조치입니다.**

props를 통해 width와 height를 동적으로 설정할 수 있도록 변경한 것은 아이콘의 재사용성과 유연성을 높이는 좋은 개선사항입니다. 기본값을 '32'와 '38'로 설정하여 props가 제공되지 않을 때도 일관된 크기를 유지할 수 있습니다.

---

`10-10`: **viewBox 속성 변경이 적절합니다.**

viewBox 너비를 42에서 32로 줄여 기본 width 값과 일치시킨 것은 SVG 렌더링의 일관성을 유지하는 데 도움이 됩니다.

---

`15-15`: **transform 속성 조정이 시각적 균형을 개선합니다.**

transform 속성을 "translate(4,3)"으로 변경하여 SVG를 오른쪽으로 4단위 이동시킨 것은 아이콘의 시각적 위치 조정에 도움이 됩니다. 이는 PR 목표에 맞게 디자인 QA 개선을 반영한 변경입니다.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-27T14:45:13Z
user: login: rbgksqkr
body: 굿굿 다 디자인 관련 코드라서 빠르게 approve하겠습니당 고생하셨습니당 🔥🔥🔥
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-27T14:47:18Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 42f51bce1a7405ad65ad5aebedf94993f299b059 and 4c90ef8dccf911f828ece256683bba33fd7f1859.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx` (2 hunks)
* `src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx` (1 hunks)
* `src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx (3)</summary><blockquote>

<details>
<summary>src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts (3)</summary>

* `myPostsHeaderContainer` (6-11)
* `myPostsHeaderText` (13-17)
* `postsSorting` (19-26)

</details>
<details>
<summary>src/components/Icon/index.tsx (1)</summary>

* `Icon` (21-53)

</details>
<details>
<summary>src/styles/colors.ts (1)</summary>

* `colors` (1-46)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (4)</summary><blockquote>

<details>
<summary>src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx (4)</summary>

`1-5`: **모듈 임포트가 잘 구조화되어 있습니다.**

스타일과 컴포넌트 임포트가 명확하게 구분되어 있어 코드의 가독성이 좋습니다. 스타일을 별도 파일로 분리한 점이 유지보수성을 높여줍니다.

---

`6-11`: **인터페이스 정의가 명확합니다.**

Props 인터페이스가 잘 정의되어 있으며, 각 Props의 타입이 명확하게 지정되어 있습니다. 타입스크립트의 장점을 잘 활용하고 있습니다.

---

`13-15`: **에러 상태 처리가 적절합니다.**

에러 상태일 때 헤더 영역을 렌더링하지 않는 조건부 렌더링 로직이 간결하게 구현되어 있습니다.

---

`32-36`: **컴포넌트 구조가 깔끔합니다.**

컴포넌트의 전체적인 구조가 직관적이고 간결하게 구현되어 있습니다. 복잡한 로직 없이 UI 렌더링에 집중된 컴포넌트로 만들어졌습니다.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-27T15:05:57Z

Review comments:
diff_hunk: @@ -33,18 +33,22 @@ const MyPostsContainer = () => {
   return (
     <div className={myPostContainerLayout}>
       <div className={myPostsHeaderContainer}>
-        <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
-        {myPostAPIResponse.data?.content && myPostAPIResponse.data.content.length > 0 && (
-          <div className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer' }}>
-            <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
-            <Icon
-              icon="ArrowSorting"
-              width={20}
-              height={20}
-              color={colors.icon04}
-              rotate={order === 'DESC' ? 0 : 180}
-            />
-          </div>
+        {!myPostAPIResponse.isError && (
+          <>
+            <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
+            {myPostAPIResponse.data?.content && myPostAPIResponse.data.content.length > 0 && (
path: src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx
user: login: rbgksqkr
body: # 🙏 제안 🙏
<!-- ex) 이렇게 바꿔보는 건 어떨까요? 이렇게 해보는 것도 좋은 것 같아요! -->
분기처리 변수 분리해도 괜찮을 것 같아요!
created_at: 2025-04-27T14:45:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { myPostsHeaderContainer, myPostsHeaderText, postsSorting } from './MyPostsHeader.css';
+
+import Icon from '@/components/Icon';
+import { colors } from '@/styles/colors';
+
+interface MyPostsHeaderProps {
+  isError: boolean;
+  hasPosts: boolean;
+  order: 'DESC' | 'ASC';
+  toggleOrder: () => void;
+}
+
+const MyPostsHeader = ({ isError, hasPosts, order, toggleOrder }: MyPostsHeaderProps) => {
+  if (isError) return null;
+
+  return (
+    <div className={myPostsHeaderContainer}>
+      <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
+      {hasPosts && (
+        <div className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer' }}>
+          <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
+          <Icon
+            icon="ArrowSorting"
+            width={20}
+            height={20}
+            color={colors.icon04}
+            rotate={order === 'DESC' ? 0 : 180}
+          />
+        </div>
+      )}
+    </div>
path: src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**접근성 개선을 위한 변경이 필요합니다.**

정렬 기능을 위해 div 요소에 onClick 이벤트를 사용하고 있는데, 이는 접근성 측면에서 좋지 않습니다. 키보드 네비게이션이나 스크린 리더 사용자를 위해 button 요소를 사용하는 것이 더 적절합니다.


```diff
-        <div className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer' }}>
+        <button className={postsSorting} onClick={toggleOrder} style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}>
           <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
           <Icon
             icon="ArrowSorting"
             width={20}
             height={20}
             color={colors.icon04}
             rotate={order === 'DESC' ? 0 : 180}
           />
-        </div>
+        </button>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  return (
    <div className={myPostsHeaderContainer}>
      <h2 className={myPostsHeaderText}>내가 작성한 글</h2>
      {hasPosts && (
        <button
          className={postsSorting}
          onClick={toggleOrder}
          style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
        >
          <p>{order === 'DESC' ? '최신순' : '오래된 순'}</p>
          <Icon
            icon="ArrowSorting"
            width={20}
            height={20}
            color={colors.icon04}
            rotate={order === 'DESC' ? 0 : 180}
          />
        </button>
      )}
    </div>
  )
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-27T15:05:57Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-04-27T14:42:55Z
body: [vc]: #Kl5JYyxa5fkkU+o85fPLTcWxZwtv3+ETiNblNfSEZdU=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiIyNXRoLXdlYi10ZWFtLTItZmUiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiMjV0aC13ZWItdGVhbS0yLWZlLWdpdC1mZWF0LXlzLTM3NC1yYmdrc3FrcnMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmJna3Nxa3JzLXByb2plY3RzLzI1dGgtd2ViLXRlYW0tMi1mZS80cXFmcUJRQURnNm43WUFCc0NkZXZ3UlhjcWJpIiwicHJldmlld1VybCI6IjI1dGgtd2ViLXRlYW0tMi1mZS1naXQtZmVhdC15cy0zNzQtcmJna3Nxa3JzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJyb290RGlyZWN0b3J5IjpudWxsfV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **25th-web-team-2-fe** | ✅ Ready ([Inspect](https://vercel.com/rbgksqkrs-projects/25th-web-team-2-fe/4qqfqBQADg6n7YABsCdevwRXcqbi)) | [Visit Preview](https://25th-web-team-2-fe-git-feat-ys-374-rbgksqkrs-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/25th-web-team-2-fe-git-feat-ys-374-rbgksqkrs-projects.vercel.app?via=pr-comment-feedback-link) | Apr 27, 2025 3:04pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-27T14:42:57Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

```markdown
## Walkthrough

이번 변경 사항은 '내가 작성한 글', '공고 등록 및 수정', 그리고 날짜 선택기 등 여러 UI 컴포넌트의 디자인 QA 피드백을 반영하여 스타일을 세밀하게 조정하였습니다. 테이블, 버튼, 아이콘, 날짜 선택기 등 다양한 컴포넌트의 CSS가 업데이트되었고, 일부 컴포넌트에서는 조건부 렌더링 및 시각적 강조를 위한 클래스명 추가와 아이콘 크기·정렬 변경이 이루어졌습니다. 전반적으로 UI의 일관성과 가독성을 높이기 위한 세부 디자인 수정이 주를 이룹니다.

## Changes

| 파일/경로 그룹                                                                 | 변경 요약                                                                                                    |
|-------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
| src/app/my-posts/MyPostsPage.css.ts                                           | 레이아웃 컨테이너의 padding-bottom 값을 2.6rem에서 5.6rem으로 증가                                            |
| src/app/my-posts/components/MyPostsContainer/MyPostsContainer.tsx              | 헤더 렌더링을 인라인에서 `MyPostsHeader` 컴포넌트로 분리 및 에러 시 헤더 미노출 처리                            |
| src/app/my-posts/components/MyPostsHeader/MyPostHeader.tsx<br>src/app/my-posts/components/MyPostsHeader/MyPostsHeader.css.ts | `MyPostsHeader` 컴포넌트 신규 추가 및 관련 CSS 스타일 정의                                                   |
| src/app/my-posts/components/MyPostsTable/MyPostsTable.css.ts<br>src/app/my-posts/components/MyPostsTable/MyPostsTable.tsx | 테이블 행 및 셀에 클래스명 추가, 스타일링 조정, 커서 스타일 변경, 정렬 조건 단순화                             |
| src/app/my-posts/components/Pagination/Pagination.css.ts                      | 페이지네이션 정렬, 간격, 버튼 크기 및 정렬 스타일 조정                                                      |
| src/app/my-posts/components/PostActionsPopover/PostActionsPopover.css.ts<br>src/app/my-posts/components/PostActionsPopover.tsx | 팝오버 컨테이너 높이 축소, 아이콘 크기 축소, TODO 주석 제거                                                  |
| src/app/upload/components/DatePickerForm/DatePickerForm.css.ts<br>src/app/upload/components/DatePickerForm/DatePickerForm.tsx | 선택된 날짜에 라벨(하루 진행/시작일/종료일) 표시를 위한 스타일 및 `DayPicker` 수정                            |
| src/app/upload/components/DescriptionSection/DescriptionSection.tsx            | 에러 메시지 margin-top 값 조정                                                                               |
| src/app/upload/components/InputForm/InputForm.css.ts                          | 글자 수 카운터 하단 여백(marginBottom) 추가                                                                  |
| src/app/upload/components/OutlineSection/OutlineSection.css.ts                | 비활성 input 패딩 px → rem 단위로 변경                                                                       |
| src/components/Icon/icons/MenuDots.tsx                                        | 메뉴 점 아이콘 크기 축소, 수직 위치 조정                                                                     |
| src/components/Icon/icons/ToggleOff.tsx<br>src/components/Icon/icons/ToggleOn.tsx | 토글 아이콘 크기 동적 처리, 뷰박스 및 위치 조정, 그림자 효과 제거                                             |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant MyPostsContainer
    participant API

    User->>MyPostsContainer: 페이지 진입
    MyPostsContainer->>API: 내 글 목록 요청
    API-->>MyPostsContainer: 응답(성공/에러)
    alt 에러 없음
        MyPostsContainer->>User: 헤더 및 정렬 UI, 테이블 렌더링
    else 에러 발생
        MyPostsContainer->>User: 에러 UI만 노출(헤더 미노출)
    end
```

```mermaid
sequenceDiagram
    participant User
    participant DatePickerForm

    User->>DatePickerForm: 날짜 선택
    DatePickerForm->>DatePickerForm: 선택 범위 분석(single/start/end)
    DatePickerForm->>User: 각 날짜에 맞는 라벨(하루 진행/시작일/종료일) 시각화
```

## Assessment against linked issues

| Objective                                                                 | Addressed | Explanation                                      |
|---------------------------------------------------------------------------|-----------|--------------------------------------------------|
| 밀린 디자인 화면 반영, QA 수정, 내가 작성한 글/No-content/공고 등록 및 수정 디자인 QA (#79) | ✅         |                                                  |

## Possibly related PRs

- #47: `MyPostsContainer` 및 `MyPostsTable` 컴포넌트의 초기 구현 및 스타일 추가 PR로, 이번 PR의 세부 디자인 수정과 직접적으로 연관됨.
- #57: `MyPostsTable` 내 게시글 상태 변경 및 삭제 기능 구현 PR로, 본 PR과는 UI 컴포넌트 및 스타일링 측면에서 관련됨.

## Suggested labels

`fix`

## Poem

> 🐰  
> 디자인을 다듬고 또 다듬었죠,  
> 토글도, 달력도, 테이블도 반짝!  
> 버튼이 둥글고, 글씨는 또렷,  
> QA 토끼가 춤을 춰요,  
> 오늘도 UI는 한층 더 예뻐졌답니다.  
> ✨
```

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=YAPP-Github/25th-Web-Team-2-FE&utm_content=123):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE