// 1. Import 섹션
import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';

// 2. 타입 정의
interface UserProfileProps {
  userId: string;
  onUpdate?: () => void;
}

// 3. 컴포넌트 정의
export const UserProfile: React.FC<UserProfileProps> = ({ userId, onUpdate }) => {
  const [data, setData] = useState(null);
  return <Container>{/* JSX */}</Container>;
};

// 4. 스타일드 컴포넌트 (최하단)
const Container = styled.div`
  padding: 20px;
`;

src/components/
├── atoms/
│   ├── Button/
│   │   ├── index.tsx        # 컴포넌트 메인 파일
│   │   └── Button.test.tsx  # 테스트 파일
│   ├── Input/
│   │   ├── index.tsx
│   │   └── Input.test.tsx
│   └── Icon/
│       └── index.tsx
├── molecules/
│   ├── SearchBar/
│   │   ├── index.tsx
│   │   └── SearchBar.test.tsx
│   ├── UserAvatar/
│   │   ├── index.tsx
│   │   └── UserAvatar.test.tsx
│   └── Pagination/
│       ├── index.tsx
│       └── Pagination.test.tsx
└── organisms/
    ├── Header/
    │   ├── index.tsx
    │   └── Header.test.tsx
    └── Footer/
        ├── index.tsx
        └── Footer.test.tsx

src/components/
├── atoms/
│   ├── Button.tsx           # ❌ 파일 단위로 분리
│   ├── Button.test.tsx
│   ├── Input.tsx
│   └── Input.test.tsx
├── molecules/
│   ├── SearchBar.tsx        # ❌ 테스트 파일과 분리되어 관리 어려움
│   ├── SearchBar.test.tsx
│   └── UserAvatar.tsx

// ✅ 올바른 import - 디렉토리 구조에서 자동으로 index.tsx 참조
import { Button } from '@atoms/Button';
import { SearchBar } from '@molecules/SearchBar';

// ❌ 잘못된 import - @/ 형식 금지
import { Button } from '@/atoms/Button';
import { SearchBar } from '@/molecules/SearchBar';

// ❌ 잘못된 import - index.tsx 명시 불필요
import { Button } from '@atoms/Button/index';

@Service
@RequiredArgsConstructor
public class UserService {
    private final UserRepository userRepository;

    public User getUserById(Long id) {
        return userRepository.findById(id)
            .orElseThrow(() -> new UserNotFoundException(id));
    }
}

com.semicolon.project
├── domain
│   ├── user
│   │   ├── controller
│   │   │   └── UserController.java
│   │   ├── service
│   │   │   ├── UserService.java
│   │   │   └── UserServiceImpl.java
│   │   ├── repository
│   │   │   └── UserRepository.java
│   │   ├── entity
│   │   │   └── User.java
│   │   └── dto
│   │       ├── UserCreateRequest.java
│   │       └── UserResponse.java
│   └── order
│       └── ...
├── global
│   ├── config
│   │   └── SecurityConfig.java
│   ├── exception
│   │   ├── GlobalExceptionHandler.java
│   │   └── BusinessException.java
│   └── common
│       └── ApiResponse.java
└── ProjectApplication.java