Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: board 게시글 추가 #2

Merged
merged 2 commits into from
Aug 6, 2024
Merged

feat: board 게시글 추가 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff43b3b
feat: board 게시글 추가
MOJAN3543 Aug 5, 2024
1bfc524
Docs: 리드미 수정
MOJAN3543 Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 39 additions & 110 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,39 @@
# Turborepo starter

This is an official starter turborepo.

## Using this example

Run the following command:

```sh
npx create-turbo@latest -e with-prisma
```

## What's inside?

This turborepo includes the following packages/apps:

### Apps and Packages

- `web`: a [Next.js](https://nextjs.org/) app
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `@repo/database`: [Prisma](https://prisma.io/) ORM wrapper to manage & access your database
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo

Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

### Utilities

This turborepo has some additional tools already setup for you:

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- [Prisma](https://prisma.io/) for database ORM
- [Docker Compose](https://docs.docker.com/compose/) for local database

### Database

We use [Prisma](https://prisma.io/) to manage & access our database. As such you will need a database for this project, either locally or hosted in the cloud.

To make this process easier, we offer a [`docker-compose.yml`](https://docs.docker.com/compose/) file to deploy a MySQL server locally with a new database named `turborepo` (To change this update the `MYSQL_DATABASE` environment variable in the `docker-compose.yml` file):

```bash
cd my-turborepo
docker-compose up -d
```

Once deployed you will need to copy the `.env.example` file to `.env` in order for Prisma to have a `DATABASE_URL` environment variable to access.

```bash
cp .env.example .env
```

If you added a custom database name, or use a cloud based database, you will need to update the `DATABASE_URL` in your `.env` accordingly.

Once deployed & up & running, you will need to create & deploy migrations to your database to add the necessary tables. This can be done using [Prisma Migrate](https://www.prisma.io/migrate):

```bash
npx prisma migrate dev
```

If you need to push any existing migrations to the database, you can use either the Prisma db push or the Prisma migrate deploy command(s):

```bash
yarn run db:push

# OR

yarn run db:migrate:deploy
```

There is slight difference between the two commands & [Prisma offers a breakdown on which command is best to use](https://www.prisma.io/docs/concepts/components/prisma-migrate/db-push#choosing-db-push-or-prisma-migrate).

An optional additional step is to seed some initial or fake data to your database using [Prisma's seeding functionality](https://www.prisma.io/docs/guides/database/seed-database).

To do this update check the seed script located in `packages/database/src/seed.ts` & add or update any users you wish to seed to the database.

Once edited run the following command to run tell Prisma to run the seed script defined in the Prisma configuration:

```bash
yarn run db:seed
```

For further more information on migrations, seeding & more, we recommend reading through the [Prisma Documentation](https://www.prisma.io/docs/).

### Build

To build all apps and packages, run the following command:

```bash
yarn run build
```

### Develop

To develop all apps and packages, run the following command:

```bash
yarn run dev
```

## Useful Links

Learn more about the power of Turborepo:

- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
# ✨ 밀로그: Mealog
모두의 건강한 식사를 위한 **AI 기반 영양 분석 및 식단 추천 서비스** Mealog
## 🦁 Team 경대라이온즈
|<img src="https://avatars.githubusercontent.com/u/54466872?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/98478441?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/56078563?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/71973291?v=4" width="150" height="150"/>|
|:-:|:-:|:-:|:-:|
|황부연<br/>[@ArpaAP](https://github.com/ArpaAP)|박규리<br/>[@parkgyul](https://github.com/parkgyul)|박재민<br/>[@jamie2779](https://github.com/jamie2779)|심준성<br/>[@MOJAN3543](https://github.com/MOJAN3543)|

## 🥰 개발 동기
> 2020년 보건복지부에서는 한국인의 대부분이 나트륨의 섭취가 과도하게 높고 칼슘, 비타민 A와 같은 주요 영양소 섭취가 부족하다고 밝혔습니다. 이러한 문제를 해결하고자 사진을 통해 간편하게 음식의 영양 정보를 추적하고, 기록하여 본인의 식습관을 뒤돌아 보고 좀 더 건강한 식사를 할 수 있도록 하는 서비스인 Mealog를 개발하게 되었습니다.

## 🔍 주요 기능
* 사용자가 업로드한 사진을 AI 모델을 통해 식사에 포함된 영양소를 분석
* 사용자가 하루에 섭취한 영양소를 기록하고 점수화
* 음식 사진을 서비스에 공유 · 다른 사람들의 사진들을 탐색
* 부족한 영양 섭취에 도움을 주는 식품 판매

## 📚 기술 스택
### Front-End
* Next.js
* TypeScript
* TailWind CSS
### Back-End
* Next.js
* TypeScript
### AI API
* YOLO v3
* PyTorch
* Flask
### Other
* Docker
* Turborepo
* Prisma
* Github Action

## 🤔 유저 플로우
![UserFlow_Diagram](https://github.com/user-attachments/assets/1396d6c3-84a5-4070-ad3e-23b11389e0d2)

## 🤖 AI 레포지토리
> [mealog-ai](https://github.com/LikeLion-KNU04/mealog-ai)
143 changes: 143 additions & 0 deletions apps/web/src/app/board/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
"use client"

import Comment from "@/components/Comment";
import MainLayout from "@/components/MainLayout";
import Nutrient from "@/components/Nutrient";
import { IconBookmark, IconChevronLeft, IconChevronRight, IconHeart, IconShare } from "@tabler/icons-react";
import Image from "next/image";
import { useState } from "react";

export default function BoardDetailPage(){
const imageLength = 5;
const [index, setIndex] = useState(0);
const moveIndex = (offset: number) => {
if(0 <= (index + offset) && (index + offset) < imageLength)
setIndex(index + offset);
else if(0 > (index + offset))
setIndex(0);
else
setIndex(imageLength-1);
}
return (
<MainLayout>
<div className="flex items-start gap-5 px-32 py-16">
<div className="flex gap-3">
<button
type="button"
onClick={() => {moveIndex(-1)}}
>
<IconChevronLeft/>
</button>
<div className="flex flex-row overflow-hidden" style={{width: 512}}>

<div className="flex"
style={{
transform: `translateX(-${index * 512}px)`,
transition: "ease-in-out 250ms"
}}
>
<Image
src="https://picsum.photos/id/1/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/2/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/3/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/4/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/5/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
</div>

</div>
<button
type="button"
onClick={() => {moveIndex(1)}}
>
<IconChevronRight/>
</button>
</div>
<div className="flex flex-col flex-grow gap-6 p-6 shadow-2xl shadow-black/10">
<div className="flex items-center gap-3">
<Image
className="rounded-full"
alt="profile Image"
src="https://picsum.photos/200/200"
width={32}
height={32}
/>
<div className="text-xl">
username
</div>
<div className="text-base text-gray-500">
1일전
</div>
</div>
<div className="text-base">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
<Nutrient carbs={100} protein={100} fat={100}/>
</div>
<div className="flex flex-row py-5 border rounded-lg justify-evenly ">
<button
type="button"
>
<IconHeart/>
</button>
<button
type="button"
>
<IconBookmark/>
</button>
<button
type="button"
>
<IconShare />
</button>
</div>
<div className="text-xl">
댓글 3개
</div>
<div className="flex flex-col gap-5">
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>

</div>
</div>
</div>
</MainLayout>
)
}
Loading