[Feat]: Survey 컴포넌트 제작 by kwonsaebom · Pull Request #62 · SOPT-36-NINEDOT/NINEDOT-CLIENT

kwonsaebom · 2025-07-08T17:07:07Z

💡 Summary

close #60

✅ Tasks

Survey 컴포넌트 제작
SurveyItem 컴포넌트 제작

👀 To Reviewer

아래꺼 넣고 테스트 해주세염 🤗

// home.css.ts
import { style } from '@vanilla-extract/css';

export const homeStyle = style({
  backgroundColor: 'black',
  height: '100vh',
});

// home.ts
import { homeStyle } from '@/page/home/home.css';
import { Survey } from '@/page/signup/component/Survey/Survey';

const Home = () => {
  return (
    <div className={homeStyle}>
      <Survey />
    </div>
  );
};

export default Home;

📸 Screenshot

github-actions · 2025-07-08T17:07:35Z

빌드 결과

빌드 실패 😵

github-actions · 2025-07-08T17:08:00Z

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

github-actions · 2025-07-08T17:09:59Z

빌드 결과

빌드 성공 🎉

github-actions · 2025-07-08T17:10:50Z

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

Leeyoonji23

고생하셨습니다! 코멘트 몇 개만 확인해주세용!~

그리고 현재 로직에 응답에 대한 유효성 검사가 없는 것 같아서, 하나라도 응답하지 않았으면 제출 버튼을 비활성화해야할 것 같은데, 관련해서 논의사항이 있었으면 추가해주시는게 좋을 것 같고 없다면 한 번 여쭤보시는 게 좋을 것 같습니다!

Leeyoonji23 · 2025-07-09T05:22:31Z

src/page/signup/component/Survey/Survey.tsx

+    <div className={surveyWrapper}>
+      {questionList.map((question) => (
+        <div key={question.id} className={surveyContainer}>
+          <p className={surveyTitle}>{question.content}</p>


p3) 시맨틱 태그 활용 좋습니다!
다만, 질문에 대한 제목이니만큼 p 태그 말고 h3...이나 header 관련 태그는 어떨까요?

12d92ad

좋은 의견 감사합니다 ! 수정했습니다 !!

Leeyoonji23 · 2025-07-09T05:23:45Z

src/page/signup/component/SurveyItem/SurveyItem.tsx

+
+const SurveyItem = ({ item, isChecked, onClick }: itemProps) => {
+  return (
+    <div className={itemContainer} onClick={onClick}>


p3) div에 직접 onClick을 쓰면 접근성면에서 부족한 점이 없지않아...있기 때문에 button 이나 label 태그 써주시면 좋을 것 같아요!

bb2e926

리뷰 주신 방향으로 수정했습니다 !! 👍🏻 👍🏻

Leeyoonji23 · 2025-07-09T05:24:37Z

src/page/signup/component/SurveyItem/SurveyItem.tsx

+      {isChecked ? (
+        <IcRadioChecked className={checkedIcon} />
+      ) : (
+        <IcRadioDefault className={defaultIcon} />
+      )}


p2)

<IcRadioChecked className={isChecked ? checkedIcon : defaultIcon} />

요롷게 한 줄로 처리할 수 있을 것 같아용

23f2264

체크된 부분이랑 체크 안된 부분이랑 아이콘이 아예 달라서 요렇게 수정해보아뜹니다 ..
확실히 더 깔끔해진 것 같은데 어떤가요 ?!! 🤩

Leeyoonji23 · 2025-07-09T05:25:43Z

src/page/signup/component/SurveyItem/SurveyItem.tsx

+      ) : (
+        <IcRadioDefault className={defaultIcon} />
+      )}
+      <p className={itemText}>{item.content}</p>


p3) 리스트 항목 안에서 쓰이는 정적인 텍스트라면 p보다는 span이 더 시멘틱 할 것 같습니당

6b9faef

수정헀습니다아

shinjigu

div → button/label 변경이나 시맨틱 태그 개선 제안들만 수정하면 되겠네요 !! 너무 수고하셨습니당 🐰🐰

kwonsaebom · 2025-07-09T08:15:58Z

고생하셨습니다! 코멘트 몇 개만 확인해주세용!~

그리고 현재 로직에 응답에 대한 유효성 검사가 없는 것 같아서, 하나라도 응답하지 않았으면 제출 버튼을 비활성화해야할 것 같은데, 관련해서 논의사항이 있었으면 추가해주시는게 좋을 것 같고 없다면 한 번 여쭤보시는 게 좋을 것 같습니다!

(이름, 이메일, 생년월일, 개인정보 동의) 이렇게가 필수 정보고, 이 정보들을 입력했을 시에 제출 버튼이 비활성화 된다고 알고 있습니다 !
요 부분은 회원가입 뷰 작성할 때 로직 작성하겠습니다 !!

github-actions · 2025-07-09T08:41:35Z

빌드 결과

빌드 성공 🎉

github-actions · 2025-07-09T08:42:13Z

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

봄 added 7 commits July 9, 2025 00:56

chore: radio 아이콘 추가

9e9477d

feat: SurveyItem 컴포넌트 제작

cb110b9

refactor: 타입 파일 분리

b9abfa1

refactor: 타입 파일 수정

5897642

style: 커서에 포인터 추가

6c70804

feat: 회원가입 Survey 컴포넌트 제작

d64f52f

feat: props 추가

0b8f26c

kwonsaebom self-assigned this Jul 8, 2025

kwonsaebom requested review from Leeyoonji23, jisooooooooooo and shinjigu as code owners July 8, 2025 17:07

kwonsaebom added ✨ Feature 기능 개발 🐰 새봄 labels Jul 8, 2025

kwonsaebom linked an issue Jul 8, 2025 that may be closed by this pull request

[Feature]: 맞춤 정보 컴포넌트 제작 #60

Closed

2 tasks

chore: 빌드 에러 해결

6d31e58

Leeyoonji23 requested changes Jul 9, 2025

View reviewed changes

shinjigu approved these changes Jul 9, 2025

View reviewed changes

jisooooooooooo approved these changes Jul 9, 2025

View reviewed changes

봄 added 4 commits July 9, 2025 17:20

refactor: 시맨틱 태그 변경

12d92ad

refactor: 라디오 버튼 코드 리팩토링

23f2264

refactor: 시맨틱 태그 수정

bb2e926

refactor: 시맨틱 태그 변경

6b9faef

Leeyoonji23 approved these changes Jul 9, 2025

View reviewed changes

kwonsaebom merged commit 7657e1f into develop Jul 9, 2025
4 checks passed

jisooooooooooo deleted the feat/#60/survey branch September 11, 2025 00:45

Conversation

kwonsaebom commented Jul 8, 2025

💡 Summary

✅ Tasks

👀 To Reviewer

📸 Screenshot

Uh oh!

github-actions bot commented Jul 8, 2025

빌드 결과

Uh oh!

github-actions bot commented Jul 8, 2025

🎨 스토리북 배포 완료!

Uh oh!

github-actions bot commented Jul 8, 2025

빌드 결과

Uh oh!

github-actions bot commented Jul 8, 2025

🎨 스토리북 배포 완료!

Uh oh!

Leeyoonji23 left a comment • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shinjigu left a comment

Choose a reason for hiding this comment

Uh oh!

kwonsaebom commented Jul 9, 2025

Uh oh!

github-actions bot commented Jul 9, 2025

빌드 결과

Uh oh!

github-actions bot commented Jul 9, 2025

🎨 스토리북 배포 완료!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Leeyoonji23 left a comment •

edited

Loading