팀 소개 섹션 개발 #681

Hecklebot · 2025-12-22T13:20:31Z

변경 사항

마케팅 페이지의 팀원 소개 섹션 개발

리뷰어에게

윈도우에서 국기 이모지가 정상적으로 그려지지 않습니다. 이모지 말고 대안이 있을지 고민이 필요합니다.
Github, Linkedin URL이 올바른지 각자 확인 부탁드립니다.

PR 작성자 체크 리스트

UI Review를 요청하고 검토를 받았나요?
UI Tests를 진행했나요?

codecov · 2025-12-22T13:21:19Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

DaleSeo · 2025-12-22T17:16:15Z

@Hecklebot 님, PR이 아직 Draft 상태이지만 코드를 보면 구현 작업은 거의 끝나신 것 같네요. 본 PR이 병합되는데 얼마나 시간이 걸릴 것 같으신가요? 올해가 가기 전에 마케팅 페이지 홍보가 가능할지 파악하기 위해 여쭙니다.

Hecklebot · 2025-12-22T20:49:06Z

@DaleSeo 님. 제가 수, 목요일에는 작업이 어려워서 오늘 중에 마무리해보겠습니다! 병합은 리뷰 상태에 따라 빠르면 금요일, 늦어도 일요일에는 진행되면 좋겠습니다.

codecov · 2025-12-23T04:09:17Z

Bundle Report

