From 2ff4d18bf7e1773d9fab9726671d88f1c5df6e5f Mon Sep 17 00:00:00 2001 From: sungun Date: Wed, 1 Oct 2025 23:43:16 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20Grid=20style=EC=9D=84=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=EC=9C=BC=EB=A1=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/profile/MyPage.tsx | 98 ++++++------------- .../profile/components/ActivityContent.tsx | 9 +- .../profile/components/HallOfFameSection.tsx | 4 +- 3 files changed, 42 insertions(+), 69 deletions(-) diff --git a/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx b/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx index 50048a5c..b36bd819 100644 --- a/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx @@ -6,73 +6,56 @@ import { css } from "@styled-system/css"; export function MyPage() { return ( -
-
-
-
-
- -
- - +
+
+
+ +
-
- -
+ - +
+ +
-
- -
-
+ -
-
- -
-
+
+
-
+ + +
+ +
); } -// Page Layout Styles -const pageContainer = css({ - minHeight: "100vh", - backgroundColor: "white" -}); - -const contentWrapper = css({ - maxWidth: "1440px", - margin: "0 auto", - paddingX: { base: 0, lg: "2rem" } -}); - -const mainGridLayout = css({ +const gridLayout = css({ display: "grid", gridTemplateColumns: { base: "1fr", lg: "5fr 3fr" }, - gap: "2rem" + height: "100%", + backgroundColor: "white", + overflow: "hidden" }); -// Main Content Column -const mainContentColumn = css({ +const leftContent = css({ display: "flex", flexDirection: "column", borderLeft: { lg: "1px solid rgba(201, 201, 201, 0.4)" }, borderRight: { lg: "1px solid rgba(201, 201, 201, 0.4)" }, - minWidth: { lg: "820px" } + height: "100%", + overflowY: "auto", + scrollbarWidth: "none" }); const profileSection = css({ - paddingX: { lg: "1.5rem" }, - paddingTop: "1.5rem", - paddingBottom: "1.5rem" + paddingY: "2rem" }); const hallOfFameSection = css({ - paddingX: { lg: "1.5rem" }, + padding: "1rem", paddingBottom: "2rem" }); @@ -81,35 +64,18 @@ const activitySection = css({ paddingBottom: "2rem" }); -// Sidebar Column -const sidebarColumn = css({ +const rightContent = css({ display: { base: "none", lg: "block" }, - marginTop: "1.5rem", - minWidth: { lg: "490px" } -}); - -const sidebarContent = css({ - position: "sticky", - top: "1rem" + paddingBottom: "2rem", + overflowY: "auto", + scrollbarWidth: "none" }); // Section Divider Component function SectionDivider() { - return ( -
-
-
- ); + return
; } -const sectionDividerContainer = css({ - display: "flex", - flexDirection: "column", - alignItems: "flex-start", - paddingY: "1rem", - paddingX: 0 -}); - const sectionDividerLine = css({ width: "100%", height: 0, diff --git a/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx b/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx index 574b953f..34a5f40b 100644 --- a/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx @@ -9,6 +9,7 @@ interface BaseComponentProps { } import type { GitHubUser } from "@/api/remote/user"; import type { GitHubDiscussion } from "@/api/remote/discussions"; +import { css } from "@styled-system/css"; interface ActivityContentProps extends BaseComponentProps { isLoading: boolean; @@ -75,7 +76,7 @@ export function ActivityContent({ if (userPosts.length > 0) { return ( <> -
+
{userPosts.map((discussion) => ( ); } + +const activityContentContainer = css({ + display: "flex", + flexDirection: "column", + gap: "0.5rem" +}); diff --git a/fundamentals/today-i-learned/src/pages/profile/components/HallOfFameSection.tsx b/fundamentals/today-i-learned/src/pages/profile/components/HallOfFameSection.tsx index 462f760a..8419d7e5 100644 --- a/fundamentals/today-i-learned/src/pages/profile/components/HallOfFameSection.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/components/HallOfFameSection.tsx @@ -142,8 +142,8 @@ const sectionTitle = css({ // Grid Layout const postsGrid = css({ display: "grid", - gridTemplateColumns: { base: "1fr", md: "repeat(2, 1fr)" }, - gap: "1rem", + gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))", + gap: "0.5rem", width: "100%" }); From 4a246592c5001c1c2e877c38a2168d0ce829143f Mon Sep 17 00:00:00 2001 From: sungun Date: Wed, 1 Oct 2025 23:49:32 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=ED=99=9C=EB=8F=99=20content?= =?UTF-8?q?=EC=97=90=20gap=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fundamentals/today-i-learned/src/pages/profile/MyPage.tsx | 2 +- .../src/pages/profile/components/ActivitySection.tsx | 2 +- .../src/pages/profile/components/ProfileHeader.tsx | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx b/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx index b36bd819..0ef07312 100644 --- a/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/MyPage.tsx @@ -60,7 +60,7 @@ const hallOfFameSection = css({ }); const activitySection = css({ - paddingX: { lg: "1.5rem" }, + padding: "1rem", paddingBottom: "2rem" }); diff --git a/fundamentals/today-i-learned/src/pages/profile/components/ActivitySection.tsx b/fundamentals/today-i-learned/src/pages/profile/components/ActivitySection.tsx index 42ada845..a23da8e6 100644 --- a/fundamentals/today-i-learned/src/pages/profile/components/ActivitySection.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/components/ActivitySection.tsx @@ -62,7 +62,7 @@ export function ActivitySection({ className }: ActivitySectionProps) { const sectionContainer = css({ display: "flex", flexDirection: "column", - gap: "1.5rem" + gap: "1rem" }); const headerContainer = css({ diff --git a/fundamentals/today-i-learned/src/pages/profile/components/ProfileHeader.tsx b/fundamentals/today-i-learned/src/pages/profile/components/ProfileHeader.tsx index 47b54cca..32874493 100644 --- a/fundamentals/today-i-learned/src/pages/profile/components/ProfileHeader.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/components/ProfileHeader.tsx @@ -16,11 +16,9 @@ export function ProfileHeader({ className }: ProfileHeaderProps) { } const profileHeaderContainer = css({ + position: "relative", display: "flex", flexDirection: "column", alignItems: "center", - paddingY: "1rem", - paddingX: "1rem", - gap: "1.5rem", - position: "relative" + gap: "1.5rem" }); From 71f0a73dde1a8622fdaf18bd21108081ec825786 Mon Sep 17 00:00:00 2001 From: sungun Date: Thu, 2 Oct 2025 00:04:37 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=EC=9B=94=EA=B0=84=20=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20content=EA=B0=80=20=EC=98=81=EC=97=AD=EC=9D=84=20?= =?UTF-8?q?=EB=B2=97=EC=96=B4=EB=82=98=EB=8A=94=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/challenge/MonthlyChallenge.tsx | 29 ++++++------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx b/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx index 705b9062..3ba8c297 100644 --- a/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx +++ b/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx @@ -196,12 +196,6 @@ export function MonthlyChallenge({ challenge }: MonthlyChallengeProps) { ); } - // 7x5 그리드로 배치 (주단위) - const weeks = []; - for (let i = 0; i < displayData.days.length; i += 7) { - weeks.push(displayData.days.slice(i, i + 7)); - } - return (
@@ -212,16 +206,8 @@ export function MonthlyChallenge({ challenge }: MonthlyChallengeProps) {
- {weeks.map((week, weekIndex) => ( -
- {week.map((day) => ( - - ))} - {week.length < 7 && - Array.from({ length: 7 - week.length }).map((_, emptyIndex) => ( -
- ))} -
+ {displayData.days.map((day) => ( + ))}
@@ -233,6 +219,7 @@ export function MonthlyChallenge({ challenge }: MonthlyChallengeProps) { const challengeContainer = css({ display: "flex", flexDirection: "column", + padding: "1rem", gap: "1.5rem" }); @@ -258,8 +245,8 @@ const subtitle = css({ }); const cardContent = css({ - display: "flex", - flexDirection: "column", + display: "grid", + gridTemplateColumns: "repeat(7, 1fr)", gap: "1rem" }); @@ -279,8 +266,10 @@ const dayItemContainer = css({ }); const dayCircle = css({ - width: "3.5rem", - height: "3.5rem", + minWidth: "1.5rem", + minHeight: "1.5rem", + width: "100%", + aspectRatio: "1/1", borderRadius: "50%", display: "flex", alignItems: "center", From fb398cfe222ffb3f675bd1e280f6e3c8bad9f56d Mon Sep 17 00:00:00 2001 From: sungun Date: Thu, 2 Oct 2025 00:05:48 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EC=97=B0=EC=82=B0=EC=8B=9C?= =?UTF-8?q?=EB=A7=88=EB=8B=A4=20=EC=9E=AC=EC=84=A0=EC=96=B8=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=83=81=EC=88=98=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/challenge/MonthlyChallenge.tsx | 89 ++++++++++--------- 1 file changed, 45 insertions(+), 44 deletions(-) diff --git a/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx b/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx index 3ba8c297..8dfac4a6 100644 --- a/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx +++ b/fundamentals/today-i-learned/src/components/features/challenge/MonthlyChallenge.tsx @@ -25,54 +25,55 @@ const MONTH_NAMES = [ "12월" ]; +const COLORS = [ + css({ + backgroundColor: "rgba(0, 0, 0, 0.1)", + color: "rgba(0, 0, 0, 0.4)" + }), + css({ + backgroundColor: "rgba(188, 233, 233, 0.2)", + color: "#58C7C7" + }), + css({ + backgroundColor: "rgba(237, 204, 248, 0.4)", + color: "#DA9BEF" + }), + css({ + backgroundColor: "rgba(255, 239, 191, 0.6)", + color: "#FFC342" + }), + css({ + backgroundColor: "rgba(255, 212, 214, 0.2)", + color: "#FB8890" + }), + css({ + backgroundColor: "rgba(188, 233, 233, 0.2)", + color: "#58C7C7" + }), + css({ + backgroundColor: "rgba(188, 233, 233, 0.2)", + color: "#58C7C7" + }), + css({ + backgroundColor: "rgba(255, 212, 214, 0.2)", + color: "#FB8890" + }), + css({ + backgroundColor: "rgba(255, 239, 191, 0.6)", + color: "#FFC342" + }), + css({ + backgroundColor: "rgba(0, 0, 0, 0.1)", + color: "rgba(0, 0, 0, 0.4)" + }) +]; + function ChallengeDayItem({ day }: { day: ChallengeDay }) { const getDayStyle = () => { switch (day.status) { case "completed": - const colors = [ - css({ - backgroundColor: "rgba(0, 0, 0, 0.1)", - color: "rgba(0, 0, 0, 0.4)" - }), - css({ - backgroundColor: "rgba(188, 233, 233, 0.2)", - color: "#58C7C7" - }), - css({ - backgroundColor: "rgba(237, 204, 248, 0.4)", - color: "#DA9BEF" - }), - css({ - backgroundColor: "rgba(255, 239, 191, 0.6)", - color: "#FFC342" - }), - css({ - backgroundColor: "rgba(255, 212, 214, 0.2)", - color: "#FB8890" - }), - css({ - backgroundColor: "rgba(188, 233, 233, 0.2)", - color: "#58C7C7" - }), - css({ - backgroundColor: "rgba(188, 233, 233, 0.2)", - color: "#58C7C7" - }), - css({ - backgroundColor: "rgba(255, 212, 214, 0.2)", - color: "#FB8890" - }), - css({ - backgroundColor: "rgba(255, 239, 191, 0.6)", - color: "#FFC342" - }), - css({ - backgroundColor: "rgba(0, 0, 0, 0.1)", - color: "rgba(0, 0, 0, 0.4)" - }) - ]; - const colorIndex = (day.day - 1) % colors.length; - return colors[colorIndex]; + const colorIndex = (day.day - 1) % COLORS.length; + return COLORS[colorIndex]; case "posted": return postedDayStyle; case "today": From a28b473ba916bc60c1cfbb82334e307105e9eabe Mon Sep 17 00:00:00 2001 From: sungun Date: Thu, 2 Oct 2025 00:24:33 +0900 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20fixme=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/profile/components/ActivityContent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx b/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx index 34a5f40b..faad3bad 100644 --- a/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx +++ b/fundamentals/today-i-learned/src/pages/profile/components/ActivityContent.tsx @@ -22,6 +22,7 @@ interface ActivityContentProps extends BaseComponentProps { refetch: () => Promise; } +// FIXME: infinity data fetching이 3번 반복되는 문제 export function ActivityContent({ isLoading, error, @@ -94,7 +95,7 @@ export function ActivityContent({ className="flex items-center justify-center py-4" > {isFetchingNextPage && ( -
+
{Array.from({ length: 3 }).map((_, index) => ( ))} From 8667abca1261b10fad077bc1d28380a3ab468f1c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 1 Oct 2025 15:28:22 +0000 Subject: [PATCH 6/7] [autofix.ci] apply automated fixes --- fundamentals/a11y/ja/alt-text/image-alt.md | 18 ++++----- fundamentals/a11y/ja/eslint/design-system.md | 2 +- fundamentals/a11y/ja/playground.md | 2 +- .../a11y/ja/predictability/fake-button.md | 2 +- .../a11y/ja/structure/button-inside-button.md | 37 ++++++++++--------- 5 files changed, 31 insertions(+), 30 deletions(-) diff --git a/fundamentals/a11y/ja/alt-text/image-alt.md b/fundamentals/a11y/ja/alt-text/image-alt.md index 8b0b46e8..dbeea5af 100644 --- a/fundamentals/a11y/ja/alt-text/image-alt.md +++ b/fundamentals/a11y/ja/alt-text/image-alt.md @@ -100,23 +100,23 @@ 代替テキストは、その画像が伝える意味を正確に説明するべきです。あいまいな言葉や抽象的な表現は、ユーザーが画像から得るべき情報を理解しづらくします。 -| 区分 | 例 | 説明 | -| ---------- | -------------------- | ------------------------------------------------------ | -| ❌ 悪い例 | "アイコン" | アイコンの用途や機能に関する情報がありません。 | +| 区分 | 例 | 説明 | +| --------- | -------------------- | ------------------------------------------------ | +| ❌ 悪い例 | "アイコン" | アイコンの用途や機能に関する情報がありません。 | | ✅ 良い例 | "検索" | アイコンが何を意味するかを明確に伝えます。 | -| ❌ 悪い例 | "グラフ" | このグラフが何を示すのか分かりません。 | +| ❌ 悪い例 | "グラフ" | このグラフが何を示すのか分かりません。 | | ✅ 良い例 | "2023年の売上グラフ" | グラフがどのデータを示すかを具体的に説明します。 | ### 2. 不要な語を省く 代替テキストはスクリーンリーダーが読むためのものなので、「アイコン」「ボタン」のような語はたいてい冗長です。スクリーンリーダーは、画像を含む要素の役割（ボタンなど）を既に理解しているため、代替テキストでは情報だけを簡潔に伝えるのが望ましいです。 -| 区分 | 例 | 説明 | -| ---------- | ------------- | --------------------------------------------------------------------------------------- | -| ✅ 良い例 | "検索" | | +| 区分 | 例 | 説明 | +| --------- | -------------- | -------------------------------------------------------------------------------- | +| ✅ 良い例 | "検索" | | | ❌ 悪い例 | "検索アイコン" | スクリーンリーダーは「検索、ボタン」と読むため、「アイコン」は重複して不要です。 | -| ✅ 良い例 | "閉じる" | | -| ❌ 悪い例 | "閉じるボタン" | ボタンという役割は既に明らかなので、テキストでは省略したほうがすっきりします。 | +| ✅ 良い例 | "閉じる" | | +| ❌ 悪い例 | "閉じるボタン" | ボタンという役割は既に明らかなので、テキストでは省略したほうがすっきりします。 | ### 3. 画像の目的と文脈を考慮する diff --git a/fundamentals/a11y/ja/eslint/design-system.md b/fundamentals/a11y/ja/eslint/design-system.md index 04564a67..f78680a2 100644 --- a/fundamentals/a11y/ja/eslint/design-system.md +++ b/fundamentals/a11y/ja/eslint/design-system.md @@ -192,4 +192,4 @@ export default [ --- -このほかにも、デザインシステムにはさまざまなコンポーネントや prop パターンが存在します。詳細は[eslint-plugin-jsx-a11y 공식 문서](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)のsettingsとrulesのオプションを参照し、要件に合わせてカスタマイズしてください。 \ No newline at end of file +このほかにも、デザインシステムにはさまざまなコンポーネントや prop パターンが存在します。詳細は[eslint-plugin-jsx-a11y 공식 문서](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)のsettingsとrulesのオプションを参照し、要件に合わせてカスタマイズしてください。 diff --git a/fundamentals/a11y/ja/playground.md b/fundamentals/a11y/ja/playground.md index 89f19fb1..9e190e61 100644 --- a/fundamentals/a11y/ja/playground.md +++ b/fundamentals/a11y/ja/playground.md @@ -30,4 +30,4 @@ PCではマウスのクリックとドラッグでタッチ操作を代替でき \ No newline at end of file +/> diff --git a/fundamentals/a11y/ja/predictability/fake-button.md b/fundamentals/a11y/ja/predictability/fake-button.md index 9495f41f..9a4d8cb7 100644 --- a/fundamentals/a11y/ja/predictability/fake-button.md +++ b/fundamentals/a11y/ja/predictability/fake-button.md @@ -18,7 +18,7 @@ ```jsx
- お問い合わせ + お問い合わせ
``` diff --git a/fundamentals/a11y/ja/structure/button-inside-button.md b/fundamentals/a11y/ja/structure/button-inside-button.md index 8086df90..bb9fe7c4 100644 --- a/fundamentals/a11y/ja/structure/button-inside-button.md +++ b/fundamentals/a11y/ja/structure/button-inside-button.md @@ -8,8 +8,9 @@ 次のように``タグの中に`