IOS(Swift) (5) 썸네일형 리스트형 [IOS/Swift] MBTI 카드 선택 게임 UI 구현 swift ui를 이용해 어플리케이션 설계를 진행 해봅시다. 기획된 구성은 다음과 같습니다. 문서량 또는 언급량을 비교할 두 개의 항목을 각각 카드로 보여줍니다. 항상 아래에 있는 카드(파랑)가 위에 있는 카드(빨강) 보다 언급량이 더 많은지 낮은지를 선택합니다. 정답을 맞추면 다음 카드로 이동, 잘못 선택하면 게임이 끝납니다. 데이터 구성 게임을 구성하는 데이터(API 전달 결과)를 설계해봅시다. struct StageList: Codable { var data: Array var answer: Array } API에서 응답받은 결과를 처리하는 Struct는 다음과 같습니다. 실제 데이터는 다음과 같습니다. { "data": ["짜장면", "짬뽕", "탕수육", "유린기", "꿔바로우"], "answe.. [IOS/Swift] 콘텐츠 검색 앱 구현 - 4. 로그인 UI 구현 Swift UI - 4. 로그인 UI 화면 구현 이전에 구현한 회원가입으로 회원이 등록되었다(DRF로 회원가입 API를 구현) 이제 등록된 회원으로 로그인을 진행하고 키체인을 이용해서 Access Token 및 Refresh Token을 저장하여 앱 사용 중 로그인 상태를 유지할 수 있도록 해보자. // // LoginView.swift // mbtiPlayground // // Created by 박종후 on 2022/03/16. // import SwiftUI struct LoginView: View { @State private var email: String = "" @State private var password: String = "" @State private var loginStatus: .. [IOS/Swift] 콘텐츠 검색 앱 구현 - 3. 회원가입 UI 구현 Swift UI 를 사용한 회원가입 및 로그인 화면 구현 - 백엔드는 Django RestFramework 사용 구현 예시 - 회원가입 회원 가입은 4개 항목 (닉네임, 이메일, 비밀번호(+비밀번호 확인), MBTI 항목)을 입력받는 화면을 만든다. 여기서 MBTI 항목은 HTML에서 말하는 셀렉트 박스 UI를 사용하여 MBTI를 선택하도록 하였다. // // SignUpView.swift // mbtiPlayground // // Created by 박종후 on 2022/03/16. // import SwiftUI struct SignUpView: View { @Environment(\\.presentationMode) var presentationMode: Binding @State private v.. [IOS/Swift] 콘텐츠 검색 앱 구현 - 2. 채팅방 UI 구현 전편에 이어서 채팅방 UI를 구현해보겠다. 채팅방은 클럽하우스 앱의 UI를 참고하여 만들었다. 결과물 화면 결과물 예시 채팅방 상세 화면 구현 채팅방에는 각 유저별 프로필 사진이 들어가야 한다. 그렇기 때문에 프로필 화면도 구현해보자 프로필 화면 구현 프로필 화면의 프로필 사진은 추후 Amazon S3 를 활용해 관리할 예정이다. (REST API로 관련 URL 을 받을 예정). 그래서 이미지 URL 로 프로필 사진을 보여줄 수 있는 UI 가 별도로 필요하다. Swift 에서는 AsyncImage를 사용해서 이미지의 url로(html 에서 image 태그를 사용하는 것과 유사) 사진을 보여줄 수 있다. 아래 코드를 구현하면 다음과 같다. import SwiftUI struct ProfileItem: Vi.. [IOS/Swift] 콘텐츠 검색 앱 구현 - 1. 콘텐츠 UI 구현 현재 사내에서 키워드를 검색하여 관련 콘텐츠를 보여주는 앱을 구현하고 있다. 기술 기획 - 앱에 들어갈 기술 목록 검색 및 검색 결과 확인 검색 키워드 관련 콘텐츠(텍스트 콘텐츠 또는 채팅방) 텍스트 콘텐츠 음성 채팅방 로그인 첫번째로 텍스트 콘텐츠와 관련 UI를 구현해보자. 텍스트 콘텐츠 UI 구현 텍스트 콘텐츠 상세화면 구현 텍스트 콘텐츠 상세화면에 들어갈 요소는 제목, 출처, 작성일, MBTI 타입, 그리고 콘텐츠 내용이다. 이를 스위프트 UI로 구현하면 다음과 같다. import SwiftUI struct ContentDetail: View { var contItem: ContentDetailData var body: some View { VStack(alignment: .leading){ Gro.. 이전 1 다음
