프론트엔드 재구조화

[RanolP]

문제 상황

• styled-components 등 과거에 사용하던 라이브러리 흔적이 남아있어 테크 스택이 혼란함
• 폴더 사이 관계가 불명확하고, 복잡함

개선 방향

• Solid 마이그레이션 이후 남아있던 React의 잔재를 완전히 제거
• 단순하고 명확한 구조로 생산성 향상 도모
• 개발 도구 재정비

할 일 목록

분류	설명
🟨 1순위 🟩 완료	styled api, 일반 css 파일 제거
🟨 1순위 🟩 완료	features/, pages/ 구조로 이전[1]
🟨 1순위 🟩 완료	root import(import from '@/**') 세팅하기 - vite, tsconfig
🟦 2순위 ➡️ 🟨 1순위	storybook 컴포넌트화 기준 마련하기
🟦 2순위	prettier, editorconfig, biome 등의 도구 살펴보고 적용 가능한 건 적용하기
🟦 2순위	툴링 사용 목적 및 코드 구조화 방식, 코드 작성 방향성 등 Decision Record 백로그 쌓을 방법 고민해보고 적용하기
🟪 3순위 ➡️ 🟦 2순위	포매팅, 린트 CI 구축하기 (프론트엔드)
🟪 3순위 🟫 보류	vanilla-extract 외의 대안 살펴보기 (https://cva.style 등)

하위 이슈

• 프론트엔드 재구조화 - API 레이어 개선 #2030

[1]:
AS-IS

📂 src
└─ 📂 app
   └─ 📂 components
      └─ 📂 login/form ... (a)
      └─ 📂 profile ... (b)
      └─ 📂 sidebar ... (c)
   └─ 📂 intl ... (d)
   └─ 📂 login ... (e)
   └─ 📂 main ... (f)
   └─ 📂 providers ... (g) : 분해해서 features/에 배분
   └─ 📂 window ... (h)
└─ 📂 components ... (i)
└─ 📂 ipc ... (j)
└─ 📂 store ... (k)
└─ 📂 utils ... 전체적으로 삭제
    └─ 📄 story.css.ts ... (l)
    └─ 📄 types.ts ... (m)

TO-BE

📂 src/
└─ 📂 assets/ ... 재사용 가능한 애셋 모음
   └─ 📂 icons/
└─ 📂 features/
   └─ 📂 ui-common/ ... (i) : 추후 디자인 시스템으로 마이그레이션 (장기 계획)
   └─ 📂 tauri/ipc/ ... (j)
   └─ 📂 intl/ ... (d), (g), (k)
   └─ 📂 config/ ... (g), (m) : 아직 설정창 없고, 장기적으로 설정창 만들 계획
   └─ 📂 storybook/ ... (l) : 스토리북 관련 컴포넌트/모킹 로직
└─ 📂 pages/
   └─ 📂 _components/
      └─ 📂 sidebar/ ... (c)
         └─ 📂 components/profile/ ... (b) : 현재 profile 기능은 TODO
      └─ 📂 window-controls/ ... (h)
   └─ 📂 login/ ... (a), (e)
   └─ 📄 layout.tsx ... 사이드바 등 레이아웃
   └─ 📄 page.tsx ... (f) 메인 페이지

[HelloWorld017]

1. layout.tsx 와 page.tsx 는 분리할 필요가 크게 없다고 생각합니다.
2. @/features/tauri/ipc 의 경우 @/ipc 로 상위로 옮겨도 될 것 같다는 생각이 듭니다.
   • 기능 단위로 나뉘어져있는 features 하위에 들어가기에는 ipc의 범위가 너무나도 큰 것 같아요.
3. @/pages/_components/sidebar/components 는 너무 동어반복이 많다는 느낌이 듭니다.
   • @/pages/_components/sidebar-profile 로 올리거나, @/pages/_components/sidebar/sidebar-profile.tsx 로 하거나 해도 될 것 같습니다.
4. ui-common 과 같은 경우에도 기능 단위로 보기에는 조금 어색할 것 같아서 @/components 로 옮겼는데 ui-common 으로 두어도 괜찮을 것 같아요.

TO-BE 2️⃣ 안

📂 src/
└─ 📂 assets/ ... 재사용 가능한 애셋 모음
   └─ 📂 icons/
└─ 📂 components/ ... 재사용 가능한 기반 컴포넌트 모음
    └─ 📂 button/
    └─ 📂 input/
    └─ 📂 typography/
└─ 📂 features/
   └─ 📂 config/
   └─ 📂 intl/
└─ 📂 ipc/
└─ 📂 pages/
   └─ 📂 _components/
       └─ 📂 sidebar/
       └─ 📂 window-controls/
   └─ 📂 (:domain)/
       └─ 📂 _assets/ ... 해당 도메인 안에서만 쓰이는 애셋
       └─ 📂 _components/ ... 해당 도메인 안에서만 쓰이는 컴포넌트
       └─ 📂 _utils/ ... 해당 도메인 안에서만 쓰이는 유틸
       └─ 📂 (:domain)/ ... Recursive한 구조
           └─ 📄 layout.tsx
       └─ 📄 layout.tsx ... 해당 도메인의 메인이 되는 컴포넌트
   └─ 📄  layout.tsx
└─ 📂 utils/ ... 재사용 가능한 유틸 모음

[HelloWorld017]

그리고 그 외에 논의가 나왔던 것들이랑 개인적으로 궁금한 것들 정리합니다.

1. Absolute Import vs Relative Import: ../../ 를 ban하는 건 어떻게 생각하시나요?
2. Filename Casing: kebab-case 는 이대로 가나요?
   • 개인적으로 나쁘지 않다고 봅니다. 대소문자 구분 안되는 파일시스템 이슈도 없고
3. Default Export: 금지시키는 건 어떤가요?
   • ESM/CJS 간의 비호환은 어차피 ESM-only니 차치하더라도, 같은 대상을 일관되지 않은 네이밍으로 부르게 만드는 거라던지 문제의 소지가 있다고 봅니다.
4. index.ts: Re-Export 용으로만 하는 거 어떤가요?
   • export * from './button'

[RanolP]

Reply to TO-BE 2️⃣ 안

1. layout은 현재 depth만이 아니라 하위 depth에서도 재사용할 목적으로 분리해두었습니다.
2. 해당 내용에 동의하고, KiwiTalk as daemon server. #1652 를 고려할 때 api로 이름을 바꾸는 것까지 하면 어떨까요?
3. 좋아요. 둘 중에 저는 _components/sidebar/sidebar-profile.tsx가 좋을 것 같아요
4. @/components보다는 @/ui-common으로 두고 싶어요. 컴포넌트인 건 알겠는데, "어떤 목적의" 컴포넌트인지 표현하고 싶어요.

TO-BE 3️⃣ 안

📂 src/
└─ 📂 assets/ ... 재사용 가능한 애셋 모음
   └─ 📂 icons/
└─ 📂 ui-common/ ... 재사용 가능한 기반 컴포넌트 모음
    └─ 📂 button/
    └─ 📂 input/
    └─ 📂 typography/
└─ 📂 features/
   └─ 📂 config/
   └─ 📂 intl/
└─ 📂 api/ ... 백엔드 API 연동 코드
└─ 📂 pages/
   └─ 📂 _components/
       └─ 📂 sidebar/
       └─ 📂 window-controls/
   └─ 📂 (:domain)/
       └─ 📂 _assets/ ... 해당 도메인 안에서만 쓰이는 애셋
       └─ 📂 _components/ ... 해당 도메인 안에서만 쓰이는 컴포넌트
       └─ 📂 _utils/ ... 해당 도메인 안에서만 쓰이는 유틸
       └─ 📂 (:domain)/ ... Recursive한 구조
           └─ 📄 page.tsx
       └─ 📄 layout.tsx ... 해당 도메인 및 하위 도메인 공통 레이아웃 컴포넌트
       └─ 📄 page.tsx ... 해당 도메인에 메인이 되는 페이지 컴포넌트
   └─ 📄  layout.tsx
└─ 📂 utils/ ... 재사용 가능한 유틸 모음

[RanolP]

Reply to "그리고 그 외에 논의가 나왔던 것들이랑 개인적으로 궁금한 것들 정리합니다."

1. 저는 ../ 까지 허용과 ../../ 까지 허용 둘 다 큰 호불호가 없습니다. 다수결에 따를게요. (만약 다수결이 안 날 경우 ../ 선호)
2. 따로 의견은 없고 통일만 되면 좋을 것 같습니다. (만약 다수결이 안 날 경우 kebab-case 선호)
3. 저도 default export에 많이 당했어서 default export 금지에 한 표
4. 저도 index.ts를 re-export용으로만 쓰는 것도 동의합니다.

[HelloWorld017]

Reply to TO-BE 3️⃣ 안

좋습니다! 👍
따로 의견 안 나오면 이대로 해도 될 것 같아요.

Reply to "그리고 그 외에 논의가 나왔던 것들이랑 개인적으로 궁금한 것들 정리합니다."

이것도 따로 의견 안 나오면 ../, kebab-case 로 확정해도 될 것 같습니다 👍

[Su-Yong]

TO-BE ④ 안

1. 타입정의에 대한 내용을 추가하였습니다
2. api/ 폴더도 도메인별로 정의할 수 있도록 하였습니다
3. api/ 폴더도 마찬가지로 index.ts를 re-export 용으로 사용합니다

📂 src/
└─ 📂 assets/ ... 재사용 가능한 애셋 모음
   └─ 📂 icons/
└─ 📂 ui-common/ ... 재사용 가능한 기반 컴포넌트 모음
    └─ 📂 button/
    └─ 📂 input/
    └─ 📂 typography/
└─ 📂 features/
   └─ 📂 config/
   └─ 📂 intl/
└─ 📂 api/ ... 백엔드 API 연동 코드
   └─ 📂 (:domain)/
       └─ 📂 _types/ ... 해당 API 에서 사용되는 타입
└─ 📂 pages/
   └─ 📂 _components/
       └─ 📂 sidebar/
       └─ 📂 window-controls/
   └─ 📂 (:domain)/
       └─ 📂 _assets/ ... 해당 도메인 안에서만 쓰이는 애셋
       └─ 📂 _components/ ... 해당 도메인 안에서만 쓰이는 컴포넌트
       └─ 📂 _utils/ ... 해당 도메인 안에서만 쓰이는 유틸
       └─ 📂 _types/ ... 해당 도메인 안에서만 쓰이는 타입
       └─ 📂 (:domain)/ ... Recursive한 구조
           └─ 📄 page.tsx
       └─ 📄 layout.tsx ... 해당 도메인 및 하위 도메인 공통 레이아웃 컴포넌트
       └─ 📄 page.tsx ... 해당 도메인에 메인이 되는 페이지 컴포넌트
   └─ 📄  layout.tsx
└─ 📂 utils/ ... 재사용 가능한 유틸 모음

[HelloWorld017]

현재 이거 재구조화 마무리 된 것 같은데, 슬슬 이슈 클로즈해도 좋을 것 같습니다. 1순위 태스크 완료 처리 후 우선순위 조정해도 될 것 같습니다. @Su-Yong 수고하셨습니다 👍

[RanolP]

최초 코멘트 표에서 해당 항목들 업데이트했습니다.

[Su-Yong]

TO-BE ⑤ 안

1. _utils를 제거했습니다. 유틸리티들은 features/:name, _hooks등의 폴더로 옮겨졌습니다.
2. 도메인별 _hooks를 추가하였습니다
3. features/ 폴더에 추후에 폴더가 추가될 수 있음을 명시했습니다.

📂 src/
└─ 📂 assets/ ... 재사용 가능한 애셋 모음
   └─ 📂 icons/
└─ 📂 ui-common/ ... 재사용 가능한 기반 컴포넌트 모음
    └─ 📂 button/
    └─ 📂 input/
    └─ 📂 typography/
└─ 📂 features/
   └─ 📂 config/
   └─ 📂 intl/
   └─ 📂 theme/
   └─ 📂 hooks/
   └─ 📂 (:name)/
└─ 📂 api/ ... 백엔드 API 연동 코드
   └─ 📂 (:domain)/
       └─ 📂 _types/ ... 해당 API 에서 사용되는 타입
└─ 📂 pages/
   └─ 📂 _components/
       └─ 📂 sidebar/
       └─ 📂 window-controls/
   └─ 📂 (:domain)/
       └─ 📂 _assets/ ... 해당 도메인 안에서만 쓰이는 애셋
       └─ 📂 _components/ ... 해당 도메인 안에서만 쓰이는 컴포넌트
       └─ 📂 _hooks/ ... 해당 도메인 안에서만 쓰이는 hooks
       └─ 📂 _types/ ... 해당 도메인 안에서만 쓰이는 타입
       └─ 📂 (:domain)/ ... Recursive한 구조
           └─ 📄 page.tsx
       └─ 📄 layout.tsx ... 해당 도메인 및 하위 도메인 공통 레이아웃 컴포넌트
       └─ 📄 page.tsx ... 해당 도메인에 메인이 되는 페이지 컴포넌트
   └─ 📄  layout.tsx