🎨 반려동물 등록 UI 구현

fit-a-pet-client/fit-a-pet-client.xcodeproj/project.pbxproj

@@ -37,6 +37,7 @@
 		4ACDD4A52AD9B3DC00CD8F1A /* InputGenderVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4ACDD4A42AD9B3DC00CD8F1A /* InputGenderVC.swift */; };
 		4ACDD4A72AD9B3F600CD8F1A /* CheckCareVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4ACDD4A62AD9B3F600CD8F1A /* CheckCareVC.swift */; };
 		4ACDD4A92ADAFFD100CD8F1A /* InputPetBirthVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4ACDD4A82ADAFFD100CD8F1A /* InputPetBirthVC.swift */; };
+		4AD0896A2AFBFD9400E79E52 /* CheckCareCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4AD089692AFBFD9400E79E52 /* CheckCareCollectionViewCell.swift */; };
 		4AD354152AACD390004A47B3 /* LoginVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4AD354142AACD390004A47B3 /* LoginVC.swift */; };
 		4AD354202AAF7CD6004A47B3 /* MainVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4AD3541F2AAF7CD6004A47B3 /* MainVC.swift */; };
 		4AD354222AAF7E62004A47B3 /* TabBarController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4AD354212AAF7E62004A47B3 /* TabBarController.swift */; };
@@ -81,6 +82,7 @@
 		4ACDD4A42AD9B3DC00CD8F1A /* InputGenderVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputGenderVC.swift; sourceTree = "<group>"; };
 		4ACDD4A62AD9B3F600CD8F1A /* CheckCareVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckCareVC.swift; sourceTree = "<group>"; };
 		4ACDD4A82ADAFFD100CD8F1A /* InputPetBirthVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputPetBirthVC.swift; sourceTree = "<group>"; };
+		4AD089692AFBFD9400E79E52 /* CheckCareCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckCareCollectionViewCell.swift; sourceTree = "<group>"; };
 		4AD354142AACD390004A47B3 /* LoginVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginVC.swift; sourceTree = "<group>"; };
 		4AD3541F2AAF7CD6004A47B3 /* MainVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainVC.swift; sourceTree = "<group>"; };
 		4AD354212AAF7E62004A47B3 /* TabBarController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarController.swift; sourceTree = "<group>"; };
@@ -172,6 +174,7 @@
 			isa = PBXGroup;
 			children = (
 				4A9088752AC1681B000C7878 /* PetCollectViewCell.swift */,
+				4AD089692AFBFD9400E79E52 /* CheckCareCollectionViewCell.swift */,
 			);
 			path = View;
 			sourceTree = "<group>";
@@ -410,6 +413,7 @@
 				4AD354152AACD390004A47B3 /* LoginVC.swift in Sources */,
 				4A15F2162AA8B4CA0098F2F7 /* InputNickVC.swift in Sources */,
 				4ACDD4A12AD9B37E00CD8F1A /* InputSpeciesVC.swift in Sources */,
+				4AD0896A2AFBFD9400E79E52 /* CheckCareCollectionViewCell.swift in Sources */,
 				4ACDD49E2AD9ACC400CD8F1A /* PetModel.swift in Sources */,
 				4A8B9B462AD443C9009236EC /* AlamofireManager.swift in Sources */,
 				4A15F20B2AA799C50098F2F7 /* ConstomLabel.swift in Sources */,

fit-a-pet-client/fit-a-pet-client/Base.lproj/Main.storyboard

@@ -40,82 +40,6 @@
             </objects>
             <point key="canvasLocation" x="-234.35114503816794" y="-363.38028169014086"/>
         </scene>
