5. 모듈 분리

모듈 분리의 필요성

최근 이러한 비슷한 종류의 오브젝트들을 만들면서 

하나하나 다 컨테이너로 잡으니 코드가 1만 줄 2만 줄로 넘어가 버려서 

아 이러면 안될거같다. 리팩토링이 한번 필요하다고 생각했습니다.

 

 

---

코드

칼럼 : 세로줄

로우 : 가로줄

 

위 오른쪽 사진의 코드를 잠시 보면 전체 컨테이너를 기준으로 

칼럼 ( 두줄 )

로우로 ( 4개의 아이콘 )

이렇게 볼 수있는데 

 

어떻게 보면 로우로 들어가는 아이콘들과 글씨는 다 똑같은 모듈입니다.

그렇기 때문에 밑에 처럼 코드를 짜 줄 수 있습니다.

                                  IconCard(
                                    imagePath: 'assets/image/card img.png',
                                    text: '패션용품',
                                    onPressed: () {},
                                  ),

IconCard라는 모듈을 따로 만들어놓고 

이미지 텍스트만 다르기 때문에 따로 적을 수 있게 모듈을 분리해 주면 정말 깔끔합니다!

 

 

밑에는 전체 코드입니다. (컨테이너를 감싸지 않아서 컨테이너는 따로 값을 잡아줘야 한다.)

 Column(
                          children: [
                            Container(
                              height: 94,
                              width: 328,
                              color: Colors.white,
                              child: Row(
                                children: [
                                  IconCard(
                                    imagePath: 'assets/image/card img.png',
                                    text: '패션용품',
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16),
                                  IconCard(
                                    imagePath: 'assets/image/card img (1).png',
                                    text: '육아용품',
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16),
                                  IconCard(
                                    imagePath: 'assets/image/card img (2).png',
                                    text: '장난감',
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16), // 사이즈 박스 추가
                                  IconCard(
                                    imagePath: 'assets/image/card img (3).png',
                                    text: '학용품',
                                    onPressed: () {},
                                  ),
                                ],
                              ),
                            ),

                            SizedBox(height: 12), // 사이즈 박스 추가
                            Container(
                              height: 94,
                              width: 328,
                              color: Colors.white,
                              child: Row(
                                children: [
                                  IconCard(
                                    imagePath: 'assets/image/card img (4).png',
                                    // 이미지 경로
                                    text: '스킨케어',
                                    // 텍스트 내용
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16), // 사이즈 박스 추가
                                  IconCard(
                                    imagePath: 'assets/image/card img (5).png',
                                    // 이미지 경로
                                    text: '기획전',
                                    // 텍스트 내용
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16), // 사이즈 박스 추가
                                  IconCard(
                                    imagePath: 'assets/image/card img (6).png',
                                    // 이미지 경로
                                    text: '이벤트',
                                    // 텍스트 내용
                                    onPressed: () {},
                                  ),
                                  SizedBox(width: 16), // 사이즈 박스 추가
                                  IconCard(
                                    imagePath: 'assets/image/card img (7).png',
                                    // 이미지 경로
                                    text: '쿠폰',
                                    // 텍스트 내용
                                    onPressed: () {},
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),

 

 

---

이 코드는 분리된 IconCard 모듈입니다. 

이미지 경로, 텍스트 내용, 버튼클릭 시 동작하는 함수를 전달합니다.

// 홈 화면 카드 아이콘
Widget IconCard({
  required String imagePath, // 이미지 경로
  required String text, // 텍스트 내용
  required VoidCallback onPressed, // 버튼 클릭 시 동작
}) {
  return TextButton(
    onPressed: onPressed, // 버튼 클릭 시 동작
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero, // 패딩 제거
      backgroundColor: Colors.transparent, // 배경색 투명
    ),
    child: Container(
      height: 94,
      width: 70,
      color: Colors.white, // 박스 색상
      child: Column(
        children: [
          Container(
            height: 70,
            width: 70,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8), // 모서리를 둥글게 만들기
              child: Image.asset(
                imagePath, // 이미지 경로
                fit: BoxFit.cover, // 이미지가 Container를 꽉 차게 조정
              ),
            ),
          ),
          SizedBox(height: 4), // 사이즈 박스 추가
          Container(
            height: 16,
            width: 70,
            color: Colors.white, // 텍스트 박스 색상
            child: Center(
              // 텍스트를 중앙에 배치
              child: Text(
                text,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Color(0xFF3D3D3D),
                  fontSize: 12,
                  fontFamily: 'Pretendard',
                  fontWeight: FontWeight.w400,
                  height: 1.3,
                  letterSpacing: -0.3,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}