Changes will increase total bundle size by 23.88kB (4.31%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
daleui-bundle-esm	577.63kB	23.88kB (4.31%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: daleui-bundle-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/index-*.js`	22.98kB	276.26kB	9.07% ⚠️
`assets/index-*.css`	900 bytes	64.46kB	1.42%

Files in assets/index-*.js:

./src/assets/images/marketing/team/linkedIn-dark.webp → Total Size: 3.85kB
./src/assets/images/marketing/team/linkedIn-light.webp → Total Size: 3.25kB
./src/App.tsx → Total Size: 1.55kB
./src/marketing/Team.tsx → Total Size: 12.42kB
./src/assets/images/marketing/team/github-light.webp → Total Size: 4.6kB
./src/assets/images/marketing/team/github-dark.webp → Total Size: 4.6kB

DaleSeo

스토리북에서 location과 role의 정렬이 틀어지는 현상을 발견하였습니다.

src/marketing/Team.stories.tsx

src/marketing/Team.tsx

hyoseong1994 · 2025-12-28T06:11:35Z

@Hecklebot 안녕하세요 한샘님 디자인쪽 수정이 발생하였는데 누락될까봐 링크 남깁니다.
https://www.figma.com/design/mQ2ETYC6LXGOwVETov3CgO?node-id=5772-7278#1568988666

…yout

RiaOh · 2025-12-28T11:56:56Z

src/marketing/Team.tsx

+            <div
+              className={css({
+                position: "absolute",
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+                color: "#5cb85c",
+              })}
+            >
+              <Icon name="codeXml" size="md" />
+            </div>
+          )}
+        </div>


figma를 보면 프로필사진이 없을 경우, 저희 Dalu UI 로고와 컬러가 들어가는것 같은데 구현해놓으신걸 보면 #5cb85c컬러로 되어있습니다!
[figma]

[storybook]

ce2a735 에서 figma에 적용된 svg를 추가해두었습니다.

…and updating styles

DaleSeo · 2025-12-28T18:39:00Z

@Hecklebot 님, #681 (review) 에서 말씀드린 문제가 여전히 해결이 안 된 것으로 보입니다.

Hecklebot · 2025-12-28T22:09:11Z

@DaleSeo 님.

제 윈도우 환경에서는 현재 이렇게 보이고 있습니다. 스토리북 Docs에선 실제 너비와 반응형 브레이크 포인트가 일치하지 않아

    docs: {
      story: {
        inline: false,
        iframeHeight: 900,
      },
    },

설정을 추가해 실제 너비에 맞는 반응형 레이아웃을 그리도록 설정해 두었습니다. 맥/사파리 환경의 문제인지 퇴근해서 다시 확인해보겠습니다.

…r details

DaleSeo · 2025-12-29T16:09:24Z

src/marketing/Team.tsx

+import akaAvatar from "../assets/images/marketing/team/members/aka.webp";
+import daleAvatar from "../assets/images/marketing/team/members/dale.webp";
+import eunjiAvatar from "../assets/images/marketing/team/members/eunji.webp";
+import evanAvatar from "../assets/images/marketing/team/members/evan.webp";
+import hansaemAvatar from "../assets/images/marketing/team/members/hansaem.webp";
+import helenaAvatar from "../assets/images/marketing/team/members/helena.webp";
+import hyoseongAvatar from "../assets/images/marketing/team/members/hyoseong.webp";
+import riaAvatar from "../assets/images/marketing/team/members/ria.webp";


개인 사진을 저장소에 저장하는 방식을 다시 한 번 고려해 주셨으면 좋겠습니다. 새로운 팀원이 합류할 때 마다 개인 사진을 요청해야하고, 기존 팀원이 사진을 바꾸고 싶을 때는 Pull Request가 필요하기 때문에 유지보수가 번거로워질 것 같아요.

디스코드에서도 말씀드렸듯이 GitHub의 프로필에서 충분히 가져올 수 있는 사진들입니다. 예를 들어, 제 프로필 사진은 아래 URL로 접근할 수 있습니다.

https://avatars.githubusercontent.com/u/5466341?v=4

본인 사진을 사용하고 싶지 않다는 팀원 분들께서는 이미 깃허브 프로필에도 본인 사진이 아니기 때문에 큰 문제되지 않을 거라고 생각합니다.

달레님께서 제안주신 것에 동의합니다. 멤버별 사진을 포함하면 유지보수 측면에서 부담이 클 것 같아요. 깃헙 프로필 이미지 url을 사용하는 방향이 더 유연하고 관리하기 쉬울 것 같습니다.

엇 해당 방식으로 변경하겠습니다.

5f237bb 에서 수정했습니다!

hyoseong1994

사진 저장한건 제거하고 링크 방향으로 가는거 같아서 저는 추가 코멘트 없습니다

고생하셨습니다!

jj5u · 2025-12-30T04:15:38Z

linkedIn 아이콘 비율이 맞지 않습니다. 해당 아이콘 이미지 원 비율이 1:1이 아니라서 높이 지정해주신 걸 빼주시면 자연스럽게 고쳐질 것 같습니다. 확인부탁드립니다.

Hecklebot · 2025-12-30T09:51:12Z

@jj5u 님 linkedIn light 이미지 비율 변경했습니다.

DaleSeo · 2025-12-31T14:51:04Z

제 윈도우 환경에서는 현재 이렇게 보이고 있습니다. 스토리북 Docs에선 실제 너비와 반응형 브레이크 포인트가 일치하지 않아
    docs: {
      story: {
        inline: false,
        iframeHeight: 900,
      },
    },
설정을 추가해 실제 너비에 맞는 반응형 레이아웃을 그리도록 설정해 두었습니다. 맥/사파리 환경의 문제인지 퇴근해서 다시 확인해보겠습니다.

@Hecklebot 님, 저는 #681 (review) 에서 Marketing Page의 스토리에 대해서 문제를 보고드렸었는데, 한샘님께서는 Team의 스토리를 보고 계신 것 같습니다. 방금 다시 확인해봤는데 여전히 문제가 해결되지 않았습니다.

DaleSeo · 2025-12-31T15:07:16Z

src/marketing/Team.tsx

+import githubLightIcon from "../assets/images/marketing/team/github-light.webp";
+import githubDarkIcon from "../assets/images/marketing/team/github-dark.webp";
+import linkedInLightIcon from "../assets/images/marketing/team/linkedIn-light.webp";
+import linkedInDarkIcon from "../assets/images/marketing/team/linkedIn-dark.webp";


Icon 컴포넌트를 쓰지 않고, 생 이미지를 쓰는 이유가 있을까요?

우선 iconography에 브랜드 아이콘에 createBrandIcon 함수를 이용해 fill="currentColor"를 적용하고 있는데, 이걸 적용하지 않는 아이콘을 또 export 하는 게 맞는지 고민이 되었습니다.

또한 Figma에서 사용 중인 아이콘과 iconography에 추가된 svg 아이콘의 크기가 달라 Icon 컴포넌트에 className을 통한 스타일링을 적용해야 하는데, #491 에서 추가하지 않는 방향으로 논의가 진행되어서 그 부분도 고려했습니다.

@Hecklebot 아하, 그런 고민이 있으셨군요! 아이콘 컴포넌트의 API를 수정하는 방향으로 풀 수도 있었던 문제일 것 같은데, 이제와서 관련 논의를 시작하기에는 너무 늦은감이 있네요. 앞으로는 이렇게 일관성에 타협을 하셔야하는 상황에서는 차선책에 대해서 좀 더 적극적으로 팀 차원에서 커뮤니케이션 해주시면 좋을 것 같습니다.

@jj5u 님, 피그마 디자인을 보니 애초에 아이콘 컴포넌트를 쓰지 않으신 것 같네요. 디자인 단부터 일회성 스타일을 지양하고 최대한 디자인시스템에서 제공하는 컴포넌트를 활용하는 것이 매우 중요하다고 생각합니다. 그렇지 않으면 개발 과정에서 이렇게 임의의 구현 결정을 하게 됩니다. 가급적 이러한 결정은 시스템 단에서 이미 되어 있어서 개발자가 고민할 필요가 없는 것이 디자인시스템의 목표일 것입니다.

Hecklebot added 2 commits December 22, 2025 18:27

feat: Add Team section

f4fba92

feat: Enhance Team section with member details and layout adjustments

96c5d67

Hecklebot linked an issue Dec 22, 2025 that may be closed by this pull request

마케팅페이지 팀원 소개 섹션 구현 #583

Open

github-actions bot assigned Hecklebot Dec 22, 2025

Hecklebot changed the title ~~583 marketing page team~~ 팀 소개 섹션 개발 Dec 22, 2025

refactor: Update Team component layout and member information

5c126c3

Hecklebot marked this pull request as ready for review December 23, 2025 13:05

Hecklebot requested a review from a team as a code owner December 23, 2025 13:05

Hecklebot deployed to chromatic December 23, 2025 13:05 — with GitHub Actions View deployment

DaleSeo reviewed Dec 23, 2025

View reviewed changes

src/marketing/Team.stories.tsx Outdated Show resolved Hide resolved

hyoseong1994 reviewed Dec 23, 2025

View reviewed changes

src/marketing/Team.tsx Show resolved Hide resolved

Hecklebot added 2 commits December 28, 2025 20:39

refactor: Remove unused custom member stories

cb69e86

feat: Implement container queries in Team component for responsive la…

681ec0d

…yout

RiaOh reviewed Dec 28, 2025

View reviewed changes

Hecklebot added 3 commits December 28, 2025 21:22

feat: Add team member avatars and update Team component stories

db96f35

refactor: Simplify TeamCard component by removing commented sections …

ce2a735

…and updating styles

feat: Add GitHub and LinkedIn icons to TeamCard component

65209e5

Hecklebot deployed to chromatic December 28, 2025 12:49 — with GitHub Actions View deployment

Hecklebot requested review from DaleSeo, RiaOh and hyoseong1994 December 28, 2025 12:57

feat: Add new team member avatars and update Team component with thei…

f160533

…r details

Hecklebot deployed to chromatic December 29, 2025 13:16 — with GitHub Actions View deployment

DaleSeo reviewed Dec 29, 2025

View reviewed changes

hyoseong1994 approved these changes Dec 30, 2025

View reviewed changes

feat: Add new GitHub and LinkedIn icons, update avatars

5f237bb

Hecklebot deployed to chromatic December 30, 2025 09:35 — with GitHub Actions View deployment

refactor: Remove redundant height style from LinkedIn icon

0eb028d

Hecklebot deployed to chromatic December 30, 2025 09:46 — with GitHub Actions View deployment

Hecklebot requested review from DaleSeo and yolophg December 30, 2025 09:52

DaleSeo reviewed Dec 31, 2025

View reviewed changes

Uh oh!

팀 소개 섹션 개발 #681

Are you sure you want to change the base?

팀 소개 섹션 개발 #681

Conversation

Hecklebot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

변경 사항

리뷰어에게

PR 작성자 체크 리스트

Uh oh!

codecov bot commented Dec 22, 2025

Codecov Report

Uh oh!

DaleSeo commented Dec 22, 2025

Uh oh!

Hecklebot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

DaleSeo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hyoseong1994 commented Dec 28, 2025

Uh oh!

RiaOh Dec 28, 2025

Choose a reason for hiding this comment

Uh oh!

Hecklebot Dec 28, 2025

Choose a reason for hiding this comment

Uh oh!

DaleSeo commented Dec 28, 2025

Uh oh!

Hecklebot commented Dec 28, 2025

Uh oh!

DaleSeo Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yolophg Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Hecklebot Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Hecklebot Dec 30, 2025

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 left a comment

Choose a reason for hiding this comment

Uh oh!

jj5u commented Dec 30, 2025

Uh oh!

Hecklebot commented Dec 30, 2025

Uh oh!

DaleSeo commented Dec 31, 2025

Uh oh!

DaleSeo Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Hecklebot Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

DaleSeo Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Hecklebot commented Dec 22, 2025 •

edited

Loading

Hecklebot commented Dec 22, 2025 •

edited

Loading

codecov bot commented Dec 23, 2025 •

edited

Loading

DaleSeo Dec 29, 2025 •

edited

Loading

DaleSeo Dec 31, 2025 •

edited

Loading