feat: 2024 연말 회고 포스트 릴리즈 #91
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
WalkthroughThis pull request introduces comprehensive changes across multiple packages and configurations in a monorepo setup. The modifications span dependency updates, configuration restructuring, and component enhancements. Key areas of change include Tailwind CSS configuration, Next.js blog application dependencies, MDX component styling, and workspace-level package version updates. The changes reflect a systematic approach to refactoring and modernizing the project's infrastructure and component libraries. Changes
Sequence DiagramsequenceDiagram
participant Developer
participant Project
participant Dependencies
participant Configuration
Developer->>Project: Initiates refactoring
Project->>Dependencies: Update package versions
Project->>Configuration: Restructure Tailwind config
Project->>Configuration: Implement new build configurations
Dependencies->>Project: Resolve and install new packages
Configuration->>Project: Apply new settings
Possibly related PRs
Suggested Labels
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
apps/blog/posts/retrospect/retrospect-2024.mdx (3)
1-10: Verify thumbnail configuration and standardize date formats.A few suggestions for the frontmatter:
- The
thumbnail: fallbackmight indicate a missing image. Consider adding a specific thumbnail image for better visual presentation.- Consider standardizing the date format to exclude milliseconds (
.053Z) for better readability:-writeDate: 2024-12-29T00:29:07.053Z -releaseDate: 2024-12-29T20:00:00.053Z +writeDate: 2024-12-29T00:29:07Z +releaseDate: 2024-12-29T20:00:00Z
28-31: Maintain consistent spacing between sections.There are multiple consecutive empty lines between sections. Consider maintaining a consistent spacing of one or two empty lines between sections for better readability.
- - +Also applies to: 71-73
18-26: Consider adding semantic structure to personal reflections.The personal reflection sections could benefit from more structured content organization. Consider using subheadings or bullet points to break down key points, making it easier for readers to follow your thoughts.
Example structure:
## 인간으로서의 2024년 ### 신체적 변화 - 체중과 체지방 증가 - 운동의 필요성 인식 ### 사회적 고찰 - 소시민적 고민의 심화 - 사회 변화에 대한 적응 전략configs/tailwind/src/index.ts (1)
5-6: Be mindful of scanning performance with the content pattern.The glob patterns here are very comprehensive (
.stories, src, app). This ensures the necessary scanning for Tailwind classes. However, if the project grows significantly, scanning performance could degrade. Periodically review if narrower patterns improve build times without missing relevant classes.configs/tsup/src/index.ts (1)
12-18: Sourcemap disabled—evaluate debugging needs.
You havesourcemap: false, which disables generating source maps. If you may need to debug minified code in production or produce meaningful stack traces, consider enabling sourcemaps.-sourcemap: false, +sourcemap: true,configs/tsup/package.json (1)
24-27: Stay up-to-date with dev dependencies.
YourdevDependenciesinclude a reference to@repo/typescript-configviaworkspace:*andtsupat a specific version. Occasionally review if upgrades are available to maintain compatibility.apps/blog/src/shared/hooks/useMediaQuery.ts (1)
1-31: Consider SSR-safe usage ofmatchMedia.
When rendering on the server,windowis undefined, which can cause errors. A quick workaround:export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState<boolean>(false); useEffect(() => { + if (typeof window === "undefined") { + return; + } const mediaQuery = window.matchMedia(query); setMatches(mediaQuery.matches); const handleChange = () => { setMatches(mediaQuery.matches); }; mediaQuery.addEventListener("change", handleChange); return () => { mediaQuery.removeEventListener("change", handleChange); }; }, [query]); return matches; }packages/mdx/src/MdxComponents.tsx (1)
96-98: New<strong>component introduction appears valid.
This addition is straightforward. Consider ensuring consistent color usage with the rest of your palette, or theParagraphcolor, for a cohesive design.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (19)
apps/blog/next.config.mjs(1 hunks)apps/blog/package.json(1 hunks)apps/blog/posts/nextjs/next-forge.mdx(0 hunks)apps/blog/posts/retrospect/retrospect-2024.mdx(1 hunks)apps/blog/src/shared/hooks/useMediaQuery.ts(1 hunks)apps/blog/src/widgets/header/static-header.tsx(1 hunks)apps/blog/tailwind.config.ts(1 hunks)configs/tailwind/package.json(1 hunks)configs/tailwind/src/base.ts(0 hunks)configs/tailwind/src/index.ts(1 hunks)configs/tailwind/tsup.config.ts(1 hunks)configs/tsup/package.json(1 hunks)configs/tsup/src/index.ts(1 hunks)configs/tsup/tsconfig.json(1 hunks)configs/tsup/tsup.config.ts(1 hunks)packages/mdx/package.json(1 hunks)packages/mdx/src/CallOut.tsx(1 hunks)packages/mdx/src/MdxComponents.tsx(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (2)
- apps/blog/posts/nextjs/next-forge.mdx
- configs/tailwind/src/base.ts
✅ Files skipped from review due to trivial changes (3)
- configs/tailwind/tsup.config.ts
- configs/tsup/tsup.config.ts
- configs/tsup/tsconfig.json
🔇 Additional comments (26)
configs/tailwind/src/index.ts (4)
1-3: Imports are neatly organized.
Good approach importing variables (vars) from a dedicated token package—this ensures consistent design tokens throughout the project. The typed Config import from Tailwind is also a best practice.
7-15: Excellent use of design tokens via vars.
Mapping colors, borderRadius, spacing, fontSize, fontWeight, lineHeight, and boxShadow from vars fosters centralized style management. Ensuring these tokens remain up-to-date automatically updates the entire UI with minimal refactoring.
21-22: darkMode: "class" is a standard approach for toggling themes.
This is a common and flexible Tailwind pattern. Ensure your application triggers dark mode class toggling properly in the outer HTML.
16-19: Confirm correctness of cast for keyframes.
Casting vars.keyframes to Config["theme"] works if the shape matches Tailwind's extended keyframes object. Ensure that vars.keyframes indeed follows the expected structure for custom animations to avoid potential runtime or type mismatch.
Run this script to confirm references to vars.keyframes are valid in other files:
configs/tsup/src/index.ts (3)
3-4: Clarity on multiple output formats.
Producing both CommonJS and ESM (format: ["cjs", "esm"]) is typically a good practice for wide compatibility. Confirm that all downstream consumers can handle these two build formats.
5-11: Verify the entry glob patterns.
The entry array includes some patterns ("./src/*.ts(x)", "./src/exposes/*.ts(x)") but excludes stories and test files. Ensure these patterns are correct and not inadvertently excluding or including necessary files for your build.
1-2: Consider verifying TSUP version compatibility.
The import of Options from "tsup" is perfectly valid, but ensure your project's TSUP version supports all the options you intend to use.
✅ Verification successful
TSUP version 8.3.5 is used consistently across the project
Based on the search results, the project is using TSUP version 8.3.5 (^8.3.5) consistently across all packages and configurations. The Options type import from "tsup" in configs/tsup/src/index.ts is compatible with this version. The configuration is being used correctly across multiple packages:
configs/tsup/src/index.tsexports TSUP options that are consumed by other packages- Multiple packages use these options via
@repo/tsup-config:configs/tailwindpackages/routerpackages/iconpackages/datepackages/actions
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for tsup usage across the repository, verifying the version and references.
# Locate tsup references to confirm alignment with your config usage
rg -A 3 "tsup"
# Optionally verify the installed version if there's a lock file:
rg "tsup" package-lock.json || rg "tsup" yarn.lock
Length of output: 6267
configs/tsup/package.json (4)
1-6: Evaluate public publishing vs. private setting.
The file sets "private": true yet includes "publishConfig": { "access": "public" } later. Note that "private": true prevents publishing to npm regardless. If you plan to publish, you may want to remove "private": true; otherwise keep it private if it’s only for internal consumption.
7-10: Check scripts for type-only differences.
The ci:type script runs tsc --noEmit, which helps ensure type safety without generating code. Confirm that it aligns with the rest of your CI pipeline for consistency.
28-31: Confirm publish strategy.
The publishConfig.access is set to public. Double-check whether this package is truly intended for open publication. If you intend to keep it internal, remove or modify this value to avoid accidental publication.
11-23: Validate the export map.
Your exports object supports both module and require usage. Ensure that the final build actually emits the corresponding .d.ts, .d.cts, .js, and .cjs files at the specified paths.
✅ Verification successful
Let me verify the build configuration and output files without attempting to build the project.
Let me check the tsup configuration for this package to verify the build output settings.
Export map configuration is valid and matches build output settings
The export map configuration in package.json aligns correctly with the tsup build configuration:
- The tsup config specifies
format: ["cjs", "esm"]which will generate both.js(ESM) and.cjs(CommonJS) files dts: trueis set, which will generate TypeScript declaration files for both formats (.d.tsfor ESM and.d.ctsfor CJS)- The output paths in the export map (
./dist/index.js,./dist/index.cjs,./dist/index.d.ts,./dist/index.d.cts) match tsup's default output structure
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Confirm that the build output matches the specified export paths
npm run build
fd -e d.ts -e d.cts -e js -e cjs dist
Length of output: 103
Script:
#!/bin/bash
# Check build configuration in package.json
cat configs/tsup/package.json
# Check if there's a build script in the project
fd -g "tsup.config.*"
Length of output: 849
Script:
#!/bin/bash
# Check the tsup configuration
cat configs/tsup/tsup.config.ts
# Check the source file to understand what's being exported
cat configs/tsup/src/index.ts
Length of output: 545
apps/blog/tailwind.config.ts (2)
5-5: Confirm the completeness of Tailwind content paths.
The content array points to source files in ./src, ./app, and ../../packages/mdx/src. Make sure these paths include all the components and pages that use Tailwind classes, especially if there are other relevant directories.
1-1: Verify that @repo/tailwindcss-config is correctly referenced.
If @repo/tailwindcss-config is a local package, ensure it’s properly declared in your workspace dependencies so the import path resolves correctly.
✅ Verification successful
@repo/tailwindcss-config is correctly referenced and properly configured
The package is properly set up in the monorepo workspace:
- It exists as a local package at
configs/tailwind/with the correct package name - It's correctly declared as a workspace dependency in
apps/blog/package.jsonwith"@repo/tailwindcss-config": "workspace:^" - The dependency is properly linked in
pnpm-lock.yaml
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verifies that the '@repo/tailwindcss-config' package is specified in the workspace dependencies
rg '@repo/tailwindcss-config' -A 5
Length of output: 1393
apps/blog/next.config.mjs (1)
7-7: Verify removal of @million/lint functionality.
Dropping MillionLint removes its specialized lint checks and optimizations. Confirm this removal is intentional and does not negatively affect performance or code quality.
✅ Verification successful
Let me search for any Million-related configurations or imports to get a better understanding.
Let me try one more search focusing on the package.json files to check for any Million-related dependencies.
No Million-related configurations found in the codebase
Based on the comprehensive search of package.json files and the current state of next.config.mjs, there are no traces of @million/lint or any Million-related dependencies in the codebase. The next.config.mjs file is simple and only contains basic configuration for standalone output and MDX transpilation. The removal appears to be clean with no remaining references or dependencies.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Searches for references to MillionLint to ensure it's fully removed
rg 'MillionLint' -A 5
Length of output: 21
Script:
#!/bin/bash
# Search for any Million-related imports or configurations
rg -i "million" -A 5
# Also check the git diff to see what was removed
git diff HEAD~1 apps/blog/next.config.mjs
Length of output: 64
Script:
#!/bin/bash
# Check package.json files for Million-related dependencies
fd package.json --exec cat {} \;
# Look at the history of next.config.mjs
git show HEAD:apps/blog/next.config.mjs
Length of output: 14776
apps/blog/src/widgets/header/static-header.tsx (1)
13-13: Tailwind approach for responsive padding
Using px-16 md:px-0 is clear and concise. Confirm that the breakpoints match your design requirements and that the shift in padding from 16px to 0px at md screens is intentional.
packages/mdx/src/CallOut.tsx (2)
6-18: Validate variant styling and spacing.
px-12 py-80 is quite large for typical callout spacing. Ensure these values align with design expectations. Otherwise, consider a more moderate spacing.
26-37: Good use of SwitchCase for icon rendering.
This pattern is easy to follow and leverages the variant prop effectively. No immediate issues found.
packages/mdx/src/MdxComponents.tsx (1)
59-59: Confirm consistency for adjusted typography properties.
Changing the paragraph size from "5" to "6" with increased margin and looser line spacing might significantly alter the page layout. Verify that these changes align with the intended design and typography scale across the site.
pnpm-workspace.yaml (1)
8-9: Verify stability of React 19.0.0 release.
Double-check that react and react-dom version 19.0.0 is stable for your target environment. If this is an experimental release or not yet widely adopted, be prepared for potential regressions.
✅ Verification successful
React 19.0.0 is confirmed as the current stable release
The verification shows that React 19.0.0 and react-dom 19.0.0 are both marked with the latest dist-tag on npm, indicating they are the current stable releases. Both packages are in sync at version 19.0.0, which is the recommended production version. You can proceed with confidence using these versions.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Validate the React version presence on the npm registry
npm info react@19.0.0 version
Length of output: 38
Script:
#!/bin/bash
# Check if React 19.0.0 is a stable release by examining its dist-tags
npm dist-tag ls react
# Also check for react-dom as they should be in sync
npm dist-tag ls react-dom
# Get detailed information about the release date and other metadata
npm view react@19.0.0 time.19.0.0 dist.shasum description
npm view react-dom@19.0.0 time.19.0.0 dist.shasum description
Length of output: 817
configs/tailwind/package.json (3)
6-21: Module type and exports configuration look good.
These changes provide modern ES module exports. Ensuring your tooling chain supports this is essential.
25-27: Added devDependencies for build and type checks.
Including @repo/tsup-config and tsup under devDependencies aligns with modern bundling practices. Confirm that the project’s build pipeline uses these scripts consistently.
30-35: Peer dependency updates improve compatibility.
The additions and version constraints look correct for a shared config package. If you’re planning further expansions, ensure the peer dependencies remain minimal to prevent conflicts.
packages/mdx/package.json (1)
18-21: Ensure peer dependencies are installed by consuming apps.
Adding "@xionwcfm/react", "class-variance-authority", and "@radix-ui/react-icons" as peer dependencies is appropriate. Verify that each consuming application explicitly installs these to avoid runtime errors.
apps/blog/package.json (3)
40-40: LGTM: class-variance-authority addition
The addition of class-variance-authority is appropriate for managing component variants, particularly for the MDX components mentioned in the summary. The version ^0.7.1 is the latest stable release.
Line range hint 19-49: Verify removed GraphQL dependencies
The removal of @apollo/client suggests GraphQL is no longer used. Let's verify there are no remaining GraphQL operations that might break.
✅ Verification successful
GraphQL dependencies safely removed
Based on the verification results, it's safe to remove the GraphQL dependencies. The search results show:
- No actual GraphQL or Apollo Client usage in the codebase
- The only matches found were:
- In
single-flight.mdx, which is a blog post discussinguseMutationfrom@tanstack/react-query, not GraphQL - References in
pnpm-lock.yamlwhich will be updated when the dependencies are removed
- In
The removal of @apollo/client and other GraphQL-related dependencies appears to be intentional and safe as there are no remaining GraphQL operations that would break.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining GraphQL usage that might break
# Look for GraphQL related imports or usage
echo "Checking for GraphQL usage..."
rg -l "gql|useQuery|useMutation|GraphQL" "apps/blog/src"
# Look for .graphql or .gql files
echo "Checking for GraphQL schema/operation files..."
fd -e graphql -e gql "apps/blog/src"
Length of output: 623
Script:
#!/bin/bash
# Description: Check for any remaining GraphQL usage that might break
# Look for GraphQL related imports or usage
echo "Checking for GraphQL usage..."
rg -l "gql|useQuery|useMutation|GraphQL" .
# Look for .graphql or .gql files
echo "Checking for GraphQL schema/operation files..."
fd -e graphql -e gql .
# Check for any Apollo Client configuration
echo "Checking for Apollo Client configuration..."
rg -l "ApolloClient|ApolloProvider" .
Length of output: 440
Script:
#!/bin/bash
# Let's check the content of the files that matched to see if they contain actual GraphQL usage or just mentions
echo "Checking content of single-flight.mdx..."
rg -C 3 "gql|useQuery|useMutation|GraphQL" "./apps/blog/posts/frontend/single-flight.mdx"
echo "Checking pnpm-lock.yaml for GraphQL dependencies..."
rg -C 3 "(@apollo|graphql)" "./pnpm-lock.yaml"
Length of output: 2401
43-43: Verify Next.js version upgrade impact
The upgrade from Next.js 15.0.3 to 15.1.3 is a minor version bump that may contain breaking changes.
Let's check for any breaking changes or deprecation notices:
✅ Verification successful
Let me try a different approach to verify the Next.js version upgrade impact.
Let me check the Next.js configuration and any potential experimental features being used.
Next.js 15.1.3 upgrade appears safe to proceed
The project uses the App Router architecture with a standard setup:
- Uses App Router with nested layouts and pages
- Has a basic Next.js configuration without experimental features
- Uses middleware and MDX support (via next-mdx-remote)
The upgrade from 15.0.3 to 15.1.3 is a patch version update that primarily includes bug fixes and performance improvements. Based on the project structure and configuration:
- No experimental features are enabled that might be affected
- The app structure follows the stable App Router patterns
- The configuration is minimal and uses supported features
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check Next.js changelog and verify app router usage
# Note: This helps identify if the upgrade requires any modifications
# Check for App Router usage
echo "Checking for App Router usage..."
fd -e ts -e tsx -e js -e jsx "app/" "apps/blog/src"
# Check for pages Router usage
echo "Checking for Pages Router usage..."
fd -e ts -e tsx -e js -e jsx "pages/" "apps/blog/src"
Length of output: 255
Script:
#!/bin/bash
# Let's check the project structure and configuration files to understand the setup better
# Check for next.config.js/ts
echo "Checking Next.js config files..."
fd "next.config" "apps/blog"
# Check the src directory structure
echo "Checking src directory structure..."
fd . "apps/blog/src" -t d
# Check for route files
echo "Checking route files..."
fd -e tsx -e ts -e js -e jsx . "apps/blog/src"
# Check package-lock.json or yarn.lock for previous version
echo "Checking lock files..."
fd "package-lock.json|yarn.lock" "apps/blog"
Length of output: 2146
Script:
#!/bin/bash
# Check Next.js configuration and entry points
# Check next.config.mjs content
echo "Checking Next.js configuration..."
cat apps/blog/next.config.mjs
# Check for root layout and page files
echo "Checking for root app files..."
fd -e tsx -e ts -e js -e jsx "layout|page" "apps/blog"
# Check for any middleware
echo "Checking for middleware..."
fd "middleware" "apps/blog"
Length of output: 698
🥷 제목
구현한 내용
Summary by CodeRabbit
Release Notes
New Features
useMediaQueryhook for responsive designCallOutcomponent with dynamic icon renderingDocumentation
Dependency Updates
class-variance-authoritypackageConfiguration Changes
Performance