[FEAT-23] 학과별 입시 기능 구현

[qwer0114]

📝 PR 내용

• 학과별 입시 결과를 반환하는 기능을 구현했습니다.

✅ 작업 내용

• 학과별 입시 결과 반환을 구현하며 Funnel 패턴을 재사용했습니다
• 캠퍼스 선택 -> 단과대 선택 -> 학과 선택 의 플로우가 Funnel 패턴을 재활용하면 쉽게 구현할 수 있을거라 생각했습니다.
• 위 과정에서 새로운 Funnel step 타입 단계를 만들며 기존 Funnel의 step 타입은 ChatSteps로 고정되어 있었지만 제네릭을 활용하여 확장성 높게 타입을 변경했습니다. 9e98374
• 타입 수정으로 인해 기존 main 컴포넌트가 변경되었으니 참고 부탁드립니다 c90dc13
• 컴포넌트별 반복해서 사용했던 PresetButton들을 공통 컴포넌트로 묶어서 재사용하는 방식으로 변경했습니다 a10e1e7
  • 출처 확인 버튼은 경우에 따라 보이지 않아야 하는 상황이 있기에 조건부 렌더링 추가했습니다. 7a7ebdb

📸 스크린 샷 / 영상 (선택)

🔗 연관 이슈

• Closes [FEAT] - 학과별 입시 조회 #23

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maru-egg-fe-v2-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:09am

[github-actions]

🚀 Storybook 링크: https://6789e91d8356b60e6b422469-dejdynatfy.chromatic.com/

[swgvenghy]

고생하셨습니다!! 확실히 코드가 깔끔해서 읽기 편한 것 같아요...!

제네릭 타입을 활용하신 부분과 관련해서 궁금한 점이 있습니당 제 개인적인 생각에서는 ChatSteps 의외에 다른 step이 들어갈 상황 자체가 있을까...? 라는 생각이 들었는데 어떠한 이유로 제네릭 타입을 도입하셨는지 이유가 궁금합니다...!

아 제가 코드를 잘못 읽었었네요!! 저는 너무 좋은 것 같아요!! 고생하셨어요!!

[sangmaaaaan]

고생하셨습니다!! 현재로서는 ChatSteps 외에 다른 step이 필요할 상황이 크게 보이지 않아서, 이번 PR에서 제네릭으로 확장할 필요가 있을지 조금 궁금합니다.
어떤 추가적인 step이 고려되어 있는지, 혹은 앞으로 Funnel 컴포넌트를 더 확장할 계획이 있으신지 공유해 주시면 감사하겠습니다!
혹시 제가 잘못이해하고 있다면 이부분에 관련해서 다시 한번 설명 부탁드립니다ㅠ

그리고 이번 PR과는 별개로,
menu-items/check-box/check-box.tsx의 23번째 코드에서 다음과 같이

<div className={cn('relative px-4 py-3', 'hover:bg-gray-50 hover:rounded-md', 'cursor-pointer')}>

마우스 커서 포인터와 rounded-md 값이 현재 UI에서는 조금 더 조정이 필요해 보이는데,
해당 부분을 제가 수정해도 괜찮을지 여쭤보고 싶습니다!

[qwer0114]

고생하셨습니다!! 현재로서는 ChatSteps 외에 다른 step이 필요할 상황이 크게 보이지 않아서, 이번 PR에서 제네릭으로 확장할 필요가 있을지 조금 궁금합니다. 어떤 추가적인 step이 고려되어 있는지, 혹은 앞으로 Funnel 컴포넌트를 더 확장할 계획이 있으신지 공유해 주시면 감사하겠습니다! 혹시 제가 잘못이해하고 있다면 이부분에 관련해서 다시 한번 설명 부탁드립니다ㅠ

그리고 이번 PR과는 별개로, menu-items/check-box/check-box.tsx의 23번째 코드에서 다음과 같이

<div className={cn('relative px-4 py-3', 'hover:bg-gray-50 hover:rounded-md', 'cursor-pointer')}>

마우스 커서 포인터와 rounded-md 값이 현재 UI에서는 조금 더 조정이 필요해 보이는데, 해당 부분을 제가 수정해도 괜찮을지 여쭤보고 싶습니다!

7f9fa4e 해당 커밋을 살펴보시면 학과 선택시에도 캠퍼스 선택->단과대 선택->학과 선택의 Funnel 단계를 따르고 있어 제네릭으로 타입을 확장했습니당.

checkbox 코드는 간단한 수정사항이여서 제가 조정하도록 하겠습니다!
aa6734b checkbox 변경 반영했습니다!

[qwer0114]

고생하셨습니다!! 확실히 코드가 깔끔해서 읽기 편한 것 같아요...!
제네릭 타입을 활용하신 부분과 관련해서 궁금한 점이 있습니당 제 개인적인 생각에서는 ChatSteps 의외에 다른 step이 들어갈 상황 자체가 있을까...? 라는 생각이 들었는데 어떠한 이유로 제네릭 타입을 도입하셨는지 이유가 궁금합니다...!

아 제가 코드를 잘못 읽었었네요!! 저는 너무 좋은 것 같아요!! 고생하셨어요!!

