이전 글에서는 Grid 기반 Card UI와 Liquid Glass 스타일을 구현하면서
“어떻게 보여줄 것인가”에 집중했다면,
이번 작업에서는 한 단계 더 나아가
👉 “어떻게 관리하고, 어떻게 동작하게 만들 것인가”에 집중했다.
1. CSS Module 정리 – 스타일을 구조로 바꾸기
기존에는 스타일이 컴포넌트마다 흩어져 있었고,
작성 기준 없이 추가되다 보니 점점 관리가 어려워졌다.
문제
- 스타일 위치가 분산됨
- 중복 스타일 증가
- className의 의미가 불명확
-> 개선 방향
단순히 스타일을 줄이는 게 아니라
👉 “구조를 만드는 것”에 집중했다.
그리고 처음엔 module.css 로 전부 분리 했던것을 Tailwind 와 연동하여 다시 className에 다 넣었다가.. 너무 길어져서 다시 module.css 로 분리하고 tailwind를 적용하는 방식을 채택했다.
- 컴포넌트 단위로 CSS 분리 및 Tailwind 연동
- 역할 기반 네이밍 적용
- UI 구조와 스타일 구조를 일치시키기
처음
.card {
display: flex;
flex-direction: colum;
}
1차 수정
<div className={"flex flex-col ..."}
2차 수정
.cardTitle {
@apply flex flex-col
}Tailwind에 익숙해진다면 이게 더 보기 편하고, 유지 보수성이 더 나아질것이라고 생각한다.
2. Velog API 연동 – 정적인 UI에서 벗어나기
기존 Card UI는 정적인 데이터로 구성되어 있어서
실제 서비스처럼 보이지 않는 문제가 있었다.
그래서 Velog API를 통해
👉 실제 데이터를 기반으로 UI를 구성하도록 변경했다.
구현 흐름
Velog 글 목록 요청
데이터 파싱
카드 형태로 렌더링
const res = await fetch("https://v2.velog.io/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
};UI가 “콘텐츠 기반”으로 동작
새로운 글이 자동 반영
프로젝트 신뢰도 상승
단순한 UI 에서 데이터 흐름이 있는 UI로 전환
3. Modal 구현 – 인터랙션 추가
Modal은 단순한 UI 컴포넌트가 아니라
사용자 흐름을 제어하는 요소라고 생각했다.
그리고 interceptor routes 와 Parallel Routes
기능을 사용해 보고 싶었다...
구현 포인트
- UI와 상태를 분리
- 재사용 가능한 구조
- Portal 적용
구현 하다 보니 modal 에 다 넣어 놓은 상태라서 추후에 UI와 로직을 분리 할 수 있게 issue에 넣어놓은 상태다
해당 이슈: https://github.com/JeongUn1028/ItsMe/issues/19
4. Liquid Glass UI 인터랙션 강화
이 프로젝트는 단순한 카드 UI가 아니라
Liquid Glass 스타일을 기반으로 한 인터페이스를 목표로 하고 있다.
단순히 페이지에 보이는 것들 뿐만 아니라 상호작용에도 Liquid Glass 적인 요소를 강화하고 싶었다.
Modal을 구현하면서 느낀 점:
아직 Praallel Routing 과 Interceptor Routes 이해가 많이 부족하다고 느꼈다. 여러번 찾아보고 강의도 다시 들으면서 어찌저찌 마무리는 했다. 추후에 더 공부 해봐야 겠다.
마무리
단순히 기능 추가하는게 아니라 간단하지만 API도 적용시켜보고, modal 등을 추가해보며 재밌었다. 그래도 아직 배울게 너무 많은 것 같다. 한번에 가는 일은 없고 몇번의 에러와 이랬었지 저랬었지.. 하며 많이 배우는것 같다.