-        <!--Input Phone NumVC-->
-        <scene sceneID="fha-GS-Nel">
-            <objects>
-                <viewController storyboardIdentifier="InputPhoneNumVC" id="Kla-cZ-vpz" customClass="InputPhoneNumVC" customModule="fit_a_pet_client" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="8EW-gD-gJJ">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <viewLayoutGuide key="safeArea" id="uJJ-1T-ubH"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                    <navigationItem key="navigationItem" id="pRS-th-t1g"/>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="JiC-Xa-lbo" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="737" y="-994"/>
-        </scene>
-        <!--Input Auth NumVC-->
-        <scene sceneID="0Fj-AU-dBo">
-            <objects>
-                <viewController storyboardIdentifier="InputAuthNumVC" id="kcJ-1f-kgw" customClass="InputAuthNumVC" customModule="fit_a_pet_client" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="xMZ-d0-dDB">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <viewLayoutGuide key="safeArea" id="LI0-TJ-UsE"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="Hta-fp-KL0" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="1494" y="-994"/>
-        </scene>
-        <!--Input IdVC-->
-        <scene sceneID="oY3-eI-R9t">
-            <objects>
-                <viewController storyboardIdentifier="InputIdVC" id="4jY-UV-kV3" customClass="InputIdVC" customModule="fit_a_pet_client" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="uWQ-Kg-heB">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <viewLayoutGuide key="safeArea" id="eho-JZ-H1A"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="SZp-32-3xo" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="2207" y="-994"/>
-        </scene>
-        <!--Input PwVC-->
-        <scene sceneID="MOI-TS-usS">
-            <objects>
-                <viewController storyboardIdentifier="InputPwVC" id="HYG-Dg-aQV" customClass="InputPwVC" customModule="fit_a_pet_client" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="7IR-zV-bZJ">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <viewLayoutGuide key="safeArea" id="rjT-RR-aGX"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="s3b-eo-wxz" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="2929" y="-994"/>
-        </scene>
-        <!--Input NickVC-->
-        <scene sceneID="Eqa-2t-wup">
-            <objects>
-                <viewController storyboardIdentifier="InputNickVC" id="sXp-2D-Fdm" customClass="InputNickVC" customModule="fit_a_pet_client" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="PeP-cM-6sJ">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <viewLayoutGuide key="safeArea" id="5L0-YD-iCs"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="52f-bC-y2I" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="3647" y="-994"/>
-        </scene>
     </scenes>
     <resources>
         <systemColor name="systemBackgroundColor">

fit-a-pet-client/fit-a-pet-client/Model/PetModel.swift

@@ -1,8 +1,18 @@
-//
-//  PetModel.swift
-//  fit-a-pet-client
-//
-//  Created by 최희진 on 2023/10/14.
-//
 
-import Foundation
+
+struct PetModel{
+    let id: Int
+    let pet_name: String
+    let gender: String
+    //let birth: Date
+    let age: Int
+    let species: String
+}
+
+class PetDataStorage {
+    static var petList: [PetModel] = []
+
+    static func addPer(pet: PetModel) {
+        petList.append(pet)
+    }
+}

fit-a-pet-client/fit-a-pet-client/Model/UserModel.swift

@@ -10,12 +10,6 @@ struct UserModel{
     let profile_img: UIImage
 }
 
