Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] 컴포넌트 스타일 수정 #102

Merged
merged 6 commits into from
Feb 4, 2025
Merged

[Fix] 컴포넌트 스타일 수정 #102

merged 6 commits into from
Feb 4, 2025

Conversation

minseong0324
Copy link
Contributor

@minseong0324 minseong0324 commented Feb 4, 2025

관련 이슈

close: #101

변경 사항

아래의 컴포넌트 스타일링 버그를 수정해요.

  1. Checkbox width 수정
  2. TextField 상하 중앙정렬, 옵션에 따른 레이아웃 깨짐
  3. NavBar 레이아웃

레퍼런스

Summary by CodeRabbit

  • 새 기능

    • "AI 업그레이드" 입력 필드에 제출 버튼이 내장되어 사용 편의성이 개선되었습니다.
    • 네비게이션 바에 다양한 정렬 옵션을 추가하여 레이아웃 구성이 유연해졌습니다.
  • 스타일 개선

    • 애니메이션 컨테이너의 최소 너비를 조정해 디자인 일관성을 강화했습니다.
    • 체크박스의 너비가 콘텐츠에 맞게 조정되어 UI 유연성이 향상되었습니다.
    • 텍스트 필드의 레이아웃 업데이트로 UI 정렬 및 반응성이 개선되었습니다.

Copy link

coderabbitai bot commented Feb 4, 2025

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/ui/src/components/TextField/TextField.tsx

