[Fix] #249 - [직무 카테고리] 섹션과 [계획] 섹션 간의 간격 수정

Author: wjdalswl

Terning-iOS/Terning-iOS/Resource/UIComponents/CustomSegmentedControl.swift

@@ -23,15 +23,21 @@ final class CustomSegmentedControl: UISegmentedControl {
     private lazy var underbar: UIView = makeUnderbar()
     private var underbarInfo: UnderbarInfo
     private var isFirstSettingDone = false
+    private var itemSpacing: CGFloat = 24
     private var underline: Bool
+    private var items: [String]
 
     // MARK: - Init
 
-    init(items: [Any]?, underbarInfo info: UnderbarInfo, underline: Bool = true) {
+    init(items: [String], underbarInfo info: UnderbarInfo, itemSpacing: CGFloat = 24, underline: Bool = true) {
+        self.items = items
         self.underbarInfo = info
+        self.itemSpacing = itemSpacing
         self.underline = underline
+        
         super.init(items: items)
         setUI()
+        setAddTarget()
     }
 
     required init?(coder: NSCoder) {
@@ -45,13 +51,34 @@ final class CustomSegmentedControl: UISegmentedControl {
 
         if !isFirstSettingDone {
             isFirstSettingDone.toggle()
+            setupItemBackgrounds()
             if underline {
                 setUnderbarMovableBackgroundLayer()
             }
             layer.masksToBounds = false
         }
+        
+        updateLabelColors()
         updateUnderbarPosition()
     }
+    
+    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+        var xOffset: CGFloat = 0
+        
+        for index in 0..<numberOfSegments {
+            let textWidth = calculateTextWidth(for: index)
+            let segmentWidth = textWidth
+            let segmentFrame = CGRect(x: xOffset, y: 0, width: segmentWidth, height: bounds.height)
+            
+            if segmentFrame.contains(point) {
+                self.selectedSegmentIndex = index
+                sendActions(for: .valueChanged)
+                return self
+            }
+            xOffset += (segmentWidth + itemSpacing)
+        }
+        return nil
+    }
 }
 
 // MARK: - UI & Layout
@@ -60,20 +87,41 @@ private extension CustomSegmentedControl {
     private func setUI() {
         removeBorders()
         let normalTextAttributes: [NSAttributedString.Key: Any] = [
-            .foregroundColor: underbarInfo.backgroundColor,
-            .font: UIFont.title4
-        ]
-        let selectedTextAttributes: [NSAttributedString.Key: Any] = [
-            .foregroundColor: underbarInfo.highlightColor,
+            .foregroundColor: UIColor.clear,
             .font: UIFont.title4
         ]
-        
         setTitleTextAttributes(normalTextAttributes, for: .normal)
-        setTitleTextAttributes(selectedTextAttributes, for: .selected)
         selectedSegmentTintColor = .clear
         selectedSegmentIndex = 0
     }
 
+    private func setAddTarget() {
+        addTarget(self, action: #selector(segmentValueChanged), for: .valueChanged)
+    }
+    
+    private func setupItemBackgrounds() {
+        for index in 0..<numberOfSegments {
+            let frame = frameForSegment(at: index)
+            addBackgroundView(for: frame, at: index)
+        }
+    }
+    
+    private func makeUnderbar() -> UIView {
+        let view = UIView(frame: .zero)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = underbarInfo.highlightColor
+        addSubview(view)
+        return view
+    }
+
+    private func removeBorders() {
+        let image = UIImage()
+        setBackgroundImage(image, for: .normal, barMetrics: .default)
+        setBackgroundImage(image, for: .selected, barMetrics: .default)
+        setBackgroundImage(image, for: .highlighted, barMetrics: .default)
+        setDividerImage(image, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
+    }
+    
     private func setUnderbarMovableBackgroundLayer() {
         let backgroundLayer = CALayer()
         backgroundLayer.frame = .init(
@@ -86,14 +134,6 @@ private extension CustomSegmentedControl {
         layer.addSublayer(backgroundLayer)
     }
 
-    private func makeUnderbar() -> UIView {
-        let view = UIView(frame: .zero)
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.backgroundColor = underbarInfo.highlightColor
-        addSubview(view)
-        return view
-    }
-    
     private func updateUnderbarPosition() {
         let selectedSegmentFrame = frameForSegment(at: selectedSegmentIndex)
         let textWidth = calculateTextWidth(for: selectedSegmentIndex)
@@ -102,29 +142,59 @@ private extension CustomSegmentedControl {
             self.underbar.frame = CGRect(
                 x: selectedSegmentFrame.origin.x + (selectedSegmentFrame.width - textWidth) / 2,
                 y: self.bounds.height - self.underbarInfo.height,
-                width: textWidth,
+                width: selectedSegmentFrame.width,
                 height: self.underbarInfo.height
             )
         })
     }
 
-    private func removeBorders() {
-        let image = UIImage()
-        setBackgroundImage(image, for: .normal, barMetrics: .default)
-        setBackgroundImage(image, for: .selected, barMetrics: .default)
-        setBackgroundImage(image, for: .highlighted, barMetrics: .default)
-        setDividerImage(image, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
+    private func updateLabelColors() {
+        for index in 0..<numberOfSegments {
+            if let backgroundView = subviews.first(where: { $0.tag == 999 + index }),
+               let label = backgroundView.subviews.first(where: { $0 is UILabel }) as? UILabel {
+                label.textColor = (selectedSegmentIndex == index) ? .terningMain : .grey300
+            }
+        }
     }
 }
 
 // MARK: - Methods
 
 extension CustomSegmentedControl {
     private func frameForSegment(at index: Int) -> CGRect {
-        let segmentWidth = bounds.width / CGFloat(numberOfSegments)
-        return CGRect(x: CGFloat(index) * segmentWidth, y: 0, width: segmentWidth, height: bounds.height)
+        let xOffset = (0..<index).reduce(0) { result, idx in
+            result + calculateTextWidth(for: idx) + itemSpacing
+        }
+        let itemWidth = calculateTextWidth(for: index)
+        return CGRect(x: xOffset, y: 0, width: itemWidth, height: bounds.height)
     }
-    
+
+    private func addBackgroundView(for frame: CGRect, at index: Int) {
+        subviews.filter { $0.tag == 999 + index }.forEach { $0.removeFromSuperview() }
+        
+        let textWidth = calculateTextWidth(for: index)
+        let segmentFrame = frameForSegment(at: index)
+        
+        let backgroundFrame = CGRect(
+            x: segmentFrame.origin.x + (segmentFrame.width - textWidth) / 2,
+            y: 0,
+            width: textWidth,
+            height: bounds.height
+        )
+        let backgroundView = UIView(frame: backgroundFrame)
+        backgroundView.tag = 999 + index
+        
+        let label = UILabel(frame: backgroundView.bounds)
+        label.text = titleForSegment(at: index)
+        label.textColor = (index == selectedSegmentIndex) ? .terningMain : .grey300
+        label.font = UIFont.title4
+        label.textAlignment = .center
+        label.tag = 1000 + index
+
+        backgroundView.addSubview(label)
+        insertSubview(backgroundView, at: 0)
+    }
+
     private func calculateTextWidth(for index: Int) -> CGFloat {
         guard let title = titleForSegment(at: index),
               let font = titleTextAttributes(for: .normal)?[.font] as? UIFont else { return 0 }
@@ -133,3 +203,12 @@ extension CustomSegmentedControl {
         return size.width
     }
 }
+
+// MARK: - @objc func
+
+extension CustomSegmentedControl {
+    @objc
+    private func segmentValueChanged() {
+        updateLabelColors()
+    }
+}

Terning-iOS/Terning-iOS/Source/Presentation/FilteringSetting/FilteringView/ViewController/FilteringViewController.swift

@@ -129,8 +129,8 @@ extension FilteringViewController {
         view.addSubviews(
             notchView,
             titleLabel,
-            segmentControl,
             underLineView,
+            segmentControl,
             saveButton
         )
     }
@@ -149,14 +149,14 @@ extension FilteringViewController {
         }
 
         segmentControl.snp.makeConstraints {
-            $0.top.equalTo(titleLabel.snp.bottom).offset(20.adjustedH)
-            $0.leading.equalToSuperview().inset(20.adjusted)
-            $0.height.equalTo(40.adjustedH)
+            $0.top.equalTo(titleLabel.snp.bottom).offset(11.adjustedH)
+            $0.leading.equalToSuperview().inset(25.adjusted)
+            $0.height.equalTo(39)
         }
 
         underLineView.snp.makeConstraints {
             $0.top.equalTo(segmentControl.snp.bottom).offset(-1)
-            $0.horizontalEdges.equalToSuperview().inset(29.adjusted)
+            $0.horizontalEdges.equalToSuperview().inset(25.adjusted)
             $0.height.equalTo(1)
         }