diff --git a/en/code/examples/code-directory.md b/en/code/examples/code-directory.md
index 3cc9f1c1..6411de47 100644
--- a/en/code/examples/code-directory.md
+++ b/en/code/examples/code-directory.md
@@ -34,11 +34,12 @@ Additionally, if a specific component, hook, or utility function is no longer us
As the project grows, the dependencies between code can become significantly more complex, doubling, tenfold, or even a hundredfold. A single directory might end up containing over 100 files.
## ✏️ Work on Improving
+
The following is an example of improving the structure so that code files that are modified together form a single directory.
```text
└─ src
- │ // 전체 프로젝트에서 사용되는 코드
+ │ // Code used in the entire project
├─ components
├─ containers
├─ hooks
@@ -46,7 +47,7 @@ The following is an example of improving the structure so that code files that a
├─ ...
│
└─ domains
- │ // Domain1에서만 사용되는 코드
+ │ // Code used only in Domain1
├─ Domain1
│ ├─ components
│ ├─ containers
@@ -54,7 +55,7 @@ The following is an example of improving the structure so that code files that a
│ ├─ utils
│ └─ ...
│
- │ // Domain2에서만 사용되는 코드
+ │ // Code used only in Domain2
└─ Domain2
├─ components
├─ containers
@@ -62,6 +63,7 @@ The following is an example of improving the structure so that code files that a
├─ utils
└─ ...
```
+
If you place code files that are modified together under a single directory, it becomes easier to understand the dependencies between the code.
For example, consider a case where the sub-code of one domain (`Domain1`) references the source code of another domain (`Domain2`).
@@ -69,6 +71,7 @@ For example, consider a case where the sub-code of one domain (`Domain1`) refere
```typescript
import { useFoo } '../../../Domain2/hooks/useFoo'
```
+
When you encounter such an import statement, you can easily recognize that the wrong file is being referenced.
Additionally, when deleting code related to a specific feature, you can delete the entire directory, ensuring that all related code is removed cleanly, leaving no unused code in the project.
diff --git a/en/code/examples/login-start-page.md b/en/code/examples/login-start-page.md
index 2d96aa72..25b0c014 100644
--- a/en/code/examples/login-start-page.md
+++ b/en/code/examples/login-start-page.md
@@ -12,18 +12,18 @@ The following `` component contains logic to check if the user
```tsx
function LoginStartPage() {
- useCheckLogin({
- onChecked: (status) => {
- if (status === "LOGGED_IN") {
- location.href = "/home";
- }
- },
- });
-
- /* ... login related logic ... */
-
- return <>{/* ... login related components ... */}>;
- }
+ useCheckLogin({
+ onChecked: (status) => {
+ if (status === "LOGGED_IN") {
+ location.href = "/home";
+ }
+ }
+ });
+
+ /* ... login related logic ... */
+
+ return <>{/* ... login related components ... */}>;
+}
```
### 👃 Smell the Code
@@ -45,30 +45,30 @@ Additionally, by preventing the logic within the separated component from refere
```tsx
function App() {
- return (
-
-
-
- );
- }
-
- function AuthGuard({ children }) {
- const status = useCheckLoginStatus();
-
- useEffect(() => {
- if (status === "LOGGED_IN") {
- location.href = "/home";
- }
- }, [status]);
-
- return status !== "LOGGED_IN" ? children : null;
- }
-
- function LoginStartPage() {
- /* ... login related logic ... */
-
- return <>{/* ... login related components ... */}>;
- }
+ return (
+
+
+
+ );
+}
+
+function AuthGuard({ children }) {
+ const status = useCheckLoginStatus();
+
+ useEffect(() => {
+ if (status === "LOGGED_IN") {
+ location.href = "/home";
+ }
+ }, [status]);
+
+ return status !== "LOGGED_IN" ? children : null;
+}
+
+function LoginStartPage() {
+ /* ... login related logic ... */
+
+ return <>{/* ... login related components ... */}>;
+}
```
#### Option B: Using a Higher-Order Component (HOC)
@@ -134,12 +134,13 @@ function FriendInvitation() {
return (
<>
-
+
{/* JSX markup for UI... */}
>
);
}
```
+
### 👃 Smell the Code
#### Readability
@@ -203,6 +204,7 @@ function InviteButton({ name }) {
);
}
```
+
The `` component only contains the logic for inviting users and the UI, so it can maintain a low amount of information to be aware of at once, increasing readability. Additionally, the button and the logic executed after clicking are very close together.
## 🔍 Learn More: Abstraction
diff --git a/en/code/examples/use-bottom-sheet.md b/en/code/examples/use-bottom-sheet.md
index c485338f..44f26f3b 100644
--- a/en/code/examples/use-bottom-sheet.md
+++ b/en/code/examples/use-bottom-sheet.md
@@ -20,10 +20,10 @@ export const useOpenMaintenanceBottomSheet = () => {
const logger = useLogger();
return async (maintainingInfo: TelecomMaintenanceInfo) => {
- logger.log('점검 바텀시트 열림');
+ logger.log("Maintenance bottom sheet opened");
const result = await maintenanceBottomSheet.open(maintainingInfo);
if (result) {
- logger.log('점검 바텀시트 알림받기 클릭');
+ logger.log("Maintenance bottom sheet notification clicked");
}
closeView();
};