[인턴 2주차] css 심화, 공통 컴포넌트 제작(label, input, button), 재사용성 및 UI/UX 고민들

Innes·2025년 1월 5일

인턴

목록 보기

4/14

✨ css 심화

1. ul - li 태그 3개중 가운데꺼만 양옆 테두리 넣기

ul li:nth-child(2) {
    border-left: 1px solid black; /* 왼쪽 border */
    border-right: 1px solid black; /* 오른쪽 border */
    padding: 0 10px; /* border와 텍스트 사이 간격 */
}

:nth-child(n) 활용하기!!!

2. p, span태그 기본 여백 삭제

index.css에

  line-height: 1;

(figure태그의 기본 여백은 어떻게 삭제해야하나?)

line-height: 0;

으로 하면 여백 없어짐

3. type에 따라 다른 스타일링

(버튼 css 참고하여 작성 예정)

=> 결국 상위 스타일링에 종속되는 스타일링 작성방법임
.button.primary
.button.white 등

4. 인증번호 카운트다운은 input 어디에 위치시킬까

공통 컴포넌트에 추가적인 absolute 텍스트같은거 넣어야할때
ex. 인증번호 입력할때 카운트다운 숫자 텍스트
-> addon 이라는 props를 컴포넌트로 내려준다!
(추가적인 UI라는 add-on인데 카멜케이스가 아닌 한단어처럼 쓴다. prefix, suffix처럼)

1. 부모 div에 addon props로 받은 경우만 position relative 설정
1. addon은 input아래에 div로 추가 (style은 absolute로 따로 추가하기)

FindIdByPhone.tsx, LabelInputSet.tsx 참고

✨ 공통 컴포넌트

form태그의 label, input 세트

submit 버튼

버튼 - primary, white, danger

props : 가로 길이, text내용

✅ - 버튼 3가지 : props로 버튼 유형이 primary, white, danger 중 어떤건지만 보내주면 아래의 내용 반영한 버튼으로 만들어주도록 공통컴포넌트를 만들고싶어.

1) primary : 배경색 primary, 글자색 white, disabled처리
2) white : 배경색 white, 글자색 gray-700, 테두리색 gray-200
3) danger : 배경색 white, 글자색 error-500, 테두리색 error-500,

버튼 공통 : 세로길이, border radius, flex 정렬, 텍스트 두께

⭐️ type에 따라 다른 스타일 적용하는 module css 작성법 참고

✅ 2. form태그의 label + input 세트

label 공통 : 글씨크기, 색, margin bottom
input 공통 : 배경색, placeholder 글씨크기, 색, padding값
props로 전달할 내용
(label)
label에서 보여줄 텍스트 내용

(input)
id(input의 id === label의 htmlFor 로 처리하기)
placeholder 내용
input창 가로길이
type (password인 경우 필요)

✨ 재사용성 및 UI/UX 고민들

인증번호 전송 클릭 후의 ui 만들기

아이디 찾기 조회시 url을 다르게 사용해야 뒤로가기를 다시 하고싶은 유저를 고려한 긍정적인 UX 효과를 가져올수 있음
(url이 같으면 뒤로가기를 해도 아이디찾기 페이지로 이동하는게 아니라 그 전에 머물던 페이지로 이동하게 되기 때문)

비밀번호 찾기 페이지

아이디 찾기, 비밀번호 찾기 시 똑같은 ui이지만 다른 페이지 url을 써야함!
-> 둘이 다른 페이지라서 다른 컴포넌트를 보여줘야된다고 생각했는데, 너무 똑같아서 이걸 어떻게 효율적으로 최대한 있는걸 재사용하는 방식으로 작성할수있을까 고민하게됐다.
다른 부분도 진짜 조금 있음 (비밀번호 찾기시에는 ‘아이디’ 입력란이 있음. 이외는 다 동일)

방법 1. useParams를 쓰자

useParams 써서 url을 받아와서 find-id인 경우엔 아이디 인풋 x, find-password인 경우엔 아이디 인풋 o 로 계획

App.tsx 의 url 라우팅에는 원래는 ‘find-id’, ‘find-password’로 따로 만들어서 컴포넌트도 따로 보여주려고 했는데, ‘/userInfo/:findUserInfo’로 하면 동적 라우팅 할 수 있으니까 괜찮지 않을까 계획

방법 2. dynamic routes를 활용하자 (동적 라우팅)
path=“/userInfo/:FindUserInfo”

방법 3. 페이지 이동하는 버튼에서 Link태그 활용하자!
Link태그 활용하기! (아이디찾기, 비밀번호 찾기)
<Link to=“/userInfo/find-id”>아이디 찾기</Link>

📝 dynamic routing 사용하기

계기
회원정보 찾기 페이지 작성 중 ‘아이디 찾기’, ‘비밀번호 찾기’에서 공통된 ui가 많았다. 그런데 둘을 개별 url로 사용하고 싶었다.
다른 url을 사용하면서도 ui 재사용할 수 있는건 최대한 재사용하고싶어서 고민하던 중, 동적 라우팅을 하면 ui 재사용을 최대한 활용하면서 url은 바꿀수 있다는걸 알았다.

사용법

Route path=“/userInfo/:findUserInfo”
-> userInfo뒤에 오는 url을 마음대로 바꿀수 있다.
사용처에서 사용할 때는
const params = useParams();
console.log("params", params.findUserInfo);

===

  const { findUserInfo } = useParams();
  console.log("findUserInfo", findUserInfo);

props로 params를 받을 필요 없음. useParams 쓰면 됨
주로 id값을 동적으로 관리하기에 user/:userId
const userId = params.userId;
혹은 const { userId } = useParams;
이런 식으로 사용 가능.

내 경우는 :뒤에 findUserInfo라고 지정해두었기에 params 구조분해할당에서 해당 키워드로 가져왔다.

  const { findUserInfo: url } = useParams();

이렇게 해서 아래에서 쭉 url을 가지고 로직 작성 예정

🛠️ 트러블슈팅

🔥🔥 추후 dynamic route는 공통컴포넌트 모달창을 대대적으로 리팩토링하게 되는 계기가 되는데.....

컴포넌트를 최대한 재사용하고자 dynamic route를 사용한건데... 아무리 공통 컴포넌트 모달창이라 할지라도 별개의 url에서 불러오는 모달창들은 각각의 사용처에서 열고자 하는 모달창이 각각 다르게 열릴거라 생각했다.
ex)

// 라우팅 설정
path="/signup/:steps" , elements={<Signup/>}

// url별 열고자 했던 모달창
/signup/step1 -> 테스트1 모달창
/signup/step2 -> 테스트2 모달창

하지만, dynamic route는 url은 별개로 사용하지만 결국은 같은 컴포넌트를 보여주는 것이다.
같은 컴포넌트 안에는 자식 컴포넌트들이 여러개 있지만, 각각의 자식 컴포넌트들에서 모달창을 따로 불러온다해도 자식 컴포넌트들은 결국 하나의 부모 컴포넌트로 이어지기 때문에 하나의 모달창만 열리는 불상사가 발생했다......!!!!!