넹 감사합니다. 다른 Funnel 사용은 7f9fa4e 해당 커밋 살펴보시면 됩니다!!

[github-actions]

🚀 Storybook 링크: https://6789e91d8356b60e6b422469-jsjbxcvgwy.chromatic.com/

[sangmaaaaan]

고생하셨습니다!! 현재로서는 ChatSteps 외에 다른 step이 필요할 상황이 크게 보이지 않아서, 이번 PR에서 제네릭으로 확장할 필요가 있을지 조금 궁금합니다. 어떤 추가적인 step이 고려되어 있는지, 혹은 앞으로 Funnel 컴포넌트를 더 확장할 계획이 있으신지 공유해 주시면 감사하겠습니다! 혹시 제가 잘못이해하고 있다면 이부분에 관련해서 다시 한번 설명 부탁드립니다ㅠ
그리고 이번 PR과는 별개로, menu-items/check-box/check-box.tsx의 23번째 코드에서 다음과 같이

<div className={cn('relative px-4 py-3', 'hover:bg-gray-50 hover:rounded-md', 'cursor-pointer')}>

마우스 커서 포인터와 rounded-md 값이 현재 UI에서는 조금 더 조정이 필요해 보이는데, 해당 부분을 제가 수정해도 괜찮을지 여쭤보고 싶습니다!

7f9fa4e 해당 커밋을 살펴보시면 학과 선택시에도 캠퍼스 선택->단과대 선택->학과 선택의 Funnel 단계를 따르고 있어 제네릭으로 타입을 확장했습니당.

checkbox 코드는 바꿔주셔도 좋을거 같습니다!

다시 읽어보니 학과 선택 시에도 캠퍼스 선택 → 단과대 선택 → 학과 선택 과정이 Funnel 단계로 구현되어 있어
제네릭으로 타입을 확장하신 것을 확인했습니다!

다만, DepartmentStep이 추가되면서 보니까 ChatSteps와 DepartmentSteps라는 명칭이 다소 모호하게 느껴졌습니다.
특히 두 단계가 마치 서로 독립적이지 않고 ChatSteps 내의 하위 단계처럼 보일 수 있어, 가독성 개선이 되면 좋지 않을까 생각했습니다!

예를 들어:

• ChatSteps를 AdmissionOverviewSteps(입시 개괄 단계)처럼 입시 전반적인 과정임을 명확히 표현하거나,
• DepartmentSteps를 DepartmentSelectionSteps(학과 선택 단계)처럼 학과 선택 과정임을 드러내는 방식도 고민해볼 수 있을 것 같습니다.

아니면 이부분은 추후 UT(유저 테스트)를 통해 ChatSteps 과정의 플로우가 조정된다면,
그때 기능이나 도메인 역할에 따라 Step이 더 명확하게 분류가 되어도 좋겠다는 생각이 들었습니다.

이 부분은 나중에 다같이 회의 때 결정해봐도 좋을 것 같은데 어떤 생각이신지 궁금합니다!!

[qwer0114]

다만, DepartmentStep이 추가되면서 보니까 ChatSteps와 DepartmentSteps라는 명칭이 다소 모호하게 느껴졌습니다. 특히 두 단계가 마치 서로 독립적이지 않고 ChatSteps 내의 하위 단계처럼 보일 수 있어, 가독성 개선이 되면 좋지 않을까 생각했습니다!

예를 들어:

• ChatSteps를 AdmissionOverviewSteps(입시 개괄 단계)처럼 입시 전반적인 과정임을 명확히 표현하거나,
• DepartmentSteps를 DepartmentSelectionSteps(학과 선택 단계)처럼 학과 선택 과정임을 드러내는 방식도 고민해볼 수 있을 것 같습니다.

아니면 이부분은 추후 UT(유저 테스트)를 통해 ChatSteps 과정의 플로우가 조정된다면, 그때 기능이나 도메인 역할에 따라 Step이 더 명확하게 분류가 되어도 좋겠다는 생각이 들었습니다.

이 부분은 나중에 다같이 회의 때 결정해봐도 좋을 것 같은데 어떤 생각이신지 궁금합니다!!

우선 DepartmentSteps은 ChatSteps단계에 존재하는 상세전형 학과별 입시의 하위 단계가 맞습니다.
저 또한 ChatSteps의 이름이 혹은 DepartmentSteps의 이름이 조금 더 명확하면 좋겠다고 생각을 하고 있어서 추후 회의를 통해 결정을 해봐도 좋을 것 같다고 생각이 듭니다.
당장 생각나는 방법은 ChatSteps를 유지한 뒤 기존 ChatSteps의 입시유형 선택, 입시유형 상세전형 선택, 상세전형 선택 결과를 하나의 새로운 AdmissionSelectionSteps으로 묶어 DepartmentSteps처럼 처리할 수 있는 방법도 존재할거 같습니다.
해당 내용은 우선 PR을 머지하고 추후 새로운 이슈로 다루는게 좋을것 같은데 어떻게 생각하시나요 ?

[sangmaaaaan]

동의합니다! 일단 이 PR은 머지한 상태에서 나중에 진행해도 좋다고 생각합니다 고생하셨습니다!