-//extension UserModel{
-//    static let list: [UserModel] = [
-//        UserModel(id: 1, uid: "heejin", pw: "heejin123", phone: 01012341234, email: "[email protected]", profile_img: UIImage(systemName: "person")!)
-//    ]
-//}
-
 class CentralDataStorage {
     static var userList: [UserModel] = []
 

fit-a-pet-client/fit-a-pet-client/Utils/KeyChainHelper.swift

@@ -10,7 +10,7 @@ class KeychainHelper {
         ]
 
         let status = SecItemAdd(keychainQuery as CFDictionary, nil)
-        if status == errSecDuplicateItem {
+        if status == errSecDuplicateItem {//값이 존재한다면 새로운 값으로 업데이트
             SecItemUpdate(keychainQuery as CFDictionary, [kSecValueData: accessToken.data(using: .utf8)!] as CFDictionary)
         } else if status != noErr {
             print("Failed to save AccessToken to Keychain")

fit-a-pet-client/fit-a-pet-client/View/CheckCareCollectionViewCell.swift

@@ -0,0 +1,41 @@
+
+import UIKit
+
+class CheckCareCollectionViewCell: UICollectionViewCell {
+
+    let careName = UILabel()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        contentView.addSubview(careName)
+        careName.font = UIFont.systemFont(ofSize: 14.0)
+        careName.adjustsFontSizeToFitWidth = true // 텍스트 크기를 셀에 맞게 조절
+        careName.textAlignment = .center // 가운데 정렬
+
+        careName.snp.makeConstraints { make in
+            make.edges.equalTo(contentView).inset(UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)) // 여백 없이 가득 채우도록 설정
+        }
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func configure(_ name: String) {
+        careName.text = name
+    }
+
+    override var isSelected: Bool {
+        didSet {
+            if isSelected {
+                contentView.backgroundColor = UIColor(named: "Secondary")
+
+                careName.textColor = UIColor(named: "PrimaryColor")
+            } else {
+                contentView.backgroundColor = UIColor.clear
+                careName.textColor = UIColor.black
+            }
+        }
+    }
+}

fit-a-pet-client/fit-a-pet-client/ViewControllers/RegistPet/CheckCareVC.swift

@@ -3,23 +3,34 @@ import UIKit
 import SnapKit
 import Alamofire
 
-//TODO: CollectionView 추가
 class CheckCareVC : UIViewController {
 
-    let nextBirthBtn = CustomNextBtn(title: "반려동물 등록하기")
+    let registCompleteBtn = CustomNextBtn(title: "반려동물 등록하기")
     let progressBar = CustomProgressBar.shared
     let customLabel = ConstomLabel()
 
+    let checkCareCollectionView: UICollectionView = {
+        let layout = UICollectionViewFlowLayout()
+        layout.minimumLineSpacing = 20
+        layout.scrollDirection = .vertical
+        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+
+        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
+        cv.register(CheckCareCollectionViewCell.self, forCellWithReuseIdentifier: "CheckCareCollectionViewCell") // Cell 등록
+        return cv
+    }()
+
+    let careList = ["밥", "목욕", "산책", "간식","약복용"]
+
     override func viewDidLoad() {
         super.viewDidLoad()
 
         initView()
+        collectionViewInit()
 
-        //nextBirthBtn.addTarget(self, action: #selector(changeInputPetBirthVC(_:)), for: .touchUpInside)
     }
     private func initView(){
 
-        //titleView 만들기
         let titleLabel = UILabel()
         titleLabel.text = "반려동물 등록하기"
         titleLabel.textColor = .black
@@ -31,7 +42,7 @@ class CheckCareVC : UIViewController {
 
         self.navigationItem.titleView = titleView
 
-        self.view.addSubview(nextBirthBtn)
+        self.view.addSubview(registCompleteBtn)
         self.view.addSubview(customLabel)
 
         view.backgroundColor = .white
@@ -57,13 +68,29 @@ class CheckCareVC : UIViewController {
             make.left.equalTo(view.snp.left).offset(16)
         }
 
-        nextBirthBtn.snp.makeConstraints{make in
+        registCompleteBtn.snp.makeConstraints{make in
             make.bottom.equalTo(view.snp.bottom).offset(-65)
             make.left.equalTo(view.snp.left).offset(16)
             make.right.equalTo(view.snp.right).offset(-16)
         }
 
     }
+
+    private func collectionViewInit(){
+        checkCareCollectionView.allowsMultipleSelection = true//여러개 선택 가능
+
+        checkCareCollectionView.delegate = self
+        checkCareCollectionView.dataSource = self
+
+        self.view.addSubview(checkCareCollectionView)
+
+        checkCareCollectionView.snp.makeConstraints{make in
+            make.top.equalTo(customLabel.snp.bottom).offset(30)
+            make.left.equalTo(view.snp.left).offset(16)
+            make.right.equalTo(view.snp.right).offset(-16)
+            make.bottom.equalTo(registCompleteBtn.snp.top).offset(-10)
+        }
+    }
 
 
     private func progressBarInit(){
@@ -88,12 +115,51 @@ class CheckCareVC : UIViewController {
         }
     }
 
-//    @objc func changeInputPetBirthVC(_ sender: UIButton){
-//        let nextVC = InputPetBirthVC()
-//        self.navigationController?.pushViewController(nextVC, animated: false)
-//    }
+
+}
+
+extension CheckCareVC: UICollectionViewDataSource{
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return careList.count
+    }
 
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CheckCareCollectionViewCell", for: indexPath) as! CheckCareCollectionViewCell
+        let data = careList[indexPath.item]
+        cell.configure(data)
+
+        cell.layer.borderWidth = 1
+        cell.layer.borderColor = UIColor(named: "Gray2")?.cgColor
+        cell.layer.cornerRadius = 5
+
+        return cell
+    }
+}
+
+extension CheckCareVC: UICollectionViewDelegate {
+    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+        let cell = collectionView.cellForItem(at: indexPath) as? CheckCareCollectionViewCell
+        cell?.isSelected = true
+        cell!.layer.borderColor = UIColor(named: "PrimaryColor")?.cgColor
+    }
+
+    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
+        let cell = collectionView.cellForItem(at: indexPath) as? CheckCareCollectionViewCell
+        cell?.isSelected = false
+        cell!.layer.borderColor = UIColor(named: "Gray2")?.cgColor
+    }
 }
 
+extension CheckCareVC: UICollectionViewDelegateFlowLayout {
+
+    //텍스트의 크기에 따라 셀의 크기 지정
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+        return CGSize(width: 165, height: 55) // 원하는 높이로 설정
+    }
+}
+
+
+