search

Epilogue-1 / kokkok

3 stars 0 forks source link

feat: 게시글 업로드 임시 구현 #25

Closed wjsdncl closed 3 days ago

wjsdncl commented 4 days ago

📝 PR 설명

게시글 업로드 페이지

지금은 모든 사람이 게시글 업로드 가능하게 되어있습니다. 그리고 관계는 임시로 다 빼뒀습니다. (user, postLike)

이미지 업로드 안하면 버튼 비활성화 해뒀습니다

모달

사용법

const [isModalVisible, setIsModalVisible] = useState(false);

<CustomModal
  visible={isModalVisible}
  onClose={() => setIsModalVisible(false)}
  position="bottom" // "bottom" | "middle"
>
  <View className="items-center">
    <TouchableOpacity className="h-[82px] w-full items-center justify-center border-gray-20 border-b">
      <Text className="title-2 text-gray-90">수정하기</Text>
    </TouchableOpacity>
    <TouchableOpacity className="h-[82px] w-full items-center justify-center">
      <Text className="title-2 text-gray-90">삭제하기</Text>
    </TouchableOpacity>
  </View>
</CustomModal>

📸 스크린샷

Screenshot 2024-11-29 at 22 09 11

FB_IMG_1430747203165

Summary by CodeRabbit

coderabbitai[bot] commented 4 days ago

Walkthrough

이 변경 사항은 TabsLayout 컴포넌트와 Upload 기능을 포함한 여러 파일에서의 수정 사항을 포함합니다. _layout.tsx 파일에서 새로운 "upload" 스크린이 추가되었고, 이 스크린은 사용자 정의 헤더와 특정 탭 바 스타일을 갖추고 있습니다. upload.tsx 파일에서는 이미지 선택 및 업로드 처리 기능이 통합되었으며, Modal 컴포넌트는 이름이 변경되고 새로운 속성이 추가되었습니다. package.json 파일에 새로운 종속성이 추가되었고, Appwrite 백엔드와의 상호작용을 위한 새로운 유틸리티 파일이 생성되었습니다.

Changes

파일 경로 변경 요약
app/(tabs)/_layout.tsx router를 expo-router에서 가져오도록 수정; "upload" 스크린 추가 및 탭 바 스타일 설정.
app/(tabs)/upload.tsx 이미지 선택 및 업로드 상태 관리 기능 추가; handleUpload, pickImage, takePhoto 함수 구현.
components/Modal.tsx BottomModal을 CustomModal로 이름 변경; position 속성 추가 및 스타일 조건부 적용.
components/PostItem.tsx BottomModal을 CustomModal로 변경; import 경로 수정.
constants/icons.ts PlusFilledIcon을 PlusIcon으로 교체; BackIcon, DeleteIcon 추가.
package.json "expo-image-picker" 및 "react-native-appwrite" 종속성 추가.
utils/appwrite.ts Appwrite 백엔드와의 상호작용을 위한 기능 추가; uploadImage, getFilePreview, createPost 함수 구현.

Possibly related PRs

Suggested labels

✋Hold

Suggested reviewers

🐇 변화가 일어났어요, 새로운 스크린이 추가되었죠!
업로드 기능도 생겼고, 이미지 선택이 가능해졌어요.
모달도 새롭게 변신했답니다, 이제 더 멋져요!
함께 즐겨요, 이 변화의 기쁨을! 🎉

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
YehaYoo commented 4 days ago

민재님!! 셀카 👍👍 정말 네모나게 나오셨네요!! 모서리가 있는 건 어떤 기분인지 궁금합니다!! 파이팅!!

YehaYoo commented 3 days ago

저도 업로드 실패에요😭

그리고 저의 경우 앨범을 선택하면 특정 4개의 폴더밖에 보이지 않아요😮 사진은 모든 사진이 최신순으로 접근 가능하구요! 인증샷과 함께 무한도전 짤을 올리고 싶을 때, 관련 폴더에 접근하고 싶은데 다른 폴더 접근은 어떻게 할 수 있을까요??

wjsdncl commented 3 days ago

저도 업로드 실패에요😭

그리고 저의 경우 앨범을 선택하면 특정 4개의 폴더밖에 보이지 않아요😮 사진은 모든 사진이 최신순으로 접근 가능하구요! 인증샷과 함께 무한도전 짤을 올리고 싶을 때, 관련 폴더에 접근하고 싶은데 다른 폴더 접근은 어떻게 할 수 있을까요??

엥 왜그럴까요 앨범 접근이 라이브러리로 하는거여서 한번 찾아보겠습니다

업로드는 왜 그럴까요 확인해보겠습니다

wjsdncl commented 3 days ago

모달도 잘 뜨고 카메라 접근이랑 갤러리 접근 다 잘되는데 업로드 실패했습니다 ㅠㅠ

그리고 업로드 실패하고나니까 콕콕이가 다시는 업로드할 기회를 주지 않습니다. 모달에서 카메라 혹은 갤러리 무엇을 선택해도 작동하지 않아요 ㅠㅠ

그리구 배경이 전부 하얀색이 아니라 이 부분 스타일 수정하면 좋을 것 같습니다

업로드는 화인해보겠습니다 🫡 배경 확인 감사합니다 👍👍

wjsdncl commented 3 days ago

저 나머지는 동작 잘 하는데, 게시물 업로드 실패하고, 폰에는 "업로드 실패" "게시물 업로드에 실패했습니다." 로그에는 [Error: createPost: Invalid document structure: Unknown attribute: "content"] 이렇게 나와요! +) 여전히 저는 모달 색상이 이상하게 나와요 ㅠㅠ

아 에러 로그 감사합니다 이유를 찾았어요 저게 content가 비어있으면 저러더라고요 수정했는데 게속 그러네요 다시 수정해보겠습니다 혹시 모달 색은 혹시 어디가 이상한가요?

YehaYoo commented 3 days ago

저 나머지는 동작 잘 하는데, 게시물 업로드 실패하고, 폰에는 "업로드 실패" "게시물 업로드에 실패했습니다." 로그에는 [Error: createPost: Invalid document structure: Unknown attribute: "content"] 이렇게 나와요! +) 여전히 저는 모달 색상이 이상하게 나와요 ㅠㅠ

아 에러 로그 감사합니다 이유를 찾았어요 저게 content가 비어있으면 저러더라고요 수정했는데 게속 그러네요 다시 수정해보겠습니다 혹시 모달 색은 혹시 어디가 이상한가요?

아까 혜원님이 보내주신 사진입니다! 대신 올려드려요!!

저는 모달 색 괜찮습니다

un0211 commented 3 days ago

아 저 사진은 지난번에 모달 만드셨을 때 올렸었어요!! 지금 사진 선택 모달도 저는 비슷하게 색이 없습니다.

wjsdncl commented 3 days ago

아 저 사진은 지난번에 모달 만드셨을 때 올렸었어요!! 지금 사진 선택 모달도 저는 비슷하게 색이 없습니다.

아 그것도 확인해보겠습니다