From d8cd04bfb2e287f109f55e07235d8cc77a4658d1 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 16:42:08 +0900
Subject: [PATCH 01/16] test commit

---
 src/components/calendar/calendar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index a5860db52..311438201 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -225,6 +225,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         .getDate()
         .toString()}`;
 
+        console.log(bottomValue);
       bottomValues.push(
         <text
           key={date.getTime()}

From 1ab30168b36153d3c78a4e6a06cf44c0827729cb Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 16:54:01 +0900
Subject: [PATCH 02/16] =?UTF-8?q?=ED=95=9C=EA=B5=AD=EC=8B=9D=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=20=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/calendar/calendar.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 311438201..6f6db99f7 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -176,10 +176,10 @@ export const Calendar: React.FC<CalendarProps> = ({
       let topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         // top
-        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
+        topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
       }
       // bottom
-      const bottomValue = `W${getWeekNumberISO8601(date)}`;
+      const bottomValue = `${getWeekNumberISO8601(date)}주`;
 
       bottomValues.push(
         <text
@@ -221,11 +221,10 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
+      const bottomValue = `${date
         .getDate()
-        .toString()}`;
+        .toString()}일 (${getLocalDayOfWeek(date, locale, "short")})`;
 
-        console.log(bottomValue);
       bottomValues.push(
         <text
           key={date.getTime()}
@@ -287,11 +286,11 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${getLocalDayOfWeek(
+        const topValue = `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
           date,
           locale,
           "short"
-        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        )})`;
         topValues.push(
           <TopPartOfCalendar
             key={topValue + date.getFullYear()}
@@ -333,11 +332,11 @@ export const Calendar: React.FC<CalendarProps> = ({
       );
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         const displayDate = dates[i - 1];
-        const topValue = `${getLocalDayOfWeek(
+        const topValue = `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
           displayDate,
           locale,
           "long"
-        )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
+        )})`;
         const topPosition = (date.getHours() - 24) / 2;
         topValues.push(
           <TopPartOfCalendar

From 4daaec9baca93490ffaec0d190e8c4cd0be3cf78 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 17:15:41 +0900
Subject: [PATCH 03/16] add condition 'ko' The Korean way of expressing dates
 is very different from English.

---
 src/components/calendar/calendar.tsx | 30 ++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 6f6db99f7..b842a0737 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -176,7 +176,12 @@ export const Calendar: React.FC<CalendarProps> = ({
       let topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         // top
-        topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
+        if(locale.includes('ko')) {
+          topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
+        }
+        else{
+          topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
+        }
       }
       // bottom
       const bottomValue = `${getWeekNumberISO8601(date)}주`;
@@ -221,9 +226,10 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = `${date
-        .getDate()
-        .toString()}일 (${getLocalDayOfWeek(date, locale, "short")})`;
+      const bottomValue = locale.includes('ko') ? `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}` 
+        : 
+       `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
+      
 
       bottomValues.push(
         <text
@@ -286,11 +292,15 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
+        const topValue = locale.includes('ko') ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
+          date,
+          locale,
+          "short"
+        )})` :  `${getLocalDayOfWeek(
           date,
           locale,
           "short"
-        )})`;
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(
           <TopPartOfCalendar
             key={topValue + date.getFullYear()}
@@ -332,11 +342,15 @@ export const Calendar: React.FC<CalendarProps> = ({
       );
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         const displayDate = dates[i - 1];
-        const topValue = `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
+        const topValue = locale.includes('ko') ? `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
           displayDate,
           locale,
           "long"
-        )})`;
+        )})` : `${getLocalDayOfWeek(
+          date,
+          locale,
+          "long"
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         const topPosition = (date.getHours() - 24) / 2;
         topValues.push(
           <TopPartOfCalendar

From 80a2217ab3fa5d46d1b0b343a822a2b90e9fa6ad Mon Sep 17 00:00:00 2001
From: Oh Shin Yeop <46528849+ohshinyeop@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:17:10 +0900
Subject: [PATCH 04/16] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9191d87ba..661236023 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# gantt-task-react
+# gantt-task-react (한국식 날짜 표기 적용)
 
 ## Interactive Gantt Chart for React with TypeScript.
 

From 696da59fe357bdfaa466a7340f180cd756da9339 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 17:26:00 +0900
Subject: [PATCH 05/16] add condition 'ko' The Korean way of expressing dates
 is very different from English.

---
 src/components/calendar/calendar.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index b842a0737..3a377fef8 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -32,6 +32,7 @@ export const Calendar: React.FC<CalendarProps> = ({
   fontFamily,
   fontSize,
 }) => {
+  console.log("locale", locale);
   const getCalendarValuesForYear = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
@@ -176,7 +177,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       let topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         // top
-        if(locale.includes('ko')) {
+        if(locale === 'kor') {
           topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
         }
         else{
@@ -226,7 +227,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = locale.includes('ko') ? `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}` 
+      const bottomValue = locale === 'kor' ? `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}` 
         : 
        `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
       
@@ -292,7 +293,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = locale.includes('ko') ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
+        const topValue = locale === 'kor' ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
           date,
           locale,
           "short"
@@ -342,7 +343,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       );
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         const displayDate = dates[i - 1];
-        const topValue = locale.includes('ko') ? `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
+        const topValue = locale === 'kor' ? `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
           displayDate,
           locale,
           "long"

From 7a37466790c7635d5bbc05a106907018babac220 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 17:56:17 +0900
Subject: [PATCH 06/16] fix missing week

---
 src/components/calendar/calendar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 3a377fef8..e8caee676 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -32,7 +32,6 @@ export const Calendar: React.FC<CalendarProps> = ({
   fontFamily,
   fontSize,
 }) => {
-  console.log("locale", locale);
   const getCalendarValuesForYear = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
@@ -185,7 +184,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         }
       }
       // bottom
-      const bottomValue = `${getWeekNumberISO8601(date)}주`;
+      const bottomValue = locale === 'kor' ? `${getWeekNumberISO8601(date)}주` : `W${getWeekNumberISO8601(date)}`;
 
       bottomValues.push(
         <text

From 69a72654715a32a2f1923caa653c38ef219db33a Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 5 Jul 2024 18:02:24 +0900
Subject: [PATCH 07/16] fix getCalendarValuesForDay

---
 src/components/calendar/calendar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index e8caee676..b1b0fbc01 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -226,7 +226,11 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = locale === 'kor' ? `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}` 
+      const bottomValue = locale === 'kor' ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
+          date,
+          locale,
+          "short"
+        )})` 
         : 
        `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
       

From e23b2723658e199e787fddf5fc0714f5f0f38012 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Thu, 11 Jul 2024 14:48:48 +0900
Subject: [PATCH 08/16] disable scrollbar css

---
 src/components/other/horizontal-scroll.module.css | 13 ++++---------
 src/components/other/vertical-scroll.module.css   |  4 ++--
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css
index dcf787e52..56c72b355 100644
--- a/src/components/other/horizontal-scroll.module.css
+++ b/src/components/other/horizontal-scroll.module.css
@@ -6,9 +6,9 @@
   /*iPad*/
   height: 1.2rem;
 }
-.scrollWrapper::-webkit-scrollbar {
-  width: 1.1rem;
-  height: 1.1rem;
+/* .scrollWrapper::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
 }
 .scrollWrapper::-webkit-scrollbar-corner {
   background: transparent;
@@ -25,9 +25,4 @@
   background: rgba(0, 0, 0, 0.3);
   background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
   background-clip: padding-box;
-}
-@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
-}
-.scroll {
-  height: 1px;
-}
+} */
diff --git a/src/components/other/vertical-scroll.module.css b/src/components/other/vertical-scroll.module.css
index da55a2e2e..33f0bf5ab 100644
--- a/src/components/other/vertical-scroll.module.css
+++ b/src/components/other/vertical-scroll.module.css
@@ -5,7 +5,7 @@
   /*firefox*/
   scrollbar-width: thin;
 }
-.scroll::-webkit-scrollbar {
+/* .scroll::-webkit-scrollbar {
   width: 1.1rem;
   height: 1.1rem;
 }
@@ -24,4 +24,4 @@
   background: rgba(0, 0, 0, 0.3);
   background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
   background-clip: padding-box;
-}
+} */

From 45e42869d27d5365838e56a8ce7082a427044ffb Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Thu, 18 Jul 2024 18:20:46 +0900
Subject: [PATCH 09/16] commit

---
 package-lock.json                             |   4 +-
 src/components/calendar/calendar.tsx          | 237 ++++++++++++------
 .../other/horizontal-scroll.module.css        |  23 --
 .../other/vertical-scroll.module.css          |  22 --
 4 files changed, 159 insertions(+), 127 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aeca7dc81..46dbdfe5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "gantt-task-react",
-      "version": "0.3.8",
+      "version": "0.3.9",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.4",
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index b1b0fbc01..aa1ff1f6d 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -40,14 +40,24 @@ export const Calendar: React.FC<CalendarProps> = ({
       const date = dateSetup.dates[i];
       const bottomValue = date.getFullYear();
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * i + columnWidth * 0.5}
-          className={styles.calendarBottomText}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
       if (
         i === 0 ||
@@ -129,14 +139,24 @@ export const Calendar: React.FC<CalendarProps> = ({
       const date = dateSetup.dates[i];
       const bottomValue = getLocaleMonth(date, locale);
       bottomValues.push(
-        <text
-          key={bottomValue + date.getFullYear()}
-          y={headerHeight * 0.8}
-          x={columnWidth * i + columnWidth * 0.5}
-          className={styles.calendarBottomText}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
       if (
         i === 0 ||
@@ -176,25 +196,37 @@ export const Calendar: React.FC<CalendarProps> = ({
       let topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         // top
-        if(locale === 'kor') {
+        if (locale === "kor") {
           topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
-        }
-        else{
+        } else {
           topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
         }
       }
       // bottom
-      const bottomValue = locale === 'kor' ? `${getWeekNumberISO8601(date)}주` : `W${getWeekNumberISO8601(date)}`;
+      const bottomValue =
+        locale === "kor"
+          ? `${getWeekNumberISO8601(date)}주`
+          : `W${getWeekNumberISO8601(date)}`;
 
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * (i + +rtl)}
-          className={styles.calendarBottomText}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
 
       if (topValue) {
@@ -226,24 +258,39 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = locale === 'kor' ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
-          date,
-          locale,
-          "short"
-        )})` 
-        : 
-       `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
-      
+      const bottomValue =
+        locale === "kor"
+          ? `${getLocaleMonth(
+              date,
+              locale
+            )} ${date.getDate()}일 (${getLocalDayOfWeek(
+              date,
+              locale,
+              "short"
+            )})`
+          : `${getLocalDayOfWeek(date, locale, "short")}, ${date
+              .getDate()
+              .toString()}`;
 
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * i + columnWidth * 0.5}
-          className={styles.calendarBottomText}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
       if (
         i + 1 !== dates.length &&
@@ -285,26 +332,41 @@ export const Calendar: React.FC<CalendarProps> = ({
       }).format(date);
 
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * (i + +rtl)}
-          className={styles.calendarBottomText}
-          fontFamily={fontFamily}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = locale === 'kor' ? `${getLocaleMonth(date, locale)} ${date.getDate()}일 (${getLocalDayOfWeek(
-          date,
-          locale,
-          "short"
-        )})` :  `${getLocalDayOfWeek(
-          date,
-          locale,
-          "short"
-        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topValue =
+          locale === "kor"
+            ? `${getLocaleMonth(
+                date,
+                locale
+              )} ${date.getDate()}일 (${getLocalDayOfWeek(
+                date,
+                locale,
+                "short"
+              )})`
+            : `${getLocalDayOfWeek(
+                date,
+                locale,
+                "short"
+              )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(
           <TopPartOfCalendar
             key={topValue + date.getFullYear()}
@@ -334,27 +396,42 @@ export const Calendar: React.FC<CalendarProps> = ({
       }).format(date);
 
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * (i + +rtl)}
-          className={styles.calendarBottomText}
-          fontFamily={fontFamily}
-        >
-          {bottomValue}
-        </text>
+        <g key={date.getTime()}>
+          <line
+            x1={columnWidth * i}
+            y1={headerHeight * 0.6}
+            x2={columnWidth * i}
+            y2={headerHeight}
+            style={{ stroke: "black", strokeWidth: 1 }}
+          />
+          <text
+            y={headerHeight * 0.8}
+            x={columnWidth * i + columnWidth * 0.5}
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            className={styles.calendarBottomText}
+          >
+            {bottomValue}
+          </text>
+        </g>
       );
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         const displayDate = dates[i - 1];
-        const topValue = locale === 'kor' ? `${getLocaleMonth(displayDate, locale)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
-          displayDate,
-          locale,
-          "long"
-        )})` : `${getLocalDayOfWeek(
-          date,
-          locale,
-          "long"
-        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topValue =
+          locale === "kor"
+            ? `${getLocaleMonth(
+                displayDate,
+                locale
+              )} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
+                displayDate,
+                locale,
+                "long"
+              )})`
+            : `${getLocalDayOfWeek(
+                date,
+                locale,
+                "long"
+              )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         const topPosition = (date.getHours() - 24) / 2;
         topValues.push(
           <TopPartOfCalendar
diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css
index 56c72b355..1e831a5d4 100644
--- a/src/components/other/horizontal-scroll.module.css
+++ b/src/components/other/horizontal-scroll.module.css
@@ -1,28 +1,5 @@
 .scrollWrapper {
   overflow: auto;
   max-width: 100%;
-  /*firefox*/
-  scrollbar-width: thin;
-  /*iPad*/
   height: 1.2rem;
 }
-/* .scrollWrapper::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
-}
-.scrollWrapper::-webkit-scrollbar-corner {
-  background: transparent;
-}
-.scrollWrapper::-webkit-scrollbar-thumb {
-  border: 6px solid transparent;
-  background: rgba(0, 0, 0, 0.2);
-  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
-  border-radius: 10px;
-  background-clip: padding-box;
-}
-.scrollWrapper::-webkit-scrollbar-thumb:hover {
-  border: 4px solid transparent;
-  background: rgba(0, 0, 0, 0.3);
-  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
-  background-clip: padding-box;
-} */
diff --git a/src/components/other/vertical-scroll.module.css b/src/components/other/vertical-scroll.module.css
index 33f0bf5ab..3d9553798 100644
--- a/src/components/other/vertical-scroll.module.css
+++ b/src/components/other/vertical-scroll.module.css
@@ -2,26 +2,4 @@
   overflow: hidden auto;
   width: 1rem;
   flex-shrink: 0;
-  /*firefox*/
-  scrollbar-width: thin;
 }
-/* .scroll::-webkit-scrollbar {
-  width: 1.1rem;
-  height: 1.1rem;
-}
-.scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
-.scroll::-webkit-scrollbar-thumb {
-  border: 6px solid transparent;
-  background: rgba(0, 0, 0, 0.2);
-  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
-  border-radius: 10px;
-  background-clip: padding-box;
-}
-.scroll::-webkit-scrollbar-thumb:hover {
-  border: 4px solid transparent;
-  background: rgba(0, 0, 0, 0.3);
-  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
-  background-clip: padding-box;
-} */

From 6765ba9f9e62b5b01a77d95566a96418482a2ac6 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 19 Jul 2024 17:53:57 +0900
Subject: [PATCH 10/16] =?UTF-8?q?ViewMode=20week=EC=9D=BC=EB=95=8C=20?=
 =?UTF-8?q?=EC=97=B0=EB=8B=A8=EC=9C=84=20=EC=A3=BC=EA=B0=80=20=EC=95=84?=
 =?UTF-8?q?=EB=8B=8C=20=EC=9B=94=EB=8B=A8=EC=9C=84=20=EC=A3=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/calendar/calendar.tsx |  6 +++---
 src/helpers/date-helper.ts           | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index aa1ff1f6d..e36d3ee9e 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -6,7 +6,7 @@ import {
   getDaysInMonth,
   getLocalDayOfWeek,
   getLocaleMonth,
-  getWeekNumberISO8601,
+  getWeekOfMonth,
 } from "../../helpers/date-helper";
 import { DateSetup } from "../../types/date-setup";
 import styles from "./calendar.module.css";
@@ -205,8 +205,8 @@ export const Calendar: React.FC<CalendarProps> = ({
       // bottom
       const bottomValue =
         locale === "kor"
-          ? `${getWeekNumberISO8601(date)}주`
-          : `W${getWeekNumberISO8601(date)}`;
+          ? `${getLocaleMonth(date, locale)} ${getWeekOfMonth(date)}주`
+          : `W${getWeekOfMonth(date)}`;
 
       bottomValues.push(
         <g key={date.getTime()}>
diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts
index 1b2a0f5c4..3429d4d07 100644
--- a/src/helpers/date-helper.ts
+++ b/src/helpers/date-helper.ts
@@ -216,6 +216,30 @@ const getMonday = (date: Date) => {
   return new Date(date.setDate(diff));
 };
 
+export const getWeekOfMonth = (date: any) => {
+  // 주어진 날짜의 첫 번째 날을 가져옵니다.
+  const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+
+  // 주어진 날짜의 첫 번째 월요일을 가져옵니다.
+  const firstMonday: any = new Date(startOfMonth);
+  while (firstMonday.getDay() !== 1) {
+    firstMonday.setDate(firstMonday.getDate() + 1);
+  }
+
+  // 주어진 날짜와 첫 번째 월요일 사이의 일수를 계산합니다.
+  const diffDays = Math.ceil((date - firstMonday) / (24 * 60 * 60 * 1000));
+
+  // 주 수를 계산합니다. 주어진 날짜가 첫 번째 월요일 이전이면 1주차로 간주합니다.
+  const weekNumber = Math.ceil((diffDays + 1) / 7);
+
+  // 만약 주어진 날짜가 첫 번째 월요일보다 앞에 있다면 첫 번째 주로 간주합니다.
+  if (diffDays < 0) {
+    return 1;
+  }
+
+  return weekNumber;
+};
+
 export const getWeekNumberISO8601 = (date: Date) => {
   const tmpDate = new Date(date.valueOf());
   const dayNumber = (tmpDate.getDay() + 6) % 7;

From e2db6b7a83781718b808396badd7649e4c5f28ff Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Tue, 23 Jul 2024 17:34:57 +0900
Subject: [PATCH 11/16] tool tip display date

---
 src/components/other/tooltip.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/other/tooltip.tsx b/src/components/other/tooltip.tsx
index 7542a14eb..938a09076 100644
--- a/src/components/other/tooltip.tsx
+++ b/src/components/other/tooltip.tsx
@@ -123,13 +123,18 @@ export const StandardTooltipContent: React.FC<{
   };
   return (
     <div className={styles.tooltipDefaultContainer} style={style}>
-      <b style={{ fontSize: fontSize + 6 }}>{`${
-        task.name
-      }: ${task.start.getDate()}-${
-        task.start.getMonth() + 1
-      }-${task.start.getFullYear()} - ${task.end.getDate()}-${
-        task.end.getMonth() + 1
-      }-${task.end.getFullYear()}`}</b>
+      <b style={{ fontSize: fontSize + 6 }}>{`${task.name}`}</b>
+      <p></p>
+      <p
+        className={styles.tooltipDefaultContainerParagraph}
+        style={{ marginTop: 4 }}
+      >
+        {`date : ${task.start.getFullYear()}-${
+          task.start.getMonth() + 1
+        }-${task.start.getDate()} ~ ${task.end.getFullYear()}-${
+          task.end.getMonth() + 1
+        }-${task.end.getDate()}`}
+      </p>
       {task.end.getTime() - task.start.getTime() !== 0 && (
         <p className={styles.tooltipDefaultContainerParagraph}>{`Duration: ${~~(
           (task.end.getTime() - task.start.getTime()) /

From 3b720840a381c661f773d85c1d1331653d531eb9 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Thu, 29 Aug 2024 14:04:32 +0900
Subject: [PATCH 12/16] =?UTF-8?q?project=20=EC=82=BC=EA=B0=81=ED=98=95=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-item/project/project.tsx | 37 --------------------
 src/components/task-item/task-item.tsx       |  1 +
 2 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx
index 5a47ba90b..8793b2cbc 100644
--- a/src/components/task-item/project/project.tsx
+++ b/src/components/task-item/project/project.tsx
@@ -11,23 +11,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
     : task.styles.progressColor;
   const projectWith = task.x2 - task.x1;
 
-  const projectLeftTriangle = [
-    task.x1,
-    task.y + task.height / 2 - 1,
-    task.x1,
-    task.y + task.height,
-    task.x1 + 15,
-    task.y + task.height / 2 - 1,
-  ].join(",");
-  const projectRightTriangle = [
-    task.x2,
-    task.y + task.height / 2 - 1,
-    task.x2,
-    task.y + task.height,
-    task.x2 - 15,
-    task.y + task.height / 2 - 1,
-  ].join(",");
-
   return (
     <g tabIndex={0} className={styles.projectWrapper}>
       <rect
@@ -49,26 +32,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
         rx={task.barCornerRadius}
         fill={processColor}
       />
-      <rect
-        fill={barColor}
-        x={task.x1}
-        width={projectWith}
-        y={task.y}
-        height={task.height / 2}
-        rx={task.barCornerRadius}
-        ry={task.barCornerRadius}
-        className={styles.projectTop}
-      />
-      <polygon
-        className={styles.projectTop}
-        points={projectLeftTriangle}
-        fill={barColor}
-      />
-      <polygon
-        className={styles.projectTop}
-        points={projectRightTriangle}
-        fill={barColor}
-      />
     </g>
   );
 };
diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx
index cf0628498..7cd0f530f 100644
--- a/src/components/task-item/task-item.tsx
+++ b/src/components/task-item/task-item.tsx
@@ -117,6 +117,7 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
             : style.barLabel && style.barLabelOutside
         }
         ref={textRef}
+        fontSize={12}
       >
         {task.name}
       </text>

From 16a7fa639981684a2497c6a8e43ddc5425e4e60f Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 13 Sep 2024 11:06:48 +0900
Subject: [PATCH 13/16] =?UTF-8?q?Today=20=EC=A4=91=EC=95=99=20=ED=99=94?=
 =?UTF-8?q?=EC=82=B4=ED=91=9C=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid/grid-body.tsx | 66 +++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
index 18e6f2b00..8c36f0abd 100644
--- a/src/components/grid/grid-body.tsx
+++ b/src/components/grid/grid-body.tsx
@@ -88,13 +88,65 @@ export const GridBody: React.FC<GridBodyProps> = ({
         ).getTime() >= now.getTime())
     ) {
       today = (
-        <rect
-          x={tickX}
-          y={0}
-          width={columnWidth}
-          height={y}
-          fill={todayColor}
-        />
+        // <svg>
+        //   <rect
+        //     x={tickX}
+        //     y={0}
+        //     width={columnWidth}
+        //     height={y}
+        //     fill={todayColor}
+        //   />
+
+        //   <rect
+        //     x={tickX + columnWidth / 2}
+        //     y={0}
+        //     width={1}
+        //     height={y}
+        //     // points="50,10 90,100 70,100 70,290 30,290 30,100 10,100"
+        //     style={{
+        //       // "fill:lime;stroke:purple;stroke-width:5"
+        //       fill: "#fea362",
+        //       stroke: "#fea362",
+        //       strokeWidth: 1,
+        //     }}
+        //   />
+
+        // </svg>
+        <svg z={1000}>
+          {/* 사각형 (배경) */}
+          <rect
+            x={tickX}
+            y={0}
+            width={columnWidth}
+            height={y}
+            fill={todayColor}
+          />
+
+          {/* 중앙 세로선 */}
+          <rect
+            x={tickX + columnWidth / 2 - 0.5}
+            y={5}
+            width={1}
+            height={y - 5}
+            style={{
+              fill: "#fea362",
+              stroke: "#fea362",
+              strokeWidth: 1,
+            }}
+          />
+
+          {/* 세로로 긴 역삼각형 화살표 머리 */}
+          <polygon
+            points={`${tickX + columnWidth / 2 - 5},0  ${
+              tickX + columnWidth / 2 + 5
+            },0  ${tickX + columnWidth / 2},5    `}
+            style={{
+              fill: "#fea362",
+              stroke: "#fea362",
+              strokeWidth: 1,
+            }}
+          />
+        </svg>
       );
     }
     // rtl for today

From 28eb9fb0621a301ddc90d48acf56c4d821710032 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 13 Sep 2024 16:55:00 +0900
Subject: [PATCH 14/16] 0.0.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 46dbdfe5b..6386cf2ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.9",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "gantt-task-react",
-      "version": "0.3.9",
+      "version": "0.0.1",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.4",
diff --git a/package.json b/package.json
index a0097baa7..6bd38d1ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.9",
+  "version": "0.0.1",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

From 1a942a5522f43659673839ba0d41da76e456b0e5 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 13 Sep 2024 17:11:39 +0900
Subject: [PATCH 15/16] Readme

---
 README.md    | 22 +++++++++++++++-------
 package.json |  8 ++++----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 661236023..de9d00d77 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,15 @@
 ## Install
 
 ```
-npm install gantt-task-react
+npm install gantt-task-react-korea
+yarn add gantt-task-react-korea
+```
+
+## Updates
+
+```
+locale값에 kor을 사용하면 한국식 날짜 표기를 사용합니다.
+Today에 Jira 스타일 노란색 화살표를 추가했습니다!
 ```
 
 ## How to use it
@@ -84,13 +92,13 @@ npm start
 
 ### DisplayOption
 
-| Parameter Name | Type    | Description                                                                                                 |
-| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
+| Parameter Name | Type    | Description                                                                                                              |
+| :------------- | :------ | :----------------------------------------------------------------------------------------------------------------------- |
 | viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
-| viewDate       | date    | Specifies display date and time for display.                                                                |
-| preStepsCount  | number  | Specifies empty space before the fist task                                                                  |
-| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |
-| rtl            | boolean | Sets rtl mode.                                                                                              |
+| viewDate       | date    | Specifies display date and time for display.                                                                             |
+| preStepsCount  | number  | Specifies empty space before the fist task                                                                               |
+| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                                 |
+| rtl            | boolean | Sets rtl mode.                                                                                                           |
 
 ### StylingOption
 
diff --git a/package.json b/package.json
index 6bd38d1ad..7000421a0 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "gantt-task-react",
+  "name": "gantt-task-react-korea",
   "version": "0.0.1",
-  "description": "Interactive Gantt Chart for React with TypeScript.",
+  "description": "This is a package that clones MaTeMaTuK/gantt-task-react to support the korean format.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
-  "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",
+  "homepage": "https://github.com/ohshinyeop/gantt-task-react-korea",
   "license": "MIT",
-  "repository": "MaTeMaTuK/gantt-task-react",
+  "repository": "ohshinyeop/gantt-task-react-korea",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.tsx",

From 4971f4099ac3274c894f13752240cbfca5fd8645 Mon Sep 17 00:00:00 2001
From: wade <syoh@fadutec.com>
Date: Fri, 13 Sep 2024 17:11:48 +0900
Subject: [PATCH 16/16] 0.0.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6386cf2ff..cf1059504 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gantt-task-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "gantt-task-react",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.4",
diff --git a/package.json b/package.json
index 7000421a0..701c25640 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-korea",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "This is a package that clones MaTeMaTuK/gantt-task-react to support the korean format.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/ohshinyeop/gantt-task-react-korea",