Oops! Something went wrong! :(

ESLint: 9.17.0

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs
at packageResolve (node:internal/modules/esm/resolve:839:9)
at moduleResolve (node:internal/modules/esm/resolve:908:18)
at defaultResolve (node:internal/modules/esm/resolve:1038:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
at ModuleJob._link (node:internal/modules/esm/module_job:126:49)

Walkthrough

이번 PR은 UI 컴포넌트들의 스타일과 인터페이스를 수정합니다.

  • AnimatedContainer에서는 width 속성을 제거하고 minWidth: '86rem'을 추가하여 스타일을 조정하였습니다.
  • TextField 컴포넌트는 sumbitButton prop(오타 포함)을 도입해 제출 버튼을 내부에 통합하면서 관련 스타일도 업데이트되었습니다.
  • NavBar는 정렬 속성을 flex-start로 수정하고, 추가 레이아웃 옵션(bothAddons, rightAddonOnly)과 함께 addon props를 옵션으로 변경하였습니다.
  • CheckboxTextField의 스타일 수정도 포함됩니다.

Changes

파일 변경 요약
apps/web/.../AnimatedContainer.css.ts containerStyle: width: '100%' 제거, minWidth: '86rem' 추가, maxWidth의 위치 변경
apps/web/.../page.tsx
packages/ui/.../TextField.css.ts
packages/ui/.../TextFieldInput.tsx
TextField 컴포넌트: sumbitButton prop 추가(오타 포함), 제출 버튼 통합, 컨테이너 및 submit 버튼 스타일 조정
apps/web/.../NavBar.css.ts
apps/web/.../NavBar.tsx
NavBar: justifyContentspace-between에서 flex-start로 변경, 신규 스타일(bothAddons, rightAddonOnly) 추가, addon prop을 옵션으로 변경 및 클래스 관리 로직 개선
packages/ui/.../Checkbox.css.ts Checkbox: container recipe에 width: 'fit-content' 추가

Sequence Diagram(s)

sequenceDiagram
    participant Parent as Parent Component
    participant TF as TextField Component
    participant TFI as TextFieldInput
    Parent->>TF: TextField 호출 및 sumbitButton prop 전달
    TF->>TFI: props 전달 (sumbitButton 포함)
    TFI->>UI: <textarea> 렌더링
    alt sumbitButton 존재 시
        TFI->>UI: Submit Button 렌더링
    end
Loading
sequenceDiagram
    participant App as App Component
    participant NB as NavBar Component
    App->>NB: left/right addon, isScrolled 플래그 전달
    NB->>NB: getNavBarClassName() 호출하여 클래스 결정
    NB->>UI: 동적 클래스 적용한 nav element 렌더링
Loading

Assessment against linked issues

Objective (이슈 번호) Addressed Explanation
Checkbox width 수정 ([#101])
TextField 상하 중앙정렬 및 옵션에 따른 레이아웃 수정 ([#101])
NavBar 레이아웃 수정 ([#101])

Possibly related PRs

Suggested labels

enhancement

Poem

안녕, 나는 코딩 숲의 작은 토끼,
변경된 코드길을 신나게 달려가네.
스타일과 컴포넌트 모두 반짝이고,
깔끔하게 정비된 UI가 마음을 두근두근,
버그는 숨어가고, 코드엔 햇살이 내려와!

Tip

🌐 Web search-backed reviews and chat
  • We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
  • You can disable this feature by setting web_search: false in the knowledge_base settings.
  • Please share any feedback in the Discord discussion.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • 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 for this PR. (Beta)
  • @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 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 for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Member

@kongnayeon kongnayeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
apps/web/src/components/common/NavBar/NavBar.tsx (1)

13-19: 클래스 이름 로직이 함수로 분리되어 가독성이 향상되었습니다.

getNavBarClassName 함수를 통해 조건부 클래스 적용 로직이 깔끔하게 정리되었습니다. 다만 다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:

  1. 클래스 배열 생성 시 타입 안정성을 위해 as const 사용을 고려해보세요.
  2. 조건문이 늘어날 경우를 대비해 클래스 조합 라이브러리(예: clsx, classnames) 사용을 고려해보세요.
  const getNavBarClassName = () => {
-   const classes = [styles.navBar];
+   const classes = [styles.navBar] as const;
    if (isScrolled) classes.push(styles.scrolled);
    if (leftAddon && rightAddon) classes.push(styles.bothAddons);
    else if (rightAddon && !leftAddon) classes.push(styles.rightAddonOnly);
    return classes.join(' ');
  };
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 6fc3aa3 and 0e5c45d.

📒 Files selected for processing (7)
  • apps/web/src/app/create/_components/AnimatedContainer/AnimatedContainer.css.ts (1 hunks)
  • apps/web/src/app/page.tsx (1 hunks)
  • apps/web/src/components/common/NavBar/NavBar.css.ts (2 hunks)
  • apps/web/src/components/common/NavBar/NavBar.tsx (1 hunks)
  • packages/ui/src/components/Checkbox/Checkbox.css.ts (1 hunks)
  • packages/ui/src/components/TextField/TextField.css.ts (1 hunks)
  • packages/ui/src/components/TextField/TextFieldInput.tsx (3 hunks)
🔇 Additional comments (9)
apps/web/src/components/common/NavBar/NavBar.tsx (2)

7-8: Props 타입 선언이 개선되었습니다.

addon props를 선택적으로 만든 것은 컴포넌트의 유연성을 높이는 좋은 변경사항입니다. 이를 통해 NavBar를 다양한 상황에서 더 유연하게 사용할 수 있게 되었습니다.


22-22: 클래스 이름 적용이 개선되었습니다.

getNavBarClassName 함수를 사용하여 동적 클래스 적용이 더 명확해졌습니다. 이는 PR의 NavBar 레이아웃 수정 목표와 잘 부합합니다.

apps/web/src/app/create/_components/AnimatedContainer/AnimatedContainer.css.ts (1)

6-7: 컨테이너의 너비 제약 조건이 개선되었습니다.

고정 너비 대신 최소/최대 너비를 사용하여 레이아웃 유연성이 향상되었습니다.

apps/web/src/components/common/NavBar/NavBar.css.ts (2)

4-16: NavBar의 기본 정렬이 변경되었습니다.

기본 정렬이 space-between에서 flex-start로 변경되어 왼쪽 정렬이 기본값이 되었습니다.


23-29: NavBar에 새로운 레이아웃 옵션이 추가되었습니다.

  • bothAddons: 양쪽 애드온이 있는 경우 space-between 정렬
  • rightAddonOnly: 오른쪽 애드온만 있는 경우 flex-end 정렬

이러한 변경으로 다양한 레이아웃 구성이 가능해졌습니다.

packages/ui/src/components/Checkbox/Checkbox.css.ts (1)

10-10: 체크박스 컨테이너의 너비가 최적화되었습니다.

width: fit-content를 추가하여 컨테이너가 내용물에 맞게 적절한 너비를 가지도록 개선되었습니다.

packages/ui/src/components/TextField/TextFieldInput.tsx (1)

38-38: TextField 컴포넌트의 구조가 개선되었습니다.

제출 버튼이 TextField 컨테이너 내부로 통합되어 더 일관된 UI를 제공할 수 있게 되었습니다. 단, 앞서 지적한 오타를 함께 수정해야 합니다.

-      sumbitButton,
+      submitButton,
...
-          {sumbitButton}
+          {submitButton}

Also applies to: 95-95

packages/ui/src/components/TextField/TextField.css.ts (2)

15-20: 레이아웃 구조가 개선되었습니다!

컨테이너의 포지셔닝과 flexbox 속성이 적절하게 설정되어 있어 제출 버튼과 입력 필드가 잘 정렬될 것으로 보입니다.


87-109: 제출 버튼 스타일이 최적화되었습니다!

불필요한 포지셔닝 속성들이 제거되어 스타일 코드가 더 간결해졌습니다.


export type TextFieldInputProps = {
maxLength?: number;
showCounter?: boolean;
value?: string;
defaultValue?: string;
sumbitButton?: ReactNode;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

오타 수정이 필요합니다.

sumbitButton 속성명에 오타가 있습니다. submitButton으로 수정해야 합니다.

-  sumbitButton?: ReactNode;
+  submitButton?: ReactNode;
📝 Committable suggestion

‼️ 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.

Suggested change
sumbitButton?: ReactNode;
submitButton?: ReactNode;

Comment on lines +375 to 396
sumbitButton={<TextField.Submit type="submit" />}
showCounter
{...register('aiUpgrade')}
/>
</TextField>

<TextField id="ai-field" variant="button">
<TextField.Label>AI 업그레이드</TextField.Label>
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
sumbitButton={<TextField.Submit type="submit" />}
{...register('aiUpgrade')}
/>
</TextField>

<TextField id="ai-field" variant="button">
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
sumbitButton={<TextField.Submit type="submit" />}
showCounter
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

'submitButton' 속성명에 오타가 있습니다.

여러 TextField 컴포넌트에서 'submitButton'이 'sumbitButton'으로 잘못 입력되어 있습니다.

다음과 같이 수정해주세요:

-              sumbitButton={<TextField.Submit type="submit" />}
+              submitButton={<TextField.Submit type="submit" />}
📝 Committable suggestion

‼️ 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.

Suggested change
sumbitButton={<TextField.Submit type="submit" />}
showCounter
{...register('aiUpgrade')}
/>
</TextField>
<TextField id="ai-field" variant="button">
<TextField.Label>AI 업그레이드</TextField.Label>
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
sumbitButton={<TextField.Submit type="submit" />}
{...register('aiUpgrade')}
/>
</TextField>
<TextField id="ai-field" variant="button">
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
sumbitButton={<TextField.Submit type="submit" />}
showCounter
submitButton={<TextField.Submit type="submit" />}
showCounter
{...register('aiUpgrade')}
/>
</TextField>
<TextField id="ai-field" variant="button">
<TextField.Label>AI 업그레이드</TextField.Label>
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
submitButton={<TextField.Submit type="submit" />}
{...register('aiUpgrade')}
/>
</TextField>
<TextField id="ai-field" variant="button">
<TextField.Input
placeholder="AI에게 요청하여 글 업그레이드하기"
maxLength={5000}
submitButton={<TextField.Submit type="submit" />}
showCounter

@minseong0324 minseong0324 merged commit 7853875 into develop Feb 4, 2025
1 of 2 checks passed
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/ui/src/components/TextField/TextField.tsx (1)

6-45: 예제 코드의 문서화 개선을 제안합니다.

현재 예제 코드는 기본적인 사용 사례를 잘 보여주고 있지만, 새로 추가된 showCountersubmitButton props에 대한 설명이 부족합니다.

다음 내용을 문서에 추가하는 것을 제안합니다:

  • showCounter prop의 목적과 사용 시기
  • submitButton의 사용 방법과 레이아웃에 미치는 영향
  • 각 prop이 컴포넌트의 스타일링에 미치는 영향

예시:

/**
 * @property {boolean} showCounter - 문자 수 카운터를 표시합니다
 * @property {ReactNode} submitButton - 제출 버튼을 TextField 내부에 통합합니다
 */
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 0e5c45d and 4983851.

📒 Files selected for processing (1)
  • packages/ui/src/components/TextField/TextField.tsx (1 hunks)

Comment on lines +14 to +15
* showCounter
* sumbitButton={<TextField.Submit type="submit" />}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

prop 이름의 오타를 수정해주세요.

sumbitButton에 오타가 있습니다. submitButton으로 수정이 필요합니다. 이는 코드의 일관성과 가독성을 위해 중요합니다.

다음과 같이 수정해주세요:

-    sumbitButton={<TextField.Submit type="submit" />}
+    submitButton={<TextField.Submit type="submit" />}
📝 Committable suggestion

‼️ 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.

Suggested change
* showCounter
* sumbitButton={<TextField.Submit type="submit" />}
* showCounter
- * sumbitButton={<TextField.Submit type="submit" />}
+ * submitButton={<TextField.Submit type="submit" />}

@minseong0324 minseong0324 deleted the fix/#207afcc9e branch February 4, 2025 19:02
kongnayeon added a commit that referenced this pull request Feb 5, 2025
* [Feat] 프로젝트 스캐폴딩 (#2)

* docs: 이슈, PR 템플릿 추가

* docs: codeoners 추가

* feat: web 앱 Next.js, React 버전 다운그레이드

* feat: eslint, tsconfig 종속성, prettier 추가

* feat: husky, lint-staged 설치

* feat: husky, lint-staged 테스트

* chore: husky, lint-staged 테스트

* chore: husky, lint-staged 테스트 2

* fix: eslint config 수정

* chore: husky, lint-staged 테스트 3

* chore: husky, lint-staged 테스트 4

* chore: husky, lint-staged 테스트 5

* feat: .nvmrc 추가

* feat: vanilla extract 설치, config 수정

* chore: web 앱 type: module 설정 제거

* chore: vanilla extract 설치, next.config.js 수정

* [Chore]: 리뷰어 선정 시 슬랙 알림 workflow 적용 (#33)

* [Chore]: ui 패키지 초기 셋팅 (#34)

* feat(packages/theme): theme 패키지를 생성해요. (#36)

* [Chore]: build ci 추가 (#38)

* feat: pnpm workspace 추가 (#42)

* [Fix]: theme, ui 패키지의 vanilla-extract 빌드 설정 수정 (#45)

* fix(apps/web, packages/theme, packages/ui): theme, ui 패키지의 vanilla-extract 빌드 설정, css 관련 수정

* chore(packages/theme, packages/ui): build 스크립트 수정

* chore(packages/theme, packages/ui): exports 수정

* chore(packages/theme, packages/ui): exports 수정

* wip

* chore(packages/theme, packages/ui): 불필요 dependency 제거

* chore(packages/theme, packages/ui): 불필요 필드 제거

* fix: 공통 패키지 루트로 끌어올리기, 패키지 버전 의존성 적용

* fix: 테스트 컴포넌트 제거

* fix: 테스트 컴포넌트 제거

* chore(apps/web): 주석처리

* chore: 빌드 테스트

* chore: 테스트용 컴포넌트 제거

---------

Co-authored-by: kangnayeon <[email protected]>

* [Feat]: theme 적용을 위한 Provider 추가 (#47)

* [Feat] Spacing 컴포넌트 추가 (#49)

* [Feat] Icon 컴포넌트 추가 (#48)

* feat(packages/ui): Icon 컴포넌트 추가

* fix(packages/ui): 아이콘 속성 camelCase로 수정

* feat(packages/ui): svg 파일 import 스크립트, svgr 플러그인 설정 추가

* feat(packages/ui): Icon 컴포넌트

* fix(packages/theme): color 뎁스 낮추기

* [Feat] Spacing 컴포넌트 추가 (#49)

* fix: resolve conflicts

* fix(packages/theme): 컬러 토큰 변경에 따른 dark, theme 토큰 변경

* fix: resolve conflicts

* chore: 주석 제거

---------

Co-authored-by: minseong <[email protected]>

* [Fix] Icon 컴포넌트 수정 (#51)

* fix(packages/ui): Icon 컴포넌트 수정

* chore(packages/ui): 색상 스타일 로직 개선

* fix(packages/ui): IconProps의 color 타입을 string으로 수정해요

* [Fix] 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 (#53)

* fix(packages/ui): Icon 컴포넌트 수정

* chore(packages/ui): 색상 스타일 로직 개선

* fix(packages/ui): IconProps의 color 타입을 string으로 수정해요

* fix(packages/ui, apps/web): 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정

* [Fix] Spacing 컴포넌트 수정 (#54)

* fix(packages/ui): Spacing 컴포넌트 수정

* chore: name import 하도록 수정

* chore: 배럴 파일 수정

* chore: empty file 삭제

* chore(packages/theme): 색상 추가 (#56)

* [Feat] Text 컴포넌트 추가 (#57)

* feat(packages/ui): Text 컴포넌트

* feat(packages/ui): 컴파운드 객체 추가

* chore(packages/ui): TypographyType theme에서 가져오도록 수정

* fix(packages/ui): TextCompoundType 선언 시 중복되는 구문 수정

* fix(packages/ui): Compound Text 컴포넌트 선언 시 중복되는 로직 수정

* feat(packages/ui): Text 컴포넌트 사용 시 대문자 사용하도록 수정

* [Feat] Toast 컴포넌트 추가 (#52)

* chore(packages/ui): ovarlay-kit 의존성 추가

* feat(packages/ui): Toast 컴포넌트 구현

* test(apps/web): Toast 컴포넌트 사용 예시 추가

* fix(packages/ui): 접근성 개선

* chore(packages/ui): lock 파일 업데이트

* chore(packages/themes): violet 색상 추가

* chore(packages/ui): success일 경우의 색상 변경

* fix(apps/web): Providers 컴포넌트 분리, OverlayProvider 이동

* [Feat] Badge 컴포넌트 구현 (#58)

* feat(packages/ui, apps/web): Badge 컴포넌트 구현

* fix(packages/ui, apps/web): Badge 컴포넌트 수정

* chore(packages/ui): named import 변경

* [Feat] Checkbox 컴포넌트 추가 (#60)

* feat(packages/ui): 누름 상태 관리를 위한 usePress 추가

* chore(packages/ui): 체크박스 아이콘 추가

* feat(packages/ui): 체크박스 컴포넌트 추가

* chore(apps/web): 사용 예시 추가

* fix(packages/ui): 키보드 접근성 수정

* [Feat] Label 컴포넌트 구현 (#61)

* feat(packages/ui): Label 컴포넌트 구현

* chore(packages/ui): Label 컴포넌트 예시

* [Feat] Button 컴포넌트 추가 (#59)

* feat(packages/ui): Button 컴포넌트

* fix(packages/ui): Icon color 속성 없을 시 currentColor 적용되도록 수정

* chore(packages/ui): Button 컴포넌트 export

* fix(packages/ui): Button 컴포넌트 스타일

* fix(packages/ui): Icon default size 100%로 변경

* fix(packages/ui): Button 컴포넌트의 leftIcon, rightIcon prop을 leftAddon, rightAddon으로 수정

* feat(packages/ui): twincle icon 추가

* fix(packages/ui): 기존 태그의 prop을 상속 받는 경우 ComponentPropsWithoutRef 사용하도록 수정

* [Feat] Breadcrumb 컴포넌트 추가 (#62)

* chore(packages/ui): @radix-ui/react-slot 설치

* feat(packages/ui): Breadcrumb 컴포넌트 구현

* test(apps/web): 사용 예시 추가

* [Feat] px -> rem 변환 (#64)

* fix: px 단위 rem으로 변환

* fix: body font-size 1.6rem으로 지정

* [Chore] Checkbox 컴포넌트의 label fontSize 변환 (#66)

* chore(packages/ui):  Checkbox 컴포넌트의 label fontSize 변환

* chore(packages/ui): className 빈 값 string 기본값 지정

* [Feat] LottieAnimation 컴포넌트 추가 (#63)

* feat(packages/ui): 로티 파일, 생성 스크립트 추가

* feat(packages/ui): LottieAnimation 컴포넌트 추가

* fix(packages/ui): LottieAnimation 따로 export 하도록 수정, 에셋 상대경로로 수정

* fix(packages/ui): 스크립트 오타 수정

* feat(packages/ui): 코드리뷰 반영

* fix: 빌드 에러 수정

* [Feat] TextField 컴포넌트 구현 (#65)

* chore(apps/web): react-hook-form 설치

* feat(packages/ui): isNill 함수 추가

* chore(packages/ui): isNill export

* feat(packages/ui): TextField 컴포넌트 구현

* test(apps/web): 예시 추가

* fix(packages/ui): 디자인 요구사항 수정

* [Feat] 아이콘, 색상 변경 사항 반영 (#72)

* feat(packages/theme): 아이콘 변경 사항 반영

* fix(packages/ui): 누락된 아이콘 추가

* [Feat] IconButton 컴포넌트 (#68)

* [Feat] Spinner 컴포넌트 추가 (#69)

* feat(packages/ui): Spinner 컴포넌트

* feat(packages/ui): Spinner span 태그로 감싸기

* fix(packages/ui): SpinnerColorType 추가

* [�Fix]: ThemeProvider 패키지 이동, 불필요 배럴 파일 정리 (#74)

* wip

* chore(apps/web): 파일 구조 변경

* chore(packages/theme, apps/web): 배럴파일 정리 및 provider 별도 export

* chore(packages/theme): provider 별도 export

* fix(packages/theme, packages/ui): ThemeProvider 이동

* remove(apps/web): 퍼블리싱 삭제 (별도 PR 예정)

* [Feat] RadioCards 컴포넌트 추가 (#73)

* feat(packages/ui): RadioCards 관리를 위한 context 추가

* feat(packages/ui): RadioCards 컴포넌트 구현 및 JSDoc 추가

* feat(packages/ui): RadioCards 사용 예시 추가

* fix(packages/ui): RadioCards 구조 변경

* test(packages/ui): RadioCards 예시 변경

* docs(packages/ui): JSDoc 업데이트

* fix(packages/ui): 키보드 접근성 개선

* [Feat] Modal 컴포넌트 추가 (#83)

* feat(packages/ui): PortalConsumer 컴포넌트

* feat(packages/ui): PortalConsumer 컴포넌트

* feat(packages/ui): Modal로의 포커스를 위한 FocusTrap 구현

* feat(packages/ui): Modal 컴포넌트 구현 및 JSDoc 작성

* test(apps/web): Modal 컴포넌트 사용 예시 추가

* fix(packages/ui): overlay-kit에서 이미 제공하고 있으므로 PortalConsumer 제거

* [Feat] 스켈레톤 컴포넌트 (#84)

* feat(packages/ui): 스켈레톤 컴포넌트

* feat: displayName 속성 추가

* feat: 리뷰 반영

* [Fix] ui 패키지 컴포넌트 사용 시 모든 컴포넌트가 암묵적으로 import 되는 현상 (#79)

* fix(packages/ui): 아이콘 생성 스크립트 확장자 변경

* feat(packages/ui) 컴포넌트 별 배럴 파일 생성

* fix: 공통 로직 임포트 경로 수정

* fix(packages/ui): esm 방식만 지원하도록 수정

* chore: 사용되지 않는 컴포넌트 제거

* chore: 사용되지 않는 아이콘 제거

* fix(packages/ui): 사용되지 않는 플러그인 제거

* fix: 빌드 에러

* fix: 빌드 에러

* fix: 빌드 에러 수정

* feat: svgr 라이브러리 제거, 아이콘 컴포넌트 생성 스크립트 추가

* fix: build error

* fix: icon 매핑 스크립트 수정

* feat(packages/ui): 컴포넌트 전체 export 추가

* [Feat] Chip 컴포넌트 추가 (#70)

* feat(packages/ui): chip 컴포넌트

* [Feat] TextField 컴포넌트 구현 (#65)

* chore(apps/web): react-hook-form 설치

* feat(packages/ui): isNill 함수 추가

* chore(packages/ui): isNill export

* feat(packages/ui): TextField 컴포넌트 구현

* test(apps/web): 예시 추가

* fix(packages/ui): 디자인 요구사항 수정

* [Feat] 아이콘, 색상 변경 사항 반영 (#72)

* feat(packages/theme): 아이콘 변경 사항 반영

* fix(packages/ui): 누락된 아이콘 추가

* feat(packages/ui): chip 컴포넌트

* feat(packages/ui): Chip에 사용되는 아이콘 추가

* fix(packages/ui): Text 컴포넌트 color prop 없을 때 inherit으로 지정, 기본 line height 값 지정

* fix(packages/ui): Icon 컴포넌트 color 상속 시 path 태그 외의 다른 태그들도 상속 받을 수 있도록 수정

* fix(packages/ui): Chip 컴포넌트 스타일 수정

* feat: x 아이콘 color 수정

* feat: onClose 추가

* fix: x 아이콘 호버링 시 cursor pointer로 지정

* feat: 리뷰 반영

* fix(packages/ui):  closable 버튼 보이지 않는 문제

* fix: 리뷰 반영

---------

Co-authored-by: MINSEONG KIM <[email protected]>

* [Refactor] Spinner 컴포넌트 css 방식으로 변경 (#92)

* fix:(packages/ui): Spinner 컴포넌트 css 방식으로 구현

* fix(packages/ui): Button 컴포넌트 스타일 수정, isLoading 상태 스피너 추가

* [Feat] useToast 추가, DynamicLottie 컴포넌트 추가 (#89)

* [Feat]: useModal 추가 (#91)

* chore(packages/ui): overlay-kit 설치

* feat(packages/ui): useModal 추가

* test(apps/web): useModal 사용 예시 추가

* fix(packages/ui): 옵셔널로 치환

* fix(packages/ui): 자잘한 수정

* fix(packages/ui): 자잘한 수정

* docs(packages/ui): JSDoc 추가

* test(apps/web): 사용 예시 추가

* chore(packages/ui): 코드 간소화

* fix(packages/ui): 프로미스를 반환할 수 있도록 수정

* fix(packages/ui): isNil수정, isNotNill 추가, export 수정

* fix(package/ui): nullish 체크

* fix(packages/ui): 모달 doubleCTA의 각각 버튼 공간이 절반 차지하도록 수정

* test(packages/ui): 예시 수정

* chore: lock 파일 업데이트

* [Feat] ImageManager TypeA 컴포넌트 추가 (#94)

* chore(apps/web): Provider -> provider로 변경 (네이밍 컨벤션 통일)

* feat(apps/web): ImageManager TypeA 컴포넌트 구현

* chore(apps/web): 대소문자 git 이슈 해결

* chore(apps/web): baseUrl 설정

* fix(apps/web): 자잘한 수정, 접근성 개선

* chore(apps/web): 키 상수화

* fix(apps/web): 유효성 검사 수정

* chore(apps/web): 경로 수정

* [Feat] 주제 설정 페이지 퍼블리싱 및 폼 연동 (#95)

* chore(apps/web): motion 추가

* chore(packages/ui): styles export 변경

* feat(packages/theme): 색상 추가

* feat(packages/theme): spacing 추가

* feat(apps/web): KeywordChip 컴포넌트 추가

* feat(apps/web): ImageManager 컴포넌트 추가

* feat(apps/web): 주제 설정 페이지 퍼블리싱

* refactor(apps/web): 컴포넌트 분리 및 자잘한 수정

* fix(apps/web): react-hook-form watch를 통한 조건부 렌더링

* feat(apps/web): react-hook-form을 통한 폼 관리

* fix(apps/web): ImageManager 컴포넌트 packages/ui로 이동 예정

* fix(apps/web): ImageManager TypeA css 수정

* fix(apps/web): GradientAnimatedTitle로 수정

* fix(apps/web): GradientAnimatedTitle로 수정

* feat(apps/web): isEmptyStringOrNil 유틸 추가

* fix(apps/web): ImageManager TypeA 제어형으로 사용 가능하도록 변경

* refactor(apps/web): 컴포넌트 분리

* chore(apps/web): px->rem 변경

* fix(app/web): defaultValues 수정

* fix(apps/web): css 수정

* fix(apps/web): placeholder 수정

* [Feat] ky, tanstack-query 설정, presigned-url 모듈, 뉴스 카테고리 api 연동 (#97)

* fix(packages/ui): onClick 누락 수정

* fix(packages/ui): onClick 누락 수정

* feat(apps/web): 필수 항목 입력 후 홈 BreadCrumb 클릭 시 모달

* feat(apps/web): tanstack-query 셋팅

* fix(apps/web): tanstack-query 셋팅 수정

* feat(apps/web): ky 셋팅

* fix(apps/web): KeywordChipGroup 컴포넌트 수정

* feat(apps/web): 뉴스 카테고리 api 연듕

* feat(apps/web): put, patch, delete 추가

* feat(apps/web): put, patch, delete 추가

* fix(apps/web): nullish 검증

* chore(.github/workflows): env 추가

* fix(apps/web): staleTime, gcTime 수정

* fix(apps/web): 자잘한 수정

* fix(apps/web): 토큰 string으로 관리

* chore(apps/web): shared로 폴더명 변경

* feat(apps/web): presigned-url 모듈 구현 및 연동

* [Feat] 주제 설정 페이지 api 연동, 디자인 추가 반영 (#100)

* fix(apps/web): MainBreadcrumbItem 이미지 수정

* fix(apps/web): suspense 래핑

* remove(apps/web): 불필요 코드 제거

* feat(apps/web): 스크롤 감지 훅 추가

* feat(apps/web): 반투명 NavBar 추가

* fix(apps/web): 스타일링 수정

* fix(apps/web): 스타일링 수정

* fix(apps/web): ImageManager TypeA가 File이 아닌 이미지의 url로 받도록 수정

* feat(apps/web): 공통 타입 분리

* feat(apps/web): 게시물 그룹 및 게시물 생성 API 연동

* feat(apps/web): ImageManager TypeA 최적화 및 UI만 그리도록 관심사 분리

* fix: Images 폴더명을 images로 수정

* fix(apps/web): 자잘한 수정

* fix(apps/web): 자잘한 수정

* fix(apps/web): 타입 개선

* fix(apps/web): ImageManager 단일로 관리

* [Feat] Accordion 컴포넌트 (#99)

* fix(packages/ui): Chip 컴포넌트 개별 export

* feat(packages/ui): Accordion 컴포넌트

* chore: Accordion 컴포넌트 예시 추가

* chore(packages/ui): displayName 추가

* fix: 코드리뷰 반영

* fix: resolve conflicts

* [Fix] 컴포넌트 스타일 수정 (#102)

* fix: 폴더명 Images를 images로 변경

* fix(apps/web): 간단한 레이아웃 수정

* fix(apps/web): NavBar 레이아웃 수정

* fix(packages/ui, apps/web): TextField 레이아웃 깨짐 수정

* fix(packages/ui): Checkbox width 수정

* docs(packages/ui): TextField JSDoc 수정

* [Feat]  결과 수정 - 상세 페이지 퍼블리싱 (#86)

* feat(apps/web): ContentItem 컴포넌트

* feat(apps/web): getMinutesAgo 유틸 함수 추가

* feat(apps/web): ContentItem 컴포넌트

* fix(packages/ui): Chip 컴포넌트 개별 export

* feat(packages/ui): Accordion 컴포넌트

* chore: Accordion 컴포넌트 예시 추가

* feat(apps/web): EditSidebar 추가

* feat(packages/ui): 아이콘 에셋  추가

* fix(apps/web): getMinutesAgo 함수 getTimesAgo 함수로 수정

* fix(packages/ui): IconButton 컴포넌트 props에서 type도 받도록 수정

* fix(apps/web): ContentItem 컴포넌트 디자인 수정 반영

* feat(apps/web): PostEditor 추가

* feat(apps/web): EditPromptField 추가

* feat(apps/web) EditPost 영역 추가

* feat(apps/web): ContentItem 컴포넌트

* chore: Accordion 컴포넌트 예시 추가

* fix: resolve conflicts

* fix: resolve conflicts

* fix: 빌드 에러

* fix: 빌드 에러

* fix(apps/web): TextField 수정 반영

* fix(packages/ui): Accordion 컴포넌트 스타일 수정

* [Feat] vercel 자동 배포 빌드 스크립트 (#105)

---------

Co-authored-by: MINSEONG KIM <[email protected]>
Co-authored-by: minseong <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] 컴포넌트 스타일 수정
2 participants